diff --git a/app/Http/Controllers/Settings/Settings.php b/app/Http/Controllers/Settings/Settings.php
index 4a3a8d554..f84bfd6a7 100644
--- a/app/Http/Controllers/Settings/Settings.php
+++ b/app/Http/Controllers/Settings/Settings.php
@@ -177,4 +177,4 @@ class Settings extends Controller
                 break;
         }
     }
-}
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Wizard/Companies.php b/app/Http/Controllers/Wizard/Companies.php
index d28d95afc..366a0fb87 100644
--- a/app/Http/Controllers/Wizard/Companies.php
+++ b/app/Http/Controllers/Wizard/Companies.php
@@ -33,7 +33,7 @@ class Companies extends Controller
     {
         $company = Company::find(company_id());
 
-        return view('wizard.companies.edit', compact('company'));
+        return $this->response('wizard.companies.edit', compact('company'));
     }
 
     /**
@@ -52,6 +52,7 @@ class Companies extends Controller
 
         $skip_keys = ['company_id', '_method', '_token'];
         $file_keys = ['company.logo'];
+        $uploaded_file_keys = ['company.uploaded_logo'];
 
         foreach ($fields as $key => $value) {
             // Don't process unwanted keys
@@ -70,13 +71,18 @@ class Companies extends Controller
                     $real_key = 'company.' . $key;
             }
 
-            // Process file uploads
-            if (in_array($real_key, $file_keys)) {
+            // change dropzone middleware already uploaded file
+            if (in_array($real_key, $uploaded_file_keys)) {
+                continue;
+            }
+
+             // Process file uploads
+             if (in_array($real_key, $file_keys)) {
                 // Upload attachment
                 if ($request->file($key)) {
                     $media = $this->getMedia($request->file($key), 'settings');
 
-                    $company->attachMedia($media, Str::snake($key));
+                    $company->attachMedia($media, Str::snake($real_key));
 
                     $value = $media->id;
                 }
@@ -87,25 +93,18 @@ class Companies extends Controller
                 }
             }
 
-            setting()->set($real_key, $value);
+            setting()->set($real_key, $value);            
         }
 
         // Save all settings
         setting()->save();
 
-        $message = trans('messages.success.updated', ['type' => trans_choice('general.companies', 2)]);
-
-        $response = [
+        return response()->json([
             'status' => null,
             'success' => true,
             'error' => false,
-            'message' => $message,
+            'message' => trans('messages.success.updated', ['type' => trans_choice('general.companies', 2)]),
             'data' => null,
-            'redirect' => route('wizard.currencies.index'),
-        ];
-
-        flash($message)->success();
-
-        return response()->json($response);
+        ]);
     }
 }
diff --git a/app/Http/Controllers/Wizard/Currencies.php b/app/Http/Controllers/Wizard/Currencies.php
index 16fa0bbeb..0e5f9f259 100644
--- a/app/Http/Controllers/Wizard/Currencies.php
+++ b/app/Http/Controllers/Wizard/Currencies.php
@@ -44,7 +44,7 @@ class Currencies extends Controller
             $codes[$key] = $key;
         }
 
-        return view('wizard.currencies.index', compact('currencies', 'codes'));
+        return $this->response('wizard.currencies.index', compact('currencies', 'codes'));
     }
 
     /**
@@ -58,19 +58,14 @@ class Currencies extends Controller
     {
         $response = $this->ajaxDispatch(new CreateCurrency($request));
 
-        $response['redirect'] = route('wizard.currencies.index');
-
         if ($response['success']) {
-
             $message = trans('messages.success.added', ['type' => trans_choice('general.currencies', 1)]);
-
-            flash($message)->success();
         } else {
             $message = $response['message'];
-
-            flash($message)->error()->important();
         }
 
+        $response['message'] = $message;
+
         return response()->json($response);
     }
 
@@ -86,18 +81,14 @@ class Currencies extends Controller
     {
         $response = $this->ajaxDispatch(new UpdateCurrency($currency, $request));
 
-        $response['redirect'] = route('wizard.currencies.index');
-
         if ($response['success']) {
             $message = trans('messages.success.updated', ['type' => $currency->name]);
-
-            flash($message)->success();
         } else {
             $message = $response['message'];
-
-            flash($message)->error()->important();
         }
 
+        $response['message'] = $message;
+        
         return response()->json($response);
     }
 
@@ -110,20 +101,19 @@ class Currencies extends Controller
      */
     public function destroy(Currency $currency)
     {
-        $response = $this->ajaxDispatch(new DeleteCurrency($currency));
+        $currency_id = $currency->id;
 
-        $response['redirect'] = route('wizard.currencies.index');
+        $response = $this->ajaxDispatch(new DeleteCurrency($currency));
 
         if ($response['success']) {
             $message = trans('messages.success.deleted', ['type' => $currency->name]);
-
-            flash($message)->success();
         } else {
             $message = $response['message'];
-
-            flash($message)->error()->important();
         }
 
+        $response['currency_id'] = $currency_id;
+        $response['message'] = $message;
+
         return response()->json($response);
     }
 }
