diff --git a/Laracel Command b/Laracel Command
new file mode 100644
index 000000000..718158d3b
--- /dev/null
+++ b/Laracel Command	
@@ -0,0 +1,8 @@
+php artisan make:controller UserController && mv app/Http/Controllers/UserController.php packages/Webkul/User/src/Ht
+tp/Controllers
+
+php artisan make:migration foo --path=packages/Webkul/User/src/Database/migrations
+
+php artisan db:seed --class=Webkul\\User\\Database\\Seeders\\DatabaseSeeder
+
+php artisan route:cache
\ No newline at end of file
diff --git a/composer.json b/composer.json
index 23989450b..ad4e3695b 100644
--- a/composer.json
+++ b/composer.json
@@ -6,10 +6,12 @@
     "type": "project",
     "require": {
         "php": "^7.1.3",
+        "dimsav/laravel-translatable": "^9.0",
         "fideloper/proxy": "^4.0",
         "laravel/framework": "5.6.*",
         "laravel/tinker": "^1.0",
-        "nwidart/laravel-modules": "^3.2"
+        "nwidart/laravel-modules": "^3.2",
+        "propaganistas/laravel-intl": "^2.0"
     },
     "require-dev": {
         "barryvdh/laravel-debugbar": "^3.1",
@@ -22,7 +24,9 @@
     "replace": {
         "webkul/laravel-user": "self.version",
         "webkul/laravel-admin": "self.version",
-        "webkul/laravel-ui": "self.version"
+        "webkul/laravel-ui": "self.version",
+        "webkul/laravel-core": "self.version",
+        "webkul/laravel-attribute": "self.version"
     },
     "autoload": {
         "classmap": [
@@ -33,7 +37,9 @@
             "App\\": "app/",
             "Webkul\\User\\": "packages/Webkul/User/src",
             "Webkul\\Admin\\": "packages/Webkul/Admin/src",
-            "Webkul\\Ui\\": "packages/Webkul/Ui/src"
+            "Webkul\\Ui\\": "packages/Webkul/Ui/src",
+            "Webkul\\Attribute\\": "packages/Webkul/Attribute/src",
+            "Webkul\\Core\\": "packages/Webkul/Core/src"
         }
     },
     "autoload-dev": {
diff --git a/composer.lock b/composer.lock
index b5ae2735f..72e9bdcda 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,8 +4,107 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "5d86c298bb279ec35bcbbd1dfb204831",
+    "content-hash": "1cfe5a0cb070df958cccb486627d42f2",
     "packages": [
+        {
+            "name": "commerceguys/intl",
+            "version": "v1.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/commerceguys/intl.git",
+                "reference": "22156e447530d6ebd387bfee51ef1ae2c70a5ff0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/commerceguys/intl/zipball/22156e447530d6ebd387bfee51ef1ae2c70a5ff0",
+                "reference": "22156e447530d6ebd387bfee51ef1ae2c70a5ff0",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.5.0"
+            },
+            "require-dev": {
+                "mikey179/vfsstream": "1.*",
+                "phpunit/phpunit": "~4.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "CommerceGuys\\Intl\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Bojan Zivanovic"
+                }
+            ],
+            "description": "Internationalization library powered by CLDR data.",
+            "time": "2018-06-21T14:03:04+00:00"
+        },
+        {
+            "name": "dimsav/laravel-translatable",
+            "version": "v9.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dimsav/laravel-translatable.git",
+                "reference": "a174b327342e882df7df9d971cf36ae678c16088"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dimsav/laravel-translatable/zipball/a174b327342e882df7df9d971cf36ae678c16088",
+                "reference": "a174b327342e882df7df9d971cf36ae678c16088",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/support": "5.6.*",
+                "php": ">=5.4.0"
+            },
+            "require-dev": {
+                "orchestra/testbench": "3.6.*",
+                "phpunit/phpunit": "~7.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Dimsav\\Translatable\\TranslatableServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Dimsav\\Translatable\\": "src/Translatable/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Dimitrios Savvopoulos",
+                    "email": "ds@dimsav.com",
+                    "homepage": "http://dimsav.com"
+                }
+            ],
+            "description": "A Laravel package for multilingual models",
+            "keywords": [
+                "database",
+                "language",
+                "laravel",
+                "translation"
+            ],
+            "time": "2018-02-10T14:10:41+00:00"
+        },
         {
             "name": "dnoegel/php-xdg-base-dir",
             "version": "0.1",
@@ -453,6 +552,71 @@
             ],
             "time": "2015-04-20T18:58:01+00:00"
         },
+        {
+            "name": "jenssegers/date",
+            "version": "v3.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/jenssegers/date.git",
+                "reference": "3f5f94f28bd5108fab011869434209101d4189ae"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/jenssegers/date/zipball/3f5f94f28bd5108fab011869434209101d4189ae",
+                "reference": "3f5f94f28bd5108fab011869434209101d4189ae",
+                "shasum": ""
+            },
+            "require": {
+                "nesbot/carbon": "^1.0",
+                "php": ">=5.6",
+                "symfony/translation": "^2.7|^3.0|^4.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^5.0|^6.0|^7.0",
+                "satooshi/php-coveralls": "^2.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.1-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Jenssegers\\Date\\DateServiceProvider"
+                    ],
+                    "aliases": {
+                        "Date": "Jenssegers\\Date\\Date"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Jenssegers\\Date\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jens Segers",
+                    "homepage": "https://jenssegers.com"
+                }
+            ],
+            "description": "A date library to help you work with dates in different languages",
+            "homepage": "https://github.com/jenssegers/date",
+            "keywords": [
+                "carbon",
+                "date",
+                "datetime",
+                "i18n",
+                "laravel",
+                "time",
+                "translation"
+            ],
+            "time": "2018-05-16T11:53:55+00:00"
+        },
         {
             "name": "laravel/framework",
             "version": "v5.6.24",
@@ -1040,6 +1204,69 @@
             ],
             "time": "2018-06-08T15:26:40+00:00"
         },
+        {
+            "name": "propaganistas/laravel-intl",
+            "version": "2.0.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Propaganistas/Laravel-Intl.git",
+                "reference": "645a34430ae92d287e97a06815d613be1f3002b5"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Propaganistas/Laravel-Intl/zipball/645a34430ae92d287e97a06815d613be1f3002b5",
+                "reference": "645a34430ae92d287e97a06815d613be1f3002b5",
+                "shasum": ""
+            },
+            "require": {
+                "commerceguys/intl": "^1.0.1",
+                "illuminate/support": ">=5.1,<5.7",
+                "jenssegers/date": "^3.2.3",
+                "php": ">=7.0",
+                "punic/punic": "^3.1",
+                "umpirsky/country-list": "^2.0",
+                "umpirsky/locale-list": "^1.0"
+            },
+            "require-dev": {
+                "orchestra/testbench": ">=3.1",
+                "phpunit/phpunit": "^5.0|^6.0|^7.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Propaganistas\\LaravelIntl\\IntlServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Propaganistas\\LaravelIntl\\": "src/"
+                },
+                "files": [
+                    "src/helpers.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Propaganistas",
+                    "email": "Propaganistas@users.noreply.github.com"
+                }
+            ],
+            "description": "Easy to use internationalization functions for Laravel",
+            "keywords": [
+                "i18n",
+                "internationalization",
+                "intl",
+                "l10n",
+                "laravel"
+            ],
+            "time": "2018-07-03T07:55:17+00:00"
+        },
         {
             "name": "psr/container",
             "version": "1.0.0",
@@ -1256,6 +1483,75 @@
             ],
             "time": "2018-06-10T17:57:20+00:00"
         },
+        {
+            "name": "punic/punic",
+            "version": "3.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/punic/punic.git",
+                "reference": "bd49ff54ea6ee8a902a567905664ecc7840037d6"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/punic/punic/zipball/bd49ff54ea6ee8a902a567905664ecc7840037d6",
+                "reference": "bd49ff54ea6ee8a902a567905664ecc7840037d6",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3"
+            },
+            "replace": {
+                "punic/calendar": "*",
+                "punic/common": "*"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "2.2.*",
+                "phpunit/phpunit": "^4"
+            },
+            "bin": [
+                "bin/punic-data"
+            ],
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Punic\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Michele Locati",
+                    "email": "mlocati@gmail.com",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Remo Laubacher",
+                    "email": "remo.laubacher@gmail.com",
+                    "role": "Collaborator, motivator and perfectionist supporter"
+                }
+            ],
+            "description": "PHP-Unicode CLDR",
+            "homepage": "https://github.com/punic/punic",
+            "keywords": [
+                "calendar",
+                "cldr",
+                "date",
+                "date-time",
+                "i18n",
+                "internationalization",
+                "l10n",
+                "localization",
+                "php",
+                "time",
+                "translate",
+                "translations",
+                "unicode"
+            ],
+            "time": "2018-02-09T15:54:34+00:00"
+        },
         {
             "name": "ramsey/uuid",
             "version": "3.7.3",
@@ -2308,6 +2604,83 @@
             "homepage": "https://github.com/tijsverkoyen/CssToInlineStyles",
             "time": "2017-11-27T11:13:29+00:00"
         },
+        {
+            "name": "umpirsky/country-list",
+            "version": "2.0.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/umpirsky/country-list.git",
+                "reference": "ddabf3a8ef2956fc0fbd22da9bec642ab6cfdede"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/umpirsky/country-list/zipball/ddabf3a8ef2956fc0fbd22da9bec642ab6cfdede",
+                "reference": "ddabf3a8ef2956fc0fbd22da9bec642ab6cfdede",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.0"
+            },
+            "require-dev": {
+                "slowprog/composer-copy-file": "^0.2",
+                "symfony/locale": "^2.7|^3.0",
+                "umpirsky/list-generator": "^1.2"
+            },
+            "type": "library",
+            "extra": {
+                "copy-file": {
+                    "vendor/umpirsky/list-generator/Dockerfile": "./",
+                    "vendor/umpirsky/list-generator/docker-compose.yml": "./"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Saša Stamenković",
+                    "email": "umpirsky@gmail.com"
+                }
+            ],
+            "description": "List of all countries with names and ISO 3166-1 codes in all languages and data formats.",
+            "time": "2018-02-27T18:55:19+00:00"
+        },
+        {
+            "name": "umpirsky/locale-list",
+            "version": "1.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/umpirsky/locale-list.git",
+                "reference": "8141f749e16e568a5a9f7e813c50f72efa794c2e"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/umpirsky/locale-list/zipball/8141f749e16e568a5a9f7e813c50f72efa794c2e",
+                "reference": "8141f749e16e568a5a9f7e813c50f72efa794c2e",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.4"
+            },
+            "require-dev": {
+                "symfony/locale": "^2.7|^3.0",
+                "umpirsky/list-generator": "^1.1"
+            },
+            "type": "library",
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Saša Stamenković",
+                    "email": "umpirsky@gmail.com"
+                }
+            ],
+            "description": "List of all locales with names and codes in all languages and all data formats.",
+            "time": "2018-06-01T17:50:07+00:00"
+        },
         {
             "name": "vlucas/phpdotenv",
             "version": "v2.4.0",
diff --git a/config/app.php b/config/app.php
index cc1bea2f7..d778acc5b 100644
--- a/config/app.php
+++ b/config/app.php
@@ -13,7 +13,7 @@ return [
     |
     */
 
-    'name' => env('APP_NAME', 'Laravel'),
+    'name' => env('APP_NAME', 'Bagisto'),
 
     /*
     |--------------------------------------------------------------------------
@@ -151,6 +151,9 @@ return [
          * Package Service Providers...
          */
 
+        Dimsav\Translatable\TranslatableServiceProvider::class,
+        Propaganistas\LaravelIntl\IntlServiceProvider::class,
+
         /*
          * Application Service Providers...
          */
@@ -163,7 +166,9 @@ return [
         
         Webkul\User\Providers\UserServiceProvider::class,
         Webkul\Admin\Providers\AdminServiceProvider::class,
-        Webkul\Ui\Providers\UiServiceProvider::class
+        Webkul\Ui\Providers\UiServiceProvider::class,
+        Webkul\Attribute\Providers\AttributeServiceProvider::class,
+        Webkul\Core\Providers\CoreServiceProvider::class
     ],
 
     /*
diff --git a/packages/Webkul/Admin/composer.json b/packages/Webkul/Admin/composer.json
index ec85e56fd..8e417b84a 100644
--- a/packages/Webkul/Admin/composer.json
+++ b/packages/Webkul/Admin/composer.json
@@ -9,7 +9,8 @@
     ],
     "require": {
         "webkul/laravel-user": "dev-master",
-        "webkul/laravel-ui": "dev-master"
+        "webkul/laravel-ui": "dev-master",
+        "webkul/laravel-core": "dev-master"
     },
     "autoload": {
         "psr-4": {
diff --git a/packages/Webkul/Admin/package.json b/packages/Webkul/Admin/package.json
index 796638709..132be42e2 100644
--- a/packages/Webkul/Admin/package.json
+++ b/packages/Webkul/Admin/package.json
@@ -18,6 +18,6 @@
     "vue": "^2.1.10"
   },
   "dependencies": {
-    "vee-validate": "^2.1.0-beta.3"
+    "vee-validate": "2.0.0-rc.26"
   }
 }
diff --git a/packages/Webkul/Admin/src/Config/auth.php b/packages/Webkul/Admin/src/Config/auth.php
index 8b1c1ee0c..fc49f9cdb 100644
--- a/packages/Webkul/Admin/src/Config/auth.php
+++ b/packages/Webkul/Admin/src/Config/auth.php
@@ -33,5 +33,13 @@ return [
             'driver' => 'eloquent',
             'model' => Webkul\User\Models\Admin::class,
         ]
-    ]
+    ],
+
+    'passwords' => [
+        'admins' => [
+            'provider' => 'admins',
+            'table' => 'admin_password_resets',
+            'expire' => 60,
+        ],
+    ],
 ];
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Http/routes.php b/packages/Webkul/Admin/src/Http/routes.php
index faac93e53..2257f1c8e 100644
--- a/packages/Webkul/Admin/src/Http/routes.php
+++ b/packages/Webkul/Admin/src/Http/routes.php
@@ -3,30 +3,70 @@
 Route::group(['middleware' => ['web']], function () {
     
     Route::prefix('admin')->group(function () {
-        Route::get('/login', 'Webkul\User\Http\Controllers\SeesionController@create')->defaults('_config', [
-            'view' => 'admin::sessions.create'
+        // Login Routes
+        Route::get('/login', 'Webkul\User\Http\Controllers\SessionController@create')->defaults('_config', [
+            'view' => 'admin::users.sessions.create'
         ])->name('admin.session.create');
 
-        Route::post('/login', 'Webkul\User\Http\Controllers\SeesionController@store')->defaults('_config', [
-            'redirect' => 'admin/dashboard'
-        ])->name('admin.session.store');
+        Route::post('/login', 'Webkul\User\Http\Controllers\SessionController@store')->defaults('_config', [
+            'redirect' => 'admin.dashboard.index'
+        ])->name('admin.forget-password.store');
 
+
+        // Forget Password Routes
+        Route::get('/forget-password', 'Webkul\User\Http\Controllers\ForgetPasswordController@create')->defaults('_config', [
+            'view' => 'admin::users.forget-password.create'
+        ])->name('admin.forget-password.create');
+
+        Route::post('/forget-password', 'Webkul\User\Http\Controllers\ForgetPasswordController@store')->name('admin.forget-password.store');
+
+
+        // Reset Password Routes
+        Route::get('/reset-password/{token}', 'Webkul\User\Http\Controllers\ResetPasswordController@create')->defaults('_config', [
+            'view' => 'admin::users.reset-password.create'
+        ])->name('admin.reset-password.create');
+
+        Route::post('/reset-password', 'Webkul\User\Http\Controllers\ResetPasswordController@store')->defaults('_config', [
+            'redirect' => 'admin.dashboard.index'
+        ])->name('admin.reset-password.store');
+
+
+        // Admin Routes
         Route::group(['middleware' => ['admin']], function () {
-            Route::get('/logout', 'Webkul\User\Http\Controllers\SeesionController@destroy')->defaults('_config', [
-                'redirect' => 'admin/login'
+            Route::get('/logout', 'Webkul\User\Http\Controllers\SessionController@destroy')->defaults('_config', [
+                'redirect' => 'admin.session.create'
             ])->name('admin.session.destroy');
-            
+
+
+            // Dashboard Route
             Route::get('/dashboard', 'Webkul\Admin\Http\Controllers\DashboardController@index')->name('admin.dashboard.index');
 
+
+            // Catalog Routes
+            Route::prefix('catalog')->group(function () {
+                Route::get('/attributes', 'Webkul\Attribute\Http\Controllers\AttributeController@index')->defaults('_config', [
+                    'view' => 'admin::catalog.attributes.index'
+                ])->name('admin.catalog.attributes.index');
+
+                Route::get('/attributes/create', 'Webkul\Attribute\Http\Controllers\AttributeController@create')->defaults('_config', [
+                    'view' => 'admin::catalog.attributes.create'
+                ])->name('admin.catalog.attributes.create');
+
+                Route::post('/attributes/create', 'Webkul\Attribute\Http\Controllers\AttributeController@store')->defaults('_config', [
+                    'redirect' => 'admin.catalog.attributes.index'
+                ])->name('admin.catalog.attributes.store');
+            });
+
+            // Datagrid Routes
             Route::get('/datagrid', 'Webkul\Admin\Http\Controllers\DataGridController@index')->name('admin.datagrid.index');
             
             // User Routes
             Route::get('/users', 'Webkul\User\Http\Controllers\UserController@index')->defaults('_config', [
-                'view' => 'admin::users.index'
+                'view' => 'admin::users.users.index'
             ])->name('admin.users.index');
 
             Route::get('/users/create', 'Webkul\User\Http\Controllers\UserController@create')->defaults('_config', [
-                'view' => 'admin::users.create'
+                'view' => 'admin::users.users.create'
             ])->name('admin.users.create');
 
             Route::post('/users/create', 'Webkul\User\Http\Controllers\UserController@store')->defaults('_config', [
@@ -34,20 +74,21 @@ Route::group(['middleware' => ['web']], function () {
             ])->name('admin.users.store');
 
             Route::get('/users/edit/{id}', 'Webkul\User\Http\Controllers\UserController@edit')->defaults('_config', [
-                'view' => 'admin::users.edit'
+                'view' => 'admin::users.users.edit'
             ])->name('admin.users.edit');
 
             Route::put('/users/edit/{id}', 'Webkul\User\Http\Controllers\UserController@update')->defaults('_config', [
                 'redirect' => 'admin.users.index'
             ])->name('admin.users.update');
 
+
             // User Role Routes
             Route::get('/roles', 'Webkul\User\Http\Controllers\RoleController@index')->defaults('_config', [
-                'view' => 'admin::roles.index'
+                'view' => 'admin::users.roles.index'
             ])->name('admin.roles.index');
             
             Route::get('/roles/create', 'Webkul\User\Http\Controllers\RoleController@create')->defaults('_config', [
-                'view' => 'admin::roles.create'
+                'view' => 'admin::users.roles.create'
             ])->name('admin.roles.create');
 
             Route::post('/roles/create', 'Webkul\User\Http\Controllers\RoleController@store')->defaults('_config', [
@@ -55,7 +96,7 @@ Route::group(['middleware' => ['web']], function () {
             ])->name('admin.roles.store');
 
             Route::get('/roles/edit/{id}', 'Webkul\User\Http\Controllers\RoleController@edit')->defaults('_config', [
-                'view' => 'admin::roles.edit'
+                'view' => 'admin::users.roles.edit'
             ])->name('admin.roles.edit');
 
             Route::put('/roles/edit/{id}', 'Webkul\User\Http\Controllers\RoleController@update')->defaults('_config', [
@@ -63,6 +104,20 @@ Route::group(['middleware' => ['web']], function () {
             ])->name('admin.roles.update');
 
 
+            // Locale Routes
+            Route::get('/locales', 'Webkul\Core\Http\Controllers\LocaleController@index')->defaults('_config', [
+                'view' => 'admin::locales.index'
+            ])->name('admin.locales.index');
+            
+            Route::get('/locales/create', 'Webkul\Core\Http\Controllers\LocaleController@create')->defaults('_config', [
+                'view' => 'admin::locales.create'
+            ])->name('admin.locales.create');
+
+            Route::post('/locales/create', 'Webkul\Core\Http\Controllers\LocaleController@store')->defaults('_config', [
+                'redirect' => 'admin.locales.index'
+            ])->name('admin.locales.store');
+
+
             // Admin Profile route
             Route::get('/account', 'Webkul\User\Http\Controllers\AccountController@edit')->defaults('_config', [
                 'view' => 'admin::account.edit'
diff --git a/packages/Webkul/Admin/src/Providers/AdminServiceProvider.php b/packages/Webkul/Admin/src/Providers/AdminServiceProvider.php
index 09a3c200c..65dc81f3e 100644
--- a/packages/Webkul/Admin/src/Providers/AdminServiceProvider.php
+++ b/packages/Webkul/Admin/src/Providers/AdminServiceProvider.php
@@ -5,7 +5,7 @@ namespace Webkul\Admin\Providers;
 use Illuminate\Support\ServiceProvider;
 use Illuminate\Support\Facades\Event;
 use Illuminate\Support\Facades\Blade;
-use Webkul\Ui\Menu;
+use Webkul\Admin\Providers\EventServiceProvider;
 
 class AdminServiceProvider extends ServiceProvider
 {
@@ -18,50 +18,19 @@ class AdminServiceProvider extends ServiceProvider
     {
         include __DIR__ . '/../Http/routes.php';
 
+        $this->loadTranslationsFrom(__DIR__ . '/../Resources/lang', 'admin');
+
         $this->publishes([
             __DIR__ . '/../../publishable/assets' => public_path('vendor/webkul/admin/assets'),
         ], 'public');
 
-        $this->loadMigrationsFrom(__DIR__ . '/../Database/migrations');
-
         $this->loadViewsFrom(__DIR__ . '/../Resources/views', 'admin');
 
-        $this->createAdminMenu();
-
         $this->composeView();
 
         Blade::directive('continue', function() { return "<?php continue; ?>"; });
 
-    }
-
-    /**
-     * This method fires an event for menu creation, any package can add their menu item by listening to the admin.menu.build event
-     *
-     * @return void
-     */
-    public function createAdminMenu()
-    {
-        Event::listen('admin.menu.create', function() {
-            return Menu::create(function($menu) {
-                Event::fire('admin.menu.build', $menu);
-            });
-        });
-
-        Event::listen('admin.menu.build', function($menu) {
-            $menu->add('dashboard', 'Dashboard', route('admin.dashboard.index'), 1, 'icon-dashboard');
-
-            $menu->add('configuration', 'Configure', route('admin.account.edit'), 6, 'icon-configuration');
-
-            $menu->add('configuration.account', 'My Account', route('admin.account.edit'), 1, '');
-
-            $menu->add('settings', 'Settings', route('admin.users.index'), 6, 'icon-settings');
-
-            $menu->add('settings.users', 'Users', route('admin.users.index'), 1, '');
-
-            $menu->add('settings.users.users', 'Users', route('admin.users.index'), 1, '');
-
-            $menu->add('settings.users.roles', 'Roles', route('admin.roles.index'), 1, '');
-        });
+        $this->app->register(EventServiceProvider::class);
     }
 
     /**
@@ -91,7 +60,7 @@ class AdminServiceProvider extends ServiceProvider
                         ];
                 }
             }
-            
+
             $view->with('menu', $menu)->with('subMenus', $subMenus)->with('tabs', $tabs);
         });
     }
diff --git a/packages/Webkul/Admin/src/Providers/EventServiceProvider.php b/packages/Webkul/Admin/src/Providers/EventServiceProvider.php
new file mode 100644
index 000000000..df2639d7a
--- /dev/null
+++ b/packages/Webkul/Admin/src/Providers/EventServiceProvider.php
@@ -0,0 +1,97 @@
+<?php
+
+namespace Webkul\Admin\Providers;
+
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Facades\Event;
+use Illuminate\Support\Facades\View;
+use Webkul\Ui\Menu;
+
+class EventServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->createAdminMenu();
+
+        $this->buildACL();
+
+        $this->registerACL();
+    }
+
+    /**
+     * This method fires an event for menu creation, any package can add their menu item by listening to the admin.menu.build event
+     *
+     * @return void
+     */
+    public function createAdminMenu()
+    {
+        Event::listen('admin.menu.create', function() {
+            return Menu::create(function($menu) {
+                Event::fire('admin.menu.build', $menu);
+            });
+        });
+
+        Event::listen('admin.menu.build', function($menu) {
+            $menu->add('dashboard', 'Dashboard', 'admin.dashboard.index', 1, 'dashboard-icon');
+
+            $menu->add('catalog', 'Catalog', 'admin.catalog.attributes.index', 3, 'catalog-icon');
+
+            $menu->add('catalog.attributes', 'Attributes', 'admin.catalog.attributes.index', 3);
+
+            $menu->add('configuration', 'Configure', 'admin.account.edit', 6, 'configuration-icon');
+
+            $menu->add('configuration.account', 'My Account', 'admin.account.edit', 1);
+
+            $menu->add('settings', 'Settings', 'admin.users.index', 6, 'settings-icon');
+
+            $menu->add('settings.users', 'Users', 'admin.users.index', 1, '');
+
+            $menu->add('settings.users.users', 'Users', 'admin.users.index', 1, '');
+
+            $menu->add('settings.users.roles', 'Roles', 'admin.roles.index', 2, '');
+
+            $menu->add('settings.locales', 'Locales', 'admin.locales.index', 2, '');
+        });
+    }
+
+    /**
+     * Build route based ACL
+     *
+     * @return voidbuildACL
+     */
+    public function buildACL()
+    {
+        Event::listen('admin.acl.build', function($acl) {
+            $acl->add('dashboard', 'Dashboard', 'admin.dashboard.index', 1);
+
+            $acl->add('configuration', 'Configure', 'admin.account.edit', 5);
+
+            $acl->add('settings', 'Settings', 'admin.users.index', 6);
+
+            $acl->add('settings.users', 'Users', 'admin.users.index', 1);
+
+            $acl->add('settings.users.users', 'Users', 'admin.users.index', 1);
+
+            $acl->add('settings.users.roles', 'Roles', 'admin.roles.index', 2);
+        });
+    }
+
+    /**
+     * Registers acl to entire application
+     *
+     * @return void
+     */
+    public function registerACL()
+    {
+        $this->app->singleton('acl', function() {
+            return current(Event::fire('admin.acl.create'));
+        });
+
+        View::share('acl', app('acl'));
+    }
+}
diff --git a/packages/Webkul/Admin/src/Resources/assets/images/logo.png b/packages/Webkul/Admin/src/Resources/assets/images/logo.png
new file mode 100644
index 000000000..f3a6baf4d
Binary files /dev/null and b/packages/Webkul/Admin/src/Resources/assets/images/logo.png differ
diff --git a/packages/Webkul/Admin/src/Resources/views/account/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/account/edit.blade.php
index f5bd1e78a..464eab427 100644
--- a/packages/Webkul/Admin/src/Resources/views/account/edit.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/account/edit.blade.php
@@ -28,7 +28,7 @@
                         <div class="accordian-content">
                             <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
                                 <label for="name">{{ __('Name') }}</label>
-                                <input type="text" v-validate="'required'" class="control" id="email" name="name" value="{{ $user->name }}"/>
+                                <input type="text" v-validate="'required'" class="control" id="name" name="name" value="{{ $user->name }}"/>
                                 <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
                             </div>
 
@@ -44,13 +44,13 @@
                         <div class="accordian-content">
                             <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
                                 <label for="password">{{ __('Password') }}</label>
-                                <input type="password" v-validate="'min:6|max:18'" class="control" id="password" name="password"/>
+                                <input type="password" v-validate="'min:6'" class="control" id="password" name="password"/>
                                 <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
                             </div>
 
                             <div class="control-group" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
                                 <label for="password_confirmation">{{ __('Confirm Password') }}</label>
-                                <input type="password" v-validate="'min:6|max:18|confirmed:password'" class="control" id="password_confirmation" name="password_confirmation"/>
+                                <input type="password" v-validate="'min:6|confirmed:password'" class="control" id="password_confirmation" name="password_confirmation"/>
                                 <span class="control-error" v-if="errors.has('password_confirmation')">@{{ errors.first('password_confirmation') }}</span>
                             </div>
                         </div>
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/attributes/create.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/create.blade.php
new file mode 100644
index 000000000..853ddd80b
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/create.blade.php
@@ -0,0 +1,85 @@
+@extends('admin::layouts.content')
+
+@section('content')
+    <div class="content">
+        <form method="POST" action="{{ route('admin.catalog.attributes.store') }}">
+
+            <div class="page-header">
+                <div class="page-title">
+                    <h1>{{ __('Add Attribute') }}</h1>
+                </div>
+
+                <div class="page-action">
+                    <button type="submit" class="btn btn-lg btn-primary">
+                        {{ __('Save Attribute') }}
+                    </button>
+                </div>
+            </div>
+
+            <div class="page-content">
+                <div class="form-container">
+                    @csrf()
+
+                    <accordian :title="'{{ __('General') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group" :class="[errors.has('code') ? 'has-error' : '']">
+                                <label for="code">{{ __('Attribute Code') }}</label>
+                                <input type="text" v-validate="'required'" class="control" id="code" name="code" value="{{ old('code') }}"/>
+                                <span class="control-error" v-if="errors.has('code')">@{{ errors.first('code') }}</span>
+                            </div>
+
+                            <div class="control-group">
+                                <label for="type">{{ __('Attribute Type') }}</label>
+                                <select class="control" id="type" name="type">
+                                    <option value="text">{{ __('Text') }}</option>
+                                    <option value="textarea">{{ __('Textarea') }}</option>
+                                    <option value="integer">{{ __('Integer') }}</option>
+                                    <option value="select">{{ __('Select') }}</option>
+                                    <option value="multiselect">{{ __('Multiselect') }}</option>
+                                    <option value="checkbox">{{ __('Multiselect') }}</option>
+                                    <option value="datetime">{{ __('Datetime') }}</option>
+                                    <option value="date">{{ __('Date') }}</option>
+                                </select>
+                            </div>
+                        </div>
+                    </accordian>
+
+                    <accordian :title="'{{ __('Label') }}'" :active="true">
+                        <div class="accordian-content">
+
+                            <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
+                                <label for="name">{{ __('Admin') }}</label>
+                                <input type="text" v-validate="'required'" class="control" id="name" name="name"/>
+                                <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
+                            </div>
+
+                            @foreach(Webkul\Core\Models\Locale::all() 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]"/>
+                                </div>
+
+                            @endforeach
+
+                        </div>
+                    </accordian>
+
+                    <accordian :title="'{{ __('Options') }}'" :active="true" :class-name="'hide'" :id="'options'">
+                    </accordian>
+
+                    <accordian :title="'{{ __('Validations') }}'" :active="true">
+                    </accordian>
+
+                    <accordian :title="'{{ __('Configuration') }}'" :active="true">
+                    </accordian>
+                </div>
+            </div>
+
+        </form>
+    </div>
+@stop
+
+@section('javascript')
+
+@stop
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/attributes/index.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/index.blade.php
new file mode 100644
index 000000000..d6305062d
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/index.blade.php
@@ -0,0 +1,21 @@
+@extends('admin::layouts.content')
+
+@section('content')
+    <div class="content">
+        <div class="page-header">
+            <div class="page-title">
+                Attributes
+            </div>
+
+            <div class="page-action">
+                <a href="{{ route('admin.catalog.attributes.create') }}" class="btn btn-lg btn-primary">
+                    {{ __('Add Attribute') }}
+                </a>
+            </div>
+        </div>
+
+        <div class="page-content">
+
+        </div>
+    </div>
+@stop
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/layouts/anonymous-master.blade.php b/packages/Webkul/Admin/src/Resources/views/layouts/anonymous-master.blade.php
new file mode 100644
index 000000000..07e0c7e52
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/views/layouts/anonymous-master.blade.php
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="{{ config('app.locale') }}">
+    <head>
+        <title>@yield('page_title')</title>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="csrf-token" content="{{ csrf_token() }}">
+
+        <link rel="stylesheet" href="{{ asset('vendor/webkul/admin/assets/css/admin.css') }}">
+        <link rel="stylesheet" href="{{ asset('vendor/webkul/ui/assets/css/ui.css') }}">
+
+        <style>
+            .container {
+                text-align: center;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                display: table;
+                z-index: 1;
+                background: #F8F9FA;
+            }
+            .center-box {
+                display: table-cell;
+                vertical-align: middle;
+            }
+            .adjacent-center {
+                width: 365px;
+                display: inline-block;
+                text-align: left;
+            }
+
+            .form-container .control-group .control {
+                width: 100%;
+            }
+
+            h1 {
+                font-size: 24px;
+                font-weight: 600;
+                margin-bottom: 30px;
+            }
+
+            .brand-logo {
+                margin-bottom: 30px;
+                text-align: center;
+            }
+
+            .footer {
+                margin-top: 40px;
+                padding: 0 20px;
+            }
+
+            .footer p {
+                font-size: 14px;
+                color: #8E8E8E;
+                text-align: center;
+            }
+
+            .btn.btn-primary {
+                width: 100%;
+            }
+        </style>
+
+        @yield('css')
+    </head>
+    <body>
+        <div id="app" class="container">
+
+            <flash-wrapper ref='flashes'></flash-wrapper>
+
+            <div class="center-box">
+            
+                <div class="adjacent-center">
+
+                    <div class="brand-logo">
+                        <img src="{{ asset('vendor/webkul/admin/assets/images/logo.png') }}" alt="Bagisto"/>
+                    </div>
+
+                    @yield('content')
+
+                    <div class="footer">
+                        <p>
+                            © Copyright 2018 Webkul Software, All rights reserved.
+                        </p>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+        <script type="text/javascript">
+            window.flashMessages = [];
+            @if($success = session('success'))
+                window.flashMessages = [{'type': 'alert-success', 'message': "{{ $success }}" }];
+            @elseif($warning = session('warning'))
+                window.flashMessages = [{'type': 'alert-warning', 'message': "{{ $warning }}" }];
+            @elseif($error = session('error'))
+                window.flashMessages = [{'type': 'alert-error', 'message': "{{ $error }}" }];
+            @endif
+
+            window.serverErrors = [];
+            @if (count($errors))
+                window.serverErrors = @json($errors->getMessages());
+            @endif
+        </script>
+
+        <script type="text/javascript" src="{{ asset('vendor/webkul/admin/assets/js/admin.js') }}"></script>
+        <script type="text/javascript" src="{{ asset('vendor/webkul/ui/assets/js/ui.js') }}"></script>
+
+        @yield('javascript')
+        
+    </body>
+</html>
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/locales/create.blade.php b/packages/Webkul/Admin/src/Resources/views/locales/create.blade.php
new file mode 100644
index 000000000..69c88bc72
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/views/locales/create.blade.php
@@ -0,0 +1,43 @@
+@extends('admin::layouts.content')
+
+@section('content')
+    <div class="content">
+
+        <form method="POST" action="{{ route('admin.locales.store') }}" @submit.prevent="onSubmit">
+            <div class="page-header">
+                <div class="page-title">
+                    <h1>{{ __('Add Locale') }}</h1>
+                </div>
+
+                <div class="page-action">
+                    <button type="submit" class="btn btn-lg btn-primary">
+                        {{ __('Save Locale') }}
+                    </button>
+                </div>
+            </div>
+
+            <div class="page-content">
+                <div class="form-container">
+                    @csrf()
+
+                    <accordian :title="'{{ __('General') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group" :class="[errors.has('code') ? 'has-error' : '']">
+                                <label for="code">{{ __('Code') }}</label>
+                                <input v-validate="'required'" class="control" id="code" name="code"/>
+                                <span class="control-error" v-if="errors.has('code')">@{{ errors.first('code') }}</span>
+                            </div>
+
+                            <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
+                                <label for="name">{{ __('Name') }}</label>
+                                <input v-validate="'required'" class="control" id="name" name="name"/>
+                                <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
+                            </div>
+                        </div>
+                    </accordian>
+
+                </div>
+            </div>
+        </form>
+    </div>
+@stop
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/locales/index.blade.php b/packages/Webkul/Admin/src/Resources/views/locales/index.blade.php
new file mode 100644
index 000000000..f64f7016b
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/views/locales/index.blade.php
@@ -0,0 +1,21 @@
+@extends('admin::layouts.content')
+
+@section('content')
+    <div class="content">
+        <div class="page-header">
+            <div class="page-title">
+                
+            </div>
+
+            <div class="page-action">
+                <a href="{{ route('admin.locales.create') }}" class="btn btn-lg btn-primary">
+                    {{ __('Add Locale') }}
+                </a>
+            </div>
+        </div>
+
+        <div class="page-content">
+
+        </div>
+    </div>
+@stop
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/sessions/create.blade.php b/packages/Webkul/Admin/src/Resources/views/sessions/create.blade.php
deleted file mode 100644
index 08d9430a6..000000000
--- a/packages/Webkul/Admin/src/Resources/views/sessions/create.blade.php
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ config('app.locale') }}">
-    <head>
-        <title>@yield('page_title')</title>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="csrf-token" content="{{ csrf_token() }}">
-
-        <link rel="stylesheet" href="{{ asset('vendor/webkul/admin/assets/css/admin.css') }}">
-    </head>
-    <body>
-        <div class="container">
-
-            <form method="POST" action="login">
-                @csrf
-
-                <div class="element-block">
-                    <label for="email" class="field-label"></label>
-                    <div class="field-block">
-                        <input type="text" class="field" id="email" name="email"/> 
-                    </div>
-                </div>
-
-                <div class="element-block">
-                    <label for="password" class="field-label"></label>
-                    <div class="field-block">
-                        <input type="password" class="field" id="password" name="password"/> 
-                    </div>
-                </div>
-
-                @if (count($errors))
-                    @foreach ($errors->all() as $error)
-
-                        {{ $error }}
-
-                    @endforeach
-                @endif
-
-                <div class="button-block">
-                    <button type="submit" class="button">Login</button>
-                </div>
-            </form>
-
-        </div>
-    </body>
-</html>
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/users/forget-password/create.blade.php b/packages/Webkul/Admin/src/Resources/views/users/forget-password/create.blade.php
new file mode 100644
index 000000000..0a71424e4
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/views/users/forget-password/create.blade.php
@@ -0,0 +1,55 @@
+@extends('admin::layouts.anonymous-master')
+
+@section('page_title')
+    {{ __('Forget Password') }}
+@stop
+
+@section('css')
+    <style>
+        .button-group {
+            margin-bottom: 25px;
+        }
+        .primary-back-icon {
+            vertical-align: middle;
+        }
+    </style>
+@stop
+
+@section('content')
+
+    <div class="panel">
+
+        <div class="panel-content">
+
+            <div class="form-container" style="text-align: left">
+
+                <h1>{{ __('Recover Password') }}</h1>
+
+                <form method="POST" action="{{ route('admin.forget-password.store') }}" @submit.prevent="onSubmit">
+                    @csrf
+
+                    <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                        <label for="email">{{ __('Registered Email') }}</label>
+                        <input type="text" v-validate="'required'" class="control" id="email" name="email" value="{{ old('email') }}"/>
+                        <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
+                    </div>
+                    
+                    <div class="button-group">
+                        <button class="btn btn-xl btn-primary">{{ __('Email Password Reset Link') }}</button>
+                    </div>
+
+                    <div class="control-group" style="margin-bottom: 0">
+                        <a href="{{ route('admin.session.create') }}">
+                            <i class="icon primary-back-icon"></i>
+                            {{ __('Back to Sign In') }}
+                        </a>
+                    </div>
+                </form>
+
+            </div>
+        
+        </div>
+
+    </div>
+
+@stop
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/users/reset-password/create.blade.php b/packages/Webkul/Admin/src/Resources/views/users/reset-password/create.blade.php
new file mode 100644
index 000000000..2103ff14b
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/views/users/reset-password/create.blade.php
@@ -0,0 +1,69 @@
+@extends('admin::layouts.anonymous-master')
+
+@section('page_title')
+    {{ __('Reset Password') }}
+@stop
+
+@section('css')
+    <style>
+        .button-group {
+            margin-bottom: 25px;
+        }
+        .primary-back-icon {
+            vertical-align: middle;
+        }
+    </style>
+@stop
+
+@section('content')
+
+    <div class="panel">
+
+        <div class="panel-content">
+
+            <div class="form-container" style="text-align: left">
+
+                <h1>{{ __('Reset Password') }}</h1>
+
+                <form method="POST" action="{{ route('admin.reset-password.store') }}" @submit.prevent="onSubmit">
+                    @csrf
+
+                    <input type="hidden" name="token" value="{{ $token }}">
+
+                    <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                        <label for="email">{{ __('Email') }}</label>
+                        <input type="text" v-validate="'required|email'" class="control" id="email" name="email" value="{{ old('email') }}"/>
+                        <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
+                    </div>
+
+                    <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
+                        <label for="password">{{ __('Password') }}</label>
+                        <input type="password" v-validate="'required|min:6'" class="control" id="password" name="password"/>
+                        <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
+                    </div>
+
+                    <div class="control-group" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
+                        <label for="password_confirmation">{{ __('Confirm Password') }}</label>
+                        <input type="password" v-validate="'required|min:6|confirmed:password'" class="control" id="password_confirmation" name="password_confirmation" data-vv-as="password"/>
+                        <span class="control-error" v-if="errors.has('password_confirmation')">@{{ errors.first('password_confirmation') }}</span>
+                    </div>
+                    
+                    <div class="button-group">
+                        <button type="submit" class="btn btn-xl btn-primary">{{ __('Reset Password') }}</button>
+                    </div>
+
+                    <div class="control-group" style="margin-bottom: 0">
+                        <a href="{{ route('admin.session.create') }}">
+                            <i class="icon primary-back-icon"></i>
+                            {{ __('Back to Sign In') }}
+                        </a>
+                    </div>
+                </form>
+
+            </div>
+        
+        </div>
+
+    </div>
+
+@stop
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/roles/create.blade.php b/packages/Webkul/Admin/src/Resources/views/users/roles/create.blade.php
similarity index 81%
rename from packages/Webkul/Admin/src/Resources/views/roles/create.blade.php
rename to packages/Webkul/Admin/src/Resources/views/users/roles/create.blade.php
index 209d07070..c0d3d587e 100644
--- a/packages/Webkul/Admin/src/Resources/views/roles/create.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/users/roles/create.blade.php
@@ -2,6 +2,7 @@
 
 @section('content')
     <div class="content">
+
         <form method="POST" action="{{ route('admin.roles.store') }}" @submit.prevent="onSubmit">
             <div class="page-header">
                 <div class="page-title">
@@ -45,12 +46,27 @@
                             </div>
 
                             <div class="control-group">
-                                <tree-view/>
-                            </div>                            
+                                <tree-view value-field="key" id-field="key" items='@json($acl->items)'></tree-view>
+                            </div>
                         </div>
                     </accordian>
                 </div>
             </div>
         </form>
     </div>
+@stop
+
+@section('javascript')
+    <script>
+        $(document).ready(function () {
+            $('#permission_type').on('change', function(e) {
+                if($(e.target).val() == 'custom') {
+                    $('.tree-container').removeClass('hide')
+                } else {
+                    $('.tree-container').addClass('hide')
+                }
+                
+            })
+        });
+    </script>
 @stop
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/users/roles/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/users/roles/edit.blade.php
new file mode 100644
index 000000000..08b79c1c5
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/views/users/roles/edit.blade.php
@@ -0,0 +1,74 @@
+@extends('admin::layouts.content')
+
+@section('content')
+    <div class="content">
+
+        <form method="POST" action="{{ route('admin.roles.update', $role->id) }}" @submit.prevent="onSubmit">
+            <div class="page-header">
+                <div class="page-title">
+                    <h1>{{ __('Edit Role') }}</h1>
+                </div>
+
+                <div class="page-action">
+                    <button type="submit" class="btn btn-lg btn-primary">
+                        {{ __('Save Role') }}
+                    </button>
+                </div>
+            </div>
+
+            <div class="page-content">
+                <div class="form-container">
+                    @csrf()
+
+                    <input name="_method" type="hidden" value="PUT">
+
+                    <accordian :title="'{{ __('General') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
+                                <label for="name">{{ __('Name') }}</label>
+                                <input type="text" v-validate="'required'" class="control" id="email" name="name" value="{{ $role->name }}"/>
+                                <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
+                            </div>
+
+                            <div class="control-group">
+                                <label for="description">{{ __('Description') }}</label>
+                                <textarea class="control" id="description" name="description">{{ $role->description }}</textarea>
+                            </div>
+                        </div>
+                    </accordian>
+
+                    <accordian :title="'{{ __('Access Control') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group">
+                                <label for="permission_type">{{ __('Permissions') }}</label>
+                                <select class="control" name="permission_type" id="permission_type">
+                                    <option value="custom" {{ $role->permission_type == 'custom' ? 'selected' : '' }}>{{ __('Custom') }}</option>
+                                    <option value="all" {{ $role->permission_type == 'all' ? 'selected' : '' }}>{{ __('All') }}</option>
+                                </select>
+                            </div>
+                            
+                            <div class="control-group tree-wrapper {{ $role->permission_type == 'all' ? 'hide' : '' }}">
+                                <tree-view value-field="key" id-field="key" items='@json($acl->items)' value='@json($role->permissions)'></tree-view>
+                            </div>
+                        </div>
+                    </accordian>
+                </div>
+            </div>
+        </form>
+    </div>
+@stop
+
+@section('javascript')
+    <script>
+        $(document).ready(function () {
+            $('#permission_type').on('change', function(e) {
+                if($(e.target).val() == 'custom') {
+                    $('.tree-wrapper').removeClass('hide')
+                } else {
+                    $('.tree-wrapper').addClass('hide')
+                }
+                
+            })
+        });
+    </script>
+@stop
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/roles/index.blade.php b/packages/Webkul/Admin/src/Resources/views/users/roles/index.blade.php
similarity index 100%
rename from packages/Webkul/Admin/src/Resources/views/roles/index.blade.php
rename to packages/Webkul/Admin/src/Resources/views/users/roles/index.blade.php
diff --git a/packages/Webkul/Admin/src/Resources/views/users/sessions/create.blade.php b/packages/Webkul/Admin/src/Resources/views/users/sessions/create.blade.php
new file mode 100644
index 000000000..ba227c8a9
--- /dev/null
+++ b/packages/Webkul/Admin/src/Resources/views/users/sessions/create.blade.php
@@ -0,0 +1,55 @@
+@extends('admin::layouts.anonymous-master')
+
+@section('page_title')
+    {{ __('Sign In') }}
+@stop
+
+@section('content')
+
+    <div class="panel">
+
+        <div class="panel-content">
+
+            <div class="form-container" style="text-align: left">
+
+                <h1>{{ __('Sign In') }}</h1>
+
+                <form method="POST" action="login" @submit.prevent="onSubmit">
+                    @csrf
+
+                    <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                        <label for="email">{{ __('Email') }}</label>
+                        <input type="text" v-validate="'required'" class="control" id="email" name="email"/>
+                        <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
+                    </div>
+
+                    <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
+                        <label for="password">{{ __('Password') }}</label>
+                        <input type="password" v-validate="'required|min:6'" class="control" id="password" name="password"/>
+                        <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
+                    </div>
+
+                    <div class="control-group">
+                        <a href="{{ route('admin.forget-password.create') }}">{{ __('Forget Password ?') }}</a>
+                    </div>
+
+                    <div class="control-group">
+                        <span class="checkbox">
+                            <input type="checkbox" id="remember" name="remember" value="1">
+                            <label class="checkbox-view" for="remember"></label>
+                            {{ __('Remember me') }}
+                        </span>
+                    </div>
+                    
+                    <div class="button-group">
+                        <button class="btn btn-xl btn-primary">{{ __('Sign In') }}</button>
+                    </div>
+                </form>
+
+            </div>
+        
+        </div>
+
+    </div>
+
+@stop
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/users/create.blade.php b/packages/Webkul/Admin/src/Resources/views/users/users/create.blade.php
similarity index 100%
rename from packages/Webkul/Admin/src/Resources/views/users/create.blade.php
rename to packages/Webkul/Admin/src/Resources/views/users/users/create.blade.php
diff --git a/packages/Webkul/Admin/src/Resources/views/users/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/users/users/edit.blade.php
similarity index 100%
rename from packages/Webkul/Admin/src/Resources/views/users/edit.blade.php
rename to packages/Webkul/Admin/src/Resources/views/users/users/edit.blade.php
diff --git a/packages/Webkul/Admin/src/Resources/views/users/index.blade.php b/packages/Webkul/Admin/src/Resources/views/users/users/index.blade.php
similarity index 100%
rename from packages/Webkul/Admin/src/Resources/views/users/index.blade.php
rename to packages/Webkul/Admin/src/Resources/views/users/users/index.blade.php
diff --git a/packages/Webkul/Admin/webpack.mix.js b/packages/Webkul/Admin/webpack.mix.js
index ffc6854cc..63e2ab943 100644
--- a/packages/Webkul/Admin/webpack.mix.js
+++ b/packages/Webkul/Admin/webpack.mix.js
@@ -5,6 +5,7 @@ require('laravel-mix-merge-manifest');
 var publicPath = '../../../public/vendor/webkul/admin/assets';
 
 mix.setPublicPath(publicPath).mergeManifest();
+mix.disableNotifications();
 
 mix.js(__dirname + '/src/Resources/assets/js/app.js', 'js/admin.js')
     .copyDirectory( __dirname + '/src/Resources/assets/images', publicPath + '/images')
diff --git a/packages/Webkul/Attribute/.gitignore b/packages/Webkul/Attribute/.gitignore
new file mode 100644
index 000000000..30bc16279
--- /dev/null
+++ b/packages/Webkul/Attribute/.gitignore
@@ -0,0 +1 @@
+/node_modules
\ No newline at end of file
diff --git a/packages/Webkul/Attribute/composer.json b/packages/Webkul/Attribute/composer.json
new file mode 100644
index 000000000..8b6257ada
--- /dev/null
+++ b/packages/Webkul/Attribute/composer.json
@@ -0,0 +1,27 @@
+{
+    "name": "webkul/laravel-attribute",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Jitendra Singh",
+            "email": "jitendra@webkul.com"
+        }
+    ],
+    "require": {
+        "nwidart/laravel-modules": "^3.2"
+    },
+    "autoload": {
+        "psr-4": {
+            "Webkul\\Attribute\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Webkul\\Attribute\\Providers\\AttributeServiceProvider"
+            ],
+            "aliases": { }
+        }
+    },
+    "minimum-stability": "dev"
+}
diff --git a/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_130148_create_attributes_table.php b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_130148_create_attributes_table.php
new file mode 100644
index 000000000..06744de37
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_130148_create_attributes_table.php
@@ -0,0 +1,43 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateAttributesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('attributes', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('code')->unique();
+            $table->string('name');
+            $table->string('type');
+            $table->string('validation')->nullable();
+            $table->integer('position')->nullable();
+            $table->boolean('is_required');
+            $table->boolean('is_unique');
+            $table->boolean('value_per_locale');
+            $table->boolean('value_per_channel');
+            $table->boolean('is_filterable');
+            $table->boolean('is_configurable');
+            $table->boolean('is_user_defined')->default(1);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('attributes');
+    }
+}
diff --git a/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_132854_create_attribute_translations_table.php b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_132854_create_attribute_translations_table.php
new file mode 100644
index 000000000..5c1607871
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_132854_create_attribute_translations_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateAttributeTranslationsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('attribute_translations', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('locale');
+            $table->text('name')->nullable();
+            $table->integer('attribute_id')->unsigned();
+            $table->unique(['attribute_id', 'locale']);
+            $table->foreign('attribute_id')->references('id')->on('attributes')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('attribute_translations');
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_135152_create_attribute_groups_table.php b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_135152_create_attribute_groups_table.php
new file mode 100644
index 000000000..d657883d2
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_135152_create_attribute_groups_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateAttributeGroupsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('attribute_groups', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('name');
+            $table->timestamps();
+            $table->integer('sort_order');
+            $table->integer('attribute_family_id')->unsigned();
+            $table->unique(['attribute_family_id', 'name']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('attribute_groups');
+    }
+}
diff --git a/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_135200_create_attribute_families_table.php b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_135200_create_attribute_families_table.php
new file mode 100644
index 000000000..13c0e6c25
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_135200_create_attribute_families_table.php
@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateAttributeFamiliesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('attribute_families', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('name');
+            $table->boolean('status')->default(0);
+        });
+
+        Schema::table('attribute_groups', function($table) {
+            $table->foreign('attribute_family_id')->references('id')->on('attribute_families')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('attribute_families');
+    }
+}
diff --git a/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_140832_create_attribute_options_table.php b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_140832_create_attribute_options_table.php
new file mode 100644
index 000000000..19e579faf
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_140832_create_attribute_options_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateAttributeOptionsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('attribute_options', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('code');
+            $table->integer('sort_order');
+            $table->integer('attribute_id')->unsigned();
+            $table->unique(['attribute_id', 'code']);
+            $table->foreign('attribute_id')->references('id')->on('attributes')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('attribute_options');
+    }
+}
diff --git a/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_140856_create_attribute_option_translations_table.php b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_140856_create_attribute_option_translations_table.php
new file mode 100644
index 000000000..94944a3ab
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Database/Migrations/2018_07_05_140856_create_attribute_option_translations_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateAttributeOptionTranslationsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('attribute_option_translations', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('locale');
+            $table->text('label')->nullable();
+            $table->integer('attribute_option_id')->unsigned();
+            $table->unique(['attribute_option_id', 'locale']);
+            $table->foreign('attribute_option_id')->references('id')->on('attribute_options')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('attribute_option_translations');
+    }
+}
diff --git a/packages/Webkul/Attribute/src/Http/Controllers/AttributeController.php b/packages/Webkul/Attribute/src/Http/Controllers/AttributeController.php
new file mode 100644
index 000000000..59fa8e87d
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Http/Controllers/AttributeController.php
@@ -0,0 +1,119 @@
+<?php
+
+namespace Webkul\Attribute\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Webkul\Attribute\Models\Attribute;
+/**
+ * Catalog attribute controller
+ *
+ * @author    Jitendra Singh <jitendra@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+class AttributeController extends Controller
+{
+    /**
+     * Contains route related configuration
+     *
+     * @var array
+     */
+    protected $_config;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->_config = request('_config');
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        return view($this->_config['view']);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        return view($this->_config['view'], compact('roleItems'));
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function store()
+    {
+        $this->validate(request(), [
+            'code' => ['required', 'unique:attributes,code', new \Webkul\Core\Contracts\Validations\Slug],
+            'name' => 'required',
+            'type' => 'required'
+        ]);
+
+        Attribute::create(request()->all());
+
+        session()->flash('success', 'Attribute created successfully.');
+
+        return redirect()->route($this->_config['redirect']);
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function edit($id)
+    {
+        $role = Role::findOrFail($id);
+
+        return view($this->_config['view'], compact('role'));
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request $request
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, $id)
+    {
+        $this->validate(request(), [
+            'name' => 'required',
+            'permission_type' => 'required',
+        ]);
+        
+        $role = Role::findOrFail($id);
+
+        $role->update(request()->all());
+
+        session()->flash('success', 'Role updated successfully.');
+
+        return redirect()->route($this->_config['redirect']);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Attribute/src/Http/Controllers/Controller.php b/packages/Webkul/Attribute/src/Http/Controllers/Controller.php
new file mode 100644
index 000000000..0d3d3595f
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Http/Controllers/Controller.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Webkul\Attribute\Http\Controllers;
+
+use Illuminate\Foundation\Bus\DispatchesJobs;
+use Illuminate\Routing\Controller as BaseController;
+use Illuminate\Foundation\Validation\ValidatesRequests;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+
+class Controller extends BaseController
+{
+    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
+}
diff --git a/packages/Webkul/Attribute/src/Models/Attribute.php b/packages/Webkul/Attribute/src/Models/Attribute.php
new file mode 100644
index 000000000..28fb33ab0
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Models/Attribute.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Webkul\Attribute\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Dimsav\Translatable\Translatable;
+
+class Attribute extends Model
+{
+    use Translatable;
+    
+    public $translatedAttributes = ['name'];
+}
\ No newline at end of file
diff --git a/packages/Webkul/Attribute/src/Models/AttributeFamily.php b/packages/Webkul/Attribute/src/Models/AttributeFamily.php
new file mode 100644
index 000000000..3319ab5c5
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Models/AttributeFamily.php
@@ -0,0 +1,9 @@
+<?php
+
+namespace Webkul\Attribute\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class AttributeFamily extends Model
+{
+}
\ No newline at end of file
diff --git a/packages/Webkul/Attribute/src/Models/AttributeGroup.php b/packages/Webkul/Attribute/src/Models/AttributeGroup.php
new file mode 100644
index 000000000..2b0749c84
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Models/AttributeGroup.php
@@ -0,0 +1,9 @@
+<?php
+
+namespace Webkul\Attribute\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class AttributeGroup extends Model
+{
+}
\ No newline at end of file
diff --git a/packages/Webkul/Attribute/src/Models/AttributeOption.php b/packages/Webkul/Attribute/src/Models/AttributeOption.php
new file mode 100644
index 000000000..3cd69a3f4
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Models/AttributeOption.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Webkul\Attribute\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Dimsav\Translatable\Translatable;
+
+class AttributeOption extends Model
+{
+    use Translatable;
+    
+    public $translatedAttributes = ['label'];
+}
\ No newline at end of file
diff --git a/packages/Webkul/Attribute/src/Models/AttributeOptionTranslation.php b/packages/Webkul/Attribute/src/Models/AttributeOptionTranslation.php
new file mode 100644
index 000000000..157c843cd
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Models/AttributeOptionTranslation.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace Webkul\Attribute\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class AttributeOptionTranslation extends Model
+{
+    public $timestamps = false;
+
+    protected $fillable = ['label'];
+}
\ No newline at end of file
diff --git a/packages/Webkul/Attribute/src/Models/AttributeTranslation.php b/packages/Webkul/Attribute/src/Models/AttributeTranslation.php
new file mode 100644
index 000000000..e2802cbb5
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Models/AttributeTranslation.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace Webkul\Attribute\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class AttributeTranslation extends Model
+{
+    public $timestamps = false;
+    
+    protected $fillable = ['name'];
+}
\ No newline at end of file
diff --git a/packages/Webkul/Attribute/src/Providers/AttributeServiceProvider.php b/packages/Webkul/Attribute/src/Providers/AttributeServiceProvider.php
new file mode 100644
index 000000000..51a8ea23e
--- /dev/null
+++ b/packages/Webkul/Attribute/src/Providers/AttributeServiceProvider.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Webkul\Attribute\Providers;
+
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Foundation\AliasLoader;
+use Illuminate\Routing\Router;
+
+class AttributeServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap services.
+     *
+     * @return void
+     */
+    public function boot(Router $router)
+    {
+        $this->loadMigrationsFrom(__DIR__ . '/../Database/Migrations');
+    }
+
+    /**
+     * Register services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Category/.gitignore b/packages/Webkul/Category/.gitignore
new file mode 100644
index 000000000..30bc16279
--- /dev/null
+++ b/packages/Webkul/Category/.gitignore
@@ -0,0 +1 @@
+/node_modules
\ No newline at end of file
diff --git a/packages/Webkul/Category/composer.json b/packages/Webkul/Category/composer.json
new file mode 100644
index 000000000..9f9bab1ce
--- /dev/null
+++ b/packages/Webkul/Category/composer.json
@@ -0,0 +1,25 @@
+{
+    "name": "webkul/laravel-category",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Jitendra Singh",
+            "email": "jitendra@webkul.com"
+        }
+    ],
+    "require": {},
+    "autoload": {
+        "psr-4": {
+            "Webkul\\Attribute\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Webkul\\Attribute\\Providers\\AttributeServiceProvider"
+            ],
+            "aliases": { }
+        }
+    },
+    "minimum-stability": "dev"
+}
diff --git a/packages/Webkul/Category/src/Database/Migrations/2018_07_05_142820_create_categories_table.php b/packages/Webkul/Category/src/Database/Migrations/2018_07_05_142820_create_categories_table.php
new file mode 100644
index 000000000..7d4f5e200
--- /dev/null
+++ b/packages/Webkul/Category/src/Database/Migrations/2018_07_05_142820_create_categories_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateCategoriesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('categories', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('code')->unique();
+            $table->integer('position');
+            $table->integer('parent_id')->unsigned()->nullable();
+            $table->foreign('parent_id')->references('id')->on('categories')->onDelete('cascade');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('categories');
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/User/src/Database/migrations/2018_06_28_131304_foo.php b/packages/Webkul/Category/src/Database/Migrations/2018_07_05_142836_create_category_name_translations_table.php
similarity index 55%
rename from packages/Webkul/User/src/Database/migrations/2018_06_28_131304_foo.php
rename to packages/Webkul/Category/src/Database/Migrations/2018_07_05_142836_create_category_name_translations_table.php
index b1efe1f6d..48c6656a3 100644
--- a/packages/Webkul/User/src/Database/migrations/2018_06_28_131304_foo.php
+++ b/packages/Webkul/Category/src/Database/Migrations/2018_07_05_142836_create_category_name_translations_table.php
@@ -4,7 +4,7 @@ use Illuminate\Support\Facades\Schema;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Database\Migrations\Migration;
 
-class Foo extends Migration
+class CreateCategoryNameTranslationTable extends Migration
 {
     /**
      * Run the migrations.
@@ -13,7 +13,10 @@ class Foo extends Migration
      */
     public function up()
     {
-        //
+        Schema::create('category_name_translation', function (Blueprint $table) {
+            $table->increments('id');
+            $table->timestamps();
+        });
     }
 
     /**
@@ -23,6 +26,6 @@ class Foo extends Migration
      */
     public function down()
     {
-        //
+        Schema::dropIfExists('category_name_translation');
     }
 }
diff --git a/packages/Webkul/Category/src/Database/Migrations/2018_07_05_142851_create_category_description_translations_table.php b/packages/Webkul/Category/src/Database/Migrations/2018_07_05_142851_create_category_description_translations_table.php
new file mode 100644
index 000000000..521516390
--- /dev/null
+++ b/packages/Webkul/Category/src/Database/Migrations/2018_07_05_142851_create_category_description_translations_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateCategoryDescriptionTranslationsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('category_description_translations', function (Blueprint $table) {
+            $table->increments('id');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('category_description_translations');
+    }
+}
diff --git a/packages/Webkul/Category/src/Providers/CategoryServiceProvider.php b/packages/Webkul/Category/src/Providers/CategoryServiceProvider.php
new file mode 100644
index 000000000..a832e33d8
--- /dev/null
+++ b/packages/Webkul/Category/src/Providers/CategoryServiceProvider.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Webkul\Category\Providers;
+
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Foundation\AliasLoader;
+use Illuminate\Routing\Router;
+
+class CategoryServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap services.
+     *
+     * @return void
+     */
+    public function boot(Router $router)
+    {
+        $this->loadMigrationsFrom(__DIR__ . '/../Database/Migrations');
+    }
+
+    /**
+     * Register services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Core/.gitignore b/packages/Webkul/Core/.gitignore
new file mode 100644
index 000000000..30bc16279
--- /dev/null
+++ b/packages/Webkul/Core/.gitignore
@@ -0,0 +1 @@
+/node_modules
\ No newline at end of file
diff --git a/packages/Webkul/Core/composer.json b/packages/Webkul/Core/composer.json
new file mode 100644
index 000000000..922b432b9
--- /dev/null
+++ b/packages/Webkul/Core/composer.json
@@ -0,0 +1,27 @@
+{
+    "name": "webkul/laravel-core",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Jitendra Singh",
+            "email": "jitendra@webkul.com"
+        }
+    ],
+    "require": {
+        "propaganistas/laravel-intl": "^2.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "Webkul\\Core\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Webkul\\Core\\Providers\\CoreServiceProvider"
+            ],
+            "aliases": { }
+        }
+    },
+    "minimum-stability": "dev"
+}
diff --git a/packages/Webkul/Core/src/Contracts/RepositoryInterface.php b/packages/Webkul/Core/src/Contracts/RepositoryInterface.php
new file mode 100644
index 000000000..a1b90aa4f
--- /dev/null
+++ b/packages/Webkul/Core/src/Contracts/RepositoryInterface.php
@@ -0,0 +1,27 @@
+<?php 
+
+namespace Webkul\Core\Contracts;
+
+/**
+ * Reposotory Interface
+ *
+ * @author    Jitendra Singh <jitendra@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+interface RepositoryInterface {
+
+    public function all($columns = ['*']);
+ 
+    public function paginate($perPage = 15, $columns = ['*']);
+ 
+    public function create(array $data);
+ 
+    public function update(array $data, $id);
+ 
+    public function delete($id);
+ 
+    public function find($id, $columns = ['*']);
+ 
+    public function findBy($field, $value, $columns = ['*']);
+
+}
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Contracts/Validations/Slug.php b/packages/Webkul/Core/src/Contracts/Validations/Slug.php
new file mode 100644
index 000000000..f144dbbc0
--- /dev/null
+++ b/packages/Webkul/Core/src/Contracts/Validations/Slug.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Webkul\Core\Contracts\Validations;
+
+use Illuminate\Contracts\Validation\Rule;
+
+class Slug implements Rule
+{
+    /**
+     * Determine if the validation rule passes.
+     *
+     * @param  string  $attribute
+     * @param  mixed  $value
+     * @return bool
+     */
+    public function passes($attribute, $value)
+    {
+        return preg_match('/^[a-z0-9]+(?:-[a-z0-9]+)*$/', $value);
+    }
+
+    /**
+     * Get the validation error message.
+     *
+     * @return string
+     */
+    public function message()
+    {
+        return trans('core::validation.slug');
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Database/Migrations/2018_07_10_055143_create_locales_table.php b/packages/Webkul/Core/src/Database/Migrations/2018_07_10_055143_create_locales_table.php
new file mode 100644
index 000000000..4b7a3a036
--- /dev/null
+++ b/packages/Webkul/Core/src/Database/Migrations/2018_07_10_055143_create_locales_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateLocalesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('locales', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('code')->unique();
+            $table->string('name');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('locales');
+    }
+}
diff --git a/packages/Webkul/User/src/Database/migrations/.gitkeep b/packages/Webkul/Core/src/Database/Seeders/.gitkeep
similarity index 100%
rename from packages/Webkul/User/src/Database/migrations/.gitkeep
rename to packages/Webkul/Core/src/Database/Seeders/.gitkeep
diff --git a/packages/Webkul/Core/src/Database/Seeders/DatabaseSeeder.php b/packages/Webkul/Core/src/Database/Seeders/DatabaseSeeder.php
new file mode 100644
index 000000000..eef670023
--- /dev/null
+++ b/packages/Webkul/Core/src/Database/Seeders/DatabaseSeeder.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace Webkul\Core\Database\Seeders;
+
+use Illuminate\Database\Seeder;
+
+class DatabaseSeeder extends Seeder
+{
+    /**
+     * Seed the application's database.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        $this->call(LocalesTableSeeder::class);
+    }
+}
diff --git a/packages/Webkul/Core/src/Database/Seeders/LocalesTableSeeder.php b/packages/Webkul/Core/src/Database/Seeders/LocalesTableSeeder.php
new file mode 100644
index 000000000..fa33dcc31
--- /dev/null
+++ b/packages/Webkul/Core/src/Database/Seeders/LocalesTableSeeder.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace Webkul\Core\Database\Seeders;
+
+use Illuminate\Database\Seeder;
+use Webkul\Core\Models\Locale;
+
+class LocalesTableSeeder extends Seeder
+{
+    public function run()
+    {
+        $locale = new Locale();
+        $locale->code = 'en';
+        $locale->name = 'English';
+        $locale->save();
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Eloquent/Repository.php b/packages/Webkul/Core/src/Eloquent/Repository.php
new file mode 100644
index 000000000..d3eabc4a2
--- /dev/null
+++ b/packages/Webkul/Core/src/Eloquent/Repository.php
@@ -0,0 +1,120 @@
+<?php 
+
+namespace Webkul\Core\Eloquent;
+
+use Webkul\Core\Contracts\RepositoryInterface;
+use Webkul\Core\Exceptions\RepositoryException;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Container\Container as App;
+
+/**
+ * Reposotory
+ *
+ * @author    Jitendra Singh <jitendra@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+abstract class Repository implements RepositoryInterface {
+
+    /**
+     * @var App
+     */
+    private $app;
+
+    /**
+     * @var \Illuminate\Database\Eloquent\Model
+     */
+    protected $model;
+
+    /**
+     * @param App $app
+     * @throws \Webkul\Core\Exceptions\RepositoryException
+     */
+    public function __construct(App $app) {
+        $this->app = $app;
+
+        $this->makeModel();
+    }
+
+    /**
+     * Specify Model class name
+     *
+     * @return mixed
+     */
+    public abstract function model();
+
+    /**
+     * @param array $columns
+     * @return mixed
+     */
+    public function all($columns = ['*']) {
+        return $this->model->get($columns);
+    }
+
+    /**
+     * @param int $perPage
+     * @param array $columns
+     * @return mixed
+     */
+    public function paginate($perPage = 1, $columns = ['*']) {
+        return $this->model->paginate($perPage, $columns);
+    }
+
+    /**
+     * @param array $data
+     * @return mixed
+     */
+    public function create(array $data) {
+        return $this->model->create($data);
+    }
+
+    /**
+     * @param array $data
+     * @param $id
+     * @param string $attribute
+     * @return mixed
+     */
+    public function update(array $data, $id, $attribute="id") {
+        return $this->model->where($attribute, '=', $id)->update($data);
+    }
+
+    /**
+     * @param $id
+     * @return mixed
+     */
+    public function delete($id) {
+        return $this->model->destroy($id);
+    }
+
+    /**
+     * @param $id
+     * @param array $columns
+     * @return mixed
+     */
+    public function find($id, $columns = ['*']) {
+        return $this->model->find($id, $columns);
+    }
+
+    /**
+     * @param $attribute
+     * @param $value
+     * @param array $columns
+     * @return mixed
+     */
+    public function findBy($attribute, $value, $columns = ['*']) {
+        return $this->model->where($attribute, '=', $value)->first($columns);
+    }
+
+    /**
+     * @return \Illuminate\Database\Eloquent\Builder
+     * @throws RepositoryException
+     */
+    public function makeModel() {
+        $model = $this->app->make($this->model());
+
+        if (!$model instanceof Model)
+            throw new RepositoryException("Class {$this->model()} must be an instance of Illuminate\\Database\\Eloquent\\Model");
+
+        return $this->model = $model->newQuery();
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Exceptions/RepositoryException.php b/packages/Webkul/Core/src/Exceptions/RepositoryException.php
new file mode 100644
index 000000000..2fce64a6c
--- /dev/null
+++ b/packages/Webkul/Core/src/Exceptions/RepositoryException.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace Webkul\Core\Exceptions;
+
+/**
+ * Reposotory Exception
+ *
+ * @author    Jitendra Singh <jitendra@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+class RepositoryException extends \Exception
+{
+    
+}
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Http/Controllers/Controller.php b/packages/Webkul/Core/src/Http/Controllers/Controller.php
new file mode 100644
index 000000000..08a7833f3
--- /dev/null
+++ b/packages/Webkul/Core/src/Http/Controllers/Controller.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Webkul\Core\Http\Controllers;
+
+use Illuminate\Foundation\Bus\DispatchesJobs;
+use Illuminate\Routing\Controller as BaseController;
+use Illuminate\Foundation\Validation\ValidatesRequests;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+
+class Controller extends BaseController
+{
+    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
+}
diff --git a/packages/Webkul/Core/src/Http/Controllers/LocaleController.php b/packages/Webkul/Core/src/Http/Controllers/LocaleController.php
new file mode 100644
index 000000000..6d054ad81
--- /dev/null
+++ b/packages/Webkul/Core/src/Http/Controllers/LocaleController.php
@@ -0,0 +1,84 @@
+<?php
+
+namespace Webkul\Core\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Webkul\Core\Models\Locale;
+
+/**
+ * Locale controller
+ *
+ * @author    Jitendra Singh <jitendra@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+class LocaleController extends Controller
+{
+    /**
+     * Contains route related configuration
+     *
+     * @var array
+     */
+    protected $_config;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->_config = request('_config');
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        return view($this->_config['view']);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        return view($this->_config['view']);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        $this->validate(request(), [
+            'code' => 'required|unique:locales,code',
+            'name' => 'required'
+        ]);
+
+        Locale::create(request(['code','name']));
+
+        session()->flash('success', 'Locale created successfully.');
+
+        return redirect()->route($this->_config['redirect']);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Models/Locale.php b/packages/Webkul/Core/src/Models/Locale.php
new file mode 100644
index 000000000..7d12e4623
--- /dev/null
+++ b/packages/Webkul/Core/src/Models/Locale.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace Webkul\Core\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Webkul\User\Models\Admin;
+
+class Locale extends Model
+{
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array
+     */
+    protected $fillable = [
+        'code', 'name'
+    ];
+}
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Providers/CoreServiceProvider.php b/packages/Webkul/Core/src/Providers/CoreServiceProvider.php
new file mode 100644
index 000000000..51135b897
--- /dev/null
+++ b/packages/Webkul/Core/src/Providers/CoreServiceProvider.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Webkul\Core\Providers;
+
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Routing\Router;
+use Illuminate\Foundation\AliasLoader;
+
+class CoreServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap services.
+     *
+     * @return void
+     */
+    public function boot(Router $router)
+    {
+        $this->loadMigrationsFrom(__DIR__ . '/../Database/Migrations');
+
+        $this->loadTranslationsFrom(__DIR__ . '/../Resources/lang', 'core');
+
+        $this->publishes([
+            __DIR__ . '/../../publishable/lang' => public_path('vendor/webkul/core/lang'),
+        ], 'public');
+
+        Validator::extend('slug', 'Webkul\Core\Contracts\Validations\Slug@passes');
+    }
+
+    /**
+     * Register services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Resources/lang/en/validation.php b/packages/Webkul/Core/src/Resources/lang/en/validation.php
new file mode 100644
index 000000000..12efc8886
--- /dev/null
+++ b/packages/Webkul/Core/src/Resources/lang/en/validation.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+    'slug' => 'The :attribute must be valid slug.'
+];
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Menu.php b/packages/Webkul/Ui/src/Menu.php
index dbd109bdc..9370f168e 100644
--- a/packages/Webkul/Ui/src/Menu.php
+++ b/packages/Webkul/Ui/src/Menu.php
@@ -36,16 +36,18 @@ class Menu {
 	 *
 	 * @param string  $key   Dot seperated heirarchy
 	 * @param string  $name  Text for the anchor
-	 * @param string  $url   URL for the anchor
+	 * @param string  $route Route for the menu
 	 * @param integer $sort  Sorting index for the items
 	 * @param string  $iconClass Icon Class name
 	 */
-	public function add($key, $name, $url, $sort = 0, $iconClass = null)
+	public function add($key, $name, $route, $sort = 0, $iconClass = null)
 	{
+		$url = route($route);
 		$item = [
 			'key'		 => $key,
 			'name'		 => $name,
 			'url'		 => $url,
+			'route'		 => $route,
 			'sort'		 => $sort,
 			'icon-class' => $iconClass,
 			'children'	 => []
@@ -65,6 +67,9 @@ class Menu {
 	 * @return void
 	 */
 	public function sortItems($items) {
+		if(!$items) {
+			return;
+		}
 		usort($items, function($a, $b) {
 			if ($a['sort'] == $b['sort']) {
 				return 0;
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Angle-Down-Light.svg b/packages/Webkul/Ui/src/Resources/assets/images/Angle-Down-Light.svg
new file mode 100644
index 000000000..7b38bfe7f
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/images/Angle-Down-Light.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Expand-Light-On</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Expand-Light-On" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(2.000000, 6.000000)" fill="#8E8E8E" id="Path-2">
+            <polygon points="0 0 13.3424655 0 6.67123275 7.3125"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Angle-Right.svg b/packages/Webkul/Ui/src/Resources/assets/images/Angle-Right.svg
deleted file mode 100644
index 52fbccde3..000000000
--- a/packages/Webkul/Ui/src/Resources/assets/images/Angle-Right.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
-    <title>Angle-Right</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Angle-Right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <polyline id="Path-3" stroke="#A2A2A2" stroke-width="3" points="7 3 14 10.058476 7.11598308 17"></polyline>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Arrow-Down-Light.png b/packages/Webkul/Ui/src/Resources/assets/images/Arrow-Down-Light.png
deleted file mode 100644
index 5070f117d..000000000
Binary files a/packages/Webkul/Ui/src/Resources/assets/images/Arrow-Down-Light.png and /dev/null differ
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Arrow-Right.svg b/packages/Webkul/Ui/src/Resources/assets/images/Arrow-Right.svg
new file mode 100644
index 000000000..745e57d6e
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/images/Arrow-Right.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Expand-Light</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Expand-Light" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(9.000000, 9.000000) rotate(-90.000000) translate(-9.000000, -9.000000) translate(2.000000, 5.000000)" fill="#3A3A3A" id="Path-2">
+            <polygon points="0 0 13.3424655 0 6.67123275 7.3125"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Checkbox-Checked.svg b/packages/Webkul/Ui/src/Resources/assets/images/Checkbox-Checked.svg
new file mode 100644
index 000000000..914ad34cd
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/images/Checkbox-Checked.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Checkbox-Checked</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Checkbox-Checked" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Base" stroke="#0041FF" stroke-width="2" fill="#0041FF" x="1" y="1" width="22" height="22" rx="2"></rect>
+        <g id="Check-Accent" transform="translate(6.000000, 7.000000)" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
+            <polyline id="Path-2" points="0 5 4 9 13 0"></polyline>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Checkbox.svg b/packages/Webkul/Ui/src/Resources/assets/images/Checkbox.svg
new file mode 100644
index 000000000..a096458fa
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/images/Checkbox.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Checkbox</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Checkbox" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Base" stroke="#C7C7C7" stroke-width="2" fill="#FFFFFF" x="1" y="1" width="22" height="22" rx="2"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Expand-Light-On.svg b/packages/Webkul/Ui/src/Resources/assets/images/Expand-Light-On.svg
new file mode 100644
index 000000000..7b38bfe7f
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/images/Expand-Light-On.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Expand-Light-On</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Expand-Light-On" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(2.000000, 6.000000)" fill="#8E8E8E" id="Path-2">
+            <polygon points="0 0 13.3424655 0 6.67123275 7.3125"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Expand-Light.svg b/packages/Webkul/Ui/src/Resources/assets/images/Expand-Light.svg
new file mode 100644
index 000000000..745e57d6e
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/images/Expand-Light.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Expand-Light</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Expand-Light" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(9.000000, 9.000000) rotate(-90.000000) translate(-9.000000, -9.000000) translate(2.000000, 5.000000)" fill="#3A3A3A" id="Path-2">
+            <polygon points="0 0 13.3424655 0 6.67123275 7.3125"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Icon-Back-Primary.svg b/packages/Webkul/Ui/src/Resources/assets/images/Icon-Back-Primary.svg
new file mode 100644
index 000000000..dffb85643
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/images/Icon-Back-Primary.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Back-Primary</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Back-Primary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Icon-Sort-Down" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) translate(3.000000, 6.000000)" stroke="#0041FF" stroke-width="2">
+            <path d="M1,6 L16.068125,6" id="Path-3"></path>
+            <polyline id="Path-4" points="12 0 18 6.08548298 12 12"></polyline>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Icon-Catalog-Active.svg b/packages/Webkul/Ui/src/Resources/assets/images/Icon-Catalog-Active.svg
new file mode 100644
index 000000000..ba35b9621
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/images/Icon-Catalog-Active.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Catalog-Active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Catalog-Active" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(9.000000, 7.000000)" stroke="#0041FF" stroke-width="2">
+            <rect id="Rectangle-2" x="0" y="0" width="30" height="34"></rect>
+            <path d="M6,6 L24,6" id="Path-6"></path>
+            <path d="M6,13 L24,13" id="Path-6"></path>
+            <path d="M6,20 L24,20" id="Path-6"></path>
+            <path d="M6,27 L24,27" id="Path-6"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/Icon-Catalog.svg b/packages/Webkul/Ui/src/Resources/assets/images/Icon-Catalog.svg
new file mode 100644
index 000000000..f7453ca83
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/images/Icon-Catalog.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Catalog</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Catalog" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(9.000000, 7.000000)" stroke-width="2">
+            <rect id="Rectangle-2" stroke="#8E8E8E" x="0" y="0" width="30" height="34"></rect>
+            <path d="M6,6 L24,6" id="Path-6" stroke="#979797"></path>
+            <path d="M6,13 L24,13" id="Path-6" stroke="#979797"></path>
+            <path d="M6,20 L24,20" id="Path-6" stroke="#979797"></path>
+            <path d="M6,27 L24,27" id="Path-6" stroke="#979797"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/controls.svg b/packages/Webkul/Ui/src/Resources/assets/images/controls.svg
deleted file mode 100644
index 53127ff1c..000000000
--- a/packages/Webkul/Ui/src/Resources/assets/images/controls.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="41px" height="41px" viewBox="0 0 41 41" style="enable-background:new 0 0 41 41;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{fill:#333333;}
-	.st2{fill:#B1B1AE;}
-</style>
-<path class="st0" d="M31,21.5L31,21.5c5.2,0,9.5,4.3,9.5,9.5l0,0c0,5.2-4.3,9.5-9.5,9.5l0,0c-5.2,0-9.5-4.3-9.5-9.5l0,0
-	C21.5,25.8,25.8,21.5,31,21.5z"/>
-<circle class="st1" cx="31" cy="31" r="5"/>
-<g id="checkbox">
-	<path class="st0" d="M3.5,0.5h13c1.7,0,3,1.3,3,3v13c0,1.7-1.3,3-3,3h-13c-1.7,0-3-1.3-3-3v-13C0.5,1.8,1.8,0.5,3.5,0.5z"/>
-	<path class="st2" d="M16.5,20h-13C1.6,20,0,18.4,0,16.5v-13C0,1.6,1.6,0,3.5,0h13C18.4,0,20,1.6,20,3.5v13C20,18.4,18.4,20,16.5,20
-		z M3.5,1C2.1,1,1,2.1,1,3.5v13C1,17.9,2.1,19,3.5,19h13c1.4,0,2.5-1.1,2.5-2.5v-13C19,2.1,17.9,1,16.5,1H3.5z"/>
-</g>
-<path id="checkbox-checked" class="st1" d="M17,41H3c-1.7,0-3-1.3-3-3V24c0-1.7,1.3-3,3-3h14c1.7,0,3,1.3,3,3v14
-	C20,39.7,18.7,41,17,41z M13.3,26l-5.9,5.7l-1.7-1.6L4,31.7L7.4,35l7.6-7.4L13.3,26z"/>
-<g id="checkbox_1_">
-	<path class="st0" d="M31,0.5L31,0.5c5.2,0,9.5,4.3,9.5,9.5l0,0c0,5.2-4.3,9.5-9.5,9.5l0,0c-5.2,0-9.5-4.3-9.5-9.5l0,0
-		C21.5,4.8,25.8,0.5,31,0.5z"/>
-	<path class="st2" d="M31,20c-5.5,0-10-4.5-10-10c0-5.5,4.5-10,10-10c5.5,0,10,4.5,10,10C41,15.5,36.5,20,31,20z M31,1c-5,0-9,4-9,9
-		c0,5,4,9,9,9c5,0,9-4,9-9C40,5,36,1,31,1z"/>
-</g>
-<path id="radio-checked" class="st1" d="M31,41c-5.5,0-10-4.5-10-10s4.5-10,10-10s10,4.5,10,10S36.5,41,31,41z M31,22c-5,0-9,4-9,9
-	s4,9,9,9s9-4,9-9S36,22,31,22z"/>
-</svg>
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/app.js b/packages/Webkul/Ui/src/Resources/assets/js/app.js
index 7e668ee65..bd5fac594 100644
--- a/packages/Webkul/Ui/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Ui/src/Resources/assets/js/app.js
@@ -2,4 +2,5 @@ Vue.component('flash-wrapper', require('./components/flash-wrapper'))
 Vue.component('flash', require('./components/flash'))
 Vue.component('accordian', require('./components/accordian'))
 Vue.component('tree-view', require('./components/tree-view/tree-view'))
+Vue.component('tree-item', require('./components/tree-view/tree-item'))
 Vue.component('tree-checkbox', require('./components/tree-view/tree-checkbox'))
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/accordian.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/accordian.vue
index 86cbf81bc..847d463b4 100644
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/accordian.vue
+++ b/packages/Webkul/Ui/src/Resources/assets/js/components/accordian.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="accordian" :class="{ 'active': isActive }">
+    <div class="accordian" :class="[isActive ? 'active' : '', className]" :id="id">
         <div class="accordian-header" @click="toggleAccordion()">
             {{ title }}
             <i class="icon" :class="iconClass"></i>
@@ -11,6 +11,8 @@
     export default {
         props: {
             title: String,
+            id: String,
+            className: String,
             active: Boolean
         },
 
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/flash.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/flash.vue
index 7de783f1d..f4c3c2ab3 100644
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/flash.vue
+++ b/packages/Webkul/Ui/src/Resources/assets/js/components/flash.vue
@@ -13,7 +13,7 @@
             var this_this = this;
             setTimeout(function() {
                 this_this.$emit('onRemoveFlash', this_this.flash)
-            }, 1000)
+            }, 5000)
         },
 
         methods: {
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/index.js b/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/index.js
deleted file mode 100644
index cf27a01b5..000000000
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Treeview } from './tree-view';
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/tree-checkbox.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/tree-checkbox.vue
deleted file mode 100644
index e06ae6421..000000000
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/tree-checkbox.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <span class="checkbox">
-        <input type="checkbox" name="permissions[]" :id="inputValue" v-model="inputValue" @change="inputChanged($event)" :checked="isChecked">
-        <label class="checkbox-view" :for="inputValue"></label>
-        {{ label }}
-    </span>
-</template>
-
-<script>
-    export default {
-        name: 'tree-checkbox',
-
-        props: ['label', 'inputValue', 'isChecked'],
-
-        methods: {
-            inputChanged (e) {
-                this.$emit('change', this.inputValue)
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/tree-view.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/tree-view.vue
deleted file mode 100644
index d76b89f11..000000000
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/tree-view.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<script>
-
-    export default {
-        name: 'tree-view',
-
-        inheritAttrs: false,
-
-        props: {
-            items: {
-                type: Object,
-                required: false,
-                default: () => ({
-                    "name": "Root",
-                    "value": "1",
-                    "children": [{
-                        "name": "First Child",
-                        "value": "2",
-                    }, {
-                        "name": "Second Child",
-                        "value": "3",
-                        "children": [{
-                            "name": "GrandChild 1",
-                            "value": "4",
-                        }, {
-                            "name": "GrandChild 2",
-                            "value": "5",
-                        }, {
-                            "name":"GrandChild 3",
-                            "value": "6",
-                        }]
-                    }]
-                })
-            },
-
-            value: {
-                type: Array,
-                required: false,
-                default: () => ([])
-            }
-        },
-
-        computed: {
-            allChildren () {
-                let leafs = [];
-                let searchTree = items => {
-                    if(!! items['children'] && items['children'].length > 0) {
-                        items['children'].forEach(child => searchTree(child))
-                    } else {
-                        leafs.push(items)
-                    }
-                }
-
-                searchTree(this.items)
-
-                return leafs;
-            },
-
-            hasChildren () {
-                return !! this.items['children'] && this.items['children'].length > 0;
-            },
-
-            hasSelection () {
-                return !! this.value && this.value.length > 0;
-            },
-
-            isAllChildrenSelected () {
-                return this.hasChildren && this.hasSelection && this.allChildren.every(leaf => this.value.some(sel => sel === leaf.value))
-            },
-
-            isSomeChildrenSelected () {
-                return this.hasSelection && this.allChildren.some(leaf => this.value.some(sel => sel === leaf.value))
-            },
-
-            isChecked () {
-                return this.hasChildren ? this.isSomeChildrenSelected : (this.value.indexOf(this.items['value']) === -1 ? false : true);
-            }
-        },
-
-        methods: {
-            generateRoot () {
-                return this.$createElement('tree-checkbox', {
-                    props: {
-                        label: this.items['name'],
-                        inputValue: this.items['value'],
-                        isChecked: this.isChecked
-                    },
-                    on: {
-                        change: selection => {
-                            if(this.hasChildren) {
-                                if(this.isAllChildrenSelected) {
-                                    this.allChildren.forEach(leaf => {
-                                        let index = this.value.indexOf(leaf.value)
-                                        this.value.splice(index, 1)
-                                    })
-                                } else {
-                                    this.allChildren.forEach(leaf => {
-                                        let index = this.value.indexOf(leaf.value)
-                                        if(index === -1) {
-                                            this.value.push(leaf.value);
-                                        }
-                                    })
-                                }
-
-                                this.$emit('input', this.value)
-                            } else {
-                                this.$emit('input', selection);
-                            }
-                        }
-                    }
-                })
-            },
-
-            generateChildren () {
-                let childElements = [];
-                if(this.items['children']) {
-                    this.items['children'].forEach(child => {
-                        childElements.push(this.generateChild(child));
-                    })
-                }
-
-                return childElements;
-            },
-
-            generateChild (child) {
-                return this.$createElement('tree-view', {
-                    class: 'tree-item',
-                    on: {
-                        input: selection => {
-                            // Main Turning Point
-                            
-                            console.log(this.items)
-                            this.$emit('input', selection)
-                        }
-                    },
-                    props: {
-                        items: child,
-                        value: this.value
-                    }
-                })
-            }
-        },
-
-        render (createElement) {
-            return createElement('div', {}, [this.generateRoot(), ... this.generateChildren()])
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-checkbox.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-checkbox.vue
index 3713cd386..3304fec27 100644
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-checkbox.vue
+++ b/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-checkbox.vue
@@ -1,8 +1,8 @@
 <template>
     <span class="checkbox">
-        <input type="checkbox" name="permissions[]" :id="inputValue" :value="inputValue.value" @change="inputChanged($event)" :checked="isActive">
-        <label class="checkbox-view" :for="inputValue"></label>
-        {{ inputValue }} ======== {{ value }}
+        <input type="checkbox" :id="id" name="permissions[]" :value="modelValue" @change="inputChanged()" :checked="isActive">
+        <label class="checkbox-view" :for="id"></label>
+        <span class="" :for="id">{{ label }}</span>
     </span>
 </template>
 
@@ -10,11 +10,63 @@
     export default {
         name: 'tree-checkbox',
 
-        props: ['label', 'inputValue', 'value'],
+        props: ['id', 'label', 'modelValue', 'inputValue', 'value'],
+
+        computed: {
+            isMultiple () {
+                return Array.isArray(this.internalValue)
+            },
+
+            isActive () {
+                const value = this.value
+                const input = this.internalValue
+
+                if (this.isMultiple) {
+                    return input.some(item => this.valueComparator(item, value))
+                }
+
+                return value ? this.valueComparator(value, input) : Boolean(input)
+            },
+
+            internalValue: {
+                get () {
+                    return this.lazyValue
+                },
+                set (val) {
+                    this.lazyValue = val
+                    this.$emit('input', val)
+                }
+            }
+        },
+
+        data: vm => ({
+            lazyValue: vm.inputValue
+        }),
+
+        watch: {
+            inputValue (val) {
+                this.internalValue = val
+            }
+        },
 
         methods: {
-            inputChanged (e) {
-                this.$emit('change', this.inputValue)
+            inputChanged () {
+                const value = this.value
+                let input = this.internalValue
+
+                if (this.isMultiple) {
+                    const length = input.length
+
+                    input = input.filter(item => !this.valueComparator(item, value))
+
+                    if (input.length === length) {
+                        input.push(value)
+                    }
+                } else {
+                    input = !input
+                }
+
+                this.$emit('change', input)
             },
 
             valueComparator (a, b) {
@@ -33,28 +85,6 @@
 
                 return props.every(p => this.valueComparator(a[p], b[p]))
             }
-        },
-
-        computed: {
-            isMultiple () {
-                return Array.isArray(this.inputValue)
-            },
-
-            isActive () {
-                const value = this.value
-                const input = this.inputValue
-
-                if (this.isMultiple) {
-                    if (!Array.isArray(input)) 
-                        return false
-
-                    return input.some(item => this.valueComparator(item, value))
-                }
-
-                var isChecked = value ? this.valueComparator(value, input) : Boolean(input)
-
-                return isChecked;
-            },
         }
     }
 </script>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-item.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-item.vue
new file mode 100644
index 000000000..dbd6dbc66
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-item.vue
@@ -0,0 +1,203 @@
+<script>
+
+    export default {
+        name: 'tree-view',
+
+        inheritAttrs: false,
+
+        props: {
+            idField: String,
+
+            captionField: String,
+
+            childrenField: String,
+
+            valueField: String,
+
+            items: {
+                type: [Array, String, Object],
+                required: false,
+                default: null
+            },
+
+            value: {
+                type: Array,
+                required: false,
+                default: null
+            },
+
+            savedValues: {
+                type: Array,
+                required: false,
+                default: null
+            }
+        },
+
+        created () {
+            let index = this.savedValues.indexOf(this.items[this.valueField])
+            if(index !== -1) {
+                this.value.push(this.items);
+            }
+        },
+
+        computed: {
+            caption () {
+                return this.items[this.captionField]
+            },
+
+            allChildren () {
+                let leafs = [];
+                let searchTree = items => {
+                    if(!! items[this.childrenField] && this.getLength(items[this.childrenField]) > 0) {
+                        if(typeof items[this.childrenField] == 'object') {
+                            for(let key in items[this.childrenField]) {
+                                searchTree(items[this.childrenField][key])
+                            }
+                        } else {
+                            items[this.childrenField].forEach(child => searchTree(child))
+                        }
+                    } else {
+                        leafs.push(items)
+                    }
+                }
+
+                searchTree(this.items)
+                
+                return leafs;
+            },
+
+            hasChildren () {
+                return !! this.items[this.childrenField] && this.getLength(this.items[this.childrenField]) > 0;
+            },
+
+            hasSelection () {
+                return !! this.value && this.value.length > 0;
+            },
+
+            isAllChildrenSelected () {
+                return this.hasChildren && this.hasSelection && this.allChildren.every(leaf => this.value.some(sel => sel[this.idField] === leaf[this.idField]))
+            },
+
+            isSomeChildrenSelected () {
+                return this.hasChildren && this.hasSelection && this.allChildren.some(leaf => this.value.some(sel => sel[this.idField] === leaf[this.idField]))
+            }
+        },
+
+        methods: {
+            getLength (items) {
+                if(typeof items == 'object') {
+                    let length = 0;
+
+                    for(let item in items) {
+                        length++;
+                    }
+
+                    return length;
+                }
+
+                return items.length;
+            },
+
+            generateRoot () {
+                return this.$createElement('tree-checkbox', {
+                    props: {
+                        id: this.items[this.idField],
+                        label: this.caption,
+                        modelValue: this.items[this.valueField],
+                        inputValue: this.hasChildren ? this.isSomeChildrenSelected : this.value,
+                        value: this.hasChildren ? this.isAllChildrenSelected : this.items
+                    },
+                    on: {
+                        change: selection => {
+                            if(this.hasChildren) {
+                                if(this.isAllChildrenSelected) {
+                                    this.allChildren.forEach(leaf => {
+                                        let index = this.value.indexOf(leaf)
+                                        this.value.splice(index, 1)
+                                    })
+                                } else {
+                                    this.allChildren.forEach(leaf => {
+                                        let exists = false;
+                                        this.value.forEach(item => {
+                                            if(item['key'] == leaf['key']) {
+                                                exists = true;
+                                            }
+                                        })
+
+                                        if(!exists) {
+                                            this.value.push(leaf);
+                                        }
+                                    })
+                                }
+
+                                this.$emit('input', this.value)
+                            } else {
+                                this.$emit('input', selection);
+                            }
+                        }
+                    }
+                })
+            },
+
+            generateChild (child) {
+                return this.$createElement('tree-item', {
+                    on: {
+                        input: selection => {
+                            this.$emit('input', selection)
+                        }
+                    },
+                    props: {
+                        items: child,
+                        value: this.value,
+                        savedValues: this.savedValues,
+                        captionField: this.captionField,
+                        childrenField: this.childrenField,
+                        valueField: this.valueField,
+                        idField: this.idField,
+                    }
+                })
+            },
+
+            generateChildren () {
+                let childElements = [];
+                if(this.items[this.childrenField]) {
+                    if(typeof this.items[this.childrenField] == 'object') {
+                        for(let key in this.items[this.childrenField]) {
+                            childElements.push(this.generateChild(this.items[this.childrenField][key]));
+                        }
+                    } else {
+                        this.items[this.childrenField].forEach(child => {
+                            childElements.push(this.generateChild(child));
+                        })
+                    }
+                }
+
+                return childElements;
+            },
+
+            generateIcon () {
+                return this.$createElement('i', {
+                    class: ['expand-icon'],
+                    on: {
+                        click: selection => {
+                            this.$el.classList.toggle("active")
+                        }
+                    }
+                })
+            }
+        },
+
+        render (createElement) {
+            return createElement('div', {
+                    class: [
+                        'tree-item',
+                        'active',
+                        this.hasChildren ? 'has-children' : ''
+                    ]
+                }, [
+                    this.generateIcon(), this.generateRoot(), ... this.generateChildren()
+                ]
+            )
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-view.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-view.vue
index 360ef7e6e..c7c865e78 100644
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-view.vue
+++ b/packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-view.vue
@@ -6,135 +6,97 @@
         inheritAttrs: false,
 
         props: {
-            items: {
-                type: Object,
+            idField: {
+                type: String,
                 required: false,
-                default: () => ({
-                    "name": "Root",
-                    "value": "1",
-                    "children": [{
-                        "name": "First Child",
-                        "value": "2",
-                    }, {
-                        "name": "Second Child",
-                        "value": "3",
-                        "children": [{
-                            "name": "GrandChild 1",
-                            "value": "4",
-                        }, {
-                            "name": "GrandChild 2",
-                            "value": "5",
-                        }, {
-                            "name":"GrandChild 3",
-                            "value": "6",
-                        }]
-                    }]
-                })
+                default: 'id'
+            },
+
+            captionField: {
+                type: String,
+                required: false,
+                default: 'name'
+            },
+
+            childrenField: {
+                type: String,
+                required: false,
+                default: 'children'
+            },
+
+            valueField: {
+                type: String,
+                required: false,
+                default: 'value'
+            },
+
+            items: {
+                type: [Array, String, Object],
+                required: false,
+                default: () => ([])
             },
 
             value: {
-                type: Array,
+                type: [Array, String, Object],
                 required: false,
                 default: () => ([])
             }
         },
 
+        data: () => ({
+            finalValues: [] 
+        }),
+        
         computed: {
-            allChildren () {
-                let leafs = [];
-                let searchTree = items => {
-                    if(!! items['children'] && items['children'].length > 0) {
-                        items['children'].forEach(child => searchTree(child))
-                    } else {
-                        leafs.push(items)
-                    }
-                }
+            savedValues () {
+                if(!this.value)
+                    return [];
 
-                searchTree(this.items)
-
-                return leafs;
-            },
-
-            hasChildren () {
-                return !! this.items['children'] && this.items['children'].length > 0;
-            },
-
-            hasSelection () {
-                return !! this.value && this.value.length > 0;
-            },
-
-            isAllChildrenSelected () {
-                return this.hasChildren && this.hasSelection && this.allChildren.every(leaf => this.value.some(sel => sel === leaf))
-            },
-
-            isSomeChildrenSelected () {
-                return this.hasSelection && this.allChildren.some(leaf => this.value.some(sel => sel === leaf))
+                return (typeof this.value == 'string') ? JSON.parse(this.value) : this.value;
             }
         },
 
+
         methods: {
-            generateRoot () {
-                return this.$createElement('tree-checkbox', {
-                    props: {
-                        label: this.items['name'],
-                        inputValue: this.hasChildren ? this.isAllChildrenSelected : this.value,
-                        value: this.hasChildren ? this.isAllChildrenSelected : this.items
-                    },
-                    on: {
-                        change: selection => {
-                            if(this.hasChildren) {
-                                if(this.isAllChildrenSelected) {
-                                    this.allChildren.forEach(leaf => {
-                                        let index = this.value.indexOf(leaf)
-                                        this.value.splice(index, 1)
-                                    })
-                                } else {
-                                    this.allChildren.forEach(leaf => {
-                                        let index = this.value.indexOf(leaf)
-                                        if(index === -1) {
-                                            this.value.push(leaf);
-                                        }
-                                    })
-                                }
-
-                                this.$emit('input', this.value)
-                            } else {
-                                this.$emit('input', selection);
-                            }
-                        }
-                    }
-                })
-            },
-
-            generateChild (child) {
-                return this.$createElement('tree-view', {
-                    class: 'tree-item',
-                    on: {
-                        input: selection => {
-                            this.$emit('input', selection)
-                        }
-                    },
-                    props: {
-                        items: child,
-                        value: this.value
-                    }
-                })
-            },
-
             generateChildren () {
                 let childElements = [];
-                if(this.items['children']) {
-                    this.items['children'].forEach(child => {
-                        childElements.push(this.generateChild(child));
-                    })
+
+                let items = (typeof this.items == 'string') ? JSON.parse(this.items) : this.items;
+
+                for(let key in items) {
+                    childElements.push(this.generateTreeItem(items[key]));
                 }
 
                 return childElements;
+            },
+            
+            generateTreeItem(item) {
+                return this.$createElement('tree-item', {
+                        props: {
+                            items: item,
+                            value: this.finalValues,
+                            savedValues: this.savedValues,
+                            captionField: this.captionField,
+                            childrenField: this.childrenField,
+                            valueField: this.valueField,
+                            idField: this.idField
+                        },
+                        on: {
+                            input: selection => {
+                                this.finalValues = selection;
+                            }
+                        },
+                    })
             }
         },
 
         render (createElement) {
-            return createElement('div', {}, [this.generateRoot(), ... this.generateChildren()])
+            return createElement('div', {
+                    class: [
+                        'tree-container',
+                    ]
+                }, [this.generateChildren()]
+            )
         }
     }
 </script>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
index cee3694f3..bc35cdd57 100644
--- a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
@@ -21,6 +21,7 @@ a:visited,
 a:focus,
 a:active {
   text-decoration: none;
+  color: $brand-color;
 }
 
 ul {
@@ -40,6 +41,10 @@ h2 {
     color: #3A3A3A;
 }
 
+.hide {
+    display: none !important;
+}
+
 .btn {
     @include box-shadow(0 1px 4px 0 rgba(0, 0, 0, 0.20), 0 0 8px 0 rgba(0, 0, 0, 0.10));
     border-radius: 3px;
@@ -65,10 +70,12 @@ h2 {
     }
     &.btn-xl {
         padding: 12px 24px;
+        font-size: 16px;
     }
 
     &.btn-primary {
         background: $brand-color;
+        color: #ffffff;
     }
 
     &[disabled="disabled"],
@@ -244,10 +251,9 @@ h2 {
     }
 
     .checkbox-view {
-        background-image: url('../images/controls.svg');
-        background-position: 0px 0px;
-        height: 20px;
-        width: 20px;
+        background-image: url('../images/Checkbox.svg');
+        height: 24px;
+        width: 24px;
         margin: 0;
         display: inline-block !important;
         vertical-align: middle;
@@ -255,7 +261,7 @@ h2 {
     }
 
     input:checked + .checkbox-view {
-        background-position: 0px -21px;
+        background-image: url('../images/Checkbox-Checked.svg');
     }
 
     input:disabled + .checkbox-view {
@@ -298,68 +304,67 @@ h2 {
     }
 }
 
-.form-container {
-    .control-group {
+.control-group {
+    display: block;
+    margin-bottom: 25px;
+    font-size: 15px;
+    color: #333333;
+    width: 750px;
+    max-width: 100%;
+
+    label {
         display: block;
-        margin-bottom: 25px;
+        color: #3A3A3A;
+    }
+
+    textarea.control {
+        height: 100px;
+        padding: 10px;
+    }
+
+    .control {
+        background: #fff;
+        border: 2px solid $control-border-color;
+        border-radius: 3px;
+        width: 70%;
+        height: 36px;
+        display: inline-block;
+        vertical-align: middle;
+        transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        padding: 0px 10px;
         font-size: 15px;
-        color: #333333;
-        width: 750px;
-        max-width: 100%;
+        margin-top: 10px;
+        margin-bottom: 5px;
 
-        label {
-            display: block;
-            color: #3A3A3A;
+        &:focus {
+            border-color: $brand-color;
         }
 
-        textarea.control {
-            height: 100px;
+        &[disabled="disabled"] {
+            border-color: #D3D3D3;
+            background-color: #D3D3D3;
+            cursor: not-allowed;
         }
+    }
 
-        .control {
-            background: #fff;
-            border: 2px solid $control-border-color;
-            border-radius: 3px;
-            width: 70%;
-            height: 36px;
-            display: inline-block;
-            vertical-align: middle;
-            transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-            padding: 0px 10px;
-            font-size: 15px;
-            margin-top: 10px;
-            margin-bottom: 5px;
+    .control-info {
+        display: block;
+        font-style: italic;
+        color: #6F6F6F;
+    }
 
-            &:focus {
-                border-color: $brand-color;
-            }
+    .control-error {
+        display: none;
+        color: #FF5656;
+        margin-top: 5px;
+    }
 
-            &[disabled="disabled"] {
-                border-color: #D3D3D3;
-                background-color: #D3D3D3;
-                cursor: not-allowed;
-            }
-        }
+    &.has-error .control {
+        border-color: $danger-color;
+    }
 
-        .control-info {
-            display: block;
-            font-style: italic;
-            color: #6F6F6F;
-        }
-
-        .control-error {
-            display: none;
-            color: #FF5656;
-            margin-top: 5px;
-        }
-
-        &.has-error .control {
-            border-color: $danger-color;
-        }
-
-        &.has-error .control-error {
-            display: block;
-        }
+    &.has-error .control-error {
+        display: block;
     }
 }
 
@@ -369,6 +374,7 @@ h2 {
     right: 10px;
     position: fixed;
     z-index: 6;
+    text-align: left;
 
     .alert {
         width: 300px;
@@ -458,13 +464,55 @@ h2 {
     }
 }
 
-.tree-item {
-    padding-left: 30px;
-    display: inline-block;
-    width: 100%;
+.tree-container {
+    
+    .tree-item {
+        padding-left: 30px;
+        display: inline-block;
+        margin-top: 10px;
+        width: 100%;
 
-    .checkbox {
-        margin: 0;
-        margin-bottom: 5px;
+        > .tree-item {
+            display: none;
+        }
+
+        &.active > .tree-item {
+            display: inline-block;
+        }
+
+        .checkbox {
+            margin: 0;
+            display: inline-block;
+        }
+
+        .expand-icon {
+            display: inline-block;
+            margin-right: 10px;
+            cursor: pointer;
+            background-image: url('../images/Expand-Light.svg');
+            width: 18px;
+            height: 18px;
+            vertical-align: middle;
+        }
+
+        &.active {
+            > .expand-icon {
+                background-image: url('../images/Expand-Light-On.svg');
+            }
+        }
+    }
+    
+    > .tree-item {
+        padding-left: 0;
+    }
+}
+
+.panel {
+    box-shadow: 0 2px 25px 0 rgba(0,0,0,0.15);
+    border-radius: 5px;
+    background: #fff;
+
+    .panel-content {
+        padding: 20px;
     }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
index a4f6430e0..2b6ff74f2 100644
--- a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
@@ -10,15 +10,19 @@
     display: inline-block;
     background-size: cover;
 }
-.icon-dashboard {
+.dashboard-icon {
     @extend %menu-properties;
     background-image: url('../images/Icon-Dashboard.svg');
 }
-.icon-configuration {
+.catalog-icon {
+    @extend %menu-properties;
+    background-image: url('../images/Icon-Catalog.svg');
+}
+.configuration-icon {
     @extend %menu-properties;
     background-image: url('../images/Icon-Configure.svg');
 }
-.icon-settings {
+.settings-icon {
     @extend %menu-properties;
     background-image: url('../images/Icon-Settings.svg');
 }
@@ -41,6 +45,12 @@
     height: 8px;
 }
 
+.arrow-right-icon {
+    background-image: url('../images/Arrow-Right.svg');
+    width: 18px;
+    height: 18px;
+}
+
 .white-cross-sm-icon {
     background-image: url('../images/Icon-Sm-Cross-White.svg');
     width: 18px;
@@ -94,17 +104,26 @@
     height: 18px;
 }
 
+.primary-back-icon {
+    background-image: url('../images/Icon-Back-Primary.svg');
+    width: 24px;
+    height: 24px;
+}
+
 .active {
-    .icon-dashboard {
+    .dashboard-icon {
         background-image: url('../images/Icon-Dashboard-Active.svg');
     }
 
-    .icon-settings {
+    .catalog-icon {
+        background-image: url('../images/Icon-Catalog-Active.svg');
+    }
+
+    .settings-icon {
         background-image: url('../images/Icon-Settings-Active.svg');
     }
 
-    .icon-configuration {
-        @extend %menu-properties;
+    .configuration-icon {
         background-image: url('../images/Icon-Configure-Active.svg');
     }
 
@@ -114,15 +133,15 @@
         height: 8px;
     }
 
-    &.icon-dashboard {
+    &.dashboard-icon {
         background-image: url('../images/Icon-Dashboard-Active.svg');
     }
 
-    &.icon-settings {
+    &.settings-icon {
         background-image: url('../images/Icon-Settings-Active.svg');
     }
 
-    &.icon-configuration {
+    &.configuration-icon {
         @extend %menu-properties;
         background-image: url('../images/Icon-Configure-Active.svg');
     }
diff --git a/packages/Webkul/Ui/src/Resources/views/partials/ui-kit.blade.php b/packages/Webkul/Ui/src/Resources/views/partials/ui-kit.blade.php
index c40b74d5b..1cfb42dff 100644
--- a/packages/Webkul/Ui/src/Resources/views/partials/ui-kit.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/partials/ui-kit.blade.php
@@ -343,6 +343,10 @@
                     <i class="icon arrow-down-icon active"></i>
                 </span>
 
+                <span class="icon-wrapper">
+                    <i class="icon arrow-right-icon"></i>
+                </span>
+
                 <span class="icon-wrapper">
                     <i class="icon white-cross-sm-icon"></i>
                 </span>
diff --git a/packages/Webkul/Ui/webpack.mix.js b/packages/Webkul/Ui/webpack.mix.js
index f55b04d28..8f8b82f84 100644
--- a/packages/Webkul/Ui/webpack.mix.js
+++ b/packages/Webkul/Ui/webpack.mix.js
@@ -1,10 +1,12 @@
 const { mix } = require('laravel-mix');
 require('laravel-mix-merge-manifest');
 
+
 // var publicPath = 'publishable/assets';
 var publicPath = '../../../public/vendor/webkul/ui/assets';
 
 mix.setPublicPath(publicPath).mergeManifest();
+mix.disableNotifications();
 
 mix.js([
         __dirname + '/src/Resources/assets/js/app.js',
diff --git a/packages/Webkul/User/src/ACLCreator.php b/packages/Webkul/User/src/ACLCreator.php
new file mode 100644
index 000000000..fa634f820
--- /dev/null
+++ b/packages/Webkul/User/src/ACLCreator.php
@@ -0,0 +1,111 @@
+<?php
+
+namespace Webkul\User;
+
+class ACLCreator {
+
+	public $items = [];
+
+	/**
+	 * Shortcut method for create a acl with a callback.
+	 * This will allow you to do things like fire an event on creation.
+	 *
+	 * @param  callable $callback Callback to use after the acl creation
+	 * @return object
+	 */
+	public static function create($callback) {
+		$acl = new ACLCreator();
+		$callback($acl);
+		$acl->items = $acl->sortItems($acl->items);
+
+		return $acl;
+	}
+
+	/**
+	 * Add a acl item to the item stack
+	 *
+	 * @param string  $key   Dot seperated heirarchy
+	 * @param string  $name  Text for the anchor
+	 * @param string  $route Route for the acl
+	 * @param integer $sort  Sorting index for the items
+	 */
+	public function add($key, $name, $route, $sort = 0)
+	{
+		$item = [
+			'key'		 => $key,
+			'name'		 => $name,
+			'route'		 => $route,
+			'sort'		 => $sort,
+			'children'	 => []
+        ];
+
+		$children = str_replace('.', '.children.', $key);
+		$this->array_set($this->items, $children, $item);
+	}
+
+	/**
+	 * Method to sort through the acl items and put them in order
+	 *
+	 * @return void
+	 */
+	public function sortItems($items) {
+		foreach ($items as &$item) {
+			if(count($item['children'])) {
+				$item['children'] = $this->sortItems($item['children']);
+			}
+		}
+
+		usort($items, function($a, $b) {
+			if ($a['sort'] == $b['sort']) {
+				return 0;
+			}
+
+			return ($a['sort'] < $b['sort']) ? -1 : 1;
+		});
+
+		return $items;
+	}
+
+	public function array_set(&$array, $key, $value)
+    {
+        if (is_null($key)) {
+            return $array = $value;
+        }
+
+        $keys = explode('.', $key);
+		$count = count($keys);
+
+        while (count($keys) > 1) {
+            $key = array_shift($keys);
+
+            if (! isset($array[$key]) || ! is_array($array[$key])) {
+                $array[$key] = [];
+            }
+
+            $array = &$array[$key];
+        }
+
+		$finalKey = array_shift($keys);
+		if(isset($array[$finalKey])) {
+			$array[$finalKey] = $this->arrayMerge($array[$finalKey], $value);
+		} else {
+			$array[$finalKey] = $value;
+		}
+
+        return $array;
+    }
+
+	protected function arrayMerge(array &$array1, array &$array2)
+	{
+		$merged = $array1;
+		foreach ($array2 as $key => &$value) {
+			if (is_array($value) && isset($merged[$key]) && is_array($merged[$key])) {
+				$merged[$key] = $this->arrayMerge($merged[$key], $value);
+			} else {
+				$merged[$key] = $value;
+			}
+		}
+
+		return $merged;
+	}
+}
\ No newline at end of file
diff --git a/packages/Webkul/User/src/Database/Migrations/.gitkeep b/packages/Webkul/User/src/Database/Migrations/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/Webkul/User/src/Database/Migrations/2014_10_12_100000_create_admin_password_resets_table.php b/packages/Webkul/User/src/Database/Migrations/2014_10_12_100000_create_admin_password_resets_table.php
new file mode 100644
index 000000000..0cfa5b82a
--- /dev/null
+++ b/packages/Webkul/User/src/Database/Migrations/2014_10_12_100000_create_admin_password_resets_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateAdminPasswordResetsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('admin_password_resets', function (Blueprint $table) {
+            $table->string('email')->index();
+            $table->string('token');
+            $table->timestamp('created_at')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('admin_password_resets');
+    }
+}
diff --git a/packages/Webkul/User/src/Database/migrations/2018_06_12_111907_create_admins_table.php b/packages/Webkul/User/src/Database/Migrations/2018_06_12_111907_create_admins_table.php
similarity index 100%
rename from packages/Webkul/User/src/Database/migrations/2018_06_12_111907_create_admins_table.php
rename to packages/Webkul/User/src/Database/Migrations/2018_06_12_111907_create_admins_table.php
diff --git a/packages/Webkul/User/src/Database/migrations/2018_06_13_055341_create_roles_table.php b/packages/Webkul/User/src/Database/Migrations/2018_06_13_055341_create_roles_table.php
similarity index 86%
rename from packages/Webkul/User/src/Database/migrations/2018_06_13_055341_create_roles_table.php
rename to packages/Webkul/User/src/Database/Migrations/2018_06_13_055341_create_roles_table.php
index fce035acb..d26a53fe5 100644
--- a/packages/Webkul/User/src/Database/migrations/2018_06_13_055341_create_roles_table.php
+++ b/packages/Webkul/User/src/Database/Migrations/2018_06_13_055341_create_roles_table.php
@@ -16,7 +16,8 @@ class CreateRolesTable extends Migration
         Schema::create('roles', function (Blueprint $table) {
             $table->increments('id');
             $table->string('name');
-            $table->string('description');
+            $table->string('description')->nullable();
+            $table->string('permission_type');
             $table->json('permissions')->nullable();
             $table->timestamps();
         });
diff --git a/packages/Webkul/User/src/Database/Seeders/RolesTableSeeder.php b/packages/Webkul/User/src/Database/Seeders/RolesTableSeeder.php
index de2d71f54..33af27bf9 100644
--- a/packages/Webkul/User/src/Database/Seeders/RolesTableSeeder.php
+++ b/packages/Webkul/User/src/Database/Seeders/RolesTableSeeder.php
@@ -12,7 +12,7 @@ class RolesTableSeeder extends Seeder
         $Role = new Role();
         $Role->name = 'Administrator';
         $Role->description = 'Administrator role';
-        $Role->status = true;
+        $Role->permission_type = 'all';
         $Role->permissions = [];
         $Role->save();
     }
diff --git a/packages/Webkul/User/src/Http/Controllers/AccountController.php b/packages/Webkul/User/src/Http/Controllers/AccountController.php
index dd50f04c8..36472f54b 100644
--- a/packages/Webkul/User/src/Http/Controllers/AccountController.php
+++ b/packages/Webkul/User/src/Http/Controllers/AccountController.php
@@ -10,8 +10,18 @@ namespace Webkul\User\Http\Controllers;
  */
 class AccountController extends Controller
 {
+    /**
+     * Contains route related configuration
+     *
+     * @var array
+     */
     protected $_config;
 
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
     public function __construct()
     {
         $this->_config = request('_config');
diff --git a/packages/Webkul/User/src/Http/Controllers/ForgetPasswordController.php b/packages/Webkul/User/src/Http/Controllers/ForgetPasswordController.php
new file mode 100644
index 000000000..9c3eaabd4
--- /dev/null
+++ b/packages/Webkul/User/src/Http/Controllers/ForgetPasswordController.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace Webkul\User\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Illuminate\Foundation\Auth\SendsPasswordResetEmails;
+use Illuminate\Support\Facades\Password;
+
+/**
+ * Admin forget password controller
+ *
+ * @author    Jitendra Singh <jitendra@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+class ForgetPasswordController extends Controller
+{
+
+    use SendsPasswordResetEmails;
+
+    /**
+     * Contains route related configuration
+     *
+     * @var array
+     */
+    protected $_config;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->_config = request('_config');
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        return view($this->_config['view']);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function store()
+    {
+        $this->validate(request(), [
+            'email' => 'required|email'
+        ]);
+
+        $response = $this->broker()->sendResetLink(
+            request(['email'])
+        );
+
+        if($response == Password::RESET_LINK_SENT) {
+            session()->flash('success', trans($response));
+
+            return back();
+        }
+
+        return back()
+            ->withInput(request(['email']))
+            ->withErrors(
+                ['email' => trans($response)]
+            );
+    }
+
+    /**
+     * Get the broker to be used during password reset.
+     *
+     * @return \Illuminate\Contracts\Auth\PasswordBroker
+     */
+    public function broker()
+    {
+        return Password::broker('admins');
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/User/src/Http/Controllers/ResetPasswordController.php b/packages/Webkul/User/src/Http/Controllers/ResetPasswordController.php
new file mode 100644
index 000000000..a08bdd7d9
--- /dev/null
+++ b/packages/Webkul/User/src/Http/Controllers/ResetPasswordController.php
@@ -0,0 +1,117 @@
+<?php
+
+namespace Webkul\User\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Illuminate\Foundation\Auth\ResetsPasswords;
+use Illuminate\Support\Facades\Password;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Auth\Events\PasswordReset;
+use Illuminate\Support\Str;
+
+/**
+ * Admin reset password controller
+ *
+ * @author    Jitendra Singh <jitendra@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+class ResetPasswordController extends Controller
+{
+
+    use ResetsPasswords;
+
+    /**
+     * Contains route related configuration
+     *
+     * @var array
+     */
+    protected $_config;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->_config = request('_config');
+    }
+
+    /**
+     * Display the password reset view for the given token.
+     *
+     * If no token is present, display the link request form.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  string|null  $token
+     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
+     */
+    public function create(Request $request, $token = null)
+    {
+        return view($this->_config['view'])->with(
+            ['token' => $token, 'email' => $request->email]
+        );
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function store()
+    {
+        $this->validate(request(), [
+            'token' => 'required',
+            'email' => 'required|email',
+            'password' => 'required|confirmed|min:6',
+        ]);
+
+        $response = $this->broker()->reset(
+            request(['email', 'password', 'password_confirmation', 'token']), function ($admin, $password) {
+                $this->resetPassword($admin, $password);
+            }
+        );
+
+        if($response == Password::PASSWORD_RESET) {
+            return redirect()->route($this->_config['redirect']);
+        }
+        
+        return back()
+            ->withInput(request(['email']))
+            ->withErrors([
+                'email' => trans($response)
+            ]);
+    }
+
+    /**
+     * Reset the given admin's password.
+     *
+     * @param  \Illuminate\Contracts\Auth\CanResetPassword  $admin
+     * @param  string  $password
+     * @return void
+     */
+    protected function resetPassword($admin, $password)
+    {
+        $admin->password = Hash::make($password);
+
+        $admin->setRememberToken(Str::random(60));
+
+        $admin->save();
+
+        event(new PasswordReset($admin));
+
+        auth()->guard('admin')->login($admin);
+    }
+
+    /**
+     * Get the broker to be used during password reset.
+     *
+     * @return \Illuminate\Contracts\Auth\PasswordBroker
+     */
+    public function broker()
+    {
+        return Password::broker('admins');
+    }
+
+}
\ No newline at end of file
diff --git a/packages/Webkul/User/src/Http/Controllers/RoleController.php b/packages/Webkul/User/src/Http/Controllers/RoleController.php
index 81ff5efaa..ebf99c56f 100644
--- a/packages/Webkul/User/src/Http/Controllers/RoleController.php
+++ b/packages/Webkul/User/src/Http/Controllers/RoleController.php
@@ -4,7 +4,6 @@ namespace Webkul\User\Http\Controllers;
 
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
-use Illuminate\Routing\Controller;
 use Webkul\User\Models\Role;
 
 /**
@@ -15,8 +14,18 @@ use Webkul\User\Models\Role;
  */
 class RoleController extends Controller
 {
+    /**
+     * Contains route related configuration
+     *
+     * @var array
+     */
     protected $_config;
 
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
     public function __construct()
     {
         $this->_config = request('_config');
@@ -50,6 +59,11 @@ class RoleController extends Controller
      */
     public function store(Request $request)
     {
+        $this->validate(request(), [
+            'name' => 'required',
+            'permission_type' => 'required',
+        ]);
+
         Role::create(request()->all());
 
         session()->flash('success', 'Role created successfully.');
@@ -79,9 +93,14 @@ class RoleController extends Controller
      */
     public function update(Request $request, $id)
     {
+        $this->validate(request(), [
+            'name' => 'required',
+            'permission_type' => 'required',
+        ]);
+        
         $role = Role::findOrFail($id);
 
-        $role->update(request(['name', 'description', 'permissions']));
+        $role->update(request()->all());
 
         session()->flash('success', 'Role updated successfully.');
 
diff --git a/packages/Webkul/User/src/Http/Controllers/SessionController.php b/packages/Webkul/User/src/Http/Controllers/SessionController.php
index 2a6797e20..b9519b789 100644
--- a/packages/Webkul/User/src/Http/Controllers/SessionController.php
+++ b/packages/Webkul/User/src/Http/Controllers/SessionController.php
@@ -4,7 +4,6 @@ namespace Webkul\User\Http\Controllers;
 
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
-use Illuminate\Routing\Controller;
 
 /**
  * Admin user session controller
@@ -12,10 +11,20 @@ use Illuminate\Routing\Controller;
  * @author    Jitendra Singh <jitendra@webkul.com>
  * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
  */
-class SeesionController extends Controller
+class SessionController extends Controller
 {
+    /**
+     * Contains route related configuration
+     *
+     * @var array
+     */
     protected $_config;
 
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
     public function __construct()
     {
         $this->_config = request('_config');
@@ -40,13 +49,19 @@ class SeesionController extends Controller
      */
     public function store()
     {
-        if(! auth()->guard('admin')->attempt(request(['email', 'password']))) {
-            return back()->withErrors([
-                'message' => 'Please check your credentials and try again.'
-            ]);
+        $this->validate(request(), [
+            'email' => 'required|email',
+            'password' => 'required'
+        ]);
+
+        $remember = request('remember');
+        if(! auth()->guard('admin')->attempt(request(['email', 'password']), $remember)) {
+            session()->flash('error', 'Please check your credentials and try again.');
+
+            return back();
         }
 
-        return redirect($this->_config['redirect']);
+        return redirect()->route($this->_config['redirect']);
     }
 
     /**
@@ -59,6 +74,6 @@ class SeesionController extends Controller
     {
         auth()->guard('admin')->logout();
 
-        return redirect($this->_config['redirect']);
+        return redirect()->route($this->_config['redirect']);
     }
 }
\ No newline at end of file
diff --git a/packages/Webkul/User/src/Http/Controllers/UserController.php b/packages/Webkul/User/src/Http/Controllers/UserController.php
index 5a31ef3a2..7e2c38836 100644
--- a/packages/Webkul/User/src/Http/Controllers/UserController.php
+++ b/packages/Webkul/User/src/Http/Controllers/UserController.php
@@ -4,7 +4,6 @@ namespace Webkul\User\Http\Controllers;
 
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
-use Illuminate\Routing\Controller;
 use Webkul\User\Models\Admin;
 use Webkul\User\Models\Role;
 use Webkul\User\Http\Requests\UserForm;
@@ -17,8 +16,18 @@ use Webkul\User\Http\Requests\UserForm;
  */
 class UserController extends Controller
 {
+    /**
+     * Contains route related configuration
+     *
+     * @var array
+     */
     protected $_config;
 
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
     public function __construct()
     {
         $this->_config = request('_config');
diff --git a/packages/Webkul/User/src/Models/Admin.php b/packages/Webkul/User/src/Models/Admin.php
index 369e8abe3..4418ab7dc 100644
--- a/packages/Webkul/User/src/Models/Admin.php
+++ b/packages/Webkul/User/src/Models/Admin.php
@@ -5,6 +5,8 @@ namespace Webkul\User\Models;
 use Illuminate\Notifications\Notifiable;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Webkul\User\Models\Role;
+use Webkul\User\Notifications\AdminResetPassword;
+
 
 class Admin extends Authenticatable
 {
@@ -36,6 +38,17 @@ class Admin extends Authenticatable
         return $this->belongsTo(Role::class);
     }
 
+    /**
+    * Send the password reset notification.
+    *
+    * @param  string  $token
+    * @return void
+    */
+    public function sendPasswordResetNotification($token)
+    {
+        $this->notify(new AdminResetPassword($token));
+    }
+
     /**
      * Checks if admin has permission to perform certain action.
      *
diff --git a/packages/Webkul/User/src/Models/Role.php b/packages/Webkul/User/src/Models/Role.php
index 27f98db98..c83db73f9 100644
--- a/packages/Webkul/User/src/Models/Role.php
+++ b/packages/Webkul/User/src/Models/Role.php
@@ -7,6 +7,16 @@ use Webkul\User\Models\Admin;
 
 class Role extends Model
 {
+
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array
+     */
+    protected $fillable = [
+        'name', 'description', 'permission_type', 'permissions',
+    ];
+
     protected $casts = [
         'permissions' => 'array'
     ];
diff --git a/packages/Webkul/User/src/Notifications/AdminResetPassword.php b/packages/Webkul/User/src/Notifications/AdminResetPassword.php
new file mode 100644
index 000000000..b469ceb31
--- /dev/null
+++ b/packages/Webkul/User/src/Notifications/AdminResetPassword.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace Webkul\User\Notifications;
+
+use Illuminate\Notifications\Messages\MailMessage;
+use Illuminate\Auth\Notifications\ResetPassword;
+
+class AdminResetPassword extends ResetPassword
+{
+
+    /**
+     * Build the mail representation of the notification.
+     *
+     * @param  mixed  $notifiable
+     * @return \Illuminate\Notifications\Messages\MailMessage
+     */
+    public function toMail($notifiable)
+    {
+        if (static::$toMailCallback) {
+            return call_user_func(static::$toMailCallback, $notifiable, $this->token);
+        }
+
+        return (new MailMessage)
+            ->line('You are receiving this email because we received a password reset request for your account.')
+            ->action('Reset Password', route('admin.reset-password.create', $this->token))
+            ->line('If you did not request a password reset, no further action is required.');
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/User/src/Providers/UserServiceProvider.php b/packages/Webkul/User/src/Providers/UserServiceProvider.php
index 6c5f4c650..a11616067 100644
--- a/packages/Webkul/User/src/Providers/UserServiceProvider.php
+++ b/packages/Webkul/User/src/Providers/UserServiceProvider.php
@@ -5,9 +5,11 @@ namespace Webkul\User\Providers;
 use Illuminate\Support\ServiceProvider;
 use Illuminate\Foundation\AliasLoader;
 use Illuminate\Routing\Router;
+use Illuminate\Support\Facades\Event;
 use Webkul\User\Bouncer;
 use Webkul\User\Facades\Bouncer as BouncerFacade;
 use Webkul\User\Http\Middleware\RedirectIfNotAdmin;
+use Webkul\User\ACLCreator;
 
 class UserServiceProvider extends ServiceProvider
 {
@@ -20,7 +22,23 @@ class UserServiceProvider extends ServiceProvider
     {
         $router->aliasMiddleware('admin', RedirectIfNotAdmin::class);
 
-        $this->loadMigrationsFrom(__DIR__ . '/../Database/migrations');
+        $this->loadMigrationsFrom(__DIR__ . '/../Database/Migrations');
+
+        $this->createACL();
+    }
+
+    /**
+     * This method fires an event for acl creation, any package can add their acl item by listening to the admin.acl.build event
+     *
+     * @return void
+     */
+    public function createACL()
+    {
+        Event::listen('admin.acl.create', function() {
+            return ACLCreator::create(function($acl) {
+                Event::fire('admin.acl.build', $acl);
+            });
+        });
     }
 
     /**
@@ -31,6 +49,10 @@ class UserServiceProvider extends ServiceProvider
     public function register()
     {
         $this->registerBouncer();
+
+        Event::listen('admin.acl.build', function($acl) {
+            $acl->add('settings.users.roles1', 'Roles1', 'admin.roles.index1', 3);
+        });
     }
     
     /**
diff --git a/packages/Webkul/User/webpack.mix.js b/packages/Webkul/User/webpack.mix.js
new file mode 100644
index 000000000..a13f1e170
--- /dev/null
+++ b/packages/Webkul/User/webpack.mix.js
@@ -0,0 +1,15 @@
+const { mix } = require('laravel-mix');
+require('laravel-mix-merge-manifest');
+
+
+// var publicPath = 'publishable/assets';
+var publicPath = '../../../public/vendor/webkul/core/assets';
+
+mix.setPublicPath(publicPath).mergeManifest();
+mix.disableNotifications();
+
+mix.copyDirectory( __dirname + '/src/Resources/assets/lang', publicPath + '/lang')
+
+if (mix.inProduction()) {
+    mix.version();
+}
\ No newline at end of file
diff --git a/public/vendor/webkul/admin/assets/images/Logo+Text.svg b/public/vendor/webkul/admin/assets/images/Logo+Text.svg
new file mode 100644
index 000000000..37715525a
--- /dev/null
+++ b/public/vendor/webkul/admin/assets/images/Logo+Text.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="147px" height="60px" viewBox="0 0 147 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Logo+Text</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Sign-In" transform="translate(-726.000000, -100.000000)">
+            <g id="Paper" transform="translate(618.000000, 100.000000)">
+                <g id="Logo+Text-LG" transform="translate(108.000000, 0.000000)">
+                    <g id="Logo+Text">
+                        <g id="Logo">
+                            <rect id="Rectangle" fill="#0041FF" x="0" y="16" width="44" height="44"></rect>
+                            <rect id="Rectangle" fill="#000311" x="0" y="54" width="44" height="6"></rect>
+                            <path d="M36,15.2214765 L36,25.557047 C36,26.9062527 34.9580948,28 33.6728395,28 C32.3875843,28 31.345679,26.9062527 31.345679,25.557047 L31.345679,15.2214765 C31.345679,9.51329856 26.9376184,4.88590604 21.5,4.88590604 C16.0623816,4.88590604 11.654321,9.51329856 11.654321,15.2214765 L11.654321,25.557047 C11.654321,26.9062527 10.6124157,28 9.32716049,28 C8.04190524,28 7,26.9062527 7,25.557047 L7,15.2214765 C7,6.81488716 13.4918711,0 21.5,0 C29.5081289,0 36,6.81488716 36,15.2214765 Z" id="Combined-Shape" fill="#000311"></path>
+                        </g>
+                        <text id="bagisto" font-family="Montserrat-SemiBold, Montserrat" font-size="24" font-weight="500" letter-spacing="-0.3839998" fill="#0041FF">
+                            <tspan x="59" y="45">bagisto</tspan>
+                        </text>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/admin/assets/images/logo.png b/public/vendor/webkul/admin/assets/images/logo.png
new file mode 100644
index 000000000..f3a6baf4d
Binary files /dev/null and b/public/vendor/webkul/admin/assets/images/logo.png differ
diff --git a/public/vendor/webkul/admin/assets/images/logo.svg b/public/vendor/webkul/admin/assets/images/logo.svg
new file mode 100644
index 000000000..37715525a
--- /dev/null
+++ b/public/vendor/webkul/admin/assets/images/logo.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="147px" height="60px" viewBox="0 0 147 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Logo+Text</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Sign-In" transform="translate(-726.000000, -100.000000)">
+            <g id="Paper" transform="translate(618.000000, 100.000000)">
+                <g id="Logo+Text-LG" transform="translate(108.000000, 0.000000)">
+                    <g id="Logo+Text">
+                        <g id="Logo">
+                            <rect id="Rectangle" fill="#0041FF" x="0" y="16" width="44" height="44"></rect>
+                            <rect id="Rectangle" fill="#000311" x="0" y="54" width="44" height="6"></rect>
+                            <path d="M36,15.2214765 L36,25.557047 C36,26.9062527 34.9580948,28 33.6728395,28 C32.3875843,28 31.345679,26.9062527 31.345679,25.557047 L31.345679,15.2214765 C31.345679,9.51329856 26.9376184,4.88590604 21.5,4.88590604 C16.0623816,4.88590604 11.654321,9.51329856 11.654321,15.2214765 L11.654321,25.557047 C11.654321,26.9062527 10.6124157,28 9.32716049,28 C8.04190524,28 7,26.9062527 7,25.557047 L7,15.2214765 C7,6.81488716 13.4918711,0 21.5,0 C29.5081289,0 36,6.81488716 36,15.2214765 Z" id="Combined-Shape" fill="#000311"></path>
+                        </g>
+                        <text id="bagisto" font-family="Montserrat-SemiBold, Montserrat" font-size="24" font-weight="500" letter-spacing="-0.3839998" fill="#0041FF">
+                            <tspan x="59" y="45">bagisto</tspan>
+                        </text>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/admin/assets/js/admin.js b/public/vendor/webkul/admin/assets/js/admin.js
index 1f77fae2c..ad3a6a8b4 100644
--- a/public/vendor/webkul/admin/assets/js/admin.js
+++ b/public/vendor/webkul/admin/assets/js/admin.js
@@ -21956,63 +21956,40 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Validator", function() { return Validator; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ErrorBag", function() { return ErrorBag; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Rules", function() { return Rules; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ErrorComponent", function() { return ErrorComponent; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "version", function() { return version; });
 /**
-  * vee-validate v2.1.0-beta.5
-  * (c) 2018 Abdelrahman Awad
+  * vee-validate v2.0.0-rc.26
+  * (c) 2017 Abdelrahman Awad
   * @license MIT
   */
 // 
 
-var supportsPassive = true;
-
-var detectPassiveSupport = function () {
-  try {
-    var opts = Object.defineProperty({}, 'passive', {
-      get: function get () {
-        supportsPassive = true;
-      }
-    });
-    window.addEventListener('testPassive', null, opts);
-    window.removeEventListener('testPassive', null, opts);
-  } catch (e) {
-    supportsPassive = false;
-  }
-  return supportsPassive;
-};
-
-var addEventListener = function (el, eventName, cb) {
-  el.addEventListener(eventName, cb, supportsPassive ? { passive: true } : false);
-};
-
-var isTextInput = function (el) {
-  return ['text', 'password', 'search', 'email', 'tel', 'url', 'textarea'].indexOf(el.type) !== -1;
-};
-
-var isCheckboxOrRadioInput = function (el) {
-  return ['radio', 'checkbox'].indexOf(el.type) !== -1;
-};
-
-var isDateInput = function (el) {
-  return ['date', 'week', 'month', 'datetime-local', 'time'].indexOf(el.type) !== -1;
-};
-
 /**
  * Gets the data attribute. the name must be kebab-case.
  */
 var getDataAttribute = function (el, name) { return el.getAttribute(("data-vv-" + name)); };
 
 /**
- * Checks if the values are either null or undefined.
+ * Checks if the value is either null or undefined.
  */
-var isNullOrUndefined = function () {
-  var values = [], len = arguments.length;
-  while ( len-- ) values[ len ] = arguments[ len ];
+var isNullOrUndefined = function (value) {
+  return value === null || value === undefined;
+};
 
-  return values.every(function (value) {
-    return value === null || value === undefined;
-  });
+/**
+ * Sets the data attribute.
+ */
+var setDataAttribute = function (el, name, value) { return el.setAttribute(("data-vv-" + name), value); };
+
+/**
+ * Creates a proxy object if available in the environment.
+ */
+var createProxy = function (target, handler) {
+  if (typeof Proxy === 'undefined') {
+    return target;
+  }
+
+  return new Proxy(target, handler);
 };
 
 /**
@@ -22027,8 +22004,7 @@ var createFlags = function () { return ({
   invalid: null,
   validated: false,
   pending: false,
-  required: false,
-  changed: false
+  required: false
 }); };
 
 /**
@@ -22068,30 +22044,13 @@ var isEqual = function (lhs, rhs) {
  */
 var getScope = function (el) {
   var scope = getDataAttribute(el, 'scope');
-  if (isNullOrUndefined(scope)) {
-    var form = getForm(el);
-
-    if (form) {
-      scope = getDataAttribute(form, 'scope');
-    }
+  if (isNullOrUndefined(scope) && el.form) {
+    scope = getDataAttribute(el.form, 'scope');
   }
 
   return !isNullOrUndefined(scope) ? scope : null;
 };
 
-/**
- * Get the closest form element.
- */
-var getForm = function (el) {
-  if (isNullOrUndefined(el)) { return null; }
-
-  if (el.tagName === 'FORM') { return el; }
-
-  if (!isNullOrUndefined(el.form)) { return el.form; }
-
-  return !isNullOrUndefined(el.parentNode) ? getForm(el.parentNode) : null;
-};
-
 /**
  * Gets the value in an object safely.
  */
@@ -22102,15 +22061,15 @@ var getPath = function (path, target, def) {
 
   var value = target;
   path.split('.').every(function (prop) {
-    if (prop in value) {
-      value = value[prop];
+    if (! Object.prototype.hasOwnProperty.call(value, prop) && value[prop] === undefined) {
+      value = def;
 
-      return true;
+      return false;
     }
 
-    value = def;
+    value = value[prop];
 
-    return false;
+    return true;
   });
 
   return value;
@@ -22122,13 +22081,13 @@ var getPath = function (path, target, def) {
 var hasPath = function (path, target) {
   var obj = target;
   return path.split('.').every(function (prop) {
-    if (prop in obj) {
-      obj = obj[prop];
-
-      return true;
+    if (! Object.prototype.hasOwnProperty.call(obj, prop)) {
+      return false;
     }
 
-    return false;
+    obj = obj[prop];
+
+    return true;
   });
 };
 
@@ -22149,10 +22108,9 @@ var parseRule = function (rule) {
 /**
  * Debounces a function.
  */
-var debounce = function (fn, wait, immediate, token) {
+var debounce = function (fn, wait, immediate) {
   if ( wait === void 0 ) wait = 0;
   if ( immediate === void 0 ) immediate = false;
-  if ( token === void 0 ) token = { cancelled: false };
 
   if (wait === 0) {
     return fn;
@@ -22166,8 +22124,7 @@ var debounce = function (fn, wait, immediate, token) {
 
     var later = function () {
       timeout = null;
-
-      if (!immediate && !token.cancelled) { fn.apply(void 0, args); }
+      if (!immediate) { fn.apply(void 0, args); }
     };
     /* istanbul ignore next */
     var callNow = immediate && !timeout;
@@ -22178,25 +22135,6 @@ var debounce = function (fn, wait, immediate, token) {
   };
 };
 
-/**
- * Appends a rule definition to a list of rules.
- */
-var appendRule = function (rule, rules) {
-  if (!rules) {
-    return rule;
-  }
-
-  if (!rule) {
-    return rules;
-  }
-
-  if (typeof rules === 'string') {
-    return (rules + "|" + rule);
-  }
-
-  return assign({}, rules, normalizeRules(rule));
-};
-
 /**
  * Normalizes the given rules expression.
  */
@@ -22312,11 +22250,6 @@ var removeClass = function (el, className) {
 var toggleClass = function (el, className, status) {
   if (!el || !className) { return; }
 
-  if (Array.isArray(className)) {
-    className.forEach(function (item) { return toggleClass(el, item, status); });
-    return;
-  }
-
   if (status) {
     return addClass(el, className);
   }
@@ -22334,12 +22267,10 @@ var toArray = function (arrayLike) {
 
   var array = [];
   var length = arrayLike.length;
-  /* istanbul ignore next */
   for (var i = 0; i < length; i++) {
     array.push(arrayLike[i]);
   }
 
-  /* istanbul ignore next */
   return array;
 };
 
@@ -22399,14 +22330,34 @@ var uniqId = function () {
  * finds the first element that satisfies the predicate callback, polyfills array.find
  */
 var find = function (arrayLike, predicate) {
-  var array = Array.isArray(arrayLike) ? arrayLike : toArray(arrayLike);
-  for (var i = 0; i < array.length; i++) {
-    if (predicate(array[i])) {
-      return array[i];
-    }
+  var array = toArray(arrayLike);
+
+  if (isCallable(array.find)) {
+    return array.find(predicate);
   }
 
-  return undefined;
+  var result;
+  array.some(function (item) {
+    if (predicate(item)) {
+      result = item;
+      return true;
+    }
+
+    return false;
+  });
+
+  return result;
+};
+
+/**
+ * Returns a suitable event name for the input element.
+ */
+var getInputEventName = function (el) {
+  if (el && (el.tagName === 'SELECT' || ~['radio', 'checkbox', 'file'].indexOf(el.type))) {
+    return 'change';
+  }
+
+  return 'input';
 };
 
 var isBuiltInComponent = function (vnode) {
@@ -22416,7 +22367,7 @@ var isBuiltInComponent = function (vnode) {
 
   var tag = vnode.componentOptions.tag;
 
-  return /^(keep-alive|transition|transition-group)$/.test(tag);
+  return /keep-alive|transition|transition-group/.test(tag);
 };
 
 var makeEventsArray = function (events) {
@@ -22467,11 +22418,10 @@ var merge = function (target, source) {
   }
 
   Object.keys(source).forEach(function (key) {
-    var obj, obj$1;
-
     if (isObject(source[key])) {
       if (! target[key]) {
         assign(target, ( obj = {}, obj[key] = {}, obj ));
+        var obj;
       }
 
       merge(target[key], source[key]);
@@ -22479,117 +22429,287 @@ var merge = function (target, source) {
     }
 
     assign(target, ( obj$1 = {}, obj$1[key] = source[key], obj$1 ));
+    var obj$1;
   });
 
   return target;
 };
 
-var fillRulesFromElement = function (el, rules) {
-  if (el.required) {
-    rules = appendRule('required', rules);
-  }
+// 
 
-  if (isTextInput(el)) {
-    if (el.type === 'email') {
-      rules = appendRule(("email" + (el.multiple ? ':multiple' : '')), rules);
-    }
-
-    if (el.pattern) {
-      rules = appendRule(("regex:" + (el.pattern)), rules);
-    }
-
-    // 524288 is the max on some browsers and test environments.
-    if (el.maxLength >= 0 && el.maxLength < 524288) {
-      rules = appendRule(("max:" + (el.maxLength)), rules);
-    }
-
-    if (el.minLength > 0) {
-      rules = appendRule(("min:" + (el.minLength)), rules);
-    }
-
-    return rules;
-  }
-
-  if (el.type === 'number') {
-    rules = appendRule('decimal', rules);
-    if (el.min !== '') {
-      rules = appendRule(("min_value:" + (el.min)), rules);
-    }
-
-    if (el.max !== '') {
-      rules = appendRule(("max_value:" + (el.max)), rules);
-    }
-
-    return rules;
-  }
-
-  if (isDateInput(el)) {
-    var timeFormat = el.step && Number(el.step) < 60 ? 'HH:mm:ss' : 'HH:mm';
-
-    if (el.type === 'date') {
-      return appendRule('date_format:YYYY-MM-DD', rules);
-    }
-
-    if (el.type === 'datetime-local') {
-      return appendRule(("date_format:YYYY-MM-DDT" + timeFormat), rules);
-    }
-
-    if (el.type === 'month') {
-      return appendRule('date_format:YYYY-MM', rules);
-    }
-
-    if (el.type === 'week') {
-      return appendRule('date_format:YYYY-[W]WW', rules);
-    }
-
-    if (el.type === 'time') {
-      return appendRule(("date_format:" + timeFormat), rules);
-    }
-  }
-
-  return rules;
+var ErrorBag = function ErrorBag () {
+  this.items = [];
 };
 
-var values = function (obj) {
-  if (isCallable(Object.values)) {
-    return Object.values(obj);
-  }
-
-  // fallback to keys()
-  /* istanbul ignore next */
-  return obj[Object.keys(obj)[0]];
-};
-
-var parseSelector = function (selector) {
-  var rule = null;
-  if (selector.indexOf(':') !== -1) {
-    rule = selector.split(':').pop();
-    selector = selector.replace((":" + rule), '');
-  }
-
-  if (selector[0] === '#') {
-    return {
-      id: selector.slice(1),
-      rule: rule,
-      name: null,
-      scope: null
+/**
+ * Adds an error to the internal array.
+ */
+ErrorBag.prototype.add = function add (error) {
+  // handle old signature.
+  if (arguments.length > 1) {
+    error = {
+      field: arguments[0],
+      msg: arguments[1],
+      rule: arguments[2],
+      scope: !isNullOrUndefined(arguments[3]) ? arguments[3] : null,
+      regenerate: null
     };
   }
 
-  var scope = null;
-  var name = selector;
-  if (selector.indexOf('.') !== -1) {
-    var parts = selector.split('.');
-    scope = parts[0];
-    name = parts.slice(1).join('.');
+  error.scope = !isNullOrUndefined(error.scope) ? error.scope : null;
+  this.items.push(error);
+};
+
+/**
+ * Regenrates error messages if they have a generator function.
+ */
+ErrorBag.prototype.regenerate = function regenerate () {
+  this.items.forEach(function (i) {
+    i.msg = isCallable(i.regenerate) ? i.regenerate() : i.msg;
+  });
+};
+
+/**
+ * Updates a field error with the new field scope.
+ */
+ErrorBag.prototype.update = function update (id, error) {
+  var item = find(this.items, function (i) { return i.id === id; });
+  if (!item) {
+    return;
   }
 
-  return {
-    id: null,
-    scope: scope,
-    name: name,
-    rule: rule
+  var idx = this.items.indexOf(item);
+  this.items.splice(idx, 1);
+  item.scope = error.scope;
+  this.items.push(item);
+};
+
+/**
+ * Gets all error messages from the internal array.
+ */
+ErrorBag.prototype.all = function all (scope) {
+  if (isNullOrUndefined(scope)) {
+    return this.items.map(function (e) { return e.msg; });
+  }
+
+  return this.items.filter(function (e) { return e.scope === scope; }).map(function (e) { return e.msg; });
+};
+
+/**
+ * Checks if there are any errors in the internal array.
+ */
+ErrorBag.prototype.any = function any (scope) {
+  if (isNullOrUndefined(scope)) {
+    return !!this.items.length;
+  }
+
+  return !!this.items.filter(function (e) { return e.scope === scope; }).length;
+};
+
+/**
+ * Removes all items from the internal array.
+ */
+ErrorBag.prototype.clear = function clear (scope) {
+    var this$1 = this;
+
+  if (isNullOrUndefined(scope)) {
+    scope = null;
+  }
+
+  for (var i = 0; i < this.items.length; ++i) {
+    if (this$1.items[i].scope === scope) {
+      this$1.items.splice(i, 1);
+      --i;
+    }
+  }
+};
+
+/**
+ * Collects errors into groups or for a specific field.
+ */
+ErrorBag.prototype.collect = function collect (field, scope, map) {
+    if ( map === void 0 ) map = true;
+
+  if (!field) {
+    var collection = {};
+    this.items.forEach(function (e) {
+      if (! collection[e.field]) {
+        collection[e.field] = [];
+      }
+
+      collection[e.field].push(map ? e.msg : e);
+    });
+
+    return collection;
+  }
+
+  field = !isNullOrUndefined(field) ? String(field) : field;
+  if (isNullOrUndefined(scope)) {
+    return this.items.filter(function (e) { return e.field === field; }).map(function (e) { return (map ? e.msg : e); });
+  }
+
+  return this.items.filter(function (e) { return e.field === field && e.scope === scope; })
+    .map(function (e) { return (map ? e.msg : e); });
+};
+/**
+ * Gets the internal array length.
+ */
+ErrorBag.prototype.count = function count () {
+  return this.items.length;
+};
+
+/**
+ * Finds and fetches the first error message for the specified field id.
+ */
+ErrorBag.prototype.firstById = function firstById (id) {
+  var error = find(this.items, function (i) { return i.id === id; });
+
+  return error ? error.msg : null;
+};
+
+/**
+ * Gets the first error message for a specific field.
+ */
+ErrorBag.prototype.first = function first (field, scope) {
+    var this$1 = this;
+    if ( scope === void 0 ) scope = null;
+
+  field = !isNullOrUndefined(field) ? String(field) : field;
+  var selector = this._selector(field);
+  var scoped = this._scope(field);
+
+  if (scoped) {
+    var result = this.first(scoped.name, scoped.scope);
+    // if such result exist, return it. otherwise it could be a field.
+    // with dot in its name.
+    if (result) {
+      return result;
+    }
+  }
+
+  if (selector) {
+    return this.firstByRule(selector.name, selector.rule, scope);
+  }
+
+  for (var i = 0; i < this.items.length; ++i) {
+    if (this$1.items[i].field === field && (this$1.items[i].scope === scope)) {
+      return this$1.items[i].msg;
+    }
+  }
+
+  return null;
+};
+
+/**
+ * Returns the first error rule for the specified field
+ */
+ErrorBag.prototype.firstRule = function firstRule (field, scope) {
+  var errors = this.collect(field, scope, false);
+
+  return (errors.length && errors[0].rule) || null;
+};
+
+/**
+ * Checks if the internal array has at least one error for the specified field.
+ */
+ErrorBag.prototype.has = function has (field, scope) {
+    if ( scope === void 0 ) scope = null;
+
+  return !!this.first(field, scope);
+};
+
+/**
+ * Gets the first error message for a specific field and a rule.
+ */
+ErrorBag.prototype.firstByRule = function firstByRule (name, rule, scope) {
+    if ( scope === void 0 ) scope = null;
+
+  var error = this.collect(name, scope, false).filter(function (e) { return e.rule === rule; })[0];
+
+  return (error && error.msg) || null;
+};
+
+/**
+ * Gets the first error message for a specific field that not match the rule.
+ */
+ErrorBag.prototype.firstNot = function firstNot (name, rule, scope) {
+    if ( rule === void 0 ) rule = 'required';
+    if ( scope === void 0 ) scope = null;
+
+  var error = this.collect(name, scope, false).filter(function (e) { return e.rule !== rule; })[0];
+
+  return (error && error.msg) || null;
+};
+
+/**
+ * Removes errors by matching against the id.
+ */
+ErrorBag.prototype.removeById = function removeById (id) {
+    var this$1 = this;
+
+  for (var i = 0; i < this.items.length; ++i) {
+    if (this$1.items[i].id === id) {
+      this$1.items.splice(i, 1);
+      --i;
+    }
+  }
+};
+
+/**
+ * Removes all error messages associated with a specific field.
+ */
+ErrorBag.prototype.remove = function remove (field, scope, id) {
+    var this$1 = this;
+
+  field = !isNullOrUndefined(field) ? String(field) : field;
+  var removeCondition = function (e) {
+    if (e.id && id) {
+      return e.id === id;
+    }
+
+    if (!isNullOrUndefined(scope)) {
+      return e.field === field && e.scope === scope;
+    }
+
+    return e.field === field && e.scope === null;
   };
+
+  for (var i = 0; i < this.items.length; ++i) {
+    if (removeCondition(this$1.items[i])) {
+      this$1.items.splice(i, 1);
+      --i;
+    }
+  }
+};
+
+/**
+ * Get the field attributes if there's a rule selector.
+ */
+ErrorBag.prototype._selector = function _selector (field) {
+  if (field.indexOf(':') > -1) {
+    var ref = field.split(':');
+      var name = ref[0];
+      var rule = ref[1];
+
+    return { name: name, rule: rule };
+  }
+
+  return null;
+};
+
+/**
+ * Get the field scope if specified using dot notation.
+ */
+ErrorBag.prototype._scope = function _scope (field) {
+  if (field.indexOf('.') > -1) {
+    var ref = field.split('.');
+      var scope = ref[0];
+      var name = ref.slice(1);
+
+    return { name: name.join('.'), scope: scope };
+  }
+
+  return null;
 };
 
 // 
@@ -22603,13 +22723,13 @@ var Dictionary = function Dictionary (dictionary) {
   this.merge(dictionary);
 };
 
-var prototypeAccessors = { locale: { configurable: true } };
+var prototypeAccessors$2 = { locale: {} };
 
-prototypeAccessors.locale.get = function () {
+prototypeAccessors$2.locale.get = function () {
   return LOCALE;
 };
 
-prototypeAccessors.locale.set = function (value) {
+prototypeAccessors$2.locale.set = function (value) {
   LOCALE = value || 'en';
 };
 
@@ -22721,7 +22841,7 @@ Dictionary.prototype.setAttribute = function setAttribute (locale, key, attribut
   this.container[locale].attributes[key] = attribute;
 };
 
-Object.defineProperties( Dictionary.prototype, prototypeAccessors );
+Object.defineProperties( Dictionary.prototype, prototypeAccessors$2 );
 
 // 
 
@@ -22743,24 +22863,15 @@ var normalizeValue = function (value) {
 
 var normalizeFormat = function (locale) {
   // normalize messages
-  var dictionary = {};
-  if (locale.messages) {
-    dictionary.messages = normalizeValue(locale.messages);
-  }
+  var messages = normalizeValue(locale.messages);
+  var custom = normalizeValue(locale.custom);
 
-  if (locale.custom) {
-    dictionary.custom = normalizeValue(locale.custom);
-  }
-
-  if (locale.attributes) {
-    dictionary.attributes = locale.attributes;
-  }
-
-  if (!isNullOrUndefined(locale.dateFormat)) {
-    dictionary.dateFormat = locale.dateFormat;
-  }
-
-  return dictionary;
+  return {
+    messages: messages,
+    custom: custom,
+    attributes: locale.attributes,
+    dateFormat: locale.dateFormat
+  };
 };
 
 var I18nDictionary = function I18nDictionary (i18n, rootKey) {
@@ -22768,13 +22879,13 @@ var I18nDictionary = function I18nDictionary (i18n, rootKey) {
   this.rootKey = rootKey;
 };
 
-var prototypeAccessors$1 = { locale: { configurable: true } };
+var prototypeAccessors$3 = { locale: {} };
 
-prototypeAccessors$1.locale.get = function () {
+prototypeAccessors$3.locale.get = function () {
   return this.i18n.locale;
 };
 
-prototypeAccessors$1.locale.set = function (value) {
+prototypeAccessors$3.locale.set = function (value) {
   warn('Cannot set locale from the validator when using vue-i18n, use i18n.locale setter instead');
 };
 
@@ -22819,14 +22930,13 @@ I18nDictionary.prototype.merge = function merge$1 (dictionary) {
     var this$1 = this;
 
   Object.keys(dictionary).forEach(function (localeKey) {
-      var obj;
-
     // i18n doesn't deep merge
     // first clone the existing locale (avoid mutations to locale)
     var clone = merge({}, getPath((localeKey + "." + (this$1.rootKey)), this$1.i18n.messages, {}));
     // Merge cloned locale with new one
     var locale = merge(clone, normalizeFormat(dictionary[localeKey]));
     this$1.i18n.mergeLocaleMessage(localeKey, ( obj = {}, obj[this$1.rootKey] = locale, obj ));
+      var obj;
     if (locale.dateFormat) {
       this$1.i18n.setDateTimeFormat(localeKey, locale.dateFormat);
     }
@@ -22834,22 +22944,22 @@ I18nDictionary.prototype.merge = function merge$1 (dictionary) {
 };
 
 I18nDictionary.prototype.setMessage = function setMessage (locale, key, value) {
-    var obj, obj$1;
-
   this.merge(( obj$1 = {}, obj$1[locale] = {
       messages: ( obj = {}, obj[key] = value, obj )
     }, obj$1 ));
+    var obj;
+    var obj$1;
 };
 
 I18nDictionary.prototype.setAttribute = function setAttribute (locale, key, value) {
-    var obj, obj$1;
-
   this.merge(( obj$1 = {}, obj$1[locale] = {
       attributes: ( obj = {}, obj[key] = value, obj )
     }, obj$1 ));
+    var obj;
+    var obj$1;
 };
 
-Object.defineProperties( I18nDictionary.prototype, prototypeAccessors$1 );
+Object.defineProperties( I18nDictionary.prototype, prototypeAccessors$3 );
 
 // 
 
@@ -22884,13 +22994,13 @@ var dependencies = {
 
 var Config = function Config () {};
 
-var staticAccessors = { default: { configurable: true },current: { configurable: true } };
+var staticAccessors$1 = { default: {},current: {} };
 
-staticAccessors.default.get = function () {
+staticAccessors$1.default.get = function () {
   return defaultConfig;
 };
 
-staticAccessors.current.get = function () {
+staticAccessors$1.current.get = function () {
   return currentConfig;
 };
 
@@ -22924,446 +23034,43 @@ Config.resolve = function resolve (context) {
   return assign({}, Config.current, selfConfig);
 };
 
-Object.defineProperties( Config, staticAccessors );
-
-// 
-
-var ErrorBag = function ErrorBag (errorBag, id) {
-  if ( errorBag === void 0 ) errorBag = null;
-  if ( id === void 0 ) id = null;
-
-  this.vmId = id || null;
-  // make this bag a mirror of the provided one, sharing the same items reference.
-  if (errorBag && errorBag instanceof ErrorBag) {
-    this.items = errorBag.items;
-  } else {
-    this.items = [];
-  }
-};
-
-ErrorBag.prototype[typeof Symbol === 'function' ? Symbol.iterator : '@@iterator'] = function () {
-    var this$1 = this;
-
-  var index = 0;
-  return {
-    next: function () {
-      return { value: this$1.items[index++], done: index > this$1.items.length };
-    }
-  };
-};
-
-/**
- * Adds an error to the internal array.
- */
-ErrorBag.prototype.add = function add (error) {
-    var ref;
-
-  (ref = this.items).push.apply(
-    ref, this._normalizeError(error)
-  );
-};
-
-/**
- * Normalizes passed errors to an error array.
- */
-ErrorBag.prototype._normalizeError = function _normalizeError (error) {
-    var this$1 = this;
-
-  if (Array.isArray(error)) {
-    return error.map(function (e) {
-      e.scope = !isNullOrUndefined(e.scope) ? e.scope : null;
-      e.vmId = !isNullOrUndefined(e.vmId) ? e.vmId : (this$1.vmId || null);
-
-      return e;
-    });
-  }
-
-  error.scope = !isNullOrUndefined(error.scope) ? error.scope : null;
-  error.vmId = !isNullOrUndefined(error.vmId) ? error.vmId : (this.vmId || null);
-
-  return [error];
-};
-
-/**
- * Regenrates error messages if they have a generator function.
- */
-ErrorBag.prototype.regenerate = function regenerate () {
-  this.items.forEach(function (i) {
-    i.msg = isCallable(i.regenerate) ? i.regenerate() : i.msg;
-  });
-};
-
-/**
- * Updates a field error with the new field scope.
- */
-ErrorBag.prototype.update = function update (id, error) {
-  var item = find(this.items, function (i) { return i.id === id; });
-  if (!item) {
-    return;
-  }
-
-  var idx = this.items.indexOf(item);
-  this.items.splice(idx, 1);
-  item.scope = error.scope;
-  this.items.push(item);
-};
-
-/**
- * Gets all error messages from the internal array.
- */
-ErrorBag.prototype.all = function all (scope) {
-    var this$1 = this;
-
-  var filterFn = function (item) {
-    var matchesScope = true;
-    if (!isNullOrUndefined(scope)) {
-      matchesScope = item.scope === scope;
-    }
-
-    if (!isNullOrUndefined(this$1.vmId)) {
-      matchesScope = item.vmId === this$1.vmId;
-    }
-
-    return matchesScope;
-  };
-
-  return this.items.filter(filterFn).map(function (e) { return e.msg; });
-};
-
-/**
- * Checks if there are any errors in the internal array.
- */
-ErrorBag.prototype.any = function any (scope) {
-    var this$1 = this;
-
-  var filterFn = function (item) {
-    var matchesScope = true;
-    if (!isNullOrUndefined(scope)) {
-      matchesScope = item.scope === scope;
-    }
-
-    if (!isNullOrUndefined(this$1.vmId)) {
-      matchesScope = item.vmId === this$1.vmId;
-    }
-
-    return matchesScope;
-  };
-
-  return !!this.items.filter(filterFn).length;
-};
-
-/**
- * Removes all items from the internal array.
- */
-ErrorBag.prototype.clear = function clear (scope) {
-    var this$1 = this;
-
-  var matchesVM = isNullOrUndefined(this.id) ? function () { return true; } : function (i) { return i.vmId === this$1.vmId; };
-  if (isNullOrUndefined(scope)) {
-    scope = null;
-  }
-
-  for (var i = 0; i < this.items.length; ++i) {
-    if (matchesVM(this$1.items[i]) && this$1.items[i].scope === scope) {
-      this$1.items.splice(i, 1);
-      --i;
-    }
-  }
-};
-
-/**
- * Collects errors into groups or for a specific field.
- */
-ErrorBag.prototype.collect = function collect (field, scope, map) {
-    if ( map === void 0 ) map = true;
-
-  var groupErrors = function (items) {
-    var fieldsCount = 0;
-    var errors = items.reduce(function (collection, error) {
-      if (!collection[error.field]) {
-        collection[error.field] = [];
-        fieldsCount++;
-      }
-
-      collection[error.field].push(map ? error.msg : error);
-
-      return collection;
-    }, {});
-
-    // reduce the collection to be a single array.
-    if (fieldsCount <= 1) {
-      return values(errors)[0] || [];
-    }
-
-    return errors;
-  };
-
-  if (isNullOrUndefined(field)) {
-    return groupErrors(this.items);
-  }
-
-  var selector = isNullOrUndefined(scope) ? String(field) : (scope + "." + field);
-  var ref = this._makeCandidateFilters(selector);
-    var isPrimary = ref.isPrimary;
-    var isAlt = ref.isAlt;
-
-  var collected = this.items.reduce(function (prev, curr) {
-    if (isPrimary(curr)) {
-      prev.primary.push(curr);
-    }
-
-    if (isAlt(curr)) {
-      prev.alt.push(curr);
-    }
-
-    return prev;
-  }, { primary: [], alt: [] });
-
-  collected = collected.primary.length ? collected.primary : collected.alt;
-
-  return groupErrors(collected);
-};
-
-/**
- * Gets the internal array length.
- */
-ErrorBag.prototype.count = function count () {
-    var this$1 = this;
-
-  if (this.vmId) {
-    return this.items.filter(function (e) { return e.vmId === this$1.vmId; }).length;
-  }
-
-  return this.items.length;
-};
-
-/**
- * Finds and fetches the first error message for the specified field id.
- */
-ErrorBag.prototype.firstById = function firstById (id) {
-  var error = find(this.items, function (i) { return i.id === id; });
-
-  return error ? error.msg : undefined;
-};
-
-/**
- * Gets the first error message for a specific field.
- */
-ErrorBag.prototype.first = function first (field, scope) {
-    if ( scope === void 0 ) scope = null;
-
-  var selector = isNullOrUndefined(scope) ? field : (scope + "." + field);
-  var match = this._match(selector);
-
-  return match && match.msg;
-};
-
-/**
- * Returns the first error rule for the specified field
- */
-ErrorBag.prototype.firstRule = function firstRule (field, scope) {
-  var errors = this.collect(field, scope, false);
-
-  return (errors.length && errors[0].rule) || undefined;
-};
-
-/**
- * Checks if the internal array has at least one error for the specified field.
- */
-ErrorBag.prototype.has = function has (field, scope) {
-    if ( scope === void 0 ) scope = null;
-
-  return !!this.first(field, scope);
-};
-
-/**
- * Gets the first error message for a specific field and a rule.
- */
-ErrorBag.prototype.firstByRule = function firstByRule (name, rule, scope) {
-    if ( scope === void 0 ) scope = null;
-
-  var error = this.collect(name, scope, false).filter(function (e) { return e.rule === rule; })[0];
-
-  return (error && error.msg) || undefined;
-};
-
-/**
- * Gets the first error message for a specific field that not match the rule.
- */
-ErrorBag.prototype.firstNot = function firstNot (name, rule, scope) {
-    if ( rule === void 0 ) rule = 'required';
-    if ( scope === void 0 ) scope = null;
-
-  var error = this.collect(name, scope, false).filter(function (e) { return e.rule !== rule; })[0];
-
-  return (error && error.msg) || undefined;
-};
-
-/**
- * Removes errors by matching against the id or ids.
- */
-ErrorBag.prototype.removeById = function removeById (id) {
-    var this$1 = this;
-
-  var condition = function (item) { return item.id === id; };
-  if (Array.isArray(id)) {
-    condition = function (item) { return id.indexOf(item.id) !== -1; };
-  }
-
-  for (var i = 0; i < this.items.length; ++i) {
-    if (condition(this$1.items[i])) {
-      this$1.items.splice(i, 1);
-      --i;
-    }
-  }
-};
-
-/**
- * Removes all error messages associated with a specific field.
- */
-ErrorBag.prototype.remove = function remove (field, scope) {
-    var this$1 = this;
-
-  if (isNullOrUndefined(field)) {
-    return;
-  }
-
-  var selector = isNullOrUndefined(scope) ? String(field) : (scope + "." + field);
-  var ref = this._makeCandidateFilters(selector);
-    var isPrimary = ref.isPrimary;
-
-  for (var i = 0; i < this.items.length; ++i) {
-    if (isPrimary(this$1.items[i])) {
-      this$1.items.splice(i, 1);
-      --i;
-    }
-  }
-};
-
-ErrorBag.prototype._makeCandidateFilters = function _makeCandidateFilters (selector) {
-    var this$1 = this;
-
-  var matchesRule = function () { return true; };
-  var matchesScope = function () { return true; };
-  var matchesName = function () { return true; };
-  var matchesVM = function () { return true; };
-
-  var ref = parseSelector(selector);
-    var id = ref.id;
-    var rule = ref.rule;
-    var scope = ref.scope;
-    var name = ref.name;
-
-  if (rule) {
-    matchesRule = function (item) { return item.rule === rule; };
-  }
-
-  // match by id, can be combined with rule selection.
-  if (id) {
-    return {
-      isPrimary: function (item) { return matchesRule(item) && (function (item) { return id === item.id; }); },
-      isAlt: function () { return false; }
-    };
-  }
-
-  if (isNullOrUndefined(scope)) {
-    // if no scope specified, make sure the found error has no scope.
-    matchesScope = function (item) { return isNullOrUndefined(item.scope); };
-  } else {
-    matchesScope = function (item) { return item.scope === scope; };
-  }
-
-  if (!isNullOrUndefined(name) && name !== '*') {
-    matchesName = function (item) { return item.field === name; };
-  }
-
-  if (!isNullOrUndefined(this.vmId)) {
-    matchesVM = function (item) { return item.vmId === this$1.vmId; };
-  }
-
-  // matches the first candidate.
-  var isPrimary = function (item) {
-    return matchesVM(item) && matchesName(item) && matchesRule(item) && matchesScope(item);
-  };
-
-  // matches a second candidate, which is a field with a name containing the '.' character.
-  var isAlt = function (item) {
-    return matchesVM(item) && matchesRule(item) && item.field === (scope + "." + name);
-  };
-
-  return {
-    isPrimary: isPrimary,
-    isAlt: isAlt
-  };
-};
-
-ErrorBag.prototype._match = function _match (selector) {
-  if (isNullOrUndefined(selector)) {
-    return undefined;
-  }
-
-  var ref = this._makeCandidateFilters(selector);
-    var isPrimary = ref.isPrimary;
-    var isAlt = ref.isAlt;
-
-  return this.items.reduce(function (prev, item, idx, arr) {
-    var isLast = idx === arr.length - 1;
-    if (prev.primary) {
-      return isLast ? prev.primary : prev;
-    }
-
-    if (isPrimary(item)) {
-      prev.primary = item;
-    }
-
-    if (isAlt(item)) {
-      prev.alt = item;
-    }
-
-    // keep going.
-    if (!isLast) {
-      return prev;
-    }
-
-    return prev.primary || prev.alt;
-  }, {});
-};
+Object.defineProperties( Config, staticAccessors$1 );
 
 /**
  * Generates the options required to construct a field.
  */
-var Resolver = function Resolver () {};
+var Generator = function Generator () {};
 
-Resolver.generate = function generate (el, binding, vnode) {
-  var model = Resolver.resolveModel(binding, vnode);
+Generator.generate = function generate (el, binding, vnode) {
+  var model = Generator.resolveModel(binding, vnode);
   var options = Config.resolve(vnode.context);
 
   return {
-    name: Resolver.resolveName(el, vnode),
+    name: Generator.resolveName(el, vnode),
     el: el,
     listen: !binding.modifiers.disable,
-    scope: Resolver.resolveScope(el, binding, vnode),
-    vm: Resolver.makeVM(vnode.context),
+    scope: Generator.resolveScope(el, binding, vnode),
+    vm: Generator.makeVM(vnode.context),
     expression: binding.value,
-    component: vnode.componentInstance,
+    component: vnode.child,
     classes: options.classes,
     classNames: options.classNames,
-    getter: Resolver.resolveGetter(el, vnode, model),
-    events: Resolver.resolveEvents(el, vnode) || options.events,
+    getter: Generator.resolveGetter(el, vnode, model),
+    events: Generator.resolveEvents(el, vnode) || options.events,
     model: model,
-    delay: Resolver.resolveDelay(el, vnode, options),
-    rules: Resolver.resolveRules(el, binding, vnode),
-    immediate: !!binding.modifiers.initial || !!binding.modifiers.immediate,
+    delay: Generator.resolveDelay(el, vnode, options),
+    rules: Generator.resolveRules(el, binding),
+    initial: !!binding.modifiers.initial,
     validity: options.validity,
     aria: options.aria,
-    initialValue: Resolver.resolveInitialValue(vnode)
+    initialValue: Generator.resolveInitialValue(vnode)
   };
 };
 
-Resolver.getCtorConfig = function getCtorConfig (vnode) {
-  if (!vnode.componentInstance) { return null; }
+Generator.getCtorConfig = function getCtorConfig (vnode) {
+  if (!vnode.child) { return null; }
 
-  var config = getPath('componentInstance.$options.$_veeValidate', vnode);
+  var config = getPath('child.$options.$_veeValidate', vnode);
 
   return config;
 };
@@ -23371,29 +23078,26 @@ Resolver.getCtorConfig = function getCtorConfig (vnode) {
 /**
  * Resolves the rules defined on an element.
  */
-Resolver.resolveRules = function resolveRules (el, binding, vnode) {
-  var rules = '';
+Generator.resolveRules = function resolveRules (el, binding) {
   if (!binding.value && (!binding || !binding.expression)) {
-    rules = getDataAttribute(el, 'rules');
+    return getDataAttribute(el, 'rules');
   }
 
-  if (binding.value && ~['string', 'object'].indexOf(typeof binding.value.rules)) {
-    rules = binding.value.rules;
-  } else if (binding.value) {
-    rules = binding.value;
+  if (typeof binding.value === 'string') {
+    return binding.value;
   }
 
-  if (vnode.componentInstance) {
-    return rules;
+  if (~['string', 'object'].indexOf(typeof binding.value.rules)) {
+    return binding.value.rules;
   }
 
-  return fillRulesFromElement(el, rules);
+  return binding.value;
 };
 
 /**
  * @param {*} vnode
  */
-Resolver.resolveInitialValue = function resolveInitialValue (vnode) {
+Generator.resolveInitialValue = function resolveInitialValue (vnode) {
   var model = vnode.data.model || find(vnode.data.directives, function (d) { return d.name === 'model'; });
 
   return model && model.value;
@@ -23403,7 +23107,7 @@ Resolver.resolveInitialValue = function resolveInitialValue (vnode) {
  * Creates a non-circular partial VM instance from a Vue instance.
  * @param {*} vm
  */
-Resolver.makeVM = function makeVM (vm) {
+Generator.makeVM = function makeVM (vm) {
   return {
     get $el () {
       return vm.$el;
@@ -23426,23 +23130,15 @@ Resolver.makeVM = function makeVM (vm) {
  * @param {*} vnode
  * @param {Object} options
  */
-Resolver.resolveDelay = function resolveDelay (el, vnode, options) {
+Generator.resolveDelay = function resolveDelay (el, vnode, options) {
   var delay = getDataAttribute(el, 'delay');
   var globalDelay = (options && 'delay' in options) ? options.delay : 0;
 
-  if (!delay && vnode.componentInstance && vnode.componentInstance.$attrs) {
-    delay = vnode.componentInstance.$attrs['data-vv-delay'];
+  if (!delay && vnode.child && vnode.child.$attrs) {
+    delay = vnode.child.$attrs['data-vv-delay'];
   }
 
-  if (!isObject(globalDelay)) {
-    return deepParseInt(delay || globalDelay);
-  }
-
-  if (!isNullOrUndefined(delay)) {
-    globalDelay.input = delay;
-  }
-
-  return deepParseInt(globalDelay);
+  return (delay) ? { local: { input: parseInt(delay) }, global: deepParseInt(globalDelay) } : { global: deepParseInt(globalDelay) };
 };
 
 /**
@@ -23450,28 +23146,18 @@ Resolver.resolveDelay = function resolveDelay (el, vnode, options) {
  * @param {*} el
  * @param {*} vnode
  */
-Resolver.resolveEvents = function resolveEvents (el, vnode) {
-  // resolve it from the root element.
+Generator.resolveEvents = function resolveEvents (el, vnode) {
   var events = getDataAttribute(el, 'validate-on');
 
-  // resolve from data-vv-validate-on if its a vue component.
-  if (!events && vnode.componentInstance && vnode.componentInstance.$attrs) {
-    events = vnode.componentInstance.$attrs['data-vv-validate-on'];
+  if (!events && vnode.child && vnode.child.$attrs) {
+    events = vnode.child.$attrs['data-vv-validate-on'];
   }
 
-  // resolve it from $_veeValidate options.
-  if (!events && vnode.componentInstance) {
-    var config = Resolver.getCtorConfig(vnode);
+  if (!events && vnode.child) {
+    var config = Generator.getCtorConfig(vnode);
     events = config && config.events;
   }
 
-  // resolve the model event if its configured for custom components.
-  if (!events && vnode.componentInstance) {
-    var ref = vnode.componentInstance.$options.model || { event: 'input' };
-      var event = ref.event;
-    events = event;
-  }
-
   return events;
 };
 
@@ -23480,12 +23166,16 @@ Resolver.resolveEvents = function resolveEvents (el, vnode) {
  * @param {*} el
  * @param {*} binding
  */
-Resolver.resolveScope = function resolveScope (el, binding, vnode) {
+Generator.resolveScope = function resolveScope (el, binding, vnode) {
     if ( vnode === void 0 ) vnode = {};
 
   var scope = null;
-  if (vnode.componentInstance && isNullOrUndefined(scope)) {
-    scope = vnode.componentInstance.$attrs && vnode.componentInstance.$attrs['data-vv-scope'];
+  if (isObject(binding.value)) {
+    scope = binding.value.scope;
+  }
+
+  if (vnode.child && isNullOrUndefined(scope)) {
+    scope = vnode.child.$attrs && vnode.child.$attrs['data-vv-scope'];
   }
 
   return !isNullOrUndefined(scope) ? scope : getScope(el);
@@ -23497,9 +23187,13 @@ Resolver.resolveScope = function resolveScope (el, binding, vnode) {
  *
  * @return {Object}
  */
-Resolver.resolveModel = function resolveModel (binding, vnode) {
+Generator.resolveModel = function resolveModel (binding, vnode) {
   if (binding.arg) {
-    return { expression: binding.arg };
+    return binding.arg;
+  }
+
+  if (isObject(binding.value) && binding.value.arg) {
+    return binding.value.arg;
   }
 
   var model = vnode.data.model || find(vnode.data.directives, function (d) { return d.name === 'model'; });
@@ -23507,41 +23201,39 @@ Resolver.resolveModel = function resolveModel (binding, vnode) {
     return null;
   }
 
-  // https://github.com/vuejs/vue/blob/dev/src/core/util/lang.js#L26
-  var watchable = !/[^\w.$]/.test(model.expression) && hasPath(model.expression, vnode.context);
-  var lazy = !!(model.modifiers && model.modifiers.lazy);
+  var watchable = /^[a-z_]+[0-9]*(\w*\.[a-z_]\w*)*$/i.test(model.expression) && hasPath(model.expression, vnode.context);
 
   if (!watchable) {
-    return { expression: null, lazy: lazy };
+    return null;
   }
 
-  return { expression: model.expression, lazy: lazy };
+  return model.expression;
 };
 
 /**
- * Resolves the field name to trigger validations.
- * @return {String} The field name.
- */
-Resolver.resolveName = function resolveName (el, vnode) {
+   * Resolves the field name to trigger validations.
+   * @return {String} The field name.
+   */
+Generator.resolveName = function resolveName (el, vnode) {
   var name = getDataAttribute(el, 'name');
 
-  if (!name && !vnode.componentInstance) {
+  if (!name && !vnode.child) {
     return el.name;
   }
 
-  if (!name && vnode.componentInstance && vnode.componentInstance.$attrs) {
-    name = vnode.componentInstance.$attrs['data-vv-name'] || vnode.componentInstance.$attrs['name'];
+  if (!name && vnode.child && vnode.child.$attrs) {
+    name = vnode.child.$attrs['data-vv-name'] || vnode.child.$attrs['name'];
   }
 
-  if (!name && vnode.componentInstance) {
-    var config = Resolver.getCtorConfig(vnode);
+  if (!name && vnode.child) {
+    var config = Generator.getCtorConfig(vnode);
     if (config && isCallable(config.name)) {
-      var boundGetter = config.name.bind(vnode.componentInstance);
+      var boundGetter = config.name.bind(vnode.child);
 
       return boundGetter();
     }
 
-    return vnode.componentInstance.name;
+    return vnode.child.name;
   }
 
   return name;
@@ -23550,35 +23242,32 @@ Resolver.resolveName = function resolveName (el, vnode) {
 /**
  * Returns a value getter input type.
  */
-Resolver.resolveGetter = function resolveGetter (el, vnode, model) {
-  if (model && model.expression) {
+Generator.resolveGetter = function resolveGetter (el, vnode, model) {
+  if (model) {
     return function () {
-      return getPath(model.expression, vnode.context);
+      return getPath(model, vnode.context);
     };
   }
 
-  if (vnode.componentInstance) {
-    var path = getDataAttribute(el, 'value-path') || (vnode.componentInstance.$attrs && vnode.componentInstance.$attrs['data-vv-value-path']);
+  if (vnode.child) {
+    var path = getDataAttribute(el, 'value-path') || (vnode.child.$attrs && vnode.child.$attrs['data-vv-value-path']);
     if (path) {
       return function () {
-        return getPath(path, vnode.componentInstance);
+        return getPath(path, vnode.child);
       };
     }
 
-    var config = Resolver.getCtorConfig(vnode);
+    var config = Generator.getCtorConfig(vnode);
     if (config && isCallable(config.value)) {
-      var boundGetter = config.value.bind(vnode.componentInstance);
+      var boundGetter = config.value.bind(vnode.child);
 
       return function () {
         return boundGetter();
       };
     }
 
-    var ref = vnode.componentInstance.$options.model || { prop: 'value' };
-      var prop = ref.prop;
-
     return function () {
-      return vnode.componentInstance[prop];
+      return vnode.child.value;
     };
   }
 
@@ -23611,699 +23300,9 @@ Resolver.resolveGetter = function resolveGetter (el, vnode, model) {
 
 // 
 
-var RULES = {};
-var STRICT_MODE = true;
-
-var Validator = function Validator (validations, options) {
-  if ( options === void 0 ) options = { fastExit: true };
-
-  this.strict = STRICT_MODE;
-  this.errors = new ErrorBag();
-  this.fields = new FieldBag();
-  this._createFields(validations);
-  this.paused = false;
-  this.fastExit = options.fastExit || false;
-};
-
-var prototypeAccessors$2 = { rules: { configurable: true },flags: { configurable: true },dictionary: { configurable: true },_vm: { configurable: true },locale: { configurable: true } };
-var staticAccessors$1 = { rules: { configurable: true },dictionary: { configurable: true },locale: { configurable: true } };
-
-staticAccessors$1.rules.get = function () {
-  return RULES;
-};
-
-prototypeAccessors$2.rules.get = function () {
-  return RULES;
-};
-
-prototypeAccessors$2.flags.get = function () {
-  return this.fields.items.reduce(function (acc, field) {
-      var obj;
-
-    if (field.scope) {
-      acc[("$" + (field.scope))] = ( obj = {}, obj[field.name] = field.flags, obj );
-
-      return acc;
-    }
-
-    acc[field.name] = field.flags;
-
-    return acc;
-  }, {});
-};
-
-/**
- * Getter for the dictionary.
- */
-prototypeAccessors$2.dictionary.get = function () {
-  return Config.dependency('dictionary');
-};
-
-staticAccessors$1.dictionary.get = function () {
-  return Config.dependency('dictionary');
-};
-
-prototypeAccessors$2._vm.get = function () {
-  return Config.dependency('vm');
-};
-
-/**
- * Getter for the current locale.
- */
-prototypeAccessors$2.locale.get = function () {
-  return Validator.locale;
-};
-
-/**
- * Setter for the validator locale.
- */
-prototypeAccessors$2.locale.set = function (value) {
-  Validator.locale = value;
-};
-
-staticAccessors$1.locale.get = function () {
-  return this.dictionary.locale;
-};
-
-/**
- * Setter for the validator locale.
- */
-staticAccessors$1.locale.set = function (value) {
-  var hasChanged = value !== Validator.dictionary.locale;
-  Validator.dictionary.locale = value;
-  if (hasChanged && Config.dependency('vm')) {
-    Config.dependency('vm').$emit('localeChanged');
-  }
-};
-
-/**
- * Static constructor.
- */
-Validator.create = function create (validations, options) {
-  return new Validator(validations, options);
-};
-
-/**
- * Adds a custom validator to the list of validation rules.
- */
-Validator.extend = function extend (name, validator, options) {
-    if ( options === void 0 ) options = {};
-
-  Validator._guardExtend(name, validator);
-  Validator._merge(name, {
-    validator: validator,
-    options: assign({}, { hasTarget: false, immediate: true }, options || {})
-  });
-};
-
-/**
- * Removes a rule from the list of validators.
- */
-Validator.remove = function remove (name) {
-  delete RULES[name];
-};
-
-/**
- * Checks if the given rule name is a rule that targets other fields.
- */
-Validator.isTargetRule = function isTargetRule (name) {
-  return !!RULES[name] && RULES[name].options.hasTarget;
-};
-
-/**
- * Sets the operating mode for all newly created validators.
- * strictMode = true: Values without a rule are invalid and cause failure.
- * strictMode = false: Values without a rule are valid and are skipped.
- */
-Validator.setStrictMode = function setStrictMode (strictMode) {
-    if ( strictMode === void 0 ) strictMode = true;
-
-  STRICT_MODE = strictMode;
-};
-
-/**
- * Adds and sets the current locale for the validator.
- */
-Validator.prototype.localize = function localize (lang, dictionary) {
-  Validator.localize(lang, dictionary);
-};
-
-/**
- * Adds and sets the current locale for the validator.
- */
-Validator.localize = function localize (lang, dictionary) {
-    var obj;
-
-  if (isObject(lang)) {
-    Validator.dictionary.merge(lang);
-    return;
-  }
-
-  // merge the dictionary.
-  if (dictionary) {
-    var locale = lang || dictionary.name;
-    dictionary = assign({}, dictionary);
-    Validator.dictionary.merge(( obj = {}, obj[locale] = dictionary, obj ));
-  }
-
-  if (lang) {
-    // set the locale.
-    Validator.locale = lang;
-  }
-};
-
-/**
- * Registers a field to be validated.
- */
-Validator.prototype.attach = function attach (fieldOpts) {
-  // fixes initial value detection with v-model and select elements.
-  var value = fieldOpts.initialValue;
-  var field = new Field(fieldOpts);
-  this.fields.push(field);
-
-  // validate the field initially
-  if (field.immediate) {
-    this.validate(("#" + (field.id)), value || field.value);
-  } else {
-    this._validate(field, value || field.value, { initial: true }).then(function (result) {
-      field.flags.valid = result.valid;
-      field.flags.invalid = !result.valid;
-    });
-  }
-
-  return field;
-};
-
-/**
- * Sets the flags on a field.
- */
-Validator.prototype.flag = function flag (name, flags, uid) {
-    if ( uid === void 0 ) uid = null;
-
-  var field = this._resolveField(name, undefined, uid);
-  if (!field || !flags) {
-    return;
-  }
-
-  field.setFlags(flags);
-};
-
-/**
- * Removes a field from the validator.
- */
-Validator.prototype.detach = function detach (name, scope, uid) {
-  var field = isCallable(name.destroy) ? name : this._resolveField(name, scope, uid);
-  if (!field) { return; }
-
-  field.destroy();
-  this.errors.remove(field.name, field.scope, field.id);
-  this.fields.remove(field);
-};
-
-/**
- * Adds a custom validator to the list of validation rules.
- */
-Validator.prototype.extend = function extend (name, validator, options) {
-    if ( options === void 0 ) options = {};
-
-  Validator.extend(name, validator, options);
-};
-
-Validator.prototype.reset = function reset (matcher) {
-    var this$1 = this;
-
-  // two ticks
-  return this._vm.$nextTick().then(function () {
-    return this$1._vm.$nextTick();
-  }).then(function () {
-    this$1.fields.filter(matcher).forEach(function (field) {
-      field.reset(); // reset field flags.
-      this$1.errors.remove(field.name, field.scope, field.id);
-    });
-  });
-};
-
-/**
- * Updates a field, updating both errors and flags.
- */
-Validator.prototype.update = function update (id, ref) {
-    var scope = ref.scope;
-
-  var field = this._resolveField(("#" + id));
-  if (!field) { return; }
-
-  // remove old scope.
-  this.errors.update(id, { scope: scope });
-};
-
-/**
- * Removes a rule from the list of validators.
- */
-Validator.prototype.remove = function remove (name) {
-  Validator.remove(name);
-};
-
-/**
- * Validates a value against a registered field validations.
- */
-Validator.prototype.validate = function validate (fieldDescriptor, value, ref) {
-    var this$1 = this;
-    if ( ref === void 0 ) ref = {};
-    var silent = ref.silent;
-    var vmId = ref.vmId;
-
-  if (this.paused) { return Promise.resolve(true); }
-
-  // overload to validate all.
-  if (isNullOrUndefined(fieldDescriptor)) {
-    return this.validateScopes({ silent: silent, vmId: vmId });
-  }
-
-  // overload to validate scope-less fields.
-  if (fieldDescriptor === '*') {
-    return this.validateAll(undefined, { silent: silent, vmId: vmId });
-  }
-
-  // if scope validation was requested.
-  if (/^(.+)\.\*$/.test(fieldDescriptor)) {
-    var matched = fieldDescriptor.match(/^(.+)\.\*$/)[1];
-    return this.validateAll(matched);
-  }
-
-  var field = this._resolveField(fieldDescriptor);
-  if (!field) {
-    return this._handleFieldNotFound(name);
-  }
-
-  if (!silent) { field.flags.pending = true; }
-  if (value === undefined) {
-    value = field.value;
-  }
-
-  return this._validate(field, value).then(function (result) {
-    if (!silent) {
-      this$1._handleValidationResults([result]);
-    }
-
-    return result.valid;
-  });
-};
-
-/**
- * Pauses the validator.
- */
-Validator.prototype.pause = function pause () {
-  this.paused = true;
-
-  return this;
-};
-
-/**
- * Resumes the validator.
- */
-Validator.prototype.resume = function resume () {
-  this.paused = false;
-
-  return this;
-};
-
-/**
- * Validates each value against the corresponding field validations.
- */
-Validator.prototype.validateAll = function validateAll (values$$1, ref) {
-    var this$1 = this;
-    if ( ref === void 0 ) ref = {};
-    var silent = ref.silent;
-    var vmId = ref.vmId;
-
-  if (this.paused) { return Promise.resolve(true); }
-
-  var matcher = null;
-  var providedValues = false;
-
-  if (typeof values$$1 === 'string') {
-    matcher = { scope: values$$1, vmId: vmId };
-  } else if (isObject(values$$1)) {
-    matcher = Object.keys(values$$1).map(function (key) {
-      return { name: key, vmId: vmId, scope: null };
-    });
-    providedValues = true;
-  } else if (Array.isArray(values$$1)) {
-    matcher = values$$1.map(function (key) {
-      return { name: key, vmId: vmId };
-    });
-  } else {
-    matcher = { scope: null, vmId: vmId };
-  }
-
-  return Promise.all(
-    this.fields.filter(matcher).map(function (field) { return this$1._validate(field, providedValues ? values$$1[field.name] : field.value); })
-  ).then(function (results) {
-    if (!silent) {
-      this$1._handleValidationResults(results);
-    }
-
-    return results.every(function (t) { return t.valid; });
-  });
-};
-
-/**
- * Validates all scopes.
- */
-Validator.prototype.validateScopes = function validateScopes (ref) {
-    var this$1 = this;
-    if ( ref === void 0 ) ref = {};
-    var silent = ref.silent;
-    var vmId = ref.vmId;
-
-  if (this.paused) { return Promise.resolve(true); }
-
-  return Promise.all(
-    this.fields.filter({ vmId: vmId }).map(function (field) { return this$1._validate(field, field.value); })
-  ).then(function (results) {
-    if (!silent) {
-      this$1._handleValidationResults(results);
-    }
-
-    return results.every(function (t) { return t.valid; });
-  });
-};
-
-/**
- * Perform cleanup.
- */
-Validator.prototype.destroy = function destroy () {
-  this._vm.$off('localeChanged');
-};
-
-/**
- * Creates the fields to be validated.
- */
-Validator.prototype._createFields = function _createFields (validations) {
-    var this$1 = this;
-
-  if (!validations) { return; }
-
-  Object.keys(validations).forEach(function (field) {
-    var options = assign({}, { name: field, rules: validations[field] });
-    this$1.attach(options);
-  });
-};
-
-/**
- * Date rules need the existence of a format, so date_format must be supplied.
- */
-Validator.prototype._getDateFormat = function _getDateFormat (validations) {
-  var format = null;
-  if (validations.date_format && Array.isArray(validations.date_format)) {
-    format = validations.date_format[0];
-  }
-
-  return format || this.dictionary.getDateFormat(this.locale);
-};
-
-/**
- * Formats an error message for field and a rule.
- */
-Validator.prototype._formatErrorMessage = function _formatErrorMessage (field, rule, data, targetName) {
-    if ( data === void 0 ) data = {};
-    if ( targetName === void 0 ) targetName = null;
-
-  var name = this._getFieldDisplayName(field);
-  var params = this._getLocalizedParams(rule, targetName);
-
-  return this.dictionary.getFieldMessage(this.locale, field.name, rule.name, [name, params, data]);
-};
-
-/**
- * Translates the parameters passed to the rule (mainly for target fields).
- */
-Validator.prototype._getLocalizedParams = function _getLocalizedParams (rule, targetName) {
-    if ( targetName === void 0 ) targetName = null;
-
-  if (rule.options.hasTarget && rule.params && rule.params[0]) {
-    var localizedName = targetName || this.dictionary.getAttribute(this.locale, rule.params[0], rule.params[0]);
-    return [localizedName].concat(rule.params.slice(1));
-  }
-
-  return rule.params;
-};
-
-/**
- * Resolves an appropriate display name, first checking 'data-as' or the registered 'prettyName'
- */
-Validator.prototype._getFieldDisplayName = function _getFieldDisplayName (field) {
-  return field.alias || this.dictionary.getAttribute(this.locale, field.name, field.name);
-};
-
-/**
- * Tests a single input value against a rule.
- */
-Validator.prototype._test = function _test (field, value, rule) {
-    var this$1 = this;
-
-  var validator = RULES[rule.name] ? RULES[rule.name].validate : null;
-  var params = Array.isArray(rule.params) ? toArray(rule.params) : [];
-  var targetName = null;
-  if (!validator || typeof validator !== 'function') {
-    return Promise.reject(createError(("No such validator '" + (rule.name) + "' exists.")));
-  }
-
-  // has field dependencies.
-  if (rule.options.hasTarget) {
-    var target = find(field.dependencies, function (d) { return d.name === rule.name; });
-    if (target) {
-      targetName = target.field.alias;
-      params = [target.field.value].concat(params.slice(1));
-    }
-  } else if (rule.name === 'required' && field.rejectsFalse) {
-    // invalidate false if no args were specified and the field rejects false by default.
-    params = params.length ? params : [true];
-  }
-
-  if (rule.options.isDate) {
-    var dateFormat = this._getDateFormat(field.rules);
-    if (rule.name !== 'date_format') {
-      params.push(dateFormat);
-    }
-  }
-
-  var result = validator(value, params);
-
-  // If it is a promise.
-  if (isCallable(result.then)) {
-    return result.then(function (values$$1) {
-      var allValid = true;
-      var data = {};
-      if (Array.isArray(values$$1)) {
-        allValid = values$$1.every(function (t) { return (isObject(t) ? t.valid : t); });
-      } else { // Is a single object/boolean.
-        allValid = isObject(values$$1) ? values$$1.valid : values$$1;
-        data = values$$1.data;
-      }
-
-      return {
-        valid: allValid,
-        errors: allValid ? [] : [this$1._createFieldError(field, rule, data, targetName)]
-      };
-    });
-  }
-
-  if (!isObject(result)) {
-    result = { valid: result, data: {} };
-  }
-
-  return {
-    valid: result.valid,
-    errors: result.valid ? [] : [this._createFieldError(field, rule, result.data, targetName)]
-  };
-};
-
-/**
- * Merges a validator object into the RULES and Messages.
- */
-Validator._merge = function _merge (name, ref) {
-    var validator = ref.validator;
-    var options = ref.options;
-
-  var validate = isCallable(validator) ? validator : validator.validate;
-  if (validator.getMessage) {
-    Validator.dictionary.setMessage(Validator.locale, name, validator.getMessage);
-  }
-
-  RULES[name] = {
-    validate: validate,
-    options: options
-  };
-};
-
-/**
- * Guards from extension violations.
- */
-Validator._guardExtend = function _guardExtend (name, validator) {
-  if (isCallable(validator)) {
-    return;
-  }
-
-  if (!isCallable(validator.validate)) {
-    throw createError(
-      ("Extension Error: The validator '" + name + "' must be a function or have a 'validate' method.")
-    );
-  }
-};
-
-/**
- * Creates a Field Error Object.
- */
-Validator.prototype._createFieldError = function _createFieldError (field, rule, data, targetName) {
-    var this$1 = this;
-
-  return {
-    id: field.id,
-    vmId: field.vmId,
-    field: field.name,
-    msg: this._formatErrorMessage(field, rule, data, targetName),
-    rule: rule.name,
-    scope: field.scope,
-    regenerate: function () {
-      return this$1._formatErrorMessage(field, rule, data, targetName);
-    }
-  };
-};
-
-/**
- * Tries different strategies to find a field.
- */
-Validator.prototype._resolveField = function _resolveField (name, scope, uid) {
-  if (name[0] === '#') {
-    return this.fields.find({ id: name.slice(1) });
-  }
-
-  if (!isNullOrUndefined(scope)) {
-    return this.fields.find({ name: name, scope: scope, vmId: uid });
-  }
-
-  if (name.indexOf('.') > -1) {
-    var ref = name.split('.');
-      var fieldScope = ref[0];
-      var fieldName = ref.slice(1);
-    var field = this.fields.find({ name: fieldName.join('.'), scope: fieldScope, vmId: uid });
-    if (field) {
-      return field;
-    }
-  }
-
-  return this.fields.find({ name: name, scope: null, vmId: uid });
-};
-
-/**
- * Handles when a field is not found depending on the strict flag.
- */
-Validator.prototype._handleFieldNotFound = function _handleFieldNotFound (name, scope) {
-  if (!this.strict) { return Promise.resolve(true); }
-
-  var fullName = isNullOrUndefined(scope) ? name : ("" + (!isNullOrUndefined(scope) ? scope + '.' : '') + name);
-
-  return Promise.reject(createError(
-    ("Validating a non-existent field: \"" + fullName + "\". Use \"attach()\" first.")
-  ));
-};
-
-/**
- * Handles validation results.
- */
-Validator.prototype._handleValidationResults = function _handleValidationResults (results) {
-    var this$1 = this;
-
-  var matchers = results.map(function (result) { return ({ id: result.id }); });
-  this.errors.removeById(matchers.map(function (m) { return m.id; }));
-  // remove by name and scope to remove any custom errors added.
-  results.forEach(function (result) {
-    this$1.errors.remove(result.field, result.scope);
-  });
-  var allErrors = results.reduce(function (prev, curr) {
-    prev.push.apply(prev, curr.errors);
-
-    return prev;
-  }, []);
-
-  this.errors.add(allErrors);
-
-  // handle flags.
-  this.fields.filter(matchers).forEach(function (field) {
-    var result = find(results, function (r) { return r.id === field.id; });
-    field.setFlags({
-      pending: false,
-      valid: result.valid,
-      validated: true
-    });
-  });
-};
-
-/**
- * Starts the validation process.
- */
-Validator.prototype._validate = function _validate (field, value, ref) {
-    var this$1 = this;
-    if ( ref === void 0 ) ref = {};
-    var initial = ref.initial;
-
-  // if field is disabled and is not required.
-  if (field.isDisabled || (!field.isRequired && (isNullOrUndefined(value) || value === ''))) {
-    return Promise.resolve({ valid: true, id: field.id, field: field.name, scope: field.scope, errors: [] });
-  }
-
-  var promises = [];
-  var errors = [];
-  var isExitEarly = false;
-  // use of '.some()' is to break iteration in middle by returning true
-  Object.keys(field.rules).filter(function (rule) {
-    if (!initial || !RULES[rule]) { return true; }
-
-    return RULES[rule].options.immediate;
-  }).some(function (rule) {
-    var ruleOptions = RULES[rule] ? RULES[rule].options : {};
-    var result = this$1._test(field, value, { name: rule, params: field.rules[rule], options: ruleOptions });
-    if (isCallable(result.then)) {
-      promises.push(result);
-    } else if (this$1.fastExit && !result.valid) {
-      errors.push.apply(errors, result.errors);
-      isExitEarly = true;
-    } else {
-      // promisify the result.
-      promises.push(new Promise(function (resolve) { return resolve(result); }));
-    }
-
-    return isExitEarly;
-  });
-
-  if (isExitEarly) {
-    return Promise.resolve({ valid: false, errors: errors, id: field.id, field: field.name, scope: field.scope });
-  }
-
-  return Promise.all(promises).then(function (results) {
-    return results.reduce(function (prev, v) {
-        var ref;
-
-      if (!v.valid) {
-        (ref = prev.errors).push.apply(ref, v.errors);
-      }
-
-      prev.valid = prev.valid && v.valid;
-
-      return prev;
-    }, { valid: true, errors: errors, id: field.id, field: field.name, scope: field.scope });
-  });
-};
-
-Object.defineProperties( Validator.prototype, prototypeAccessors$2 );
-Object.defineProperties( Validator, staticAccessors$1 );
-
-// 
-
 var DEFAULT_OPTIONS = {
   targetOf: null,
-  immediate: false,
+  initial: false,
   scope: null,
   listen: true,
   name: null,
@@ -24324,22 +23323,20 @@ var DEFAULT_OPTIONS = {
   }
 };
 
-var Field = function Field (options) {
+var Field = function Field (el, options) {
   if ( options === void 0 ) options = {};
 
   this.id = uniqId();
-  this.el = options.el;
+  this.el = el;
   this.updated = false;
   this.dependencies = [];
-  this.vmId = options.vmId;
   this.watchers = [];
   this.events = [];
   this.delay = 0;
   this.rules = {};
   this._cacheId(options);
-  this.classNames = assign({}, DEFAULT_OPTIONS.classNames);
   options = assign({}, DEFAULT_OPTIONS, options);
-  this._delay = !isNullOrUndefined(options.delay) ? options.delay : 0; // cache initial delay
+  this._delay = typeof options.delay === 'number' ? options.delay : (options.delay && options.delay.global); // cache initial delay
   this.validity = options.validity;
   this.aria = options.aria;
   this.flags = createFlags();
@@ -24347,33 +23344,32 @@ var Field = function Field (options) {
   this.component = options.component;
   this.ctorConfig = this.component ? getPath('$options.$_veeValidate', this.component) : undefined;
   this.update(options);
-  // set initial value.
-  this.initialValue = this.value;
   this.updated = false;
 };
 
-var prototypeAccessors$3 = { validator: { configurable: true },isRequired: { configurable: true },isDisabled: { configurable: true },alias: { configurable: true },value: { configurable: true },rejectsFalse: { configurable: true } };
+var prototypeAccessors$1 = { validator: {},isRequired: {},isDisabled: {},alias: {},value: {},rejectsFalse: {} };
 
-prototypeAccessors$3.validator.get = function () {
+prototypeAccessors$1.validator.get = function () {
   if (!this.vm || !this.vm.$validator) {
+    warn('No validator instance detected.');
     return { validate: function () {} };
   }
 
   return this.vm.$validator;
 };
 
-prototypeAccessors$3.isRequired.get = function () {
+prototypeAccessors$1.isRequired.get = function () {
   return !!this.rules.required;
 };
 
-prototypeAccessors$3.isDisabled.get = function () {
+prototypeAccessors$1.isDisabled.get = function () {
   return !!(this.component && this.component.disabled) || !!(this.el && this.el.disabled);
 };
 
 /**
  * Gets the display name (user-friendly name).
  */
-prototypeAccessors$3.alias.get = function () {
+prototypeAccessors$1.alias.get = function () {
   if (this._alias) {
     return this._alias;
   }
@@ -24394,7 +23390,7 @@ prototypeAccessors$3.alias.get = function () {
  * Gets the input value.
  */
 
-prototypeAccessors$3.value.get = function () {
+prototypeAccessors$1.value.get = function () {
   if (!isCallable(this.getter)) {
     return undefined;
   }
@@ -24406,7 +23402,7 @@ prototypeAccessors$3.value.get = function () {
  * If the field rejects false as a valid value for the required rule.
  */
 
-prototypeAccessors$3.rejectsFalse.get = function () {
+prototypeAccessors$1.rejectsFalse.get = function () {
   if (this.component && this.ctorConfig) {
     return !!this.ctorConfig.rejectsFalse;
   }
@@ -24422,21 +23418,10 @@ prototypeAccessors$3.rejectsFalse.get = function () {
  * Determines if the instance matches the options provided.
  */
 Field.prototype.matches = function matches (options) {
-    var this$1 = this;
-
-  if (!options) {
-    return true;
-  }
-
   if (options.id) {
     return this.id === options.id;
   }
 
-  var matchesComponentId = isNullOrUndefined(options.vmId) ? function () { return true; } : function (id) { return id === this$1.vmId; };
-  if (!matchesComponentId(options.vmId)) {
-    return false;
-  }
-
   if (options.name === undefined && options.scope === undefined) {
     return true;
   }
@@ -24457,7 +23442,7 @@ Field.prototype.matches = function matches (options) {
  */
 Field.prototype._cacheId = function _cacheId (options) {
   if (this.el && !options.targetOf) {
-    this.el._veeValidateId = this.id;
+    setDataAttribute(this.el, 'id', this.id); // cache field id if it is independent and has a root element.
   }
 };
 
@@ -24466,7 +23451,7 @@ Field.prototype._cacheId = function _cacheId (options) {
  */
 Field.prototype.update = function update (options) {
   this.targetOf = options.targetOf || null;
-  this.immediate = options.immediate || this.immediate || false;
+  this.initial = options.initial || this.initial || false;
 
   // update errors scope if the field scope was changed.
   if (!isNullOrUndefined(options.scope) && options.scope !== this.scope && isCallable(this.validator.update)) {
@@ -24479,18 +23464,14 @@ Field.prototype.update = function update (options) {
   this.model = options.model || this.model;
   this.listen = options.listen !== undefined ? options.listen : this.listen;
   this.classes = (options.classes || this.classes || false) && !this.component;
-  this.classNames = isObject(options.classNames) ? merge(this.classNames, options.classNames) : this.classNames;
+  this.classNames = options.classNames || this.classNames || DEFAULT_OPTIONS.classNames;
   this.getter = isCallable(options.getter) ? options.getter : this.getter;
   this._alias = options.alias || this._alias;
   this.events = (options.events) ? makeEventsArray(options.events) : this.events;
-  this.delay = makeDelayObject(this.events, options.delay || this.delay, this._delay);
+  this.delay = (options.delay) ? makeDelayObject(this.events, options.delay, this._delay) : makeDelayObject(this.events, this.delay, this._delay);
   this.updateDependencies();
   this.addActionListeners();
 
-  if ("development" !== 'production' && !this.name && !this.targetOf) {
-    warn('A field is missing a "name" or "data-vv-name" attribute');
-  }
-
   // update required flag flags
   if (options.rules !== undefined) {
     this.flags.required = this.isRequired;
@@ -24502,13 +23483,14 @@ Field.prototype.update = function update (options) {
   }
 
   this.updated = true;
-  this.addValueListeners();
 
   // no need to continue.
   if (!this.el) {
     return;
   }
+
   this.updateClasses();
+  this.addValueListeners();
   this.updateAriaAttrs();
 };
 
@@ -24518,13 +23500,8 @@ Field.prototype.update = function update (options) {
 Field.prototype.reset = function reset () {
     var this$1 = this;
 
-  if (this._cancellationToken) {
-    this._cancellationToken.cancelled = true;
-    delete this._cancellationToken;
-  }
-
   var defaults = createFlags();
-  Object.keys(this.flags).filter(function (flag) { return flag !== 'required'; }).forEach(function (flag) {
+  Object.keys(this.flags).forEach(function (flag) {
     this$1.flags[flag] = defaults[flag];
   });
 
@@ -24582,7 +23559,9 @@ Field.prototype.updateDependencies = function updateDependencies () {
 
   // we get the selectors for each field.
   var fields = Object.keys(this.rules).reduce(function (prev, r) {
-    if (Validator.isTargetRule(r)) {
+    if (r === 'confirmed') {
+      prev.push({ selector: this$1.rules[r][0] || ((this$1.name) + "_confirmation"), name: r });
+    } else if (Validator.isTargetRule(r)) {
       prev.push({ selector: this$1.rules[r][0], name: r });
     }
 
@@ -24592,12 +23571,31 @@ Field.prototype.updateDependencies = function updateDependencies () {
   if (!fields.length || !this.vm || !this.vm.$el) { return; }
 
   // must be contained within the same component, so we use the vm root element constrain our dom search.
-  fields.forEach(function (ref$1) {
-      var selector = ref$1.selector;
-      var name = ref$1.name;
+  fields.forEach(function (ref) {
+      var selector = ref.selector;
+      var name = ref.name;
+
+    var el = null;
+    // vue ref selector.
+    if (selector[0] === '$') {
+      el = this$1.vm.$refs[selector.slice(1)];
+    } else {
+      try {
+        // try query selector
+        el = this$1.vm.$el.querySelector(selector);
+      } catch (err) {
+        el = null;
+      }
+    }
+
+    if (!el) {
+      try {
+        el = this$1.vm.$el.querySelector(("input[name=\"" + selector + "\"]"));
+      } catch (err) {
+        el = null;
+      }
+    }
 
-    var ref = this$1.vm.$refs[selector];
-    var el = Array.isArray(ref) ? ref[0] : ref;
     if (!el) {
       return;
     }
@@ -24609,7 +23607,7 @@ Field.prototype.updateDependencies = function updateDependencies () {
       delay: this$1.delay,
       scope: this$1.scope,
       events: this$1.events.join('|'),
-      immediate: this$1.immediate,
+      initial: this$1.initial,
       targetOf: this$1.id
     };
 
@@ -24617,13 +23615,13 @@ Field.prototype.updateDependencies = function updateDependencies () {
     if (isCallable(el.$watch)) {
       options.component = el;
       options.el = el.$el;
-      options.getter = Resolver.resolveGetter(el.$el, el.$vnode);
+      options.getter = Generator.resolveGetter(el.$el, { child: el });
     } else {
       options.el = el;
-      options.getter = Resolver.resolveGetter(el, {});
+      options.getter = Generator.resolveGetter(el, {});
     }
 
-    this$1.dependencies.push({ name: name, field: new Field(options) });
+    this$1.dependencies.push({ name: name, field: new Field(options.el, options) });
   });
 };
 
@@ -24647,31 +23645,14 @@ Field.prototype.unwatch = function unwatch (tag) {
  * Updates the element classes depending on each field flag status.
  */
 Field.prototype.updateClasses = function updateClasses () {
-    var this$1 = this;
+  if (!this.classes) { return; }
 
-  if (!this.classes || this.isDisabled) { return; }
-  var applyClasses = function (el) {
-    toggleClass(el, this$1.classNames.dirty, this$1.flags.dirty);
-    toggleClass(el, this$1.classNames.pristine, this$1.flags.pristine);
-    toggleClass(el, this$1.classNames.touched, this$1.flags.touched);
-    toggleClass(el, this$1.classNames.untouched, this$1.flags.untouched);
-    // make sure we don't set any classes if the state is undetermined.
-    if (!isNullOrUndefined(this$1.flags.valid) && this$1.flags.validated) {
-      toggleClass(el, this$1.classNames.valid, this$1.flags.valid);
-    }
-
-    if (!isNullOrUndefined(this$1.flags.invalid) && this$1.flags.validated) {
-      toggleClass(el, this$1.classNames.invalid, this$1.flags.invalid);
-    }
-  };
-
-  if (!isCheckboxOrRadioInput(this.el)) {
-    applyClasses(this.el);
-    return;
-  }
-
-  var els = document.querySelectorAll(("input[name=\"" + (this.el.name) + "\"]"));
-  toArray(els).forEach(applyClasses);
+  toggleClass(this.el, this.classNames.dirty, this.flags.dirty);
+  toggleClass(this.el, this.classNames.pristine, this.flags.pristine);
+  toggleClass(this.el, this.classNames.valid, !!this.flags.valid);
+  toggleClass(this.el, this.classNames.invalid, !!this.flags.invalid);
+  toggleClass(this.el, this.classNames.touched, this.flags.touched);
+  toggleClass(this.el, this.classNames.untouched, this.flags.untouched);
 };
 
 /**
@@ -24683,8 +23664,6 @@ Field.prototype.addActionListeners = function addActionListeners () {
   // remove previous listeners.
   this.unwatch(/class/);
 
-  if (!this.el) { return; }
-
   var onBlur = function () {
     this$1.flags.touched = true;
     this$1.flags.untouched = false;
@@ -24697,7 +23676,7 @@ Field.prototype.addActionListeners = function addActionListeners () {
     this$1.unwatch(/^class_blur$/);
   };
 
-  var inputEvent = isTextInput(this.el) ? 'input' : 'change';
+  var inputEvent = getInputEventName(this.el);
   var onInput = function () {
     this$1.flags.dirty = true;
     this$1.flags.pristine = false;
@@ -24730,10 +23709,10 @@ Field.prototype.addActionListeners = function addActionListeners () {
 
   if (!this.el) { return; }
 
-  addEventListener(this.el, inputEvent, onInput);
+  this.el.addEventListener(inputEvent, onInput);
   // Checkboxes and radio buttons on Mac don't emit blur naturally, so we listen on click instead.
-  var blurEvent = isCheckboxOrRadioInput(this.el) ? 'change' : 'blur';
-  addEventListener(this.el, blurEvent, onBlur);
+  var blurEvent = ['radio', 'checkbox'].indexOf(this.el.type) === -1 ? 'blur' : 'click';
+  this.el.addEventListener(blurEvent, onBlur);
   this.watchers.push({
     tag: 'class_input',
     unwatch: function () {
@@ -24749,54 +23728,6 @@ Field.prototype.addActionListeners = function addActionListeners () {
   });
 };
 
-Field.prototype.checkValueChanged = function checkValueChanged () {
-  // handle some people initialize the value to null, since text inputs have empty string value.
-  if (this.initialValue === null && this.value === '' && isTextInput(this.el)) {
-    return false;
-  }
-
-  return this.value !== this.initialValue;
-};
-
-/**
- * Determines the suitable primary event to listen for.
- */
-Field.prototype._determineInputEvent = function _determineInputEvent () {
-  // if its a custom component, use the customized model event or the input event.
-  if (this.component) {
-    return (this.component.$options.model && this.component.$options.model.event) || 'input';
-  }
-
-  if (this.model) {
-    return this.model.lazy ? 'change' : 'input';
-  }
-
-  if (isTextInput(this.el)) {
-    return 'input';
-  }
-
-  return 'change';
-};
-
-/**
- * Determines the list of events to listen to.
- */
-Field.prototype._determineEventList = function _determineEventList (defaultInputEvent) {
-  // if no event is configured, or it is a component or a text input then respect the user choice.
-  if (!this.events.length || this.component || isTextInput(this.el)) {
-    return [].concat( this.events );
-  }
-
-  // force suitable event for non-text type fields.
-  return this.events.map(function (e) {
-    if (e === 'input') {
-      return defaultInputEvent;
-    }
-
-    return e;
-  });
-};
-
 /**
  * Adds the listeners required for validation.
  */
@@ -24804,11 +23735,10 @@ Field.prototype.addValueListeners = function addValueListeners () {
     var this$1 = this;
 
   this.unwatch(/^input_.+/);
-  if (!this.listen || !this.el) { return; }
+  if (!this.listen) { return; }
 
-  var token = { cancelled: false };
   var fn = this.targetOf ? function () {
-    this$1.flags.changed = this$1.checkValueChanged();    this$1.validator.validate(("#" + (this$1.targetOf)));
+    this$1.validator.validate(("#" + (this$1.targetOf)));
   } : function () {
       var args = [], len = arguments.length;
       while ( len-- ) args[ len ] = arguments[ len ];
@@ -24817,110 +23747,77 @@ Field.prototype.addValueListeners = function addValueListeners () {
     if (args.length === 0 || (isCallable(Event) && args[0] instanceof Event) || (args[0] && args[0].srcElement)) {
       args[0] = this$1.value;
     }
-
-    this$1.flags.changed = this$1.checkValueChanged();
     this$1.validator.validate(("#" + (this$1.id)), args[0]);
   };
 
-  var inputEvent = this._determineInputEvent();
-  var events = this._determineEventList(inputEvent);
+  var inputEvent = getInputEventName(this.el);
+  // replace input event with suitable one.
+  var events = this.events.map(function (e) {
+    return e === 'input' ? inputEvent : e;
+  });
 
-  // if there is a model and an on input validation is requested.
+  // if there is a watchable model and an on input validation is requested.
   if (this.model && events.indexOf(inputEvent) !== -1) {
-    var ctx = null;
-    var expression = this.model.expression;
-    // if its watchable from the context vm.
-    if (this.model.expression) {
-      ctx = this.vm;
-      expression = this.model.expression;
-    }
+    var debouncedFn = debounce(fn, this.delay[inputEvent]);
+    var unwatch = this.vm.$watch(this.model, function () {
+        var args = [], len = arguments.length;
+        while ( len-- ) args[ len ] = arguments[ len ];
 
-    // watch it from the custom component vm instead.
-    if (!expression && this.component && this.component.$options.model) {
-      ctx = this.component;
-      expression = this.component.$options.model.prop || 'value';
-    }
-
-    if (ctx && expression) {
-      var debouncedFn = debounce(fn, this.delay[inputEvent], false, token);
-      var unwatch = ctx.$watch(expression, function () {
-          var args = [], len = arguments.length;
-          while ( len-- ) args[ len ] = arguments[ len ];
-
-        this$1.flags.pending = true;
-        this$1._cancellationToken = token;
-        debouncedFn.apply(void 0, args);
-      });
-      this.watchers.push({
-        tag: 'input_model',
-        unwatch: unwatch
-      });
-
-      // filter out input event as it is already handled by the watcher API.
-      events = events.filter(function (e) { return e !== inputEvent; });
-    }
+      this$1.flags.pending = true;
+      debouncedFn.apply(void 0, args);
+    });
+    this.watchers.push({
+      tag: 'input_model',
+      unwatch: unwatch
+    });
+    // filter out input event as it is already handled by the watcher API.
+    events = events.filter(function (e) { return e !== inputEvent; });
   }
 
   // Add events.
   events.forEach(function (e) {
-    var debouncedFn = debounce(fn, this$1.delay[e], false, token);
+    var debouncedFn = debounce(fn, this$1.delay[e]);
     var validate = function () {
         var args = [], len = arguments.length;
         while ( len-- ) args[ len ] = arguments[ len ];
 
       this$1.flags.pending = true;
-      this$1._cancellationToken = token;
       debouncedFn.apply(void 0, args);
     };
 
-    this$1._addComponentEventListener(e, validate);
-    this$1._addHTMLEventListener(e, validate);
-  });
-};
-
-Field.prototype._addComponentEventListener = function _addComponentEventListener (evt, validate) {
-    var this$1 = this;
-
-  if (!this.component) { return; }
-
-  this.component.$on(evt, validate);
-  this.watchers.push({
-    tag: 'input_vue',
-    unwatch: function () {
-      this$1.component.$off(evt, validate);
-    }
-  });
-};
-
-Field.prototype._addHTMLEventListener = function _addHTMLEventListener (evt, validate) {
-    var this$1 = this;
-
-  if (!this.el || this.component) { return; }
-
-  // listen for the current element.
-  var addListener = function (el) {
-    addEventListener(el, evt, validate);
-    this$1.watchers.push({
-      tag: 'input_native',
-      unwatch: function () {
-        el.removeEventListener(evt, validate);
-      }
-    });
-  };
-
-  addListener(this.el);
-  if (!isCheckboxOrRadioInput(this.el)) {
-    return;
-  }
-
-  var els = document.querySelectorAll(("input[name=\"" + (this.el.name) + "\"]"));
-  toArray(els).forEach(function (el) {
-    // skip if it is added by v-validate and is not the current element.
-    if (el._veeValidateId && el !== this$1.el) {
+    if (this$1.component) {
+      this$1.component.$on(e, validate);
+      this$1.watchers.push({
+        tag: 'input_vue',
+        unwatch: function () {
+          this$1.component.$off(e, validate);
+        }
+      });
       return;
     }
 
-    addListener(el);
+    if (~['radio', 'checkbox'].indexOf(this$1.el.type)) {
+      var els = document.querySelectorAll(("input[name=\"" + (this$1.el.name) + "\"]"));
+      toArray(els).forEach(function (el) {
+        el.addEventListener(e, validate);
+        this$1.watchers.push({
+          tag: 'input_native',
+          unwatch: function () {
+            el.removeEventListener(e, validate);
+          }
+        });
+      });
+
+      return;
+    }
+
+    this$1.el.addEventListener(e, validate);
+    this$1.watchers.push({
+      tag: 'input_native',
+      unwatch: function () {
+        this$1.el.removeEventListener(e, validate);
+      }
+    });
   });
 };
 
@@ -24928,29 +23825,17 @@ Field.prototype._addHTMLEventListener = function _addHTMLEventListener (evt, val
  * Updates aria attributes on the element.
  */
 Field.prototype.updateAriaAttrs = function updateAriaAttrs () {
-    var this$1 = this;
-
   if (!this.aria || !this.el || !isCallable(this.el.setAttribute)) { return; }
 
-  var applyAriaAttrs = function (el) {
-    el.setAttribute('aria-required', this$1.isRequired ? 'true' : 'false');
-    el.setAttribute('aria-invalid', this$1.flags.invalid ? 'true' : 'false');
-  };
-
-  if (!isCheckboxOrRadioInput(this.el)) {
-    applyAriaAttrs(this.el);
-    return;
-  }
-
-  var els = document.querySelectorAll(("input[name=\"" + (this.el.name) + "\"]"));
-  toArray(els).forEach(applyAriaAttrs);
+  this.el.setAttribute('aria-required', this.isRequired ? 'true' : 'false');
+  this.el.setAttribute('aria-invalid', this.flags.invalid ? 'true' : 'false');
 };
 
 /**
  * Updates the custom validity for the field.
  */
 Field.prototype.updateCustomValidity = function updateCustomValidity () {
-  if (!this.validity || !this.el || !isCallable(this.el.setCustomValidity) || !this.validator.errors) { return; }
+  if (!this.validity || !this.el || !isCallable(this.el.setCustomValidity)) { return; }
 
   this.el.setCustomValidity(this.flags.valid ? '' : (this.validator.errors.firstById(this.id) || ''));
 };
@@ -24959,33 +23844,21 @@ Field.prototype.updateCustomValidity = function updateCustomValidity () {
  * Removes all listeners.
  */
 Field.prototype.destroy = function destroy () {
-  this.unwatch();
+  this.watchers.forEach(function (w) { return w.unwatch(); });
+  this.watchers = [];
   this.dependencies.forEach(function (d) { return d.field.destroy(); });
   this.dependencies = [];
 };
 
-Object.defineProperties( Field.prototype, prototypeAccessors$3 );
+Object.defineProperties( Field.prototype, prototypeAccessors$1 );
 
 // 
 
-var FieldBag = function FieldBag (items) {
-  if ( items === void 0 ) items = [];
-
-  this.items = items || [];
+var FieldBag = function FieldBag () {
+  this.items = [];
 };
 
-var prototypeAccessors$4 = { length: { configurable: true } };
-
-FieldBag.prototype[typeof Symbol === 'function' ? Symbol.iterator : '@@iterator'] = function () {
-    var this$1 = this;
-
-  var index = 0;
-  return {
-    next: function () {
-      return { value: this$1.items[index++], done: index > this$1.items.length };
-    }
-  };
-};
+var prototypeAccessors$4 = { length: {} };
 
 /**
  * Gets the current items length.
@@ -25061,139 +23934,767 @@ FieldBag.prototype.push = function push (item) {
 
 Object.defineProperties( FieldBag.prototype, prototypeAccessors$4 );
 
-var ScopedValidator = function ScopedValidator (base, vm) {
-  this.id = vm._uid;
-  this._base = base;
+// 
 
-  // create a mirror bag with limited component scope.
-  this.errors = new ErrorBag(base.errors, this.id);
+var RULES = {};
+var STRICT_MODE = true;
+var TARGET_RULES = ['confirmed', 'after', 'before'];
+var ERRORS = []; // HOLD errors references to trigger regeneration.
+
+var Validator = function Validator (validations, options) {
+  var this$1 = this;
+  if ( options === void 0 ) options = { vm: null, fastExit: true };
+
+  this.strict = STRICT_MODE;
+  this.errors = new ErrorBag();
+  ERRORS.push(this.errors);
+  this.fields = new FieldBag();
+  this.flags = {};
+  this._createFields(validations);
+  this.paused = false;
+  this.fastExit = options.fastExit || false;
+  this.ownerId = options.vm && options.vm._uid;
+  // create it statically since we don't need constant access to the vm.
+  this.reset = options.vm && isCallable(options.vm.$nextTick) ? function (matcher) {
+    return new Promise(function (resolve) {
+      options.vm.$nextTick(function () {
+        resolve(this$1._reset(matcher));
+      });
+    });
+  } : this._reset;
 };
 
-var prototypeAccessors$5 = { flags: { configurable: true },rules: { configurable: true },fields: { configurable: true },dictionary: { configurable: true },locale: { configurable: true } };
+var prototypeAccessors = { dictionary: {},locale: {},rules: {} };
+var staticAccessors = { dictionary: {},locale: {},rules: {} };
 
-prototypeAccessors$5.flags.get = function () {
+/**
+ * Getter for the dictionary.
+ */
+prototypeAccessors.dictionary.get = function () {
+  return Config.dependency('dictionary');
+};
+
+/**
+ * Static Getter for the dictionary.
+ */
+staticAccessors.dictionary.get = function () {
+  return Config.dependency('dictionary');
+};
+
+/**
+ * Getter for the current locale.
+ */
+prototypeAccessors.locale.get = function () {
+  return this.dictionary.locale;
+};
+
+/**
+ * Setter for the validator locale.
+ */
+prototypeAccessors.locale.set = function (value) {
+  Validator.locale = value;
+};
+
+/**
+* Static getter for the validator locale.
+*/
+staticAccessors.locale.get = function () {
+  return Validator.dictionary.locale;
+};
+
+/**
+ * Static setter for the validator locale.
+ */
+staticAccessors.locale.set = function (value) {
+  var hasChanged = value !== Validator.dictionary.locale;
+  Validator.dictionary.locale = value;
+  if (hasChanged) {
+    Validator.regenerate();
+  }
+};
+
+/**
+ * Getter for the rules object.
+ */
+prototypeAccessors.rules.get = function () {
+  return RULES;
+};
+
+/**
+ * Static Getter for the rules object.
+ */
+staticAccessors.rules.get = function () {
+  return RULES;
+};
+
+/**
+ * Static constructor.
+ */
+Validator.create = function create (validations, options) {
+  return new Validator(validations, options);
+};
+
+/**
+ * Adds a custom validator to the list of validation rules.
+ */
+Validator.extend = function extend (name, validator, options) {
+    if ( options === void 0 ) options = {};
+
+  Validator._guardExtend(name, validator);
+  Validator._merge(name, validator);
+  if (options && options.hasTarget) {
+    TARGET_RULES.push(name);
+  }
+};
+
+/**
+ * Regenerates error messages across all validators.
+ */
+Validator.regenerate = function regenerate () {
+  ERRORS.forEach(function (errorBag) { return errorBag.regenerate(); });
+};
+
+/**
+ * Removes a rule from the list of validators.
+ */
+Validator.remove = function remove (name) {
+  delete RULES[name];
+  var idx = TARGET_RULES.indexOf(name);
+  if (idx === -1) { return; }
+
+  TARGET_RULES.splice(idx, 1);
+};
+
+/**
+ * Checks if the given rule name is a rule that targets other fields.
+ */
+Validator.isTargetRule = function isTargetRule (name) {
+  return TARGET_RULES.indexOf(name) !== -1;
+};
+
+/**
+ * Sets the operating mode for all newly created validators.
+ * strictMode = true: Values without a rule are invalid and cause failure.
+ * strictMode = false: Values without a rule are valid and are skipped.
+ */
+Validator.setStrictMode = function setStrictMode (strictMode) {
+    if ( strictMode === void 0 ) strictMode = true;
+
+  STRICT_MODE = strictMode;
+};
+
+/**
+ * Adds and sets the current locale for the validator.
+ */
+Validator.prototype.localize = function localize (lang, dictionary) {
+  Validator.localize(lang, dictionary);
+};
+
+/**
+ * Adds and sets the current locale for the validator.
+ */
+Validator.localize = function localize (lang, dictionary) {
+  if (isObject(lang)) {
+    Validator.dictionary.merge(lang);
+    return;
+  }
+
+  // merge the dictionary.
+  if (dictionary) {
+    var locale = lang || dictionary.name;
+    dictionary = assign({}, dictionary);
+    Validator.dictionary.merge(( obj = {}, obj[locale] = dictionary, obj ));
+      var obj;
+  }
+
+  if (lang) {
+    // set the locale.
+    Validator.locale = lang;
+  }
+};
+
+/**
+ * Registers a field to be validated.
+ */
+Validator.prototype.attach = function attach (field) {
+  // deprecate: handle old signature.
+  if (arguments.length > 1) {
+    field = assign({}, {
+      name: arguments[0],
+      rules: arguments[1]
+    }, arguments[2] || { vm: { $validator: this } });
+  }
+
+  // fixes initial value detection with v-model and select elements.
+  var value = field.initialValue;
+  if (!(field instanceof Field)) {
+    field = new Field(field.el || null, field);
+  }
+
+  this.fields.push(field);
+
+  // validate the field initially
+  if (field.initial) {
+    this.validate(("#" + (field.id)), value || field.value);
+  } else {
+    this._validate(field, value || field.value, true).then(function (result) {
+      field.flags.valid = result.valid;
+      field.flags.invalid = !result.valid;
+    });
+  }
+
+  this._addFlag(field, field.scope);
+  return field;
+};
+
+/**
+ * Sets the flags on a field.
+ */
+Validator.prototype.flag = function flag (name, flags) {
+  var field = this._resolveField(name);
+  if (! field || !flags) {
+    return;
+  }
+
+  field.setFlags(flags);
+};
+
+/**
+ * Removes a field from the validator.
+ */
+Validator.prototype.detach = function detach (name, scope) {
+  var field = name instanceof Field ? name : this._resolveField(name, scope);
+  if (!field) { return; }
+
+  field.destroy();
+  this.errors.remove(field.name, field.scope, field.id);
+  this.fields.remove(field);
+  var flags = this.flags;
+  if (!isNullOrUndefined(field.scope) && flags[("$" + (field.scope))]) {
+    delete flags[("$" + (field.scope))][field.name];
+  } else if (isNullOrUndefined(field.scope)) {
+    delete flags[field.name];
+  }
+
+  this.flags = assign({}, flags);
+};
+
+/**
+ * Adds a custom validator to the list of validation rules.
+ */
+Validator.prototype.extend = function extend (name, validator, options) {
+    if ( options === void 0 ) options = {};
+
+  Validator.extend(name, validator, options);
+};
+
+/**
+ * Updates a field, updating both errors and flags.
+ */
+Validator.prototype.update = function update (id, ref) {
+    var scope = ref.scope;
+
+  var field = this._resolveField(("#" + id));
+  if (!field) { return; }
+
+  // remove old scope.
+  this.errors.update(id, { scope: scope });
+  if (!isNullOrUndefined(field.scope) && this.flags[("$" + (field.scope))]) {
+    delete this.flags[("$" + (field.scope))][field.name];
+  } else if (isNullOrUndefined(field.scope)) {
+    delete this.flags[field.name];
+  }
+
+  this._addFlag(field, scope);
+};
+
+/**
+ * Removes a rule from the list of validators.
+ */
+Validator.prototype.remove = function remove (name) {
+  Validator.remove(name);
+};
+
+/**
+ * Validates a value against a registered field validations.
+ */
+Validator.prototype.validate = function validate (name, value, scope) {
     var this$1 = this;
+    if ( scope === void 0 ) scope = null;
 
-  return this._base.fields.items.filter(function (f) { return f.vmId === this$1.id; }).reduce(function (acc, field) {
-    if (field.scope) {
-      if (!acc[("$" + (field.scope))]) {
-        acc[("$" + (field.scope))] = {};
-      }
+  if (this.paused) { return Promise.resolve(true); }
 
-      acc[("$" + (field.scope))][field.name] = field.flags;
+  // overload to validate all.
+  if (arguments.length === 0) {
+    return this.validateScopes();
+  }
+
+  // overload to validate scope-less fields.
+  if (arguments.length === 1 && arguments[0] === '*') {
+    return this.validateAll();
+  }
+
+  // overload to validate a scope.
+  if (arguments.length === 1 && typeof arguments[0] === 'string' && /^(.+)\.\*$/.test(arguments[0])) {
+    var matched = arguments[0].match(/^(.+)\.\*$/)[1];
+    return this.validateAll(matched);
+  }
+
+  var field = this._resolveField(name, scope);
+  if (!field) {
+    return this._handleFieldNotFound(name, scope);
+  }
+
+  field.flags.pending = true;
+  if (arguments.length === 1) {
+    value = field.value;
+  }
+
+  var silentRun = field.isDisabled;
+
+  return this._validate(field, value, silentRun).then(function (result) {
+    field.setFlags({
+      pending: false,
+      valid: result.valid,
+      validated: true
+    });
+
+    this$1.errors.remove(field.name, field.scope, field.id);
+    if (silentRun) {
+      return Promise.resolve(true);
+    } else if (result.errors) {
+      result.errors.forEach(function (e) { return this$1.errors.add(e); });
     }
 
-    acc[field.name] = field.flags;
-
-    return acc;
-  }, {});
+    return result.valid;
+  });
 };
 
-prototypeAccessors$5.rules.get = function () {
-  return this._base.rules;
+/**
+ * Pauses the validator.
+ */
+Validator.prototype.pause = function pause () {
+  this.paused = true;
+
+  return this;
 };
 
-prototypeAccessors$5.fields.get = function () {
-  return new FieldBag(this._base.fields.filter({ vmId: this.id }));
+/**
+ * Resumes the validator.
+ */
+Validator.prototype.resume = function resume () {
+  this.paused = false;
+
+  return this;
 };
 
-prototypeAccessors$5.dictionary.get = function () {
-  return this._base.dictionary;
+/**
+ * Validates each value against the corresponding field validations.
+ */
+Validator.prototype.validateAll = function validateAll (values) {
+    var arguments$1 = arguments;
+    var this$1 = this;
+
+  if (this.paused) { return Promise.resolve(true); }
+
+  var matcher = null;
+  var providedValues = false;
+
+  if (typeof values === 'string') {
+    matcher = { scope: values };
+  } else if (isObject(values)) {
+    matcher = Object.keys(values).map(function (key) {
+      return { name: key, scope: arguments$1[1] || null };
+    });
+    providedValues = true;
+  } else if (arguments.length === 0) {
+    matcher = { scope: null }; // global scope.
+  } else if (Array.isArray(values)) {
+    matcher = values.map(function (key) {
+      return { name: key, scope: arguments$1[1] || null };
+    });
+  }
+
+  var promises = this.fields.filter(matcher).map(function (field) { return this$1.validate(
+    ("#" + (field.id)),
+    providedValues ? values[field.name] : field.value
+  ); });
+
+  return Promise.all(promises).then(function (results) { return results.every(function (t) { return t; }); });
 };
 
-prototypeAccessors$5.locale.get = function () {
-  return this._base.locale;
+/**
+ * Validates all scopes.
+ */
+Validator.prototype.validateScopes = function validateScopes () {
+    var this$1 = this;
+
+  if (this.paused) { return Promise.resolve(true); }
+
+  var promises = this.fields.map(function (field) { return this$1.validate(
+    ("#" + (field.id)),
+    field.value
+  ); });
+
+  return Promise.all(promises).then(function (results) { return results.every(function (t) { return t; }); });
 };
 
-prototypeAccessors$5.locale.set = function (val) {
-  this._base.locale = val;
+/**
+ * Perform cleanup.
+ */
+Validator.prototype.destroy = function destroy () {
+  // Remove ErrorBag instance.
+  var idx = ERRORS.indexOf(this.errors);
+  if (idx === -1) { return; }
+
+  ERRORS.splice(idx, 1);
 };
 
-ScopedValidator.prototype.localize = function localize () {
-    var ref;
+/**
+ * Creates the fields to be validated.
+ */
+Validator.prototype._createFields = function _createFields (validations) {
+    var this$1 = this;
 
-    var args = [], len = arguments.length;
-    while ( len-- ) args[ len ] = arguments[ len ];
-  return (ref = this._base).localize.apply(ref, args);
+  if (!validations) { return; }
+
+  Object.keys(validations).forEach(function (field) {
+    var options = assign({}, { name: field, rules: validations[field] });
+    this$1.attach(options);
+  });
 };
 
-ScopedValidator.prototype.update = function update () {
-    var ref;
+/**
+ * Date rules need the existence of a format, so date_format must be supplied.
+ */
+Validator.prototype._getDateFormat = function _getDateFormat (validations) {
+  var format = null;
+  if (validations.date_format && Array.isArray(validations.date_format)) {
+    format = validations.date_format[0];
+  }
 
-    var args = [], len = arguments.length;
-    while ( len-- ) args[ len ] = arguments[ len ];
-  return (ref = this._base).update.apply(ref, args);
+  return format || this.dictionary.getDateFormat(this.locale);
 };
 
-ScopedValidator.prototype.attach = function attach (opts) {
-  var attachOpts = assign({}, opts, { vmId: this.id });
-
-  return this._base.attach(attachOpts);
+/**
+ * Checks if the passed rule is a date rule.
+ */
+Validator.prototype._isADateRule = function _isADateRule (rule) {
+  return !! ~['after', 'before', 'date_between', 'date_format'].indexOf(rule);
 };
 
-ScopedValidator.prototype.remove = function remove (ruleName) {
-  return this._base.remove(ruleName);
+/**
+ * Formats an error message for field and a rule.
+ */
+Validator.prototype._formatErrorMessage = function _formatErrorMessage (field, rule, data, targetName) {
+    if ( data === void 0 ) data = {};
+    if ( targetName === void 0 ) targetName = null;
+
+  var name = this._getFieldDisplayName(field);
+  var params = this._getLocalizedParams(rule, targetName);
+
+  return this.dictionary.getFieldMessage(this.locale, field.name, rule.name, [name, params, data]);
 };
 
-ScopedValidator.prototype.detach = function detach () {
-    var ref;
+/**
+ * Translates the parameters passed to the rule (mainly for target fields).
+ */
+Validator.prototype._getLocalizedParams = function _getLocalizedParams (rule, targetName) {
+    if ( targetName === void 0 ) targetName = null;
 
-    var args = [], len = arguments.length;
-    while ( len-- ) args[ len ] = arguments[ len ];
-  return (ref = this._base).detach.apply(ref, args.concat( [this.id] ));
+  if (~TARGET_RULES.indexOf(rule.name) && rule.params && rule.params[0]) {
+    var localizedName = targetName || this.dictionary.getAttribute(this.locale, rule.params[0], rule.params[0]);
+    return [localizedName].concat(rule.params.slice(1));
+  }
+
+  return rule.params;
 };
 
-ScopedValidator.prototype.extend = function extend () {
-    var ref;
-
-    var args = [], len = arguments.length;
-    while ( len-- ) args[ len ] = arguments[ len ];
-  return (ref = this._base).extend.apply(ref, args);
+/**
+ * Resolves an appropriate display name, first checking 'data-as' or the registered 'prettyName'
+ */
+Validator.prototype._getFieldDisplayName = function _getFieldDisplayName (field) {
+  return field.alias || this.dictionary.getAttribute(this.locale, field.name, field.name);
 };
 
-ScopedValidator.prototype.validate = function validate (descriptor, value, opts) {
-    if ( opts === void 0 ) opts = {};
+/**
+ * Adds a field flags to the flags collection.
+ */
+Validator.prototype._addFlag = function _addFlag (field, scope) {
+    if ( scope === void 0 ) scope = null;
 
-  return this._base.validate(descriptor, value, assign({}, { vmId: this.id }, opts || {}));
+  if (isNullOrUndefined(scope)) {
+    this.flags = assign({}, this.flags, ( obj = {}, obj[("" + (field.name))] = field.flags, obj ));
+      var obj;
+    return;
+  }
+
+  var scopeObj = assign({}, this.flags[("$" + scope)] || {}, ( obj$1 = {}, obj$1[("" + (field.name))] = field.flags, obj$1 ));
+    var obj$1;
+  this.flags = assign({}, this.flags, ( obj$2 = {}, obj$2[("$" + scope)] = scopeObj, obj$2 ));
+    var obj$2;
 };
 
-ScopedValidator.prototype.validateAll = function validateAll (values$$1, opts) {
-    if ( opts === void 0 ) opts = {};
+/**
+ * Resets fields that matches the matcher options or all fields if not specified.
+ */
+Validator.prototype._reset = function _reset (matcher) {
+    var this$1 = this;
 
-  return this._base.validateAll(values$$1, assign({}, { vmId: this.id }, opts || {}));
+  return new Promise(function (resolve) {
+    if (matcher) {
+      this$1.fields.filter(matcher).forEach(function (field) {
+        field.reset(); // reset field flags.
+        this$1.errors.remove(field.name, field.scope, field.id);
+      });
+
+      return resolve();
+    }
+
+    this$1.fields.items.forEach(function (i) { return i.reset(); });
+    this$1.errors.clear();
+    resolve();
+  });
 };
 
-ScopedValidator.prototype.validateScopes = function validateScopes (opts) {
-    if ( opts === void 0 ) opts = {};
+/**
+ * Tests a single input value against a rule.
+ */
+Validator.prototype._test = function _test (field, value, rule) {
+    var this$1 = this;
 
-  return this._base.validateScopes(assign({}, { vmId: this.id }, opts || {}));
+  var validator = RULES[rule.name];
+  var params = Array.isArray(rule.params) ? toArray(rule.params) : [];
+  var targetName = null;
+  if (!validator || typeof validator !== 'function') {
+    throw createError(("No such validator '" + (rule.name) + "' exists."));
+  }
+
+  // has field dependencies.
+  if (TARGET_RULES.indexOf(rule.name) !== -1) {
+    var target = find(field.dependencies, function (d) { return d.name === rule.name; });
+    if (target) {
+      targetName = target.field.alias;
+      params = [target.field.value].concat(params.slice(1));
+    }
+  } else if (rule.name === 'required' && field.rejectsFalse) {
+    // invalidate false if no args were specified and the field rejects false by default.
+    params = params.length ? params : [true];
+  }
+
+  if (this._isADateRule(rule.name)) {
+    var dateFormat = this._getDateFormat(field.rules);
+    if (rule.name !== 'date_format') {
+      params.push(dateFormat);
+    }
+  }
+
+  var result = validator(value, params);
+
+  // If it is a promise.
+  if (isCallable(result.then)) {
+    return result.then(function (values) {
+      var allValid = true;
+      var data = {};
+      if (Array.isArray(values)) {
+        allValid = values.every(function (t) { return (isObject(t) ? t.valid : t); });
+      } else { // Is a single object/boolean.
+        allValid = isObject(values) ? values.valid : values;
+        data = values.data;
+      }
+
+      return {
+        valid: allValid,
+        error: allValid ? undefined : this$1._createFieldError(field, rule, data, targetName)
+      };
+    });
+  }
+
+  if (!isObject(result)) {
+    result = { valid: result, data: {} };
+  }
+
+  return {
+    valid: result.valid,
+    error: result.valid ? undefined : this._createFieldError(field, rule, result.data, targetName)
+  };
 };
 
-ScopedValidator.prototype.destroy = function destroy () {
-  delete this.id;
-  delete this._base;
+/**
+ * Merges a validator object into the RULES and Messages.
+ */
+Validator._merge = function _merge (name, validator) {
+  if (isCallable(validator)) {
+    RULES[name] = validator;
+    return;
+  }
+
+  RULES[name] = validator.validate;
+  if (validator.getMessage) {
+    Validator.dictionary.setMessage(this.locale, name, validator.getMessage);
+  }
 };
 
-ScopedValidator.prototype.reset = function reset (matcher) {
-  return this._base.reset(Object.assign({}, matcher || {}, { vmId: this.id }));
+/**
+ * Guards from extension violations.
+ */
+Validator._guardExtend = function _guardExtend (name, validator) {
+  if (isCallable(validator)) {
+    return;
+  }
+
+  if (!isCallable(validator.validate)) {
+    throw createError(
+      ("Extension Error: The validator '" + name + "' must be a function or have a 'validate' method.")
+    );
+  }
+
+  if (!isCallable(validator.getMessage) && typeof validator.getMessage !== 'string') {
+    throw createError(
+      ("Extension Error: The validator '" + name + "' object must have a 'getMessage' method or string.")
+    );
+  }
 };
 
-ScopedValidator.prototype.flag = function flag () {
-    var ref;
+/**
+ * Creates a Field Error Object.
+ */
+Validator.prototype._createFieldError = function _createFieldError (field, rule, data, targetName) {
+    var this$1 = this;
 
-    var args = [], len = arguments.length;
-    while ( len-- ) args[ len ] = arguments[ len ];
-  return (ref = this._base).flag.apply(ref, args.concat( [this.id] ));
+  return {
+    id: field.id,
+    field: field.name,
+    msg: this._formatErrorMessage(field, rule, data, targetName),
+    rule: rule.name,
+    scope: field.scope,
+    regenerate: function () {
+      return this$1._formatErrorMessage(field, rule, data, targetName);
+    }
+  };
 };
 
-Object.defineProperties( ScopedValidator.prototype, prototypeAccessors$5 );
+/**
+ * Tries different strategies to find a field.
+ */
+Validator.prototype._resolveField = function _resolveField (name, scope) {
+  if (!isNullOrUndefined(scope)) {
+    return this.fields.find({ name: name, scope: scope });
+  }
+
+  if (name[0] === '#') {
+    return this.fields.find({ id: name.slice(1) });
+  }
+
+  if (name.indexOf('.') > -1) {
+    var ref = name.split('.');
+      var fieldScope = ref[0];
+      var fieldName = ref.slice(1);
+    var field = this.fields.find({ name: fieldName.join('.'), scope: fieldScope });
+    if (field) {
+      return field;
+    }
+  }
+
+  return this.fields.find({ name: name, scope: null });
+};
+
+/**
+ * Handles when a field is not found depending on the strict flag.
+ */
+Validator.prototype._handleFieldNotFound = function _handleFieldNotFound (name, scope) {
+  if (!this.strict) { return Promise.resolve(true); }
+
+  var fullName = isNullOrUndefined(scope) ? name : ("" + (!isNullOrUndefined(scope) ? scope + '.' : '') + name);
+  throw createError(
+    ("Validating a non-existent field: \"" + fullName + "\". Use \"attach()\" first.")
+  );
+};
+
+/**
+ * Starts the validation process.
+ */
+Validator.prototype._validate = function _validate (field, value, silent) {
+    var this$1 = this;
+    if ( silent === void 0 ) silent = false;
+
+  if (!field.isRequired && (isNullOrUndefined(value) || value === '')) {
+    return Promise.resolve({ valid: true });
+  }
+
+  var promises = [];
+  var errors = [];
+  var isExitEarly = false;
+  // use of '.some()' is to break iteration in middle by returning true
+  Object.keys(field.rules).some(function (rule) {
+    var result = this$1._test(field, value, { name: rule, params: field.rules[rule] });
+    if (isCallable(result.then)) {
+      promises.push(result);
+    } else if (this$1.fastExit && !result.valid) {
+      errors.push(result.error);
+      isExitEarly = true;
+    } else {
+      // promisify the result.
+      promises.push(new Promise(function (resolve) {
+        resolve(result);
+      }));
+    }
+
+    return isExitEarly;
+  });
+
+  if (isExitEarly) {
+    return Promise.resolve({
+      valid: false,
+      errors: errors
+    });
+  }
+
+  return Promise.all(promises).then(function (values) { return values.map(function (v) {
+    if (!v.valid) {
+      errors.push(v.error);
+    }
+
+    return v.valid;
+  }).every(function (t) { return t; }); }
+  ).then(function (result) {
+    return {
+      valid: result,
+      errors: errors
+    };
+  });
+};
+
+Object.defineProperties( Validator.prototype, prototypeAccessors );
+Object.defineProperties( Validator, staticAccessors );
 
 // 
 
+/* istanbul ignore next */
+var fakeFlags = createProxy({}, {
+  get: function get (target, key) {
+    // is a scope
+    if (String(key).indexOf('$') === 0) {
+      return fakeFlags;
+    }
+
+    return createFlags();
+  }
+});
+
 /**
  * Checks if a parent validator instance was requested.
  */
 var requestsValidator = function (injections) {
+  if (! injections) {
+    return false;
+  }
+
+  /* istanbul ignore next */
+  if (Array.isArray(injections) && ~injections.indexOf('$validator')) {
+    return true;
+  }
+
   if (isObject(injections) && injections.$validator) {
     return true;
   }
@@ -25201,6 +24702,11 @@ var requestsValidator = function (injections) {
   return false;
 };
 
+/**
+ * Creates a validator instance.
+ */
+var createValidator = function (vm, options) { return new Validator(null, { vm: vm, fastExit: options.fastExit }); };
+
 var mixin = {
   provide: function provide () {
     if (this.$validator && !isBuiltInComponent(this.$vnode)) {
@@ -25223,17 +24729,24 @@ var mixin = {
     }
 
     var options = Config.resolve(this);
+    var Vue = this.$options._base; // the vue constructor.
+    // TODO: Deprecate
+    /* istanbul ignore next */
+    if (this.$options.$validates) {
+      warn('The ctor $validates option has been deprecated please set the $_veeValidate.validator option to "new" instead');
+      this.$validator = createValidator(this, options);
+    }
 
     // if its a root instance, inject anyways, or if it requested a new instance.
     if (!this.$parent || (this.$options.$_veeValidate && /new/.test(this.$options.$_veeValidate.validator))) {
-      this.$validator = new ScopedValidator(Config.dependency('validator'), this);
+      this.$validator = createValidator(this, options);
     }
 
     var requested = requestsValidator(this.$options.inject);
 
     // if automatic injection is enabled and no instance was requested.
     if (! this.$validator && options.inject && !requested) {
-      this.$validator = new ScopedValidator(Config.dependency('validator'), this);
+      this.$validator = createValidator(this, options);
     }
 
     // don't inject errors or fieldBag as no validator was resolved.
@@ -25242,9 +24755,9 @@ var mixin = {
     }
 
     // There is a validator but it isn't injected, mark as reactive.
-    if (!requested && this.$validator) {
-      var Vue = this.$options._base; // the vue constructor.
+    if (! requested && this.$validator) {
       Vue.util.defineReactive(this.$validator, 'errors', this.$validator.errors);
+      Vue.util.defineReactive(this.$validator, 'flags', this.$validator.flags);
     }
 
     if (! this.$options.computed) {
@@ -25255,26 +24768,21 @@ var mixin = {
       return this.$validator.errors;
     };
     this.$options.computed[options.fieldsBagName || 'fields'] = function fieldBagGetter () {
-      return this.$validator.fields.items.reduce(function (acc, field) {
-        if (field.scope) {
-          if (!acc[("$" + (field.scope))]) {
-            acc[("$" + (field.scope))] = {};
-          }
+      if (!Object.keys(this.$validator.flags).length) {
+        return fakeFlags;
+      }
 
-          acc[("$" + (field.scope))][field.name] = field.flags;
-
-          return acc;
-        }
-
-        acc[field.name] = field.flags;
-
-        return acc;
-      }, {});
+      return this.$validator.flags;
     };
   },
+
   beforeDestroy: function beforeDestroy () {
-    if (this.$validator && this._uid === this.$validator.id) {
-      this.$validator.errors.clear(); // remove errors generated by this component.
+    if (isBuiltInComponent(this.$vnode)) { return; }
+
+    // mark the validator paused to prevent delayed validation.
+    if (this.$validator && this.$validator.ownerId === this._uid) {
+      this.$validator.pause();
+      this.$validator.destroy();
     }
   }
 };
@@ -25284,30 +24792,28 @@ var mixin = {
 /**
  * Finds the requested field by id from the context object.
  */
-function findField (el, context) {
+var findField = function (el, context) {
   if (!context || !context.$validator) {
     return null;
   }
 
-  return context.$validator.fields.find({ id: el._veeValidateId });
-}
+  return context.$validator.fields.find({ id: getDataAttribute(el, 'id') });
+};
+
 var directive = {
   bind: function bind (el, binding, vnode) {
     var validator = vnode.context.$validator;
-    if (!validator) {
-      if (true) {
-        warn("No validator instance is present on vm, did you forget to inject '$validator'?");
-      }
-
+    if (! validator) {
+      warn("No validator instance is present on vm, did you forget to inject '$validator'?");
       return;
     }
 
-    var fieldOptions = Resolver.generate(el, binding, vnode);
+    var fieldOptions = Generator.generate(el, binding, vnode);
     validator.attach(fieldOptions);
   },
-  inserted: function inserted (el, binding, vnode) {
+  inserted: function (el, binding, vnode) {
     var field = findField(el, vnode.context);
-    var scope = Resolver.resolveScope(el, binding, vnode);
+    var scope = Generator.resolveScope(el, binding, vnode);
 
     // skip if scope hasn't changed.
     if (!field || scope === field.scope) { return; }
@@ -25318,13 +24824,13 @@ var directive = {
     // allows the field to re-evaluated once more in the update hook.
     field.updated = false;
   },
-  update: function update (el, binding, vnode) {
+  update: function (el, binding, vnode) {
     var field = findField(el, vnode.context);
 
     // make sure we don't do unneccasary work if no important change was done.
     if (!field || (field.updated && isEqual(binding.value, binding.oldValue))) { return; }
-    var scope = Resolver.resolveScope(el, binding, vnode);
-    var rules = Resolver.resolveRules(el, binding, vnode);
+    var scope = Generator.resolveScope(el, binding, vnode);
+    var rules = Generator.resolveRules(el, binding);
 
     field.update({
       scope: scope,
@@ -25346,51 +24852,30 @@ var Vue;
 function install (_Vue, options) {
   if ( options === void 0 ) options = {};
 
-  if (Vue && _Vue === Vue) {
-    if (true) {
-      warn('already installed, Vue.use(VeeValidate) should only be called once.');
-    }
+  if (Vue) {
+    warn('already installed, Vue.use(VeeValidate) should only be called once.');
     return;
   }
 
-  detectPassiveSupport();
   Vue = _Vue;
-  var validator = new Validator(options);
-  var localVue = new Vue({
-    data: function () { return ({
-      errors: validator.errors,
-      fields: validator.fields
-    }); }
-  });
-  Config.register('vm', localVue);
-  Config.register('validator', validator);
   Config.merge(options);
-
   var ref = Config.current;
+  var locale = ref.locale;
   var dictionary = ref.dictionary;
   var i18n = ref.i18n;
 
   if (dictionary) {
-    validator.localize(dictionary); // merge the dictionary.
+    Validator.localize(dictionary); // merge the dictionary.
   }
 
-  var onLocaleChanged = function () {
-    validator.errors.regenerate();
-  };
-
-  // watch locale changes using localVue instance or i18n.
-  if (!i18n) {
-    if (typeof window !== 'undefined') {
-      localVue.$on('localeChanged', onLocaleChanged);
-    }
-  } else {
-    i18n._vm.$watch('locale', onLocaleChanged);
-  }
-
-  if (!i18n && options.locale) {
-    validator.localize(options.locale); // set the locale
+  // try to watch locale changes.
+  if (i18n && i18n._vm && isCallable(i18n._vm.$watch)) {
+    i18n._vm.$watch('locale', function () {
+      Validator.regenerate();
+    });
   }
 
+  Validator.localize(locale); // set the locale
   Validator.setStrictMode(Config.current.strict);
 
   Vue.mixin(mixin);
@@ -25417,8 +24902,6 @@ var isDefinedGlobally = function () {
   return typeof VeeValidate !== 'undefined';
 };
 
-var obj;
-
 var messages = {
   _default: function (field) { return ("The " + field + " value is not valid."); },
   after: function (field, ref) {
@@ -25476,7 +24959,7 @@ var messages = {
   email: function (field) { return ("The " + field + " field must be a valid email."); },
   ext: function (field) { return ("The " + field + " field must be a valid file."); },
   image: function (field) { return ("The " + field + " field must be an image."); },
-  included: function (field) { return ("The " + field + " field must be a valid value."); },
+  in: function (field) { return ("The " + field + " field must be a valid value."); },
   integer: function (field) { return ("The " + field + " field must be an integer."); },
   ip: function (field) { return ("The " + field + " field must be a valid ip address."); },
   length: function (field, ref) {
@@ -25484,7 +24967,7 @@ var messages = {
     var max = ref[1];
 
     if (max) {
-      return ("The " + field + " length must be between " + length + " and " + max + ".");
+      return ("The " + field + " length be between " + length + " and " + max + ".");
     }
 
     return ("The " + field + " length must be " + length + ".");
@@ -25510,7 +24993,7 @@ var messages = {
 
     return ("The " + field + " field must be " + min + " or more.");
 },
-  excluded: function (field) { return ("The " + field + " field must be a valid value."); },
+  not_in: function (field) { return ("The " + field + " field must be a valid value."); },
   numeric: function (field) { return ("The " + field + " field may only contain numeric characters."); },
   regex: function (field) { return ("The " + field + " field format is invalid."); },
   required: function (field) { return ("The " + field + " field is required."); },
@@ -25530,7 +25013,7 @@ var locale = {
 
 if (isDefinedGlobally()) {
   // eslint-disable-next-line
-  VeeValidate.Validator.localize(( obj = {}, obj[locale.name] = locale, obj ));
+  VeeValidate.Validator.addLocale(locale);
 }
 
 // 
@@ -27683,7 +27166,7 @@ function setUTCISOWeekYear (dirtyDate, dirtyISOYear, dirtyOptions) {
   return date
 }
 
-var MILLISECONDS_IN_MINUTE$6 = 60000;
+var MILLISECONDS_IN_MINUTE$7 = 60000;
 
 function setTimeOfDay (hours, timeOfDay) {
   var isAM = timeOfDay === 0;
@@ -27847,7 +27330,7 @@ var units = {
   timezone: {
     priority: 110,
     set: function (dateValues, value) {
-      dateValues.date = new Date(dateValues.date.getTime() - value * MILLISECONDS_IN_MINUTE$6);
+      dateValues.date = new Date(dateValues.date.getTime() - value * MILLISECONDS_IN_MINUTE$7);
       return dateValues
     }
   },
@@ -27862,7 +27345,7 @@ var units = {
 };
 
 var TIMEZONE_UNIT_PRIORITY = 110;
-var MILLISECONDS_IN_MINUTE$7 = 60000;
+var MILLISECONDS_IN_MINUTE$6 = 60000;
 
 var longFormattingTokensRegExp$1 = /(\[[^[]*])|(\\)?(LTS|LT|LLLL|LLL|LL|L|llll|lll|ll|l)/g;
 var defaultParsingTokensRegExp = /(\[[^[]*])|(\\)?(x|ss|s|mm|m|hh|h|do|dddd|ddd|dd|d|aa|a|ZZ|Z|YYYY|YY|X|Wo|WW|W|SSS|SS|S|Qo|Q|Mo|MMMM|MMM|MM|M|HH|H|GGGG|GG|E|Do|DDDo|DDDD|DDD|DD|D|A|.)/g;
@@ -28145,10 +27628,10 @@ function dateToSystemTimezone (dateValues) {
   var offset = date.getTimezoneOffset();
 
   // Get the system timezone offset at the exact moment of time
-  offset = new Date(time + offset * MILLISECONDS_IN_MINUTE$7).getTimezoneOffset();
+  offset = new Date(time + offset * MILLISECONDS_IN_MINUTE$6).getTimezoneOffset();
 
   // Convert date in timezone "UTC+00:00" to the system timezone
-  dateValues.date = new Date(time + offset * MILLISECONDS_IN_MINUTE$7);
+  dateValues.date = new Date(time + offset * MILLISECONDS_IN_MINUTE$6);
 
   return dateValues
 }
@@ -28183,17 +27666,17 @@ function parseDate$1 (date, format$$1) {
   return parsed;
 }
 
-var afterValidator = function (value, ref) {
+var after = function (value, ref) {
   var otherValue = ref[0];
   var inclusion = ref[1];
-  var format$$1 = ref[2];
+  var format = ref[2];
 
-  if (typeof format$$1 === 'undefined') {
-    format$$1 = inclusion;
+  if (typeof format === 'undefined') {
+    format = inclusion;
     inclusion = false;
   }
-  value = parseDate$1(value, format$$1);
-  otherValue = parseDate$1(otherValue, format$$1);
+  value = parseDate$1(value, format);
+  otherValue = parseDate$1(otherValue, format);
 
   // if either is not valid.
   if (!value || !otherValue) {
@@ -28203,22 +27686,12 @@ var afterValidator = function (value, ref) {
   return isAfter(value, otherValue) || (inclusion && isEqual$1(value, otherValue));
 };
 
-var options = {
-  hasTarget: true,
-  isDate: true
-};
-
-var after = {
-  validate: afterValidator,
-  options: options
-};
-
 /**
  * Some Alpha Regex helpers.
  * https://github.com/chriso/validator.js/blob/master/src/lib/alpha.js
  */
 
-var alpha = {
+var alpha$1 = {
   en: /^[A-Z]*$/i,
   cs: /^[A-ZÁČĎÉĚÍŇÓŘŠŤÚŮÝŽ]*$/i,
   da: /^[A-ZÆØÅ]*$/i,
@@ -28308,14 +27781,10 @@ var validate = function (value, ref) {
 
   // Match at least one locale.
   if (! locale) {
-    return Object.keys(alpha).some(function (loc) { return alpha[loc].test(value); });
+    return Object.keys(alpha$1).some(function (loc) { return alpha$1[loc].test(value); });
   }
 
-  return (alpha[locale] || alpha.en).test(value);
-};
-
-var alpha$1 = {
-  validate: validate
+  return (alpha$1[locale] || alpha$1.en).test(value);
 };
 
 var validate$1 = function (value, ref) {
@@ -28334,10 +27803,6 @@ var validate$1 = function (value, ref) {
   return (alphaDash[locale] || alphaDash.en).test(value);
 };
 
-var alpha_dash = {
-  validate: validate$1
-};
-
 var validate$2 = function (value, ref) {
   if ( ref === void 0 ) ref = [];
   var locale = ref[0]; if ( locale === void 0 ) locale = null;
@@ -28354,10 +27819,6 @@ var validate$2 = function (value, ref) {
   return (alphanumeric[locale] || alphanumeric.en).test(value);
 };
 
-var alpha_num = {
-  validate: validate$2
-};
-
 var validate$3 = function (value, ref) {
   if ( ref === void 0 ) ref = [];
   var locale = ref[0]; if ( locale === void 0 ) locale = null;
@@ -28374,21 +27835,17 @@ var validate$3 = function (value, ref) {
   return (alphaSpaces[locale] || alphaSpaces.en).test(value);
 };
 
-var alpha_spaces = {
-  validate: validate$3
-};
-
-var validate$4 = function (value, ref) {
+var before = function (value, ref) {
   var otherValue = ref[0];
   var inclusion = ref[1];
-  var format$$1 = ref[2];
+  var format = ref[2];
 
-  if (typeof format$$1 === 'undefined') {
-    format$$1 = inclusion;
+  if (typeof format === 'undefined') {
+    format = inclusion;
     inclusion = false;
   }
-  value = parseDate$1(value, format$$1);
-  otherValue = parseDate$1(otherValue, format$$1);
+  value = parseDate$1(value, format);
+  otherValue = parseDate$1(otherValue, format);
 
   // if either is not valid.
   if (!value || !otherValue) {
@@ -28398,40 +27855,18 @@ var validate$4 = function (value, ref) {
   return isBefore(value, otherValue) || (inclusion && isEqual$1(value, otherValue));
 };
 
-var options$1 = {
-  hasTarget: true,
-  isDate: true
-};
-
-var before = {
-  validate: validate$4,
-  options: options$1
-};
-
-var validate$5 = function (value, ref) {
+var validate$4 = function (value, ref) {
   var min = ref[0];
   var max = ref[1];
 
   if (Array.isArray(value)) {
-    return value.every(function (val) { return validate$5(val, [min, max]); });
+    return value.every(function (val) { return validate$4(val, [min, max]); });
   }
 
   return Number(min) <= value && Number(max) >= value;
 };
 
-var between = {
-  validate: validate$5
-};
-
-var validate$6 = function (value, other) { return String(value) === String(other); };
-var options$2 = {
-  hasTarget: true
-};
-
-var confirmed = {
-  validate: validate$6,
-  options: options$2
-};
+var confirmed = function (value, other) { return String(value) === String(other); };
 
 function unwrapExports (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -28442,6 +27877,7 @@ function createCommonjsModule(fn, module) {
 }
 
 var assertString_1 = createCommonjsModule(function (module, exports) {
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -28460,6 +27896,7 @@ module.exports = exports['default'];
 unwrapExports(assertString_1);
 
 var isCreditCard_1 = createCommonjsModule(function (module, exports) {
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -28473,7 +27910,7 @@ var _assertString2 = _interopRequireDefault(assertString_1);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable max-len */
-var creditCard = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|(222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11}|6[27][0-9]{14})$/;
+var creditCard = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|(222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11}|62[0-9]{14})$/;
 /* eslint-enable max-len */
 
 function isCreditCard(str) {
@@ -28508,81 +27945,15 @@ module.exports = exports['default'];
 
 var isCreditCard = unwrapExports(isCreditCard_1);
 
-var validate$7 = function (value) { return isCreditCard(String(value)); };
+var credit_card = function (value) { return isCreditCard(String(value)); };
 
-var credit_card = {
-  validate: validate$7
-};
-
-var validate$8 = function (value, params) {
-  var assign, assign$1;
-
-  var min$$1;
-  var max$$1;
-  var format$$1;
-  var inclusivity = '()';
-
-  if (params.length > 3) {
-    (assign = params, min$$1 = assign[0], max$$1 = assign[1], inclusivity = assign[2], format$$1 = assign[3]);
-  } else {
-    (assign$1 = params, min$$1 = assign$1[0], max$$1 = assign$1[1], format$$1 = assign$1[2]);
-  }
-
-  var minDate = parseDate$1(String(min$$1), format$$1);
-  var maxDate = parseDate$1(String(max$$1), format$$1);
-  var dateVal = parseDate$1(String(value), format$$1);
-
-  if (!minDate || !maxDate || !dateVal) {
-    return false;
-  }
-
-  if (inclusivity === '()') {
-    return isAfter(dateVal, minDate) && isBefore(dateVal, maxDate);
-  }
-
-  if (inclusivity === '(]') {
-    return isAfter(dateVal, minDate) && (isEqual$1(dateVal, maxDate) || isBefore(dateVal, maxDate));
-  }
-
-  if (inclusivity === '[)') {
-    return isBefore(dateVal, maxDate) && (isEqual$1(dateVal, minDate) || isAfter(dateVal, minDate));
-  }
-
-  return isEqual$1(dateVal, maxDate) || isEqual$1(dateVal, minDate) ||
-    (isBefore(dateVal, maxDate) && isAfter(dateVal, minDate));
-};
-
-var options$3 = {
-  isDate: true
-};
-
-var date_between = {
-  validate: validate$8,
-  options: options$3
-};
-
-var validate$9 = function (value, ref) {
-  var format = ref[0];
-
-  return !!parseDate$1(value, format);
-};
-
-var options$4 = {
-  isDate: true
-};
-
-var date_format = {
-  validate: validate$9,
-  options: options$4
-};
-
-var validate$a = function (value, ref) {
+var validate$5 = function (value, ref) {
   if ( ref === void 0 ) ref = [];
   var decimals = ref[0]; if ( decimals === void 0 ) decimals = '*';
   var separator = ref[1]; if ( separator === void 0 ) separator = '.';
 
   if (Array.isArray(value)) {
-    return value.every(function (val) { return validate$a(val, [decimals, separator]); });
+    return value.every(function (val) { return validate$5(val, [decimals, separator]); });
   }
 
   if (value === null || value === undefined || value === '') {
@@ -28607,25 +27978,61 @@ var validate$a = function (value, ref) {
     return parsedValue === parsedValue;
 };
 
-var decimal = {
-  validate: validate$a
+var date_between = function (value, params) {
+  var min;
+  var max;
+  var format;
+  var inclusivity = '()';
+
+  if (params.length > 3) {
+    var assign;
+    (assign = params, min = assign[0], max = assign[1], inclusivity = assign[2], format = assign[3]);
+  } else {
+    var assign$1;
+    (assign$1 = params, min = assign$1[0], max = assign$1[1], format = assign$1[2]);
+  }
+
+  var minDate = parseDate$1(min, format);
+  var maxDate = parseDate$1(max, format);
+  var dateVal = parseDate$1(value, format);
+
+  if (!minDate || !maxDate || !dateVal) {
+    return false;
+  }
+
+  if (inclusivity === '()') {
+    return isAfter(dateVal, minDate) && isBefore(dateVal, maxDate);
+  }
+
+  if (inclusivity === '(]') {
+    return isAfter(dateVal, minDate) && (isEqual$1(dateVal, maxDate) || isBefore(dateVal, maxDate));
+  }
+
+  if (inclusivity === '[)') {
+    return isBefore(dateVal, maxDate) && (isEqual$1(dateVal, minDate) || isAfter(dateVal, minDate));
+  }
+
+  return isEqual$1(dateVal, maxDate) || isEqual$1(dateVal, minDate) ||
+        (isBefore(dateVal, maxDate) && isAfter(dateVal, minDate));
 };
 
-var validate$b = function (value, ref) {
+var date_format = function (value, ref) {
+  var format = ref[0];
+
+  return !!parseDate$1(value, format);
+};
+
+var validate$6 = function (value, ref) {
   var length = ref[0];
 
   if (Array.isArray(value)) {
-    return value.every(function (val) { return validate$b(val, [length]); });
+    return value.every(function (val) { return validate$6(val, [length]); });
   }
   var strVal = String(value);
 
   return /^[0-9]*$/.test(strVal) && strVal.length === Number(length);
 };
 
-var digits = {
-  validate: validate$b
-};
-
 var validateImage = function (file, width, height) {
   var URL = window.URL || window.webkitURL;
   return new Promise(function (resolve) {
@@ -28639,7 +28046,7 @@ var validateImage = function (file, width, height) {
   });
 };
 
-var validate$c = function (files, ref) {
+var dimensions = function (files, ref) {
   var width = ref[0];
   var height = ref[1];
 
@@ -28656,11 +28063,8 @@ var validate$c = function (files, ref) {
   return Promise.all(list.map(function (file) { return validateImage(file, width, height); }));
 };
 
-var dimensions = {
-  validate: validate$c
-};
-
 var merge_1 = createCommonjsModule(function (module, exports) {
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -28683,6 +28087,7 @@ module.exports = exports['default'];
 unwrapExports(merge_1);
 
 var isByteLength_1 = createCommonjsModule(function (module, exports) {
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -28719,12 +28124,13 @@ module.exports = exports['default'];
 
 unwrapExports(isByteLength_1);
 
-var isFQDN_1 = createCommonjsModule(function (module, exports) {
+var isFQDN = createCommonjsModule(function (module, exports) {
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = isFQDN;
+exports.default = isFDQN;
 
 
 
@@ -28742,7 +28148,7 @@ var default_fqdn_options = {
   allow_trailing_dot: false
 };
 
-function isFQDN(str, options) {
+function isFDQN(str, options) {
   (0, _assertString2.default)(str);
   options = (0, _merge2.default)(options, default_fqdn_options);
 
@@ -28751,11 +28157,6 @@ function isFQDN(str, options) {
     str = str.substring(0, str.length - 1);
   }
   var parts = str.split('.');
-  for (var i = 0; i < parts.length; i++) {
-    if (parts[i].length > 63) {
-      return false;
-    }
-  }
   if (options.require_tld) {
     var tld = parts.pop();
     if (!parts.length || !/^([a-z\u00a1-\uffff]{2,}|xn[a-z0-9-]{2,})$/i.test(tld)) {
@@ -28766,8 +28167,8 @@ function isFQDN(str, options) {
       return false;
     }
   }
-  for (var part, _i = 0; _i < parts.length; _i++) {
-    part = parts[_i];
+  for (var part, i = 0; i < parts.length; i++) {
+    part = parts[i];
     if (options.allow_underscores) {
       part = part.replace(/_/g, '');
     }
@@ -28787,9 +28188,10 @@ function isFQDN(str, options) {
 module.exports = exports['default'];
 });
 
-unwrapExports(isFQDN_1);
+unwrapExports(isFQDN);
 
 var isEmail_1 = createCommonjsModule(function (module, exports) {
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -28810,7 +28212,7 @@ var _isByteLength2 = _interopRequireDefault(isByteLength_1);
 
 
 
-var _isFQDN2 = _interopRequireDefault(isFQDN_1);
+var _isFQDN2 = _interopRequireDefault(isFQDN);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -28825,7 +28227,6 @@ var default_email_options = {
 /* eslint-disable no-control-regex */
 var displayName = /^[a-z\d!#\$%&'\*\+\-\/=\?\^_`{\|}~\.\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+[a-z\d!#\$%&'\*\+\-\/=\?\^_`{\|}~\,\.\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF\s]*<(.+)>$/i;
 var emailUserPart = /^[a-z\d!#\$%&'\*\+\-\/=\?\^_`{\|}~]+$/i;
-var gmailUserPart = /^[a-z\d]+$/;
 var quotedEmailUser = /^([\s\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e]|(\\[\x01-\x09\x0b\x0c\x0d-\x7f]))*$/i;
 var emailUserUtf8Part = /^[a-z\d!#\$%&'\*\+\-\/=\?\^_`{\|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+$/i;
 var quotedEmailUserUtf8 = /^([\s\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|(\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*$/i;
@@ -28850,31 +28251,8 @@ function isEmail(str, options) {
   var user = parts.join('@');
 
   var lower_domain = domain.toLowerCase();
-
   if (lower_domain === 'gmail.com' || lower_domain === 'googlemail.com') {
-    /*
-      Previously we removed dots for gmail addresses before validating.
-      This was removed because it allows `multiple..dots@gmail.com`
-      to be reported as valid, but it is not.
-      Gmail only normalizes single dots, removing them from here is pointless,
-      should be done in normalizeEmail
-    */
-    user = user.toLowerCase();
-
-    // Removing sub-address from username before gmail validation
-    var username = user.split('+')[0];
-
-    // Dots are not included in gmail length restriction
-    if (!(0, _isByteLength2.default)(username.replace('.', ''), { min: 6, max: 30 })) {
-      return false;
-    }
-
-    var _user_parts = username.split('.');
-    for (var i = 0; i < _user_parts.length; i++) {
-      if (!gmailUserPart.test(_user_parts[i])) {
-        return false;
-      }
-    }
+    user = user.replace(/\./g, '').toLowerCase();
   }
 
   if (!(0, _isByteLength2.default)(user, { max: 64 }) || !(0, _isByteLength2.default)(domain, { max: 254 })) {
@@ -28893,8 +28271,8 @@ function isEmail(str, options) {
   var pattern = options.allow_utf8_local_part ? emailUserUtf8Part : emailUserPart;
 
   var user_parts = user.split('.');
-  for (var _i = 0; _i < user_parts.length; _i++) {
-    if (!pattern.test(user_parts[_i])) {
+  for (var i = 0; i < user_parts.length; i++) {
+    if (!pattern.test(user_parts[i])) {
       return false;
     }
   }
@@ -28906,14 +28284,7 @@ module.exports = exports['default'];
 
 var isEmail = unwrapExports(isEmail_1);
 
-var validate$d = function (value, ref) {
-  if ( ref === void 0 ) ref = [];
-  var multiple = ref[0]; if ( multiple === void 0 ) multiple = false;
-
-  if (multiple) {
-    value = value.split(',').map(function (emailStr) { return emailStr.trim(); });
-  }
-
+var validate$7 = function (value) {
   if (Array.isArray(value)) {
     return value.every(function (val) { return isEmail(String(val)); });
   }
@@ -28921,65 +28292,33 @@ var validate$d = function (value, ref) {
   return isEmail(String(value));
 };
 
-var email = {
-  validate: validate$d
-};
-
-var validate$e = function (value, options) {
-  if (Array.isArray(value)) {
-    return value.every(function (val) { return validate$e(val, options); });
-  }
-
-  return toArray(options).some(function (item) {
-    // eslint-disable-next-line
-    return item == value;
-  });
-};
-
-var included = {
-  validate: validate$e
-};
-
-var validate$f = function () {
-  var args = [], len = arguments.length;
-  while ( len-- ) args[ len ] = arguments[ len ];
-
-  return !validate$e.apply(void 0, args);
-};
-
-var excluded = {
-  validate: validate$f
-};
-
-var validate$g = function (files, extensions) {
+var ext = function (files, extensions) {
   var regex = new RegExp((".(" + (extensions.join('|')) + ")$"), 'i');
 
   return files.every(function (file) { return regex.test(file.name); });
 };
 
-var ext = {
-  validate: validate$g
-};
+var image = function (files) { return files.every(function (file) { return /\.(jpg|svg|jpeg|png|bmp|gif)$/i.test(file.name); }
+); };
 
-var validate$h = function (files) { return files.every(function (file) { return /\.(jpg|svg|jpeg|png|bmp|gif)$/i.test(file.name); }); };
-
-var image = {
-  validate: validate$h
-};
-
-var validate$i = function (value) {
+var validate$8 = function (value, options) {
   if (Array.isArray(value)) {
-    return value.every(function (val) { return /^-?[0-9]+$/.test(String(val)); });
+    return value.every(function (val) { return validate$8(val, options); });
   }
 
-  return /^-?[0-9]+$/.test(String(value));
+  // eslint-disable-next-line
+  return !! options.filter(function (option) { return option == value; }).length;
 };
 
-var integer = {
-  validate: validate$i
+var is = function (value, ref) {
+  if ( ref === void 0 ) ref = [];
+  var other = ref[0];
+
+  return value === other;
 };
 
 var isIP_1 = createCommonjsModule(function (module, exports) {
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -29045,7 +28384,10 @@ function isIP(str) {
           return false; // multiple :: in address
         }
         foundOmissionBlock = true;
-      } else if (foundIPv4TransitionBlock && i === blocks.length - 1) ; else if (!ipv6Block.test(blocks[i])) {
+      } else if (foundIPv4TransitionBlock && i === blocks.length - 1) {
+        // it has been checked before that the last
+        // block is a valid IPv4 address
+      } else if (!ipv6Block.test(blocks[i])) {
         return false;
       }
     }
@@ -29061,7 +28403,7 @@ module.exports = exports['default'];
 
 var isIP = unwrapExports(isIP_1);
 
-var validate$j = function (value, ref) {
+var ip = function (value, ref) {
   if ( ref === void 0 ) ref = [];
   var version = ref[0]; if ( version === void 0 ) version = 4;
 
@@ -29076,32 +28418,6 @@ var validate$j = function (value, ref) {
   return isIP(value, version);
 };
 
-var ip = {
-  validate: validate$j
-};
-
-var validate$k = function (value, ref) {
-  if ( ref === void 0 ) ref = [];
-  var other = ref[0];
-
-  return value === other;
-};
-
-var is = {
-  validate: validate$k
-};
-
-var validate$l = function (value, ref) {
-  if ( ref === void 0 ) ref = [];
-  var other = ref[0];
-
-  return value !== other;
-};
-
-var is_not = {
-  validate: validate$l
-};
-
 /**
  * @param {Array|String} value
  * @param {Number} length
@@ -29118,7 +28434,7 @@ var compare = function (value, length, max) {
   return value.length >= length && value.length <= max;
 };
 
-var validate$m = function (value, ref) {
+var length = function (value, ref) {
   var length = ref[0];
   var max = ref[1]; if ( max === void 0 ) max = undefined;
 
@@ -29138,11 +28454,15 @@ var validate$m = function (value, ref) {
   return compare(value, length, max);
 };
 
-var length = {
-  validate: validate$m
+var integer = function (value) {
+  if (Array.isArray(value)) {
+    return value.every(function (val) { return /^-?[0-9]+$/.test(String(val)); });
+  }
+
+  return /^-?[0-9]+$/.test(String(value));
 };
 
-var validate$n = function (value, ref) {
+var max$1 = function (value, ref) {
   var length = ref[0];
 
   if (value === undefined || value === null) {
@@ -29152,11 +28472,7 @@ var validate$n = function (value, ref) {
   return String(value).length <= length;
 };
 
-var max$1 = {
-  validate: validate$n
-};
-
-var validate$o = function (value, ref) {
+var max_value = function (value, ref) {
   var max = ref[0];
 
   if (Array.isArray(value) || value === null || value === undefined || value === '') {
@@ -29166,21 +28482,13 @@ var validate$o = function (value, ref) {
   return Number(value) <= max;
 };
 
-var max_value = {
-  validate: validate$o
-};
-
-var validate$p = function (files, mimes) {
+var mimes = function (files, mimes) {
   var regex = new RegExp(((mimes.join('|').replace('*', '.+')) + "$"), 'i');
 
   return files.every(function (file) { return regex.test(file.type); });
 };
 
-var mimes = {
-  validate: validate$p
-};
-
-var validate$q = function (value, ref) {
+var min$1 = function (value, ref) {
   var length = ref[0];
 
   if (value === undefined || value === null) {
@@ -29189,11 +28497,7 @@ var validate$q = function (value, ref) {
   return String(value).length >= length;
 };
 
-var min$1 = {
-  validate: validate$q
-};
-
-var validate$r = function (value, ref) {
+var min_value = function (value, ref) {
   var min = ref[0];
 
   if (Array.isArray(value) || value === null || value === undefined || value === '') {
@@ -29203,11 +28507,16 @@ var validate$r = function (value, ref) {
   return Number(value) >= min;
 };
 
-var min_value = {
-  validate: validate$r
+var validate$9 = function (value, options) {
+  if (Array.isArray(value)) {
+    return value.every(function (val) { return validate$9(val, options); });
+  }
+
+  // eslint-disable-next-line
+  return ! options.filter(function (option) { return option == value; }).length;
 };
 
-var validate$s = function (value) {
+var numeric = function (value) {
   if (Array.isArray(value)) {
     return value.every(function (val) { return /^[0-9]+$/.test(String(val)); });
   }
@@ -29215,11 +28524,7 @@ var validate$s = function (value) {
   return /^[0-9]+$/.test(String(value));
 };
 
-var numeric = {
-  validate: validate$s
-};
-
-var validate$t = function (value, ref) {
+var regex = function (value, ref) {
   var regex = ref[0];
   var flags = ref.slice(1);
 
@@ -29230,16 +28535,12 @@ var validate$t = function (value, ref) {
   return new RegExp(regex, flags).test(String(value));
 };
 
-var regex = {
-  validate: validate$t
-};
-
-var validate$u = function (value, ref) {
+var required = function (value, ref) {
   if ( ref === void 0 ) ref = [];
   var invalidateFalse = ref[0]; if ( invalidateFalse === void 0 ) invalidateFalse = false;
 
   if (Array.isArray(value)) {
-    return !!value.length;
+    return !! value.length;
   }
 
   // incase a field considers `false` as an empty value like checkboxes.
@@ -29251,14 +28552,10 @@ var validate$u = function (value, ref) {
     return false;
   }
 
-  return !!String(value).trim().length;
+  return !! String(value).trim().length;
 };
 
-var required = {
-  validate: validate$u
-};
-
-var validate$v = function (files, ref) {
+var size = function (files, ref) {
   var size = ref[0];
 
   if (isNaN(size)) {
@@ -29275,11 +28572,8 @@ var validate$v = function (files, ref) {
   return true;
 };
 
-var size = {
-  validate: validate$v
-};
-
 var isURL_1 = createCommonjsModule(function (module, exports) {
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -29292,7 +28586,7 @@ var _assertString2 = _interopRequireDefault(assertString_1);
 
 
 
-var _isFQDN2 = _interopRequireDefault(isFQDN_1);
+var _isFQDN2 = _interopRequireDefault(isFQDN);
 
 
 
@@ -29430,7 +28724,7 @@ module.exports = exports['default'];
 
 var isURL = unwrapExports(isURL_1);
 
-var validate$w = function (value, ref) {
+var url = function (value, ref) {
   if ( ref === void 0 ) ref = [];
   var requireProtocol = ref[0]; if ( requireProtocol === void 0 ) requireProtocol = false;
 
@@ -29446,48 +28740,42 @@ var validate$w = function (value, ref) {
   return isURL(value, options);
 };
 
-var url = {
-  validate: validate$w
-};
-
 /* eslint-disable camelcase */
-
-var Rules = /*#__PURE__*/Object.freeze({
+var Rules = {
   after: after,
-  alpha_dash: alpha_dash,
-  alpha_num: alpha_num,
-  alpha_spaces: alpha_spaces,
-  alpha: alpha$1,
+  alpha_dash: validate$1,
+  alpha_num: validate$2,
+  alpha_spaces: validate$3,
+  alpha: validate,
   before: before,
-  between: between,
+  between: validate$4,
   confirmed: confirmed,
   credit_card: credit_card,
   date_between: date_between,
   date_format: date_format,
-  decimal: decimal,
-  digits: digits,
+  decimal: validate$5,
+  digits: validate$6,
   dimensions: dimensions,
-  email: email,
+  email: validate$7,
   ext: ext,
   image: image,
-  included: included,
+  in: validate$8,
   integer: integer,
   length: length,
   ip: ip,
-  is_not: is_not,
   is: is,
   max: max$1,
   max_value: max_value,
   mimes: mimes,
   min: min$1,
   min_value: min_value,
-  excluded: excluded,
+  not_in: validate$9,
   numeric: numeric,
   regex: regex,
   required: required,
   size: size,
   url: url
-});
+};
 
 // 
 
@@ -29540,7 +28828,8 @@ var mapScope = function (scope, deep) {
     // scope.
     var isScope = field.indexOf('$') === 0;
     if (deep && isScope) {
-      return combine(mapScope(scope[field]), flags);
+      flags = mapScope(scope[field]);
+      return flags;
     } else if (!deep && isScope) {
       return flags;
     }
@@ -29604,35 +28893,13 @@ var mapFields = function (fields) {
   }, {});
 };
 
-var ErrorComponent = {
-  name: 'vv-error',
-  inject: ['$validator'],
-  functional: true,
-  props: {
-    for: {
-      type: String,
-      required: true
-    },
-    tag: {
-      type: String,
-      default: 'span'
-    }
-  },
-  render: function render (createElement, ref) {
-    var props = ref.props;
-    var injections = ref.injections;
-
-    return createElement(props.tag, injections.$validator.errors.first(props.for));
-  }
-};
-
-var version = '2.1.0-beta.5';
+var version = '2.0.0-rc.26';
 
 var rulesPlugin = function (ref) {
   var Validator$$1 = ref.Validator;
 
   Object.keys(Rules).forEach(function (rule) {
-    Validator$$1.extend(rule, Rules[rule].validate, Rules[rule].options);
+    Validator$$1.extend(rule, Rules[rule]);
   });
 
   // Merge the english messages.
@@ -29649,13 +28916,12 @@ var index_esm = {
   mapFields: mapFields,
   Validator: Validator,
   ErrorBag: ErrorBag,
-  ErrorComponent: ErrorComponent,
   Rules: Rules,
   version: version
 };
 
-/* harmony default export */ __webpack_exports__["default"] = (index_esm);
 
+/* harmony default export */ __webpack_exports__["default"] = (index_esm);
 
 
 /***/ }),
diff --git a/public/vendor/webkul/ui/assets/css/ui.css b/public/vendor/webkul/ui/assets/css/ui.css
index 4d61ffdbe..bbbc72e2b 100644
--- a/public/vendor/webkul/ui/assets/css/ui.css
+++ b/public/vendor/webkul/ui/assets/css/ui.css
@@ -1,4 +1,4 @@
-.icon-dashboard, .icon-configuration, .icon-settings, .active .icon-configuration, .active.icon-configuration {
+.dashboard-icon, .catalog-icon, .configuration-icon, .settings-icon, .active.configuration-icon {
   width: 48px;
   height: 48px;
   margin-bottom: 10px;
@@ -11,15 +11,19 @@
   background-size: cover;
 }
 
-.icon-dashboard {
+.dashboard-icon {
   background-image: url("../images/Icon-Dashboard.svg");
 }
 
-.icon-configuration {
+.catalog-icon {
+  background-image: url("../images/Icon-Catalog.svg");
+}
+
+.configuration-icon {
   background-image: url("../images/Icon-Configure.svg");
 }
 
-.icon-settings {
+.settings-icon {
   background-image: url("../images/Icon-Settings.svg");
 }
 
@@ -41,6 +45,12 @@
   height: 8px;
 }
 
+.arrow-right-icon {
+  background-image: url("../images/Arrow-Right.svg");
+  width: 18px;
+  height: 18px;
+}
+
 .white-cross-sm-icon {
   background-image: url("../images/Icon-Sm-Cross-White.svg");
   width: 18px;
@@ -95,15 +105,25 @@
   height: 18px;
 }
 
-.active .icon-dashboard {
+.primary-back-icon {
+  background-image: url("../images/Icon-Back-Primary.svg");
+  width: 24px;
+  height: 24px;
+}
+
+.active .dashboard-icon {
   background-image: url("../images/Icon-Dashboard-Active.svg");
 }
 
-.active .icon-settings {
+.active .catalog-icon {
+  background-image: url("../images/Icon-Catalog-Active.svg");
+}
+
+.active .settings-icon {
   background-image: url("../images/Icon-Settings-Active.svg");
 }
 
-.active .icon-configuration {
+.active .configuration-icon {
   background-image: url("../images/Icon-Configure-Active.svg");
 }
 
@@ -113,15 +133,15 @@
   height: 8px;
 }
 
-.active.icon-dashboard {
+.active.dashboard-icon {
   background-image: url("../images/Icon-Dashboard-Active.svg");
 }
 
-.active.icon-settings {
+.active.settings-icon {
   background-image: url("../images/Icon-Settings-Active.svg");
 }
 
-.active.icon-configuration {
+.active.configuration-icon {
   background-image: url("../images/Icon-Configure-Active.svg");
 }
 
@@ -221,6 +241,7 @@ a:visited,
 a:focus,
 a:active {
   text-decoration: none;
+  color: #0041FF;
 }
 
 ul {
@@ -240,6 +261,10 @@ h2 {
   color: #3A3A3A;
 }
 
+.hide {
+  display: none !important;
+}
+
 .btn {
   -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 0 8px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 0 8px 0 rgba(0, 0, 0, 0.1);
@@ -271,10 +296,12 @@ h2 {
 
 .btn.btn-xl {
   padding: 12px 24px;
+  font-size: 16px;
 }
 
 .btn.btn-primary {
   background: #0041FF;
+  color: #ffffff;
 }
 
 .btn[disabled="disabled"], .btn[disabled="disabled"]:hover, .btn[disabled="disabled"]:active {
@@ -453,10 +480,9 @@ h2 {
 }
 
 .checkbox .checkbox-view {
-  background-image: url("../images/controls.svg");
-  background-position: 0px 0px;
-  height: 20px;
-  width: 20px;
+  background-image: url("../images/Checkbox.svg");
+  height: 24px;
+  width: 24px;
   margin: 0;
   display: inline-block !important;
   vertical-align: middle;
@@ -464,7 +490,7 @@ h2 {
 }
 
 .checkbox input:checked + .checkbox-view {
-  background-position: 0px -21px;
+  background-image: url("../images/Checkbox-Checked.svg");
 }
 
 .checkbox input:disabled + .checkbox-view {
@@ -506,7 +532,7 @@ h2 {
   cursor: not-allowed;
 }
 
-.form-container .control-group {
+.control-group {
   display: block;
   margin-bottom: 25px;
   font-size: 15px;
@@ -515,16 +541,17 @@ h2 {
   max-width: 100%;
 }
 
-.form-container .control-group label {
+.control-group label {
   display: block;
   color: #3A3A3A;
 }
 
-.form-container .control-group textarea.control {
+.control-group textarea.control {
   height: 100px;
+  padding: 10px;
 }
 
-.form-container .control-group .control {
+.control-group .control {
   background: #fff;
   border: 2px solid #C7C7C7;
   border-radius: 3px;
@@ -540,33 +567,33 @@ h2 {
   margin-bottom: 5px;
 }
 
-.form-container .control-group .control:focus {
+.control-group .control:focus {
   border-color: #0041FF;
 }
 
-.form-container .control-group .control[disabled="disabled"] {
+.control-group .control[disabled="disabled"] {
   border-color: #D3D3D3;
   background-color: #D3D3D3;
   cursor: not-allowed;
 }
 
-.form-container .control-group .control-info {
+.control-group .control-info {
   display: block;
   font-style: italic;
   color: #6F6F6F;
 }
 
-.form-container .control-group .control-error {
+.control-group .control-error {
   display: none;
   color: #FF5656;
   margin-top: 5px;
 }
 
-.form-container .control-group.has-error .control {
+.control-group.has-error .control {
   border-color: #FC6868;
 }
 
-.form-container .control-group.has-error .control-error {
+.control-group.has-error .control-error {
   display: block;
 }
 
@@ -576,6 +603,7 @@ h2 {
   right: 10px;
   position: fixed;
   z-index: 6;
+  text-align: left;
 }
 
 .alert-wrapper .alert {
@@ -664,13 +692,51 @@ h2 {
   display: inline-block;
 }
 
-.tree-item {
+.tree-container .tree-item {
   padding-left: 30px;
   display: inline-block;
+  margin-top: 10px;
   width: 100%;
 }
 
-.tree-item .checkbox {
-  margin: 0;
-  margin-bottom: 5px;
+.tree-container .tree-item > .tree-item {
+  display: none;
+}
+
+.tree-container .tree-item.active > .tree-item {
+  display: inline-block;
+}
+
+.tree-container .tree-item .checkbox {
+  margin: 0;
+  display: inline-block;
+}
+
+.tree-container .tree-item .expand-icon {
+  display: inline-block;
+  margin-right: 10px;
+  cursor: pointer;
+  background-image: url("../images/Expand-Light.svg");
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
+
+.tree-container .tree-item.active > .expand-icon {
+  background-image: url("../images/Expand-Light-On.svg");
+}
+
+.tree-container > .tree-item {
+  padding-left: 0;
+}
+
+.panel {
+  -webkit-box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.15);
+  border-radius: 5px;
+  background: #fff;
+}
+
+.panel .panel-content {
+  padding: 20px;
 }
diff --git a/public/vendor/webkul/ui/assets/images/Angle-Down-Light.svg b/public/vendor/webkul/ui/assets/images/Angle-Down-Light.svg
new file mode 100644
index 000000000..7b38bfe7f
--- /dev/null
+++ b/public/vendor/webkul/ui/assets/images/Angle-Down-Light.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Expand-Light-On</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Expand-Light-On" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(2.000000, 6.000000)" fill="#8E8E8E" id="Path-2">
+            <polygon points="0 0 13.3424655 0 6.67123275 7.3125"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/ui/assets/images/Angle-Right-Light.svg b/public/vendor/webkul/ui/assets/images/Angle-Right-Light.svg
new file mode 100644
index 000000000..7b38bfe7f
--- /dev/null
+++ b/public/vendor/webkul/ui/assets/images/Angle-Right-Light.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Expand-Light-On</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Expand-Light-On" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(2.000000, 6.000000)" fill="#8E8E8E" id="Path-2">
+            <polygon points="0 0 13.3424655 0 6.67123275 7.3125"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/ui/assets/images/Arrow-Right.svg b/public/vendor/webkul/ui/assets/images/Arrow-Right.svg
new file mode 100644
index 000000000..745e57d6e
--- /dev/null
+++ b/public/vendor/webkul/ui/assets/images/Arrow-Right.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Expand-Light</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Expand-Light" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(9.000000, 9.000000) rotate(-90.000000) translate(-9.000000, -9.000000) translate(2.000000, 5.000000)" fill="#3A3A3A" id="Path-2">
+            <polygon points="0 0 13.3424655 0 6.67123275 7.3125"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/ui/assets/images/Checkbox-Checked.svg b/public/vendor/webkul/ui/assets/images/Checkbox-Checked.svg
new file mode 100644
index 000000000..914ad34cd
--- /dev/null
+++ b/public/vendor/webkul/ui/assets/images/Checkbox-Checked.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Checkbox-Checked</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Checkbox-Checked" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Base" stroke="#0041FF" stroke-width="2" fill="#0041FF" x="1" y="1" width="22" height="22" rx="2"></rect>
+        <g id="Check-Accent" transform="translate(6.000000, 7.000000)" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
+            <polyline id="Path-2" points="0 5 4 9 13 0"></polyline>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/ui/assets/images/Checkbox.svg b/public/vendor/webkul/ui/assets/images/Checkbox.svg
new file mode 100644
index 000000000..a096458fa
--- /dev/null
+++ b/public/vendor/webkul/ui/assets/images/Checkbox.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Checkbox</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Checkbox" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Base" stroke="#C7C7C7" stroke-width="2" fill="#FFFFFF" x="1" y="1" width="22" height="22" rx="2"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/ui/assets/images/Expand-Light-On.svg b/public/vendor/webkul/ui/assets/images/Expand-Light-On.svg
new file mode 100644
index 000000000..7b38bfe7f
--- /dev/null
+++ b/public/vendor/webkul/ui/assets/images/Expand-Light-On.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Expand-Light-On</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Expand-Light-On" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(2.000000, 6.000000)" fill="#8E8E8E" id="Path-2">
+            <polygon points="0 0 13.3424655 0 6.67123275 7.3125"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/ui/assets/images/Expand-Light.svg b/public/vendor/webkul/ui/assets/images/Expand-Light.svg
new file mode 100644
index 000000000..745e57d6e
--- /dev/null
+++ b/public/vendor/webkul/ui/assets/images/Expand-Light.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Expand-Light</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Expand-Light" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(9.000000, 9.000000) rotate(-90.000000) translate(-9.000000, -9.000000) translate(2.000000, 5.000000)" fill="#3A3A3A" id="Path-2">
+            <polygon points="0 0 13.3424655 0 6.67123275 7.3125"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/ui/assets/images/Icon-Back-Primary.svg b/public/vendor/webkul/ui/assets/images/Icon-Back-Primary.svg
new file mode 100644
index 000000000..dffb85643
--- /dev/null
+++ b/public/vendor/webkul/ui/assets/images/Icon-Back-Primary.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Back-Primary</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Back-Primary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Icon-Sort-Down" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) translate(3.000000, 6.000000)" stroke="#0041FF" stroke-width="2">
+            <path d="M1,6 L16.068125,6" id="Path-3"></path>
+            <polyline id="Path-4" points="12 0 18 6.08548298 12 12"></polyline>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/ui/assets/images/Icon-Catalog-Active.svg b/public/vendor/webkul/ui/assets/images/Icon-Catalog-Active.svg
new file mode 100644
index 000000000..ba35b9621
--- /dev/null
+++ b/public/vendor/webkul/ui/assets/images/Icon-Catalog-Active.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Catalog-Active</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Catalog-Active" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(9.000000, 7.000000)" stroke="#0041FF" stroke-width="2">
+            <rect id="Rectangle-2" x="0" y="0" width="30" height="34"></rect>
+            <path d="M6,6 L24,6" id="Path-6"></path>
+            <path d="M6,13 L24,13" id="Path-6"></path>
+            <path d="M6,20 L24,20" id="Path-6"></path>
+            <path d="M6,27 L24,27" id="Path-6"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/ui/assets/images/Icon-Catalog.svg b/public/vendor/webkul/ui/assets/images/Icon-Catalog.svg
new file mode 100644
index 000000000..f7453ca83
--- /dev/null
+++ b/public/vendor/webkul/ui/assets/images/Icon-Catalog.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Catalog</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Catalog" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(9.000000, 7.000000)" stroke-width="2">
+            <rect id="Rectangle-2" stroke="#8E8E8E" x="0" y="0" width="30" height="34"></rect>
+            <path d="M6,6 L24,6" id="Path-6" stroke="#979797"></path>
+            <path d="M6,13 L24,13" id="Path-6" stroke="#979797"></path>
+            <path d="M6,20 L24,20" id="Path-6" stroke="#979797"></path>
+            <path d="M6,27 L24,27" id="Path-6" stroke="#979797"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/vendor/webkul/ui/assets/js/ui.js b/public/vendor/webkul/ui/assets/js/ui.js
index c416e1709..fe4dbe3ed 100644
--- a/public/vendor/webkul/ui/assets/js/ui.js
+++ b/public/vendor/webkul/ui/assets/js/ui.js
@@ -177,8 +177,8 @@ module.exports = function normalizeComponent (
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(2);
-__webpack_require__(17);
-module.exports = __webpack_require__(19);
+__webpack_require__(19);
+module.exports = __webpack_require__(21);
 
 
 /***/ }),
@@ -189,7 +189,8 @@ Vue.component('flash-wrapper', __webpack_require__(3));
 Vue.component('flash', __webpack_require__(6));
 Vue.component('accordian', __webpack_require__(9));
 Vue.component('tree-view', __webpack_require__(12));
-Vue.component('tree-checkbox', __webpack_require__(14));
+Vue.component('tree-item', __webpack_require__(14));
+Vue.component('tree-checkbox', __webpack_require__(16));
 
 /***/ }),
 /* 3 */
@@ -388,7 +389,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         var this_this = this;
         setTimeout(function () {
             this_this.$emit('onRemoveFlash', this_this.flash);
-        }, 1000);
+        }, 5000);
     },
 
     methods: {
@@ -491,6 +492,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony default export */ __webpack_exports__["default"] = ({
     props: {
         title: String,
+        id: String,
+        className: String,
         active: Boolean
     },
 
@@ -530,7 +533,11 @@ var render = function() {
   var _c = _vm._self._c || _h
   return _c(
     "div",
-    { staticClass: "accordian", class: { active: _vm.isActive } },
+    {
+      staticClass: "accordian",
+      class: [_vm.isActive ? "active" : "", _vm.className],
+      attrs: { id: _vm.id }
+    },
     [
       _c(
         "div",
@@ -616,7 +623,7 @@ module.exports = Component.exports
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: 'tree-view',
@@ -624,36 +631,40 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
     inheritAttrs: false,
 
     props: {
+        idField: {
+            type: String,
+            required: false,
+            default: 'id'
+        },
+
+        captionField: {
+            type: String,
+            required: false,
+            default: 'name'
+        },
+
+        childrenField: {
+            type: String,
+            required: false,
+            default: 'children'
+        },
+
+        valueField: {
+            type: String,
+            required: false,
+            default: 'value'
+        },
+
         items: {
-            type: Object,
+            type: [Array, String, Object],
             required: false,
             default: function _default() {
-                return {
-                    "name": "Root",
-                    "value": "1",
-                    "children": [{
-                        "name": "First Child",
-                        "value": "2"
-                    }, {
-                        "name": "Second Child",
-                        "value": "3",
-                        "children": [{
-                            "name": "GrandChild 1",
-                            "value": "4"
-                        }, {
-                            "name": "GrandChild 2",
-                            "value": "5"
-                        }, {
-                            "name": "GrandChild 3",
-                            "value": "6"
-                        }]
-                    }]
-                };
+                return [];
             }
         },
 
         value: {
-            type: Array,
+            type: [Array, String, Object],
             required: false,
             default: function _default() {
                 return [];
@@ -661,116 +672,58 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
         }
     },
 
+    data: function data() {
+        return {
+            finalValues: []
+        };
+    },
+
     computed: {
-        allChildren: function allChildren() {
-            var leafs = [];
-            var searchTree = function searchTree(items) {
-                if (!!items['children'] && items['children'].length > 0) {
-                    items['children'].forEach(function (child) {
-                        return searchTree(child);
-                    });
-                } else {
-                    leafs.push(items);
-                }
-            };
+        savedValues: function savedValues() {
+            if (!this.value) return [];
 
-            searchTree(this.items);
-
-            return leafs;
-        },
-        hasChildren: function hasChildren() {
-            return !!this.items['children'] && this.items['children'].length > 0;
-        },
-        hasSelection: function hasSelection() {
-            return !!this.value && this.value.length > 0;
-        },
-        isAllChildrenSelected: function isAllChildrenSelected() {
-            var _this = this;
-
-            return this.hasChildren && this.hasSelection && this.allChildren.every(function (leaf) {
-                return _this.value.some(function (sel) {
-                    return sel === leaf;
-                });
-            });
-        },
-        isSomeChildrenSelected: function isSomeChildrenSelected() {
-            var _this2 = this;
-
-            return this.hasSelection && this.allChildren.some(function (leaf) {
-                return _this2.value.some(function (sel) {
-                    return sel === leaf;
-                });
-            });
+            return typeof this.value == 'string' ? JSON.parse(this.value) : this.value;
         }
     },
 
     methods: {
-        generateRoot: function generateRoot() {
-            var _this3 = this;
-
-            return this.$createElement('tree-checkbox', {
-                props: {
-                    label: this.items['name'],
-                    inputValue: this.hasChildren ? this.isAllChildrenSelected : this.value,
-                    value: this.hasChildren ? this.isAllChildrenSelected : this.items
-                },
-                on: {
-                    change: function change(selection) {
-                        if (_this3.hasChildren) {
-                            if (_this3.isAllChildrenSelected) {
-                                _this3.allChildren.forEach(function (leaf) {
-                                    var index = _this3.value.indexOf(leaf);
-                                    _this3.value.splice(index, 1);
-                                });
-                            } else {
-                                _this3.allChildren.forEach(function (leaf) {
-                                    var index = _this3.value.indexOf(leaf);
-                                    if (index === -1) {
-                                        _this3.value.push(leaf);
-                                    }
-                                });
-                            }
-
-                            _this3.$emit('input', _this3.value);
-                        } else {
-                            _this3.$emit('input', selection);
-                        }
-                    }
-                }
-            });
-        },
-        generateChild: function generateChild(child) {
-            var _this4 = this;
-
-            return this.$createElement('tree-view', {
-                class: 'tree-item',
-                on: {
-                    input: function input(selection) {
-                        _this4.$emit('input', selection);
-                    }
-                },
-                props: {
-                    items: child,
-                    value: this.value
-                }
-            });
-        },
         generateChildren: function generateChildren() {
-            var _this5 = this;
-
             var childElements = [];
-            if (this.items['children']) {
-                this.items['children'].forEach(function (child) {
-                    childElements.push(_this5.generateChild(child));
-                });
+
+            var items = typeof this.items == 'string' ? JSON.parse(this.items) : this.items;
+
+            for (var key in items) {
+                childElements.push(this.generateTreeItem(items[key]));
             }
 
             return childElements;
+        },
+        generateTreeItem: function generateTreeItem(item) {
+            var _this = this;
+
+            return this.$createElement('tree-item', {
+                props: {
+                    items: item,
+                    value: this.finalValues,
+                    savedValues: this.savedValues,
+                    captionField: this.captionField,
+                    childrenField: this.childrenField,
+                    valueField: this.valueField,
+                    idField: this.idField
+                },
+                on: {
+                    input: function input(selection) {
+                        _this.finalValues = selection;
+                    }
+                }
+            });
         }
     },
 
     render: function render(createElement) {
-        return createElement('div', {}, [this.generateRoot()].concat(_toConsumableArray(this.generateChildren())));
+        return createElement('div', {
+            class: ['tree-container']
+        }, [this.generateChildren()]);
     }
 });
 
@@ -783,7 +736,274 @@ var normalizeComponent = __webpack_require__(0)
 /* script */
 var __vue_script__ = __webpack_require__(15)
 /* template */
-var __vue_template__ = __webpack_require__(16)
+var __vue_template__ = null
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/tree-view/tree-item.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-2af003eb", Component.options)
+  } else {
+    hotAPI.reload("data-v-2af003eb", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 15 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    name: 'tree-view',
+
+    inheritAttrs: false,
+
+    props: {
+        idField: String,
+
+        captionField: String,
+
+        childrenField: String,
+
+        valueField: String,
+
+        items: {
+            type: [Array, String, Object],
+            required: false,
+            default: null
+        },
+
+        value: {
+            type: Array,
+            required: false,
+            default: null
+        },
+
+        savedValues: {
+            type: Array,
+            required: false,
+            default: null
+        }
+    },
+
+    created: function created() {
+        var index = this.savedValues.indexOf(this.items[this.valueField]);
+        if (index !== -1) {
+            this.value.push(this.items);
+        }
+    },
+
+
+    computed: {
+        caption: function caption() {
+            return this.items[this.captionField];
+        },
+        allChildren: function allChildren() {
+            var _this = this;
+
+            var leafs = [];
+            var searchTree = function searchTree(items) {
+                if (!!items[_this.childrenField] && _this.getLength(items[_this.childrenField]) > 0) {
+                    if (_typeof(items[_this.childrenField]) == 'object') {
+                        for (var key in items[_this.childrenField]) {
+                            searchTree(items[_this.childrenField][key]);
+                        }
+                    } else {
+                        items[_this.childrenField].forEach(function (child) {
+                            return searchTree(child);
+                        });
+                    }
+                } else {
+                    leafs.push(items);
+                }
+            };
+
+            searchTree(this.items);
+
+            return leafs;
+        },
+        hasChildren: function hasChildren() {
+            return !!this.items[this.childrenField] && this.getLength(this.items[this.childrenField]) > 0;
+        },
+        hasSelection: function hasSelection() {
+            return !!this.value && this.value.length > 0;
+        },
+        isAllChildrenSelected: function isAllChildrenSelected() {
+            var _this2 = this;
+
+            return this.hasChildren && this.hasSelection && this.allChildren.every(function (leaf) {
+                return _this2.value.some(function (sel) {
+                    return sel[_this2.idField] === leaf[_this2.idField];
+                });
+            });
+        },
+        isSomeChildrenSelected: function isSomeChildrenSelected() {
+            var _this3 = this;
+
+            return this.hasChildren && this.hasSelection && this.allChildren.some(function (leaf) {
+                return _this3.value.some(function (sel) {
+                    return sel[_this3.idField] === leaf[_this3.idField];
+                });
+            });
+        }
+    },
+
+    methods: {
+        getLength: function getLength(items) {
+            if ((typeof items === 'undefined' ? 'undefined' : _typeof(items)) == 'object') {
+                var length = 0;
+
+                for (var item in items) {
+                    length++;
+                }
+
+                return length;
+            }
+
+            return items.length;
+        },
+        generateRoot: function generateRoot() {
+            var _this4 = this;
+
+            return this.$createElement('tree-checkbox', {
+                props: {
+                    id: this.items[this.idField],
+                    label: this.caption,
+                    modelValue: this.items[this.valueField],
+                    inputValue: this.hasChildren ? this.isSomeChildrenSelected : this.value,
+                    value: this.hasChildren ? this.isAllChildrenSelected : this.items
+                },
+                on: {
+                    change: function change(selection) {
+                        if (_this4.hasChildren) {
+                            if (_this4.isAllChildrenSelected) {
+                                _this4.allChildren.forEach(function (leaf) {
+                                    var index = _this4.value.indexOf(leaf);
+                                    _this4.value.splice(index, 1);
+                                });
+                            } else {
+                                _this4.allChildren.forEach(function (leaf) {
+                                    var exists = false;
+                                    _this4.value.forEach(function (item) {
+                                        if (item['key'] == leaf['key']) {
+                                            exists = true;
+                                        }
+                                    });
+
+                                    if (!exists) {
+                                        _this4.value.push(leaf);
+                                    }
+                                });
+                            }
+
+                            _this4.$emit('input', _this4.value);
+                        } else {
+                            _this4.$emit('input', selection);
+                        }
+                    }
+                }
+            });
+        },
+        generateChild: function generateChild(child) {
+            var _this5 = this;
+
+            return this.$createElement('tree-item', {
+                on: {
+                    input: function input(selection) {
+                        _this5.$emit('input', selection);
+                    }
+                },
+                props: {
+                    items: child,
+                    value: this.value,
+                    savedValues: this.savedValues,
+                    captionField: this.captionField,
+                    childrenField: this.childrenField,
+                    valueField: this.valueField,
+                    idField: this.idField
+                }
+            });
+        },
+        generateChildren: function generateChildren() {
+            var _this6 = this;
+
+            var childElements = [];
+            if (this.items[this.childrenField]) {
+                if (_typeof(this.items[this.childrenField]) == 'object') {
+                    for (var key in this.items[this.childrenField]) {
+                        childElements.push(this.generateChild(this.items[this.childrenField][key]));
+                    }
+                } else {
+                    this.items[this.childrenField].forEach(function (child) {
+                        childElements.push(_this6.generateChild(child));
+                    });
+                }
+            }
+
+            return childElements;
+        },
+        generateIcon: function generateIcon() {
+            var _this7 = this;
+
+            return this.$createElement('i', {
+                class: ['expand-icon'],
+                on: {
+                    click: function click(selection) {
+                        _this7.$el.classList.toggle("active");
+                    }
+                }
+            });
+        }
+    },
+
+    render: function render(createElement) {
+        return createElement('div', {
+            class: ['tree-item', 'active', this.hasChildren ? 'has-children' : '']
+        }, [this.generateIcon(), this.generateRoot()].concat(_toConsumableArray(this.generateChildren())));
+    }
+});
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(0)
+/* script */
+var __vue_script__ = __webpack_require__(17)
+/* template */
+var __vue_template__ = __webpack_require__(18)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -822,7 +1042,7 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 15 */
+/* 17 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -839,14 +1059,76 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: 'tree-checkbox',
 
-    props: ['label', 'inputValue', 'value'],
+    props: ['id', 'label', 'modelValue', 'inputValue', 'value'],
+
+    computed: {
+        isMultiple: function isMultiple() {
+            return Array.isArray(this.internalValue);
+        },
+        isActive: function isActive() {
+            var _this = this;
+
+            var value = this.value;
+            var input = this.internalValue;
+
+            if (this.isMultiple) {
+                return input.some(function (item) {
+                    return _this.valueComparator(item, value);
+                });
+            }
+
+            return value ? this.valueComparator(value, input) : Boolean(input);
+        },
+
+
+        internalValue: {
+            get: function get() {
+                return this.lazyValue;
+            },
+            set: function set(val) {
+                this.lazyValue = val;
+                this.$emit('input', val);
+            }
+        }
+    },
+
+    data: function data(vm) {
+        return {
+            lazyValue: vm.inputValue
+        };
+    },
+
+    watch: {
+        inputValue: function inputValue(val) {
+            this.internalValue = val;
+        }
+    },
 
     methods: {
-        inputChanged: function inputChanged(e) {
-            this.$emit('change', this.inputValue);
+        inputChanged: function inputChanged() {
+            var _this2 = this;
+
+            var value = this.value;
+            var input = this.internalValue;
+
+            if (this.isMultiple) {
+                var length = input.length;
+
+                input = input.filter(function (item) {
+                    return !_this2.valueComparator(item, value);
+                });
+
+                if (input.length === length) {
+                    input.push(value);
+                }
+            } else {
+                input = !input;
+            }
+
+            this.$emit('change', input);
         },
         valueComparator: function valueComparator(a, b) {
-            var _this = this;
+            var _this3 = this;
 
             if (a === b) return true;
 
@@ -861,38 +1143,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             }
 
             return props.every(function (p) {
-                return _this.valueComparator(a[p], b[p]);
+                return _this3.valueComparator(a[p], b[p]);
             });
         }
-    },
-
-    computed: {
-        isMultiple: function isMultiple() {
-            return Array.isArray(this.inputValue);
-        },
-        isActive: function isActive() {
-            var _this2 = this;
-
-            var value = this.value;
-            var input = this.inputValue;
-
-            if (this.isMultiple) {
-                if (!Array.isArray(input)) return false;
-
-                return input.some(function (item) {
-                    return _this2.valueComparator(item, value);
-                });
-            }
-
-            var isChecked = value ? this.valueComparator(value, input) : Boolean(input);
-
-            return isChecked;
-        }
     }
 });
 
 /***/ }),
-/* 16 */
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -901,26 +1159,18 @@ var render = function() {
   var _c = _vm._self._c || _h
   return _c("span", { staticClass: "checkbox" }, [
     _c("input", {
-      attrs: { type: "checkbox", name: "permissions[]", id: _vm.inputValue },
-      domProps: { value: _vm.inputValue.value, checked: _vm.isActive },
+      attrs: { type: "checkbox", id: _vm.id, name: "permissions[]" },
+      domProps: { value: _vm.modelValue, checked: _vm.isActive },
       on: {
         change: function($event) {
-          _vm.inputChanged($event)
+          _vm.inputChanged()
         }
       }
     }),
     _vm._v(" "),
-    _c("label", {
-      staticClass: "checkbox-view",
-      attrs: { for: _vm.inputValue }
-    }),
-    _vm._v(
-      "\n    " +
-        _vm._s(_vm.inputValue) +
-        " ======== " +
-        _vm._s(_vm.value) +
-        "\n"
-    )
+    _c("label", { staticClass: "checkbox-view", attrs: { for: _vm.id } }),
+    _vm._v(" "),
+    _c("span", { attrs: { for: _vm.id } }, [_vm._v(_vm._s(_vm.label))])
   ])
 }
 var staticRenderFns = []
@@ -934,10 +1184,10 @@ if (false) {
 }
 
 /***/ }),
-/* 17 */
+/* 19 */
 /***/ (function(module, exports, __webpack_require__) {
 
-window.jQuery = window.$ = $ = __webpack_require__(18);
+window.jQuery = window.$ = $ = __webpack_require__(20);
 
 $(function () {
     $(document).click(function (e) {
@@ -1002,7 +1252,7 @@ $(function () {
 });
 
 /***/ }),
-/* 18 */
+/* 20 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -11373,7 +11623,7 @@ return jQuery;
 
 
 /***/ }),
-/* 19 */
+/* 21 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin