diff --git a/resources/assets/js/views/settings/CompanyInfo.vue b/resources/assets/js/views/settings/CompanyInfo.vue
index 9ee883d5..6190c9d0 100644
--- a/resources/assets/js/views/settings/CompanyInfo.vue
+++ b/resources/assets/js/views/settings/CompanyInfo.vue
@@ -27,6 +27,7 @@
             :upload-handler="cropperHandler"
             trigger="#pick-avatar"
             @changed="setFileObject"
+            @error="hadleUploadError"
           />
         </div>
         <div class="row">
@@ -177,14 +178,14 @@ export default {
       },
       isFetchingData: false,
       formData: {
-        name: '',
-        logo: null,
+        name: null,
+        logo: '',
         email: '',
-        phone: null,
-        zip: null,
-        address_street_1: null,
-        address_street_2: null,
-        website: null,
+        phone: '',
+        zip: '',
+        address_street_1: '',
+        address_street_2: '',
+        website: '',
         country_id: null,
         state_id: '',
         city_id: ''
@@ -286,6 +287,9 @@ export default {
     setFileObject (file) {
       this.fileObject = file
     },
+    hadleUploadError (message, type, xhr) {
+      window.toastr['error']('Oops! Something went wrong...')
+    },
     async setInitialData () {
       let response = await this.loadData()
       this.isFetchingData = true
@@ -314,15 +318,23 @@ export default {
       data.append('country_id', this.formData.country_id)
       data.append('zip', this.formData.zip)
       data.append('phone', this.formData.phone)
-      if (this.fileObject) {
-        data.append('logo', this.fileObject)
-      }
+
       let response = await this.editCompany(data)
       if (response.data.success) {
+        this.isLoading = false
+        if (this.fileObject && this.previewLogo) {
+          let logoData = new FormData()
+          logoData.append('company_logo', JSON.stringify({
+            name: this.fileObject.name,
+            data: this.previewLogo
+          }))
+          await axios.post('/api/settings/company/upload-logo', logoData)
+        }
         this.isLoading = false
         window.toastr['success'](this.$t('settings.company_info.updated_message'))
         return true
       }
+      this.isLoading = false
       window.toastr['error'](response.data.error)
       return true
     },
diff --git a/resources/assets/js/views/wizard/CompanyInfo.vue b/resources/assets/js/views/wizard/CompanyInfo.vue
index 9c58b36e..0ccc78b4 100644
--- a/resources/assets/js/views/wizard/CompanyInfo.vue
+++ b/resources/assets/js/views/wizard/CompanyInfo.vue
@@ -22,6 +22,7 @@
           :upload-handler="cropperHandler"
           trigger="#pick-avatar"
           @changed="setFileObject"
+          @error="hadleUploadError"
         />
       </div>
       <div class="row">
@@ -256,30 +257,33 @@ export default {
     setFileObject (file) {
       this.fileObject = file
     },
+    hadleUploadError (message, type, xhr) {
+      window.toastr['error']('Oops! Something went wrong...')
+    },
     async next () {
       this.$v.companyData.$touch()
       if (this.$v.companyData.$invalid) {
         return true
       }
       this.loading = true
-      let data = new FormData()
-      data.append('logo', this.fileObject)
-      data.append('name', this.companyData.name)
-      data.append('address_street_1', this.companyData.address_street_1)
-      data.append('address_street_2', this.companyData.address_street_2)
-      data.append('city_id', this.companyData.city_id)
-      data.append('state_id', this.companyData.state_id)
-      data.append('country_id', this.companyData.country_id)
-      data.append('zip', this.companyData.zip)
-      data.append('phone', this.companyData.phone)
-
-      let response = await window.axios.post('/api/admin/onboarding/company', data, {
-        headers: {
-          'Content-Type': 'multipart/form-data'
-        }
-      })
+      let response = await window.axios.post('/api/admin/onboarding/company', this.companyData)
 
       if (response.data) {
+        if (this.fileObject && this.previewLogo) {
+          let logoData = new FormData()
+          logoData.append('company_logo', JSON.stringify({
+            name: this.fileObject.name,
+            data: this.previewLogo
+          }))
+
+          await axios.post('/api/admin/onboarding/company/upload-logo', logoData, {
+            headers: {
+              'Content-Type': 'multipart/form-data',
+              'company': response.data.user.company.id
+            }
+          })
+        }
+
         this.$emit('next')
         this.loading = false
       }
diff --git a/resources/assets/sass/base.scss b/resources/assets/sass/base.scss
index 968e4fda..22a99a11 100644
--- a/resources/assets/sass/base.scss
+++ b/resources/assets/sass/base.scss
@@ -115,3 +115,8 @@ code, .code {
 .swal-icon--custom {
     height: 70px !important;
 }
+
+.avatar-cropper-btn:hover  {
+    background-color: $ls-color-primary !important;
+    color: $white;
+}
diff --git a/routes/api.php b/routes/api.php
index fd0f863f..99754925 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -101,6 +101,11 @@ Route::group(['middleware' => 'redirect-if-installed'], function () {
         'uses' => 'OnboardingController@adminCompany'
     ]);
 
+    Route::post('/admin/onboarding/company/upload-logo', [
+        'as' => 'upload.admin.company.logo',
+        'uses' => 'CompanyController@uploadCompanyLogo'
+    ]);
+
     Route::post('/admin/onboarding/settings', [
         'as' => 'admin.settings',
         'uses' => 'OnboardingController@companySettings'