diff --git a/app/Http/Controllers/Wizard/Data.php b/app/Http/Controllers/Wizard/Data.php
new file mode 100644
index 000000000..fa3a43b9f
--- /dev/null
+++ b/app/Http/Controllers/Wizard/Data.php
@@ -0,0 +1,150 @@
+<?php
+
+namespace App\Http\Controllers\Wizard;
+
+use App\Abstracts\Http\Controller;
+
+use Akaunting\Money\Currency as MoneyCurrency;
+use App\Models\Setting\Currency;
+use App\Models\Setting\Tax;
+use App\Traits\Modules;
+use App\Models\Common\Company;
+
+class Data extends Controller
+{
+    use Modules;
+
+    /**
+     * Instantiate a new controller instance.
+     */
+    public function __construct()
+    {
+        // Add CRUD permission check
+        $this->middleware('permission:create-common-companies')->only('create', 'store', 'duplicate', 'import');
+        $this->middleware('permission:read-common-companies')->only('index', 'show', 'edit', 'export');
+        $this->middleware('permission:update-common-companies')->only('update', 'enable', 'disable');
+        $this->middleware('permission:delete-common-companies')->only('destroy');
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return Response
+     */
+    public function index()
+    {
+        $translations = [
+            'company' => [
+                'title' => trans_choice('general.companies', 1),
+                'api_key' => trans('modules.api_key'),
+                'form_enter' => trans('general.form.enter'),
+                'get_api_key' => trans('modules.get_api_key'),
+                'tax_number' => trans('general.tax_number'),
+                'financial_start' => trans('settings.localisation.financial_start'),
+                'address' => trans('settings.company.address'),
+                'logo' => trans('settings.company.logo'),
+                'skip' => trans('general.skip'),
+                'save' => trans('general.save'),
+            ],
+
+            'currencies' => [
+                'title' => trans_choice('general.currencies', 2),
+                'add_new' => trans('general.add_new'),
+                'name' => trans('general.name'),
+                'code' => trans('currencies.code'),
+                'rate' => trans('currencies.rate'),
+                'enabled' => trans('general.enabled'),
+                'actions' =>  trans('general.actions') ,
+                'yes' => trans('general.yes'),
+                'no' => trans('general.no'),
+                'edit' => trans('general.edit'),
+                'delete' => trans('general.delete'),
+                'save' => trans('general.save'),
+                'precision' => trans('currencies.precision'),
+                'symbol' => trans('currencies.symbol.symbol'),
+                'position' => trans('currencies.symbol.position'),
+                'decimal_mark' => trans('currencies.decimal_mark'),
+                'thousands_separator' => trans('currencies.thousands_separator'),
+                'previous' => trans('pagination.previous'),
+                'next' => trans('pagination.next'),
+                'delete_confirm' => trans('general.delete_confirm'),
+                'cancel' => trans('general.cancel'),
+            ],
+
+            'taxes' => [
+                'title' => trans_choice('general.taxes', 2),
+                'add_new' =>  trans('general.add_new'),
+                'name' => trans('general.name'),
+                'rate_percent' => trans('taxes.rate_percent'),
+                'enabled' => trans('general.enabled'),
+                'actions' => trans('general.actions'),
+                'yes' => trans('general.yes'),
+                'no' => trans('general.no'),
+                'edit' => trans('general.edit'),
+                'delete' => trans('general.delete'),
+                'name' => trans('general.name'),
+                'rate' => trans('currencies.rate'),
+                'enabled' => trans('general.enabled'),
+                'save' => trans('general.save'),
+                'previous' => trans('pagination.previous'),
+                'next' => trans('pagination.next'),
+                'cancel' => trans('general.cancel'),
+            ],
+
+            'finish' => [
+                'title' => trans_choice('general.finish', 1),
+                'recommended_apps' => trans('modules.recommended_apps'),
+                'no_apps' =>  trans('modules.no_apps'),
+                'developer' => trans('modules.developer'),
+                'previous' => trans('pagination.previous'),
+                'go_to_dashboard' => trans('general.go_to_dashboard'),
+                'error_message' => trans('errors.title.500'),
+            ]
+        ];
+
+        $currencies = Currency::collect();
+
+        // Prepare codes
+        $codes = [];
+        $money_currencies = MoneyCurrency::getCurrencies();
+
+        foreach ($money_currencies as $key => $item) {
+            $codes[$key] = $key;
+        }
+
+        $taxes = Tax::collect();
+
+        $modules = $this->getFeaturedModules([
+            'query' => [
+                'limit' => 4
+            ]
+        ]);
+
+        $company = company();
+
+        $company->api_key = setting('apps.api_key');
+        $company->financial_start = setting('localisation.financial_start');
+
+        if ($company->logo) {
+            $logo = \Plank\Mediable\Media::find($company->logo);
+
+            $logo->path = route('uploads.get', $logo->id);
+
+            $company->logo = $logo;
+        }
+
+        return response()->json([
+            'success' => true,
+            'errors' => false,
+            'message' => 'Get all data...',
+            'data' => [
+                'translations' => $translations,
+                'company' => $company,
+                'currencies' => $currencies,
+                'currency_codes' => $codes,
+                'taxes' => $taxes,
+                'modules' => $modules,
+            ],
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/Wizard/Finish.php b/app/Http/Controllers/Wizard/Finish.php
index 393bf48f3..128bc7145 100644
--- a/app/Http/Controllers/Wizard/Finish.php
+++ b/app/Http/Controllers/Wizard/Finish.php
@@ -2,7 +2,7 @@
 
 namespace App\Http\Controllers\Wizard;
 
-use Illuminate\Routing\Controller;
+use App\Abstracts\Http\Controller;
 use App\Traits\Modules;
 
 class Finish extends Controller
@@ -38,6 +38,21 @@ class Finish extends Controller
 
         $modules = $this->getFeaturedModules($data);
 
-        return view('wizard.finish.index', compact('modules'));
+        return $this->response('wizard.finish.index', compact('modules'));
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return Response
+     */
+    public function update()
+    {
+        setting()->set('wizard.completed', 1);
+
+        // Save all settings
+        setting()->save();
+
+        return response()->json([]);
     }
 }
diff --git a/app/Http/Controllers/Wizard/Taxes.php b/app/Http/Controllers/Wizard/Taxes.php
index 5ba794d2e..70d1722c1 100644
--- a/app/Http/Controllers/Wizard/Taxes.php
+++ b/app/Http/Controllers/Wizard/Taxes.php
@@ -32,7 +32,7 @@ class Taxes extends Controller
     {
         $taxes = Tax::collect();
 
-        return view('wizard.taxes.index', compact('taxes'));
+        return $this->response('wizard.taxes.index', compact('taxes'));
     }
 
     /**
@@ -46,18 +46,14 @@ class Taxes extends Controller
     {
         $response = $this->ajaxDispatch(new CreateTax($request));
 
-        $response['redirect'] = route('wizard.taxes.index');
-
         if ($response['success']) {
             $message = trans('messages.success.added', ['type' => trans_choice('general.taxes', 1)]);
-
-            flash($message)->success();
         } else {
             $message = $response['message'];
-
-            flash($message)->error()->important();
         }
 
+        $response['message'] = $message;
+
         return response()->json($response);
     }
 
@@ -73,18 +69,14 @@ class Taxes extends Controller
     {
         $response = $this->ajaxDispatch(new UpdateTax($tax, $request));
 
-        $response['redirect'] = route('wizard.taxes.index');
-
         if ($response['success']) {
             $message = trans('messages.success.updated', ['type' => $tax->name]);
-
-            flash($message)->success();
         } else {
             $message = $response['message'];
-
-            flash($message)->error()->important();
         }
 
+        $response['message'] = $message;
+        
         return response()->json($response);
     }
 
@@ -97,20 +89,19 @@ class Taxes extends Controller
      */
     public function destroy(Tax $tax)
     {
-        $response = $this->ajaxDispatch(new DeleteTax($tax));
+        $tax_id = $tax->id;
 
-        $response['redirect'] = route('wizard.taxes.index');
+        $response = $this->ajaxDispatch(new DeleteTax($tax));
 
         if ($response['success']) {
             $message = trans('messages.success.deleted', ['type' => $tax->name]);
-
-            flash($message)->success();
         } else {
             $message = $response['message'];
-
-            flash($message)->error()->important();
         }
 
+        $response['tax_id'] = $tax_id;
+        $response['message'] = $message;
+
         return response()->json($response);
     }
 }
diff --git a/resources/assets/js/Wizard.vue b/resources/assets/js/Wizard.vue
new file mode 100644
index 000000000..609523d1c
--- /dev/null
+++ b/resources/assets/js/Wizard.vue
@@ -0,0 +1,131 @@
+<template>
+  <router-view
+    :translations="translations"
+    :currencies="currencies"
+    :taxes="taxes"
+    :modules="modules.data"
+    :currency_codes="currency_codes"
+    :company="company"
+  ></router-view>
+</template>
+
+<script>
+export default {
+  name: "Wizard",
+  data: function () {
+    return {
+      page_loaded: true,
+    };
+  },
+  created() {
+    let self = this;
+
+    window
+      .axios({
+        method: "GET",
+        url: url + "/wizard/data",
+      })
+      .then((response) => {
+        let data = response.data.data;
+
+        for (let item in data) {
+          self[item] = data[item];
+        }
+
+        Object.keys(data.currency_codes).map((key) => {
+          return data.currency_codes[key];
+        });
+
+        setTimeout(
+          function () {
+            self.page_loaded = false;
+          }.bind(self),
+          800
+        );
+      });
+  },
+
+  data() {
+    return {
+      currencies: [],
+      currency_codes: [],
+      taxes: [],
+      modules: {},
+      company: {},
+      translations: {
+        company: {},
+        currencies: {},
+        taxes: {},
+        finish: {},
+      },
+    };
+  },
+};
+</script>
+
+<style>
+.document-loading {
+  width: 1140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.document-loading div {
+  margin-top: unset;
+  margin-left: unset;
+}
+
+.current-tab {
+  background-color: #f6f9fc;
+}
+
+.current-tab-btn {
+  text-align: right;
+  padding: 0 40px;
+}
+
+.form-container {
+  flex-flow: row wrap;
+}
+
+.form-container .invalid-feedback {
+  position: absolute;
+  bottom: -18px;
+}
+
+.form-container .has-error {
+  position: relative;
+  margin-bottom: unset !important;
+}
+
+.form-container .has-error .form-control {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-right: 1px solid;
+}
+
+.el-step__icon {
+  -webkit-transition: unset;
+  transition: unset;
+}
+
+@media screen and (max-width: 991px) {
+  .form-container .has-error {
+    position: relative;
+    margin-bottom: 1.5rem !important;
+  }
+
+  .current-tab-btn {
+    padding: 0 15px;
+  }
+
+  .form-container {
+    flex-direction: column;
+  }
+
+  .form-container .form-group {
+    width: 100%;
+  }
+}
+</style>
diff --git a/resources/assets/js/components/AkauntingDate.vue b/resources/assets/js/components/AkauntingDate.vue
index 59075215c..95e0e3168 100644
--- a/resources/assets/js/components/AkauntingDate.vue
+++ b/resources/assets/js/components/AkauntingDate.vue
@@ -12,6 +12,7 @@
         :disabled="disabled"
         >
         <flat-picker slot-scope="{focus, blur}"
+            :name="dataName"
             @on-open="focus"
             @on-close="blur"
             :config="dateConfig"
@@ -41,6 +42,11 @@ export default {
             default: '',
             description: "Modal header title"
         },
+        dataName: {
+            type: String,
+            default: '',
+            description: "Modal header title"
+        },
         placeholder: {
             type: String,
             default: '',
@@ -92,7 +98,7 @@ export default {
 
     data() {
         return {
-            real_model: this.model,
+            real_model: '',
         }
     },
     
@@ -120,6 +126,12 @@ export default {
             
             this.$emit('change', this.real_model);
         }
+    },
+
+    watch: {
+        value: function(val) {
+            this.real_model = val;
+        }
     }
 }
 </script>
diff --git a/resources/assets/js/components/AkauntingDropzoneFileUpload.vue b/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
index 742b1bc90..303280227 100644
--- a/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
+++ b/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
@@ -231,6 +231,42 @@ export default {
     async mounted() {
         this.initDropzone();
     },
+    
+    watch: {
+    attachments: function (attachments) {
+      attachments.forEach((attachment) => {
+          if(attachment.length != undefined) {
+              var mockFile = {
+                id: attachment[0].id,
+                name: attachment[0].name,
+                size: attachment[0].size,
+                type: attachment[0].type,
+                download: attachment[0].downloadPath,
+                dropzone: 'edit',
+            };
+            this.dropzone.emit("addedfile", mockFile);
+            this.dropzone.options.thumbnail.call(this.dropzone, mockFile, attachment[0].path);
+
+            // Make sure that there is no progress bar, etc...
+            this.dropzone.emit("complete", mockFile);
+
+            this.files.forEach(async (attachment) => {
+                if (attachment.download) {
+                    attachment.previewElement.querySelector("[data-dz-download]").href = attachment.download;
+                    attachment.previewElement.querySelector("[data-dz-download]").classList.remove("d-none");
+                }
+        });
+
+        if (this.preview == 'single' && attachments.length == 1) {
+            this.$nextTick(() => {
+                document.querySelector("#dropzone-" + this._uid).classList.add("dz-max-files-reached");
+            });
+        }
+          }
+        }, this);
+
+    },
+  },
 }
 </script>
 
diff --git a/resources/assets/js/components/forms/AkauntingRadioGroup.vue b/resources/assets/js/components/forms/AkauntingRadioGroup.vue
index c958cc29e..8ce8a78c2 100644
--- a/resources/assets/js/components/forms/AkauntingRadioGroup.vue
+++ b/resources/assets/js/components/forms/AkauntingRadioGroup.vue
@@ -3,7 +3,7 @@
         <label :for="name" class="form-control-label">{{ text }}</label>
 
         <div class="tab-pane tab-example-result fade show active" role="tabpanel" aria-labelledby="-component-tab">
-            <div class="btn-group btn-group-toggle" data-toggle="buttons" v-on:click="onClick">
+            <div class="btn-group btn-group-toggle radio-yes-no" data-toggle="buttons" v-on:click="onClick">
                 <label class="btn btn-success"
                        :class="[{'active': value === 1}]">
                     <input type="radio"
@@ -70,7 +70,7 @@ export default {
         },
         onClick(evt) {
             let val = evt.target.control.value;
-            this.value= val;
+            this.real_value = val;
 
             this.$emit("change", val);
         },
diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index 528d3b8e7..b5260dc77 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -198,6 +198,8 @@ export default {
                                 if (response.data.redirect) {
                                     window.location.href = response.data.redirect;
                                 }
+
+                                this.$emit('deleted', response.data);
                             })
                             .catch(error => {
                                 this.success = false;
diff --git a/resources/assets/js/mixins/wizardAction.js b/resources/assets/js/mixins/wizardAction.js
new file mode 100644
index 000000000..dd1c3d7a7
--- /dev/null
+++ b/resources/assets/js/mixins/wizardAction.js
@@ -0,0 +1,171 @@
+
+export default {
+    data: function () {
+        return {
+            current_tab: undefined,
+            new_datas: false,
+            model: {
+                name: "",
+                rate: "",
+                select: "",
+                enabled: 1
+            },
+            error_field: {},
+        }
+    },
+    methods: {
+        onAddItem() {
+            this.new_datas = true;
+            this.current_tab = undefined;
+            this.error_field = {};
+
+            if (this.model) {
+                this.model.name = '';
+                this.model.rate = '';
+                this.model.select = '';
+            }
+        },
+
+        onEditItem(item, index) {
+            this.new_datas = false;
+            this.current_tab = index;
+            this.error_field = {};
+
+            if (this.model) {
+                this.model.name = item.name ? item.name : '';
+                this.model.rate = item.rate ? item.rate : '';
+                this.model.select = item.code ? item.code : '';
+            }
+        },
+
+        onCancelItem() {
+            this.current_tab = undefined;
+        },
+
+        onDataChange() {
+            this.new_datas = false;
+            this.current_tab = undefined;
+            this.model.name = '';
+            this.model.rate = '';
+            this.model.select = '';
+            this.model.enabled = 1;
+        },
+
+        onSuccessMessage(response) {
+            let type = response.data.success ? 'success' : 'error';
+            let timeout = 1000;
+
+            if (response.data.important) {
+                timeout = 0;
+            }
+
+            this.$notify({
+                message: response.data.message,
+                timeout: timeout,
+                icon: "fas fa-bell",
+                type,
+            });
+
+            this.onDataChange();
+        },
+
+        onDeleteItemMessage(event) {
+            let type = event.success ? 'success' : 'error';
+            let timeout = 1000;
+
+            if (event.important) {
+                timeout = 0;
+            }
+
+            this.$notify({
+                message: event.message,
+                timeout: timeout,
+                icon: "fas fa-bell",
+                type,
+            });
+
+            this.onDataChange();
+        },
+
+        onStatusControl(status_form, status_item, event) {
+            status_form.forEach((status) => {
+                if (status.id == status_item) {
+                    status.enabled = event.target.checked;
+                }
+              });
+        },
+
+        onSubmitEvent(form_method, form_url, plus_data, form_list, form_id) {
+            const formData = new FormData(this.$refs["form"]);
+            const data = {};
+
+            for (let [key, val] of formData.entries()) {
+                Object.assign(data, {
+                    [key]: val,
+                });
+            }
+
+            if(plus_data == 'type') {
+                Object.assign(data, {
+                    ['type']: 'normal',
+                });
+            }
+
+            window.axios({
+                    method: form_method,
+                    url: form_url,
+                    data: data,
+                })
+                .then(response => {
+                    if(form_list.length && form_list.length != undefined) {
+                        if(form_method == 'POST') {
+                            form_list.push({
+                                "id": response.data.data.id,
+                                "name": response.data.data.name,
+                                "code": response.data.data.code,
+                                "rate": response.data.data.rate,
+                                "enabled": response.data.data.enabled != undefined ? response.data.data.enabled : 'true'
+                            });
+                        }
+    
+                        if(form_method == 'PATCH') {
+                            form_list.forEach(item => {
+                                if (item.id == form_id) {
+                                    item.name = response.data.data.name;
+                                    item.code = response.data.data.code;
+                                    item.rate = response.data.data.rate;
+                                }
+                            });
+                        }
+                    }
+                    this.onSuccessMessage(response);
+                }, this)
+                .catch(error => {
+                    this.onFailError(error);
+                }, this);
+        },
+
+        onEjetItem(event, form_list, event_id) {
+            form_list.forEach(function (item, index) {
+                if (item.id == event_id) {
+                  form_list.splice(index, 1);
+                  return;
+                }
+              }, this);
+
+              this.component = "";
+
+              this.onDeleteItemMessage(event);
+        },
+
+        onFailErrorGet(field_name) {
+            if(this.error_field[field_name]) {
+                return this.error_field[field_name][0];
+            }
+        },
+
+        onFailError(error) {
+            this.error_field = error.response.data.errors;
+        }
+    }
+}
diff --git a/resources/assets/js/views/wizard/Company.vue b/resources/assets/js/views/wizard/Company.vue
new file mode 100644
index 000000000..fa9f484ec
--- /dev/null
+++ b/resources/assets/js/views/wizard/Company.vue
@@ -0,0 +1,243 @@
+<template>
+  <div>
+    <h1 class="text-white">
+      {{ translations.company.title }}
+    </h1>
+    <div class="card">
+      <div class="card-header wizard-header p-3">
+        <el-steps :active="active" finish-status="success" align-center>
+          <el-step :title="translations.company.title"></el-step>
+          <el-step :title="translations.currencies.title"></el-step>
+          <el-step :title="translations.taxes.title"></el-step>
+          <el-step :title="translations.finish.title"></el-step>
+        </el-steps>
+      </div>
+      <form ref="form" class="w-100">
+        <div class="card-body">
+          <div class="row mb-4">
+            <div class="col-12 mb-4">
+              <base-input
+                :label="translations.company.api_key"
+                name="api_key"
+                data-name="api_key"
+                :placeholder="translations.company.api_key"
+                prepend-icon="fas fa-key"
+                v-model="company.api_key"
+              />
+              <p class="mb-0 mt--3">
+                <small>
+                  <div>
+                    <a href="https://akaunting.com/dashboard" target="_blank"
+                      >Click here</a
+                    >
+                    to get your API key.
+                  </div>
+                </small>
+              </p>
+            </div>
+            <div class="col-6 mb-4">
+              <base-input
+                type="text"
+                :label="translations.company.tax_number"
+                name="tax_number"
+                data-name="tax_number"
+                :placeholder="translations.company.tax_number"
+                prepend-icon="fas fa-percent"
+                v-model="company.tax_number"
+              />
+            </div>
+            <div class="col-6 mb-4">
+              <akaunting-date
+                :title="translations.company.financial_start"
+                data-name="financial_start"
+                :placeholder="translations.company.financial_start"
+                icon="fas fa-calendar"
+                :date-config="{
+                  dateFormat: 'd-m',
+                  allowInput: true,
+                  altInput: true,
+                  altFormat: 'j F',
+                }"
+                v-model="real_date"
+              ></akaunting-date>
+            </div>
+            <div class="col-12 mb-4">
+              <base-input :label="translations.company.address">
+                <textarea
+                  class="form-control"
+                  name="address"
+                  data-name="address"
+                  rows="3"
+                  :placeholder="translations.company.address"
+                  v-model="company.address"
+                ></textarea>
+              </base-input>
+            </div>
+            <div class="col-3">
+              <label class="form-control-label">{{
+                translations.company.logo
+              }}</label>
+              <akaunting-dropzone-file-upload
+                ref="dropzoneWizard"
+                preview-classes="single"
+                :attachments="logo"
+                :v-model="logo"
+              >
+              </akaunting-dropzone-file-upload>
+            </div>
+          </div>
+        </div>
+        <div class="card-footer">
+          <div class="row">
+            <div class="col-md-12 text-right">
+              <base-button
+                id="button"
+                type="success"
+                native-type="button"
+                @click="onEditSave()"
+                >{{ translations.company.save }}</base-button
+              >
+              <base-button type="white" native-type="submit" @click="next()">{{
+                translations.company.skip
+              }}</base-button>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Step, Steps } from "element-ui";
+import AkauntingDropzoneFileUpload from "./../../components/AkauntingDropzoneFileUpload";
+import AkauntingDate from "./../../components/AkauntingDate";
+import WizardAction from "./../../mixins/wizardAction";
+
+export default {
+  name: "Company",
+  mixins: [WizardAction],
+  components: {
+    [Step.name]: Step,
+    [Steps.name]: Steps,
+    AkauntingDropzoneFileUpload,
+    AkauntingDate,
+  },
+  props: {
+    company: {
+      type: [Object, Array],
+    },
+    translations: {
+      type: [Object, Array],
+    },
+    url: {
+      type: String,
+      default: "text",
+    },
+  },
+  data() {
+    return {
+      active: 0,
+      logo: [],
+      real_date: "",
+    };
+  },
+  mounted() {
+    let company_data = this.company;
+    this.onDataWatch(company_data);
+  },
+  watch: {
+    company: function (company) {
+      this.onDataWatch(company);
+    },
+  },
+  methods: {
+    onDataWatch(company) {
+      if (Object.keys(company).length) {
+        let logo_arr = [
+          {
+            id: company.logo.id,
+            name: company.logo.filename + "." + company.logo.extension,
+            path: company.logo.path,
+            type: company.logo.mime_type,
+            size: company.logo.size,
+            downloadPath: false,
+          },
+        ];
+        this.logo.push(logo_arr);
+        this.real_date = company.financial_start;
+      }
+    },
+
+    onEditSave() {
+      FormData.prototype.appendRecursive = function (data, wrapper = null) {
+        for (var name in data) {
+          if (name == "previewElement" || name == "previewTemplate") {
+            continue;
+          }
+          if (wrapper) {
+            if (
+              (typeof data[name] == "object" || Array.isArray(data[name])) &&
+              data[name] instanceof File != true &&
+              data[name] instanceof Blob != true
+            ) {
+              this.appendRecursive(data[name], wrapper + "[" + name + "]");
+            } else {
+              this.append(wrapper + "[" + name + "]", data[name]);
+            }
+          } else {
+            if (
+              (typeof data[name] == "object" || Array.isArray(data[name])) &&
+              data[name] instanceof File != true &&
+              data[name] instanceof Blob != true
+            ) {
+              this.appendRecursive(data[name], name);
+            } else {
+              this.append(name, data[name]);
+            }
+          }
+        }
+      };
+
+      const formData = new FormData(this.$refs["form"]);
+      let data_name = {};
+      
+      for (let [key, val] of formData.entries()) {
+        Object.assign(data_name, {
+          [key]: val,
+          ["logo"]: this.$refs.dropzoneWizard.files[1]
+            ? this.$refs.dropzoneWizard.files[1]
+            : this.$refs.dropzoneWizard.files[0],
+          ["_prefix"]: "company",
+          ["_token"]: window.Laravel.csrfToken,
+          ["_method"]: "POST",
+        });
+      }
+
+      formData.appendRecursive(data_name);
+      window
+        .axios({
+          method: "POST",
+          url: url + "/wizard/companies",
+          data: formData,
+          headers: {
+            "X-CSRF-TOKEN": window.Laravel.csrfToken,
+            "X-Requested-With": "XMLHttpRequest",
+            "Content-Type": "multipart/form-data",
+          },
+        })
+        .then((response) => {
+          this.onSuccessMessage(response);
+          this.$router.push("/wizard/currencies");
+        }, this)
+        .catch((error) => {
+        }, this);
+    },
+
+    next() {
+      if (this.active++ > 2);
+      this.$router.push("/wizard/currencies");
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/views/wizard/Currencies.vue b/resources/assets/js/views/wizard/Currencies.vue
new file mode 100644
index 000000000..3323360c2
--- /dev/null
+++ b/resources/assets/js/views/wizard/Currencies.vue
@@ -0,0 +1,422 @@
+<template>
+  <div>
+    <h1 class="text-white">
+      {{ translations.currencies.title }}
+    </h1>
+
+    <div class="card">
+      <div class="card-header wizard-header p-3">
+        <el-steps :active="active" finish-status="success" align-center>
+          <el-step :title="translations.company.title"></el-step>
+          <el-step :title="translations.currencies.title"></el-step>
+          <el-step :title="translations.taxes.title"></el-step>
+          <el-step :title="translations.finish.title"></el-step>
+        </el-steps>
+      </div>
+
+      <div class="card-body">
+        <div class="d-flex justify-content-end mb-3">
+          <base-button
+            type="success"
+            native-type="button"
+            class="btn-sm"
+            @click="onAddItem()"
+            >{{ translations.currencies.add_new }}</base-button
+          >
+        </div>
+
+        <div class="row flex-column">
+          <form ref="form">
+            <table class="table table-flush table-hover" id="tbl-currencies">
+              <thead class="thead-light">
+                <tr class="row table-head-line">
+                  <th class="col-xs-4 col-sm-4 col-md-3">
+                    {{ translations.currencies.name }}
+                  </th>
+                  <th class="col-md-3 d-none d-md-block">
+                    {{ translations.currencies.code }}
+                  </th>
+                  <th class="col-md-2 d-none d-md-block">
+                    {{ translations.currencies.rate }}
+                  </th>
+                  <th class="col-xs-4 col-sm-4 col-md-2">
+                    {{ translations.currencies.enabled }}
+                  </th>
+                  <th class="col-xs-4 col-sm-4 col-md-2 text-center">
+                    {{ translations.currencies.actions }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="(item, index) in currencies"
+                  :key="index"
+                  class="row align-items-center border-top-1"
+                >
+                  <td class="col-xs-4 col-sm-4 col-md-3">
+                    <a href="javascript:void(0);"> {{ item.name }} </a>
+                  </td>
+                  <td class="col-md-3 d-none d-md-block">{{ item.code }}</td>
+                  <td class="col-md-2 d-none d-md-block">{{ item.rate }}</td>
+                  <td class="col-xs-4 col-sm-4 col-md-2">
+                    <label class="custom-toggle d-inline-block" name="staus-1">
+                      <input
+                        type="checkbox"
+                        :checked="item.enabled"
+                        @input="onSwitchUpdate(item)"
+                      />
+                      <span
+                        class="custom-toggle-slider rounded-circle status-green"
+                        :data-label-on="translations.currencies.yes"
+                        :data-label-off="translations.currencies.no"
+                      >
+                      </span>
+                    </label>
+                  </td>
+                  <td class="col-xs-4 col-sm-4 col-md-2 text-center">
+                    <div class="dropdown">
+                      <a
+                        class="btn btn-neutral btn-sm text-light items-align-center py-2"
+                        href="#"
+                        role="button"
+                        data-toggle="dropdown"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                      >
+                        <i class="fa fa-ellipsis-h text-muted"></i>
+                      </a>
+
+                      <div
+                        class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
+                      >
+                        <button
+                          type="button"
+                          class="dropdown-item"
+                          @click="onEditItem(item, index)"
+                        >
+                          {{ translations.currencies.edit }}
+                        </button>
+                        <div class="dropdown-divider"></div>
+                        <button
+                          type="button"
+                          class="dropdown-item"
+                          @click="onClickDelete(item)"
+                        >
+                          {{ translations.currencies.delete }}
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="w-100 p-0 current-tab" v-if="current_tab == index">
+                    <div class="row pt-3 pb-3">
+                      <div
+                        class="form-container col-12 d-flex justify-content-between align-items-start"
+                      >
+                        <base-input
+                          :label="translations.currencies.name"
+                          name="name"
+                          data-name="name"
+                          :placeholder="translations.currencies.name"
+                          prepend-icon="fas fa-font"
+                          form-classes="col-md-3"
+                          class="required"
+                          v-model="model.name"
+                          :error="onFailErrorGet('name')"
+                        />
+                        <base-input
+                          :label="translations.currencies.code"
+                          class="required"
+                          form-classes="col-md-3"
+                          :error="onFailErrorGet('code')"
+                        >
+                          <el-select
+                            name="code"
+                            v-model="model.select"
+                            @change="onChangeCodeItem(model.select)"
+                            filterable
+                          >
+                            <template slot="prefix">
+                              <span
+                                class="el-input__suffix-inner el-select-icon"
+                              >
+                                <i
+                                  :class="'select-icon-position el-input__icon fa fa-code'"
+                                ></i>
+                              </span>
+                            </template>
+                            <el-option
+                              v-for="option in currency_codes"
+                              :key="option"
+                              :label="option"
+                              :value="option"
+                            >
+                            </el-option> </el-select
+                        ></base-input>
+                        <base-input
+                          :label="translations.currencies.rate"
+                          name="rate"
+                          data-name="rate"
+                          :placeholder="translations.currencies.rate"
+                          prepend-icon="fas fa-percentage"
+                          form-classes="col-md-3"
+                          class="required"
+                          v-model="model.rate"
+                          :error="onFailErrorGet('rate')"
+                        />
+                        <div class="mt-4 col-md-3 current-tab-btn">
+                          <base-button
+                            type="white"
+                            native-type="button"
+                            @click="onCancelItem()"
+                          >
+                            {{ translations.currencies.cancel }}</base-button
+                          >
+                          <base-button
+                            type="success"
+                            native-type="button"
+                            @click="onEditForm(item)"
+                          >
+                            {{ translations.currencies.save }}</base-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr v-if="new_datas">
+                  <td class="p-0">
+                    <div class="row pt-3 pb-3">
+                      <div
+                        class="form-container col-12 d-flex justify-content-between align-items-start"
+                      >
+                        <base-input
+                          :label="translations.currencies.name"
+                          name="name"
+                          data-name="name"
+                          :placeholder="translations.currencies.name"
+                          prepend-icon="fas fa-font"
+                          class="required"
+                          v-model="model.name"
+                          :error="onFailErrorGet('name')"
+                        />
+                        <base-input
+                          :label="translations.currencies.code"
+                          class="required"
+                          :error="onFailErrorGet('code')"
+                        >
+                          <el-select
+                            name="code"
+                            v-model="model.select"
+                            required="required"
+                            @change="onChangeCodeItem(model.select)"
+                            filterable
+                          >
+                            <template slot="prefix">
+                              <span
+                                class="el-input__suffix-inner el-select-icon"
+                              >
+                                <i
+                                  :class="'select-icon-position el-input__icon fa fa-code'"
+                                ></i>
+                              </span>
+                            </template>
+                            <el-option
+                              v-for="option in currency_codes"
+                              :key="option"
+                              :label="option"
+                              :value="option"
+                            >
+                            </el-option> </el-select
+                        ></base-input>
+                        <base-input
+                          :label="translations.currencies.rate"
+                          name="rate"
+                          data-name="rate"
+                          :placeholder="translations.currencies.rate"
+                          prepend-icon="fas fa-percentage"
+                          class="required"
+                          v-model="model.rate"
+                          :error="onFailErrorGet('rate')"
+                        />
+                        <div>
+                          <div class="d-flex">
+                            <akaunting-radio-group
+                              name="enabled"
+                              :text="translations.currencies.enabled"
+                              :enable="translations.currencies.yes"
+                              :disable="translations.currencies.no"
+                              :value="model.enabled"
+                            >
+                            </akaunting-radio-group>
+                          </div>
+                        </div>
+                        <div class="mt-4">
+                          <base-button
+                            type="success"
+                            native-type="button"
+                            @click="onSubmitForm()"
+                            >{{ translations.currencies.save }}</base-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </form>
+        </div>
+
+        <notifications></notifications>
+        <form id="form-dynamic-component" method="POST" action="#"></form>
+        <component
+          v-bind:is="component"
+          @deleted="onDeleteCurrency($event)"
+        ></component>
+      </div>
+
+      <div class="card-footer">
+        <div class="row">
+          <div class="col-md-12 d-flex justify-content-between">
+            <base-button type="white" native-type="submit" @click="prev()">{{
+              translations.currencies.previous
+            }}</base-button>
+            <base-button type="white" native-type="submit" @click="next()">{{
+              translations.currencies.next
+            }}</base-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Step, Steps, Select, Option } from "element-ui";
+import AkauntingRadioGroup from "./../../components/forms/AkauntingRadioGroup";
+import BulkAction from "./../../plugins/bulk-action";
+import MixinsGlobal from "./../../mixins/global";
+import WizardAction from "./../../mixins/wizardAction";
+
+export default {
+  name: "Currencies",
+  mixins: [MixinsGlobal, WizardAction],
+  components: {
+    [Step.name]: Step,
+    [Steps.name]: Steps,
+    [Select.name]: Select,
+    [Option.name]: Option,
+    AkauntingRadioGroup,
+  },
+  props: {
+    currencies: {
+      type: [Object, Array],
+    },
+    currency_codes: {
+      type: [Object, Array],
+    },
+    translations: {
+      type: [Object, Array],
+    },
+  },
+  data() {
+    return {
+      active: 1,
+      bulk_action: new BulkAction(url + "/settings/currencies"),
+    };
+  },
+  methods: {
+    onSwitchUpdate(item) {
+      this.onStatus(item.id, event);
+      this.onStatusControl(this.currencies, item.id, event);
+    },
+
+    onClickDelete(item) {
+      this.confirmDelete(
+        `${
+          new URL(url).protocol +
+          "//" +
+          location.host +
+          location.pathname +
+          "/" +
+          item.id
+        }`,
+        this.translations.currencies.title,
+        `Confirm Delete <strong>${item.name}</strong> ${this.translations.currencies.title}?`,
+        this.translations.currencies.cancel,
+        this.translations.currencies.delete
+      );
+    },
+
+    onDeleteCurrency(event) {
+      this.onEjetItem(event, this.currencies, event.currency_id);
+    },
+
+    onChangeCodeItem(code) {
+      const formData = new FormData(this.$refs["form"]);
+      const data = {
+        rate: "",
+        precision: "",
+        symbol: "",
+        symbol_first: "",
+        decimal_mark: "",
+        thousands_separator: "",
+      };
+
+      for (let [key, val] of formData.entries()) {
+        Object.assign(data, {
+          [key]: val,
+        });
+      }
+
+      window
+        .axios({
+          method: "GET",
+          url: url + "/settings/currencies/config",
+          params: {
+            code: code,
+          },
+        })
+        .then((response) => {
+          data.rate = response.data.rate;
+          data.precision = response.data.precision;
+          data.symbol = response.data.symbol;
+          data.symbol_first = response.data.symbol_first;
+          data.decimal_mark = response.data.decimal_mark;
+          data.thousands_separator = response.data.thousands_separator;
+          this.model.rate = response.data.rate;
+        }, this);
+    },
+
+    onEditForm(item) {
+      this.onSubmitEvent(
+        "PATCH",
+        url + "/wizard/currencies/" + item.id,
+        "",
+        this.currencies,
+        item.id
+      );
+    },
+
+    onSubmitForm() {
+      this.onSubmitEvent(
+        "POST",
+        url + "/wizard/currencies",
+        "",
+        this.currencies
+      );
+    },
+
+    prev() {
+      if (this.active-- > 2);
+      history.back()
+      this.$router.push("/wizard/companies");
+    },
+
+    next() {
+      if (this.active++ > 2);
+      this.$router.push("/wizard/taxes");
+    },
+  },
+};
+</script>
diff --git a/resources/assets/js/views/wizard/Finish.vue b/resources/assets/js/views/wizard/Finish.vue
new file mode 100644
index 000000000..beaeb4868
--- /dev/null
+++ b/resources/assets/js/views/wizard/Finish.vue
@@ -0,0 +1,143 @@
+<template>
+  <div v-if="is_loaded">
+    <h1 class="text-white">{{ translations.finish.title }}</h1>
+    <div class="card">
+      <div class="card-header wizard-header p-3">
+        <el-steps :active="active" finish-status="success" align-center>
+          <el-step :title="translations.company.title"></el-step>
+          <el-step :title="translations.currencies.title"></el-step>
+          <el-step :title="translations.taxes.title"></el-step>
+          <el-step :title="translations.finish.title"></el-step>
+        </el-steps>
+      </div>
+      <div class="card-body bg-default">
+        <div class="row">
+          <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
+            <div class="content-header">
+              <h3 class="text-white">
+                {{ translations.finish.recommended_apps }}
+              </h3>
+            </div>
+            <div class="row">
+              <div
+                v-for="(item, index) in modules"
+                :key="index"
+                class="col-md-3"
+              >
+                <div class="card">
+                  <div class="card-header py-2">
+                    <h4 class="ml--3 mb-0 float-left">
+                      <a :href="item.slug">{{ item.name }}</a>
+                    </h4>
+                  </div>
+                  <a :href="route_url + '/' + item.slug"
+                    ><img
+                      v-for="(file, indis) in item.files"
+                      :key="indis"
+                      v-if="
+                        file.media_type == 'image' &&
+                        file.pivot.zone == 'thumbnail'
+                      "
+                      :src="file.path_string"
+                      :alt="item.name"
+                      class="card-img-top border-radius-none"
+                  /></a>
+                  <div class="card-footer py-2">
+                    <div class="float-left ml--3 mt--1">
+                      <i
+                        v-for="(stars, indis) in item.vote"
+                        :key="indis"
+                        class="fa fa-star text-xs text-yellow"
+                      ></i>
+                      <small class="text-xs"> {{ item.total_review }} </small>
+                    </div>
+                    <div class="float-right mr--3">
+                      <small
+                        ><strong> {{ item.price }} </strong></small
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-12"><ul></ul></div>
+          </div>
+        </div>
+      </div>
+      <div class="card-footer">
+        <div class="row">
+          <div class="col-md-12 d-flex justify-content-between">
+            <base-button type="white" native-type="submit" @click="prev()">{{
+              translations.finish.previous
+            }}</base-button>
+            <base-button
+              type="success"
+              native-type="submit"
+              @click="finish()"
+              >{{ translations.finish.go_to_dashboard }}</base-button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Step, Steps } from "element-ui";
+
+export default {
+  name: "Finish",
+  components: {
+    [Step.name]: Step,
+    [Steps.name]: Steps,
+  },
+  created() {
+    window
+      .axios({
+        method: "PATCH",
+        url: url + "/wizard/finish",
+      })
+      .then((response) => {
+        if (response.status == "200") {
+          this.is_loaded = true;
+        }
+      })
+      .catch((error) => {
+        this.$notify({
+          message: this.translations.finish.error_message,
+          timeout: 1000,
+          icon: "fas fa-bell",
+          type: 0
+        });
+
+        this.prev();
+      });
+  },
+  props: {
+    modules: {
+      type: [Object, Array],
+    },
+    translations: {
+      type: [Object, Array],
+    }
+  },
+  data() {
+    return {
+      active: 3,
+      route_url: url,
+      is_loaded: false
+    };
+  },
+  methods: {
+    prev() {
+      if (this.active-- > 2);
+      this.$router.push("/wizard/taxes");
+    },
+
+    finish() {
+      window.location.href = url;
+    },
+  },
+};
+</script>
diff --git a/resources/assets/js/views/wizard/Taxes.vue b/resources/assets/js/views/wizard/Taxes.vue
new file mode 100644
index 000000000..bc6e311b4
--- /dev/null
+++ b/resources/assets/js/views/wizard/Taxes.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <h1 class="text-white">{{ translations.taxes.title }}</h1>
+    <div class="card">
+      <div class="card-header wizard-header p-3">
+        <el-steps :active="active" finish-status="success" align-center>
+          <el-step :title="translations.company.title"></el-step>
+          <el-step :title="translations.currencies.title"></el-step>
+          <el-step :title="translations.taxes.title"></el-step>
+          <el-step :title="translations.finish.title"></el-step>
+        </el-steps>
+      </div>
+      <div class="card-body">
+        <div class="d-flex justify-content-end mb-3">
+          <base-button
+            type="success"
+            native-type="button"
+            class="btn-sm"
+            @click="onAddItem()"
+            >{{ translations.taxes.add_new }}</base-button
+          >
+        </div>
+        <div class="row flex-column">
+          <form ref="form">
+            <table class="table table-flush table-hover" id="tbl-taxes">
+              <thead class="thead-light">
+                <tr class="row table-head-line">
+                  <th class="col-xs-4 col-sm-4 col-md-3">
+                    {{ translations.taxes.name }}
+                  </th>
+                  <th class="col-md-3 d-none d-md-block">
+                    {{ translations.taxes.rate }}
+                  </th>
+                  <th class="col-xs-4 col-sm-4 col-md-3">
+                    {{ translations.taxes.enabled }}
+                  </th>
+                  <th class="col-xs-4 col-sm-4 col-md-3 text-center">
+                    {{ translations.taxes.actions }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="(item, index) in taxes"
+                  :key="index"
+                  class="row align-items-center border-top-1"
+                >
+                  <td class="col-xs-4 col-sm-4 col-md-3 tax-name">
+                    <a href="javascript:void(0);"> {{ item.name }} </a>
+                  </td>
+                  <td class="col-md-3 d-none d-md-block">{{ item.rate }}</td>
+                  <td class="col-xs-4 col-sm-4 col-md-3">
+                    <label class="custom-toggle d-inline-block" name="staus-1">
+                      <input
+                        type="checkbox"
+                        :checked="item.enabled"
+                        @input="onSwitchUpdate(item)"
+                      />
+                      <span
+                        class="custom-toggle-slider rounded-circle status-green"
+                        :data-label-on="translations.taxes.yes"
+                        :data-label-off="translations.taxes.no"
+                      >
+                      </span>
+                    </label>
+                  </td>
+                  <td class="col-xs-4 col-sm-4 col-md-3 text-center">
+                    <div class="dropdown">
+                      <a
+                        class="btn btn-neutral btn-sm text-light items-align-center py-2"
+                        href="#"
+                        role="button"
+                        data-toggle="dropdown"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                      >
+                        <i class="fa fa-ellipsis-h text-muted"></i>
+                      </a>
+
+                      <div
+                        class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
+                      >
+                        <button
+                          type="button"
+                          class="dropdown-item"
+                          @click="onEditItem(item, index)"
+                        >
+                          {{ translations.taxes.edit }}
+                        </button>
+                        <div class="dropdown-divider"></div>
+                        <button
+                          type="button"
+                          class="dropdown-item"
+                          @click="onClickDelete(item)"
+                        >
+                          {{ translations.taxes.delete }}
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="w-100 p-0 current-tab" v-if="current_tab == index">
+                    <div class="row pt-3 pb-3">
+                      <div
+                        class="form-container col-12 d-flex justify-content-between align-items-start"
+                      >
+                        <base-input
+                          :label="translations.taxes.name"
+                          name="name"
+                          data-name="name"
+                          :placeholder="translations.taxes.name"
+                          prepend-icon="fas fa-font"
+                          form-classes="col-md-4"
+                          class="required"
+                          v-model="model.name"
+                          :error="onFailErrorGet('name')"
+                        />
+                        <base-input
+                          :label="translations.taxes.rate"
+                          name="rate"
+                          data-name="rate"
+                          :placeholder="translations.taxes.rate"
+                          prepend-icon="fas fa-percentage"
+                          form-classes="col-md-4"
+                          class="required"
+                          v-model="model.rate"
+                          :error="onFailErrorGet('rate')"
+                        />
+                        <div class="mt-4 col-md-4 current-tab-btn">
+                          <base-button
+                            type="white"
+                            native-type="button"
+                            @click="onCancelItem()"
+                          >
+                            {{ translations.taxes.cancel }}</base-button
+                          >
+                          <base-button
+                            type="success"
+                            native-type="button"
+                            @click="onEditForm(item)"
+                            >{{ translations.taxes.save }}</base-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr v-if="new_datas">
+                  <td class="p-0">
+                    <div class="row pt-3 pb-3">
+                      <div
+                        class="form-container col-12 d-flex justify-content-between align-items-start"
+                      >
+                        <base-input
+                          :label="translations.taxes.name"
+                          name="name"
+                          data-name="name"
+                          :placeholder="translations.taxes.name"
+                          prepend-icon="fas fa-font"
+                          class="required"
+                          v-model="model.name"
+                          :error="onFailErrorGet('name')"
+                        />
+                        <base-input
+                          :label="translations.taxes.rate"
+                          name="rate"
+                          data-name="rate"
+                          :placeholder="translations.taxes.rate"
+                          prepend-icon="fas fa-percentage"
+                          class="required"
+                          v-model="model.rate"
+                          :error="onFailErrorGet('rate')"
+                        />
+                        <div>
+                          <div class="d-flex">
+                            <akaunting-radio-group
+                              name="enabled"
+                              :text="translations.taxes.enabled"
+                              :enable="translations.taxes.yes"
+                              :disable="translations.taxes.no"
+                              :value="model.enabled"
+                            >
+                            </akaunting-radio-group>
+                          </div>
+                        </div>
+                        <div class="mt-4">
+                          <base-button
+                            type="success"
+                            native-type="button"
+                            @click="onSubmitForm()"
+                            >{{ translations.taxes.save }}</base-button
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </form>
+        </div>
+        <notifications></notifications>
+        <form id="form-dynamic-component" method="POST" action="#"></form>
+        <component
+          v-bind:is="component"
+          @deleted="onDeleteCurrency($event)"
+        ></component>
+      </div>
+      <div class="card-footer">
+        <div class="row">
+          <div class="col-md-12 d-flex justify-content-between">
+            <base-button type="white" native-type="submit" @click="prev()">{{
+              translations.taxes.previous
+            }}</base-button>
+            <base-button type="white" native-type="submit" @click="next()">{{
+              translations.taxes.next
+            }}</base-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Step, Steps } from "element-ui";
+import AkauntingRadioGroup from "./../../components/forms/AkauntingRadioGroup";
+import BulkAction from "./../../plugins/bulk-action";
+import MixinsGlobal from "./../../mixins/global";
+import WizardAction from "./../../mixins/wizardAction";
+
+export default {
+  name: "Taxes",
+  mixins: [MixinsGlobal, WizardAction],
+  components: {
+    [Step.name]: Step,
+    [Steps.name]: Steps,
+    AkauntingRadioGroup,
+  },
+  props: {
+    taxes: {
+      type: [Object, Array],
+    },
+    translations: {
+      type: [Object, Array],
+    },
+  },
+  data() {
+    return {
+      active: 2,
+      bulk_action: new BulkAction(url + "/settings/taxes"),
+    };
+  },
+  methods: {
+    onSwitchUpdate(item) {
+      this.onStatus(item.id, event);
+      this.onStatusControl(this.taxes, item.id, event);
+    },
+
+    onClickDelete(item) {
+      this.confirmDelete(
+        `${
+          new URL(url).protocol +
+          "//" +
+          location.host +
+          location.pathname +
+          "/" +
+          item.id
+        }`,
+        this.translations.taxes.title,
+        `${
+          this.translations.currencies.title +
+          "&nbsp;" +
+          this.translations.currencies.delete
+        } <strong>${item.name}</strong>?`,
+        this.translations.taxes.cancel,
+        this.translations.taxes.delete
+      );
+    },
+
+    onDeleteCurrency(event) {
+      this.onEjetItem(event, this.taxes, event.tax_id);
+    },
+
+     onEditForm(item) {
+      this.onSubmitEvent(
+        "PATCH",
+        url + "/wizard/taxes/" + item.id,
+        "type",
+        this.taxes,
+        item.id
+      );
+    },
+
+    onSubmitForm() {
+      this.onSubmitEvent("POST", url + "/wizard/taxes", "type", this.taxes);
+    },
+
+    prev() {
+      if (this.active-- > 2);
+      this.$router.push("/wizard/currencies");
+    },
+
+    next() {
+      if (this.active++ > 2);
+      this.$router.push("/wizard/finish");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.current-tab-btn {
+  padding: 0 80px;
+}
+</style>
diff --git a/resources/assets/js/views/wizard/company.js b/resources/assets/js/views/wizard/company.js
deleted file mode 100644
index a982c5005..000000000
--- a/resources/assets/js/views/wizard/company.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
-
-require('./../../bootstrap');
-
-import Vue from 'vue';
-
-import DashboardPlugin from './../../plugins/dashboard-plugin';
-
-import Global from './../../mixins/global';
-
-import Form from './../../plugins/form';
-
-import {Step, Steps} from 'element-ui';
-
-// plugin setup
-Vue.use(DashboardPlugin, Step, Steps);
-
-const app = new Vue({
-    el: '#app',
-
-    mixins: [
-        Global
-    ],
-
-    components: {
-        [Step.name]: Step,
-        [Steps.name]: Steps,
-    },
-
-    data: function () {
-        return {
-            form: new Form('company'),
-            active: 0
-        }
-    },
-
-    methods: {
-
-    }
-});
diff --git a/resources/assets/js/views/wizard/currencies.js b/resources/assets/js/views/wizard/currencies.js
deleted file mode 100644
index 9287755ef..000000000
--- a/resources/assets/js/views/wizard/currencies.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
-
-require('../../bootstrap');
-
-import Vue from 'vue';
-
-import DashboardPlugin from './../../plugins/dashboard-plugin';
-
-import Global from '../../mixins/global';
-
-import Form from '../../plugins/form';
-import BulkAction from './../../plugins/bulk-action';
-
-import {Step, Steps} from 'element-ui';
-
-// plugin setup
-Vue.use(DashboardPlugin, Step, Steps);
-
-const app = new Vue({
-    el: '#app',
-
-    mixins: [
-        Global
-    ],
-
-    components: {
-        [Step.name]: Step,
-        [Steps.name]: Steps,
-    },
-
-    data: function () {
-        return {
-            form: new Form('currency'),
-            active: 1,
-            bulk_action: new BulkAction(url + '/settings/currencies'),
-            show: false,
-            currency: {
-                name: '',
-                code: '',
-                rate: '1',
-                enabled: 1
-            },
-            submit_function: '',
-        }
-    },
-
-    methods: {
-        onAddCurrency() {
-            this.submit_function = 'onStoreCurrency';
-            this.form.method = 'post';
-            this.form.action = url + '/wizard/currencies';
-
-            this.form.name = '';
-            this.form.code = '';
-            this.form.rate = '';
-            this.form.enabled = 1;
-            this.form.precision = '';
-            this.form.symbol = '';
-            this.form.symbol_first = '';
-            this.form.decimal_mark = '';
-            this.form.thousands_separator = '';
-
-            this.show = true;
-        },
-
-        onEditCurrency(currency_id) {
-            this.submit_function = 'onUpdateCurrency';
-            this.form.method = 'patch';
-            this.form.action = url + '/wizard/currencies/' + currency_id;
-
-            currencies.forEach(currency => {
-                if (currency.id == currency_id) {
-                    this.form.name = currency.name;
-                    this.form.code = currency.code;
-                    this.form.rate = currency.rate;
-                    this.form.enabled = currency.enabled;
-                    this.form.precision = currency.precision;
-                    this.form.symbol = currency.symbol;
-                    this.form.symbol_first = currency.symbol_first;
-                    this.form.decimal_mark = currency.decimal_mark;
-                    this.form.thousands_separator = currency.thousands_separator;
-                }
-            });
-
-            this.show = true;
-        },
-
-        onChangeCode(code) {
-            axios.get(url + '/settings/currencies/config', {
-                params: {
-                    code: code
-                }
-            })
-            .then(response => {
-                this.form.rate = response.data.rate;
-                this.form.precision = response.data.precision;
-                this.form.symbol = response.data.symbol;
-                this.form.symbol_first = response.data.symbol_first;
-                this.form.decimal_mark = response.data.decimal_mark;
-                this.form.thousands_separator = response.data.thousands_separator;
-            })
-            .catch(error => {
-            });
-        },
-
-        onSubmit() {	
-            this.form.oldSubmit();	
-        },
-    }
-});
diff --git a/resources/assets/js/views/wizard/finish.js b/resources/assets/js/views/wizard/finish.js
deleted file mode 100644
index 090fb9857..000000000
--- a/resources/assets/js/views/wizard/finish.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
-
-require('./../../bootstrap');
-
-import Vue from 'vue';
-
-import DashboardPlugin from './../../plugins/dashboard-plugin';
-
-import Global from './../../mixins/global';
-
-import {Step, Steps} from 'element-ui';
-
-// plugin setup
-Vue.use(DashboardPlugin, Step, Steps);
-
-const app = new Vue({
-    el: '#app',
-
-    mixins: [
-        Global
-    ],
-
-    components: {
-        [Step.name]: Step,
-        [Steps.name]: Steps,
-    },
-
-    data: function () {
-        return {
-            active: 3,
-        }
-    },
-
-    methods: {
-
-    }
-});
diff --git a/resources/assets/js/views/wizard/taxes.js b/resources/assets/js/views/wizard/taxes.js
deleted file mode 100644
index ca0e9cff8..000000000
--- a/resources/assets/js/views/wizard/taxes.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
-
-require('../../bootstrap');
-
-import Vue from 'vue';
-
-import DashboardPlugin from './../../plugins/dashboard-plugin';
-
-import Global from '../../mixins/global';
-
-import Form from '../../plugins/form';
-import BulkAction from './../../plugins/bulk-action';
-
-import {Step, Steps} from 'element-ui';
-
-// plugin setup
-Vue.use(DashboardPlugin, Step, Steps);
-
-const app = new Vue({
-    el: '#app',
-
-    mixins: [
-        Global
-    ],
-
-    components: {
-        [Step.name]: Step,
-        [Steps.name]: Steps,
-    },
-
-    data: function () {
-        return {
-            form: new Form('tax'),
-            active: 2,
-            bulk_action: new BulkAction(url + '/settings/taxes'),
-            show: false,
-            tax: {
-                name: '',
-                code: '',
-                type: 'normal',
-                enabled: 1
-            },
-            submit_function: ''
-        }
-    },
-
-    methods: {
-        onAddTax() {
-            this.submit_function = 'onStoreTax';
-            this.form.method = 'post';
-            this.form.action = url + '/wizard/taxes';
-
-            this.form.name = '';
-            this.form.rate = '';
-            this.form.type = 'normal';
-            this.form.enabled = 1;
-
-            this.show = true;
-        },
-
-        onEditTax(tax_id) {
-            this.submit_function = 'onUpdateTax';
-            this.form.method = 'patch';
-            this.form.action = url + '/wizard/taxes/' + tax_id;
-
-            taxes.forEach(tax => {
-                if (tax.id == tax_id) {
-                    this.form.name = tax.name;
-                    this.form.rate = tax.rate;
-                    this.form.type = tax.type;
-                    this.form.enabled = tax.enabled;
-                }
-            });
-
-            this.show = true;
-        },
-
-        onSubmit() {	
-            this.form.oldSubmit();	
-        },
-    }
-});
diff --git a/resources/assets/js/wizard.js b/resources/assets/js/wizard.js
new file mode 100644
index 000000000..f710cb3bf
--- /dev/null
+++ b/resources/assets/js/wizard.js
@@ -0,0 +1,67 @@
+
+require('./bootstrap');
+
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import DashboardPlugin from './plugins/dashboard-plugin';
+
+Vue.use(DashboardPlugin);
+Vue.use(VueRouter);
+
+import Wizard from './Wizard.vue';
+import Company from './views/wizard/Company.vue';
+import Currencies from './views/wizard/Currencies.vue';
+import Taxes from './views/wizard/Taxes.vue';
+import Finish from './views/wizard/Finish.vue';
+
+var global_path = new URL(url).protocol + '//' + window.location.host;
+var base_path = url.replace(global_path, '');
+
+const router = new VueRouter({
+    mode: 'history',
+    base: base_path,
+    routes: [
+      {
+        path: '/wizard',
+        name: 'Wizard',
+        component: Company
+    }, 
+      {
+        path: '/wizard/companies',
+        name: 'Company',
+        component: Company
+    }, 
+    {
+      path: '/wizard/currencies',
+      name: 'Currencies',
+      component: Currencies
+  },
+  {
+    path: '/wizard/taxes',
+    name: 'Taxes',
+    component: Taxes
+},
+{
+    path: '/wizard/finish',
+    name: 'Finish',
+    component: Finish
+} 
+  ],
+  linkActiveClass: 'active',
+  scrollBehavior: (to, from ,savedPosition) => {
+    if (savedPosition) {
+        return savedPosition;
+    }
+    if (to.hash) {
+        return { selector: to.hash };
+    }
+    return { x: 0, y: 0 };
+}
+});
+
+new Vue({
+  el    : '#app',
+  router,
+  render: h => h(Wizard),
+});
+
diff --git a/resources/views/layouts/wizard.blade.php b/resources/views/layouts/wizard.blade.php
index 720fe0c4d..cce3d002b 100644
--- a/resources/views/layouts/wizard.blade.php
+++ b/resources/views/layouts/wizard.blade.php
@@ -1,4 +1,4 @@
-<html lang="{{ app()->getLocale() }}">
+<html>
     @include('partials.wizard.head')
 
     <body class="wizard-page">
@@ -7,15 +7,22 @@
             @stack('body_start')
 
             <div id="app">
+                <div class="card-body">
+                    <div class="document-loading" v-if="!page_loaded">
+                        <div>
+                            <i class="fas fa-spinner fa-pulse fa-7x"></i>
+                        </div>
+                    </div>
 
-                @include('partials.wizard.content')
+                    @include('flash::message')
 
+                    @yield('content')
+                </div>
             </div>
 
-            @stack('body_end')
         </div>
 
         @include('partials.wizard.scripts')
-    </body>
 
-</html>
+    </body>
+</html>
\ No newline at end of file
diff --git a/resources/views/partials/wizard/content.blade.php b/resources/views/partials/wizard/content.blade.php
deleted file mode 100644
index 0e7ffc823..000000000
--- a/resources/views/partials/wizard/content.blade.php
+++ /dev/null
@@ -1,22 +0,0 @@
-@stack('content_start')
-    @stack('content_header_start')
-
-        <h1 class="text-white">
-            @yield('title')
-            @yield('new_button')
-        </h1>
-
-    @stack('content_header_end')
-
-    @stack('content_content_start')
-
-        @yield('content')
-
-    @stack('content_content_end')
-
-    <notifications></notifications>
-
-    <form id="form-dynamic-component" method="POST" action="#"></form>
-
-    <component v-bind:is="component"></component>
-@stack('content_end')
diff --git a/resources/views/partials/wizard/pagination.blade.php b/resources/views/partials/wizard/pagination.blade.php
deleted file mode 100644
index 78fdcd35b..000000000
--- a/resources/views/partials/wizard/pagination.blade.php
+++ /dev/null
@@ -1,14 +0,0 @@
-@stack('pagination_start')
-    @if ($items->firstItem())
-        <div class="pull-left">
-            <small>{{ trans('pagination.showing', ['first' => $items->firstItem(), 'last' => $items->lastItem(), 'total' => $items->total(), 'type' => strtolower(trans_choice('general.' . $type, 2))]) }}</small>
-        </div>
-        <div class="pull-right">
-            {!! $items->withPath(request()->url())->withQueryString()->links() !!}
-        </div>
-    @else
-        <div class="pull-left">
-            <small>{{ trans('general.no_records') }}</small>
-        </div>
-    @endif
-@stack('pagination_end')
diff --git a/resources/views/partials/wizard/scripts.blade.php b/resources/views/partials/wizard/scripts.blade.php
index 5daf78cc5..81f7b1b8e 100644
--- a/resources/views/partials/wizard/scripts.blade.php
+++ b/resources/views/partials/wizard/scripts.blade.php
@@ -4,6 +4,8 @@
     <script src="{{ asset('public/vendor/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
     <script src="{{ asset('public/vendor/js-cookie/js.cookie.js') }}"></script>
 
+    <script src="{{ asset('public/js/wizard/wizard.js?v=' . version('short')) }}"></script>
+
     @stack('body_css')
 
     @stack('body_stylesheet')
diff --git a/resources/views/wizard/companies/edit.blade.php b/resources/views/wizard/companies/edit.blade.php
index 108e49a0f..81921fd2b 100644
--- a/resources/views/wizard/companies/edit.blade.php
+++ b/resources/views/wizard/companies/edit.blade.php
@@ -3,84 +3,5 @@
 @section('title', trans('general.wizard'))
 
 @section('content')
-    <div class="card">
-        {!! Form::model($company, [
-            'method' => 'PATCH',
-            'route' => ['wizard.companies.update'],
-            'id' => 'company',
-            '@submit.prevent' => 'onSubmit',
-            '@keydown' => 'form.errors.clear($event.target.name)',
-            'files' => true,
-            'role' => 'form',
-            'class' => 'form-loading-button mb-0',
-            'novalidate' => true
-        ]) !!}
 
-            <div id="wizard-loading"></div>
-            @include('partials.wizard.steps')
-
-            <div class="card-body">
-                <div id="wizard-loading"></div>
-                <div class="row mb--4">
-                    <div class="col-md-12 {!! (!setting('apps.api_key', null)) ?: 'hidden' !!}">
-                        <div class="form-group {{ $errors->has('api_key') ? 'has-error' : ''}}"
-                            :class="[{'has-error': form.errors.get('api_key') }]">
-                            {!! Form::label('api-key', trans('modules.api_key'), ['class' => 'form-control-label']) !!}
-
-                            <div class="input-group input-group-merge">
-                                <div class="input-group-prepend">
-                                    <span class="input-group-text">
-                                        <i class="fa fa-key"></i>
-                                    </span>
-                                </div>
-
-                                {!! Form::text('api_key', setting('apps.api_key', null), array_merge([
-                                    'class' => 'form-control',
-                                    'data-name' => 'api_key',
-                                    'data-value' => setting('apps.api_key', null),
-                                    'placeholder' => trans('general.form.enter', ['field' => trans('modules.api_key')]),
-                                    'v-model' => 'form.api_key'
-                                ], [])) !!}
-                            </div>
-
-                            <div class="invalid-feedback d-block" v-if="form.errors.has('api_key')" v-html="form.errors.get('api_key')"></div>
-                        </div>
-
-                        <p class="mb-0 mt--3">
-                            <small>{!! trans('modules.get_api_key', ['url' => 'https://akaunting.com/dashboard']) !!}</small>
-                        </p>
-
-                        <br>
-                    </div>
-
-                    {{ Form::textGroup('tax_number', trans('general.tax_number'), 'percent', []) }}
-
-                    {{ Form::dateGroup('financial_start', trans('settings.localisation.financial_start'), 'calendar', ['id' => 'financial_start', 'class' => 'form-control datepicker', 'show-date-format' => 'j F', 'date-format' => 'd-m', 'autocomplete' => 'off'], Date::now()->startOfYear()->format('d-m')) }}
-
-                    {{ Form::textareaGroup('address', trans('settings.company.address')) }}
-
-                    {{ Form::fileGroup('logo', trans('settings.company.logo'), '', ['dropzone-class' => 'form-file']) }}
-                </div>
-            </div>
-
-            <div class="card-footer">
-                <div class="row">
-                    <div class="col-md-12 text-right">
-                        {!! Form::button(
-                            '<span v-if="form.loading" class="btn-inner--icon"><i class="aka-loader"></i></span> <span :class="[{\'ml-0\': form.loading}]" class="btn-inner--text">' . trans('general.save') . '</span>',
-                            [':disabled' => 'form.loading', 'type' => 'submit', 'class' => 'btn btn-icon btn-success']) !!}
-
-                        <a href="{{ route('wizard.currencies.index') }}" id="wizard-skip" class="btn btn-white">
-                            {{ trans('general.skip') }}
-                        </a>
-                    </div>
-                </div>
-            </div>
-
-        {!! Form::close() !!}
-    </div>
 @endsection
-
-@push('scripts_start')
-    <script src="{{ asset('public/js/wizard/company.js?v=' . version('short')) }}"></script>
-@endpush
diff --git a/resources/views/wizard/currencies/index.blade.php b/resources/views/wizard/currencies/index.blade.php
index eedfab90d..293e01e4b 100644
--- a/resources/views/wizard/currencies/index.blade.php
+++ b/resources/views/wizard/currencies/index.blade.php
@@ -3,143 +3,5 @@
 @section('title', trans('general.wizard'))
 
 @section('content')
-    <div class="card">
-        @include('partials.wizard.steps')
-
-        <div class="card-body border-bottom-0">
-            <div class="row">
-                <div class="col-md-12 text-right">
-                    <button type="button" @click="onAddCurrency" class="btn btn-success btn-sm">
-                        {{ trans('general.add_new') }}
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <div class="table-responsive">
-            {!! Form::open([
-                'route' => 'wizard.currencies.store',
-                'id' => 'currency',
-                '@submit.prevent' => 'onSubmit',
-                '@keydown' => 'form.errors.clear($event.target.name)',
-                'files' => true,
-                'role' => 'form',
-                'class' => 'form-loading-button mb-0',
-                'novalidate' => true
-            ]) !!}
-                <table class="table table-flush table-hover" id='tbl-currencies'>
-                    <thead class="thead-light">
-                        <tr class="row table-head-line">
-                            <th class="col-xs-4 col-sm-4 col-md-3">@sortablelink('name', trans('general.name'))</th>
-                            <th class="col-md-3 d-none d-md-block">@sortablelink('code', trans('currencies.code'))</th>
-                            <th class="col-md-2 d-none d-md-block">@sortablelink('rate', trans('currencies.rate'))</th>
-                            <th class="col-xs-4 col-sm-4 col-md-2 ">@sortablelink('enabled', trans('general.enabled'))</th>
-                            <th class="col-xs-4 col-sm-4 col-md-2 text-center">{{ trans('general.actions') }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        @foreach($currencies as $item)
-                            <tr class="row align-items-center border-top-1" id="currency-{{ $item->id }}">
-                                <td class="col-xs-4 col-sm-4 col-md-3">
-                                    <a href="javascript:void(0);" @click="onEditCurrency('{{ $item->id }}')">
-                                        {{ $item->name }}
-                                    </a>
-                                </td>
-                                <td class="col-md-3 d-none d-md-block">{{ $item->code }}</td>
-                                <td class="col-md-2 d-none d-md-block">{{ $item->rate }}</td>
-                                <td class="col-xs-4 col-sm-4 col-md-2">
-                                    @if (user()->can('update-settings-currencies'))
-                                        {{ Form::enabledGroup($item->id, $item->name, $item->enabled) }}
-                                    @else
-                                        @if ($item->enabled)
-                                            <badge rounded type="success" class="mw-60">{{ trans('general.yes') }}</badge>
-                                        @else
-                                            <badge rounded type="danger" class="mw-60">{{ trans('general.no') }}</badge>
-                                        @endif
-                                    @endif
-                                </td>
-                                <td class="col-xs-4 col-sm-4 col-md-2 text-center">
-                                    <div class="dropdown">
-                                        <a class="btn btn-neutral btn-sm text-light items-align-center py-2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                            <i class="fa fa-ellipsis-h text-muted"></i>
-                                        </a>
-
-                                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                                            <button type="button" class="dropdown-item" @click="onEditCurrency('{{ $item->id }}')">
-                                                {{ trans('general.edit') }}
-                                            </button>
-                                            @can('delete-settings-currencies')
-                                                <div class="dropdown-divider"></div>
-                                                {!! Form::deleteLink($item, 'wizard.currencies.destroy') !!}
-                                            @endcan
-                                        </div>
-                                    </div>
-                                </td>
-                            </tr>
-                        @endforeach
-
-                        <tr class="row align-items-center border-top-1" v-show="show">
-                            <td class="col-xs-4 col-sm-4 col-md-3">
-                                {{ Form::textGroup('name', trans('general.name'), 'font', [], null, '') }}
-                            </td>
-                            <td class="col-md-3 d-none d-md-block">
-                                {{ Form::selectGroup('code', trans('currencies.code'), 'code', $codes, null, ['required' => 'required', 'change' => 'onChangeCode', 'model' => 'form.code'], '') }}
-                            </td>
-                            <td class="col-md-2 d-none d-md-block">
-                                {{ Form::textGroup('rate', trans('currencies.rate'), 'percentage', ['required' => 'required'], null, '') }}
-                            </td>
-                            <td class="col-xs-4 col-sm-4 col-md-2">
-                                {{ Form::radioGroup('enabled', trans('general.enabled')) }}
-                            </td>
-                            <td class="col-xs-4 col-sm-4 col-md-2 text-center">
-                                {!! Form::button(
-                                    trans('general.save'), [
-                                    ':disabled' => 'form.loading',
-                                    'type' => 'submit',
-                                    'class' => 'btn btn-success',
-                                ]) !!}
-
-                                <div class="d-none">
-                                    {{ Form::numberGroup('precision', trans('currencies.precision'), 'bullseye') }}
-
-                                    {{ Form::textGroup('symbol', trans('currencies.symbol.symbol'), 'font') }}
-
-                                    {{ Form::selectGroup('symbol_first', trans('currencies.symbol.position'), 'text-width', ['1' => trans('currencies.symbol.before'), '0' => trans('currencies.symbol.after')]) }}
-
-                                    {{ Form::textGroup('decimal_mark', trans('currencies.decimal_mark'), 'columns') }}
-
-                                    {{ Form::textGroup('thousands_separator', trans('currencies.thousands_separator'), 'columns', []) }}
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                <input type="hidden" name="bulk_action_path" value="settings/currencies"/>
-            {!! Form::close() !!}
-        </div>
-
-        <div class="card-footer">
-            <div class="row">
-                <div class="col-sm-6">
-                    <a href="{{ route('wizard.companies.edit') }}" class="btn btn-icon btn-white">
-                        <span class="btn-inner--text">{{ trans('pagination.previous') }}</span>
-                    </a>
-                </div>
-
-                <div class="col-sm-6 text-right">
-                    <a href="{{ route('wizard.taxes.index') }}" id="wizard-skip" class="btn btn-icon btn-white">
-                        <span class="btn-inner--text">{{ trans('pagination.next') }}</span>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
+   
 @endsection
-
-@push('scripts_start')
-    <script type="text/javascript">
-        var currencies = {!! json_encode($currencies->items()) !!}
-    </script>
-
-    <script src="{{ asset('public/js/wizard/currencies.js?v=' . version('short')) }}"></script>
-@endpush
diff --git a/resources/views/wizard/finish/index.blade.php b/resources/views/wizard/finish/index.blade.php
index f17e5dc0c..d28fb8948 100644
--- a/resources/views/wizard/finish/index.blade.php
+++ b/resources/views/wizard/finish/index.blade.php
@@ -3,68 +3,5 @@
 @section('title', trans('general.wizard'))
 
 @section('content')
-    <div class="card">
-        @include('partials.wizard.steps')
-
-        <div class="card-body bg-default">
-            <div class="row">
-                <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
-                    <div class="content-header">
-                        <h3 class="text-white">{{ trans('modules.recommended_apps') }}</h3>
-                    </div>
-
-                    @if ($modules)
-                        <div class="row">
-                            @foreach ($modules->data as $module)
-                                @include('partials.modules.item')
-                            @endforeach
-                        </div>
-
-                        <div class="col-md-12">
-                            <ul>
-                                @if ($modules->current_page < $modules->last_page)
-                                    <li class="next"><a href="{{ url(request()->path()) }}?page={{ $modules->current_page + 1 }}" class="btn btn-default btn-sm">{!! trans('pagination.next') !!}</a></li>
-                                @endif
-                                @if ($modules->current_page > 1)
-                                    <li class="previous"><a href="{{ url(request()->path()) }}?page={{ $modules->current_page - 1 }}" class="btn btn-default btn-sm">{{ trans('pagination.previous') }}</a></li>
-                                @endif
-                            </ul>
-                        </div>
-                    @else
-                        <div class="card">
-                            <div class="card-body">
-                                <p class="col-md-12">
-                                    {{ trans('modules.no_apps') }}
-                                </p>
-
-                                <p class="col-md-12">
-                                    <small>{!! trans('modules.developer') !!}</small>
-                                </p>
-                            </div>
-                        </div>
-                    @endif
-                </div>
-            </div>
-        </div>
-
-        <div class="card-footer">
-            <div class="row">
-                <div class="col-sm-6">
-                    <a href="{{ route('wizard.taxes.index') }}" class="btn btn-icon btn-white">
-                        <span class="btn-inner--text">{{ trans('pagination.previous') }}</span>
-                    </a>
-                </div>
-
-                <div class="col-sm-6 text-right">
-                    <a href="{{ route('dashboard') }}" id="wizard-skip" class="btn btn-icon btn-success">
-                        <span class="btn-inner--text">{{ trans('general.go_to_dashboard') }}</span>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
+ 
 @endsection
-
-@push('scripts_start')
-    <script src="{{ asset('public/js/wizard/finish.js?v=' . version('short')) }}"></script>
-@endpush
diff --git a/resources/views/wizard/taxes/index.blade.php b/resources/views/wizard/taxes/index.blade.php
index 193955c38..d28fb8948 100644
--- a/resources/views/wizard/taxes/index.blade.php
+++ b/resources/views/wizard/taxes/index.blade.php
@@ -3,125 +3,5 @@
 @section('title', trans('general.wizard'))
 
 @section('content')
-    <div class="card">
-        @include('partials.wizard.steps')
-
-        <div class="card-body border-bottom-0">
-            <div class="row">
-                <div class="col-md-12 text-right">
-                    <button type="button" @click="onAddTax" class="btn btn-success btn-sm">
-                        {{ trans('general.add_new') }}
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <div class="table-responsive">
-            {!! Form::open([
-                'route' => 'wizard.taxes.store',
-                'id' => 'tax',
-                '@submit.prevent' => 'onSubmit',
-                '@keydown' => 'form.errors.clear($event.target.name)',
-                'files' => true,
-                'role' => 'form',
-                'class' => 'form-loading-button mb-0',
-                'novalidate' => true
-            ]) !!}
-                <table class="table table-flush table-hover" id='tbl-taxes'>
-                    <thead class="thead-light">
-                        <tr class="row table-head-line">
-                            <th class="col-xs-4 col-sm-4 col-md-3">@sortablelink('name', trans('general.name'))</th>
-                            <th class="col-md-3 d-none d-md-block">@sortablelink('rate', trans('taxes.rate_percent'))</th>
-                            <th class="col-xs-4 col-sm-4 col-md-3">@sortablelink('enabled', trans('general.enabled'))</th>
-                            <th class="col-xs-4 col-sm-4 col-md-3 text-center">{{ trans('general.actions') }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        @foreach($taxes as $item)
-                            <tr class="row align-items-center border-top-1" id="tax-{{ $item->id }}">
-                                <td class="col-xs-4 col-sm-4 col-md-3 tax-name">
-                                    <a href="javascript:void(0);" @click="onEditTax('{{ $item->id }}')">
-                                        {{ $item->name }}
-                                    </a>
-                                </td>
-                                <td class="col-md-3 d-none d-md-block">{{ $item->rate }}</td>
-                                <td class="col-xs-4 col-sm-4 col-md-3">
-                                    @if (user()->can('update-settings-taxes'))
-                                        {{ Form::enabledGroup($item->id, $item->name, $item->enabled) }}
-                                    @else
-                                        @if ($item->enabled)
-                                            <badge rounded type="success" class="mw-60">{{ trans('general.yes') }}</badge>
-                                        @else
-                                            <badge rounded type="danger" class="mw-60">{{ trans('general.no') }}</badge>
-                                        @endif
-                                    @endif
-                                </td>
-                                <td class="col-xs-4 col-sm-4 col-md-3 text-center">
-                                    <div class="dropdown">
-                                        <a class="btn btn-neutral btn-sm text-light items-align-center py-2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                            <i class="fa fa-ellipsis-h text-muted"></i>
-                                        </a>
-                                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                                            <button type="button" class="dropdown-item" @click="onEditTax('{{ $item->id }}')">
-                                                {{ trans('general.edit') }}
-                                            </button>
-                                            @can('delete-settings-taxes')
-                                                <div class="dropdown-divider"></div>
-                                                {!! Form::deleteLink($item, 'wizard.taxes.destroy') !!}
-                                            @endcan
-                                        </div>
-                                    </div>
-                                </td>
-                            </tr>
-                        @endforeach
-
-                        <tr class="row align-items-center border-top-1" v-show="show">
-                            <td class="col-xs-4 col-sm-4 col-md-3">
-                                {{ Form::textGroup('name', trans('general.name'), 'font', [], null, '') }}
-                            </td>
-                            <td class="col-md-3 d-none d-md-block">
-                                {{ Form::textGroup('rate', trans('currencies.rate'), 'percentage', ['required' => 'required'], null, '') }}
-                            </td>
-                            <td class="col-xs-4 col-sm-4 col-md-3">
-                                {{ Form::radioGroup('enabled', trans('general.enabled')) }}
-                            </td>
-                            <td class="col-xs-4 col-sm-4 col-md-3 text-center">
-                                {!! Form::button(
-                                    trans('general.save'), [
-                                    ':disabled' => 'form.loading',
-                                    'type' => 'submit',
-                                    'class' => 'btn btn-success',
-                                ]) !!}
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                <input type="hidden" name="bulk_action_path" value="settings/taxes" />
-            {!! Form::close() !!}
-        </div>
-
-        <div class="card-footer">
-            <div class="row">
-                <div class="col-sm-6">
-                    <a href="{{ route('wizard.currencies.index') }}" class="btn btn-icon btn-white">
-                        <span class="btn-inner--text">{{ trans('pagination.previous') }}</span>
-                    </a>
-                </div>
-
-                <div class="col-sm-6 text-right">
-                    <a href="{{ route('wizard.finish.index') }}" id="wizard-skip" class="btn btn-icon btn-white">
-                        <span class="btn-inner--text">{{ trans('pagination.next') }}</span>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
+ 
 @endsection
-
-@push('scripts_start')
-    <script type="text/javascript">
-        var taxes = {!! json_encode($taxes->items()) !!}
-    </script>
-
-    <script src="{{ asset('public/js/wizard/taxes.js?v=' . version('short')) }}"></script>
-@endpush
diff --git a/routes/wizard.php b/routes/wizard.php
index fc0decf1f..3f3f951ec 100644
--- a/routes/wizard.php
+++ b/routes/wizard.php
@@ -9,8 +9,10 @@ use Illuminate\Support\Facades\Route;
  */
 
 Route::group(['as' => 'wizard.'], function () {
+    Route::get('data', 'Wizard\Data@index')->name('data.index');
+
     Route::get('companies', 'Wizard\Companies@edit')->name('companies.edit');
-    Route::patch('companies', 'Wizard\Companies@update')->name('companies.update');
+    Route::post('companies', 'Wizard\Companies@update')->middleware('dropzone')->name('companies.update');
 
     Route::get('currencies/{currency}/enable', 'Settings\Currencies@enable')->name('currencies.enable');
     Route::get('currencies/{currency}/disable', 'Settings\Currencies@disable')->name('currencies.disable');
@@ -21,4 +23,5 @@ Route::group(['as' => 'wizard.'], function () {
     Route::resource('taxes', 'Wizard\Taxes');
 
     Route::get('finish', 'Wizard\Finish@index')->name('finish.index');
+    Route::patch('finish', 'Wizard\Finish@update')->name('finish.update');
 });
diff --git a/tests/Feature/Wizard/CompaniesTest.php b/tests/Feature/Wizard/CompaniesTest.php
index 4e43f77e4..4d0d712f7 100644
--- a/tests/Feature/Wizard/CompaniesTest.php
+++ b/tests/Feature/Wizard/CompaniesTest.php
@@ -11,18 +11,22 @@ class CompaniesTest extends FeatureTestCase
         $this->loginAs()
             ->get(route('wizard.companies.edit'))
             ->assertStatus(200)
-            ->assertSeeText(trans('modules.api_key'));
+            ->assertSeeText(trans('general.wizard'));
     }
 
     public function testItShouldUpdateCompany()
     {
         $request = $this->getRequest();
 
-        $this->loginAs()
-            ->patch(route('wizard.companies.update'), $request)
-            ->assertStatus(200);
+        $message = trans('messages.success.updated', ['type' => trans_choice('general.companies', 2)]);
 
-        $this->assertFlashLevel('success');
+        $this->loginAs()
+            ->post(route('wizard.companies.update'), $request)
+            ->assertStatus(200)
+            ->assertJson([
+                'success' => true,
+                'message' => $message,
+            ]);
     }
 
     public function getRequest()
diff --git a/tests/Feature/Wizard/CurrenciesTest.php b/tests/Feature/Wizard/CurrenciesTest.php
index b3405a455..a1d93c6dd 100644
--- a/tests/Feature/Wizard/CurrenciesTest.php
+++ b/tests/Feature/Wizard/CurrenciesTest.php
@@ -12,18 +12,22 @@ class CurrenciesTest extends FeatureTestCase
         $this->loginAs()
             ->get(route('wizard.currencies.index'))
             ->assertStatus(200)
-            ->assertSeeText(trans('demo.currencies.usd'));
+            ->assertSeeText(trans('general.wizard'));
     }
 
     public function testItShouldCreateCurrency()
     {
         $request = $this->getRequest();
 
+        $message = trans('messages.success.added', ['type' => trans_choice('general.currencies', 1)]);
+
         $this->loginAs()
             ->post(route('wizard.currencies.store'), $request)
-            ->assertStatus(200);
-
-        $this->assertFlashLevel('success');
+            ->assertStatus(200)
+            ->assertJson([
+                'success' => true,
+                'message' => $message,
+            ]);
 
         $this->assertDatabaseHas('currencies', [
             'code' => $request['code'],
@@ -38,11 +42,15 @@ class CurrenciesTest extends FeatureTestCase
 
         $request['name'] = $this->faker->text(15);
 
+        $message = trans('messages.success.updated', ['type' => $request['name']]);
+
         $this->loginAs()
             ->patch(route('wizard.currencies.update', $currency->id), $request)
-            ->assertStatus(200);
-
-        $this->assertFlashLevel('success');
+            ->assertStatus(200)
+            ->assertJson([
+                'success' => true,
+                'message' => $message,
+            ]);
 
         $this->assertDatabaseHas('currencies', [
             'code' => $request['code'],
@@ -55,11 +63,15 @@ class CurrenciesTest extends FeatureTestCase
 
         $currency = $this->dispatch(new CreateCurrency($request));
 
+        $message = trans('messages.success.deleted', ['type' => $currency->name]);
+
         $this->loginAs()
             ->delete(route('wizard.currencies.destroy', $currency->id))
-            ->assertStatus(200);
-
-        $this->assertFlashLevel('success');
+            ->assertStatus(200)
+            ->assertJson([
+                'success' => true,
+                'message' => $message,
+            ]);
 
         $this->assertSoftDeleted('currencies', [
             'code' => $request['code'],
diff --git a/tests/Feature/Wizard/TaxesTest.php b/tests/Feature/Wizard/TaxesTest.php
index 9f9640aa2..f01fb8863 100644
--- a/tests/Feature/Wizard/TaxesTest.php
+++ b/tests/Feature/Wizard/TaxesTest.php
@@ -12,18 +12,22 @@ class TaxesTest extends FeatureTestCase
         $this->loginAs()
             ->get(route('wizard.taxes.index'))
             ->assertStatus(200)
-            ->assertSeeText(trans('general.add_new'));
+            ->assertSeeText(trans('general.wizard'));
     }
 
     public function testItShouldCreateTax()
     {
         $request = $this->getRequest();
 
+        $message = trans('messages.success.added', ['type' => trans_choice('general.taxes', 1)]);
+
         $this->loginAs()
             ->post(route('wizard.taxes.store'), $request)
-            ->assertStatus(200);
-
-        $this->assertFlashLevel('success');
+            ->assertStatus(200)
+            ->assertJson([
+                'success' => true,
+                'message' => $message,
+            ]);
 
         $this->assertDatabaseHas('taxes', $request);
     }
@@ -36,11 +40,15 @@ class TaxesTest extends FeatureTestCase
 
         $request['name'] = $this->faker->text(15);
 
+        $message = trans('messages.success.updated', ['type' => $request['name']]);
+
         $this->loginAs()
             ->patch(route('wizard.taxes.update', $tax->id), $request)
-            ->assertStatus(200);
-
-        $this->assertFlashLevel('success');
+            ->assertStatus(200)
+            ->assertJson([
+                'success' => true,
+                'message' => $message,
+            ]);
 
         $this->assertDatabaseHas('taxes', $request);
     }
@@ -51,11 +59,15 @@ class TaxesTest extends FeatureTestCase
 
         $tax = $this->dispatch(new CreateTax($request));
 
+        $message = trans('messages.success.deleted', ['type' => $tax->name]);
+
         $this->loginAs()
             ->delete(route('wizard.taxes.destroy', $tax->id))
-            ->assertStatus(200);
-
-        $this->assertFlashLevel('success');
+            ->assertStatus(200)
+            ->assertJson([
+                'success' => true,
+                'message' => $message,
+            ]);
 
         $this->assertDatabaseHas('taxes', $request);
     }
diff --git a/webpack.mix.js b/webpack.mix.js
index f1081e3cd..35859fefd 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -58,6 +58,9 @@ mix
     .js('resources/assets/js/install.js', 'public/js')
     .js('resources/assets/js/views/install/update.js', 'public/js/install')
 
+    //Wizard
+    .js('resources/assets/js/wizard.js', 'public/js/wizard')
+
     // Modules
     .js('resources/assets/js/views/modules/item.js', 'public/js/modules')
     .js('resources/assets/js/views/modules/apps.js', 'public/js/modules')
@@ -75,10 +78,4 @@ mix
     .js('resources/assets/js/views/settings/settings.js', 'public/js/settings')
     .js('resources/assets/js/views/settings/taxes.js', 'public/js/settings')
 
-    // Wizard
-    .js('resources/assets/js/views/wizard/company.js', 'public/js/wizard')
-    .js('resources/assets/js/views/wizard/currencies.js', 'public/js/wizard')
-    .js('resources/assets/js/views/wizard/taxes.js', 'public/js/wizard')
-    .js('resources/assets/js/views/wizard/finish.js', 'public/js/wizard')
-
     .sass('resources/assets/sass/argon.scss', 'public/css');