diff --git a/app/Http/Controllers/Install/Updates.php b/app/Http/Controllers/Install/Updates.php
index 29c71f1d3..aee0b55bb 100644
--- a/app/Http/Controllers/Install/Updates.php
+++ b/app/Http/Controllers/Install/Updates.php
@@ -104,43 +104,46 @@ class Updates extends Controller
      */
     public function steps(Request $request)
     {
-        $json = [];
-        $json['step'] = [];
+        $steps = [];
 
         $name = $request['name'];
-        $version = $request['version'];
 
         // Download
-        $json['step'][] = [
+        $steps[] = [
             'text' => trans('modules.installation.download', ['module' => $name]),
             'url'  => url('install/updates/download')
         ];
 
         // Unzip
-        $json['step'][] = [
+        $steps[] = [
             'text' => trans('modules.installation.unzip', ['module' => $name]),
             'url'  => url('install/updates/unzip')
         ];
 
         // File Copy
-        $json['step'][] = [
+        $steps[] = [
             'text' => trans('modules.installation.file_copy', ['module' => $name]),
             'url'  => url('install/updates/file-copy')
         ];
 
         // Finish installation
-        $json['step'][] = [
+        $steps[] = [
             'text' => trans('modules.installation.finish', ['module' => $name]),
             'url'  => url('install/updates/finish')
         ];
 
         // Redirect
-        $json['step'][] = [
+        $steps[] = [
             'text' => trans('modules.installation.redirect', ['module' => $name]),
             'url'  => url('install/updates/redirect')
         ];
 
-        return response()->json($json);
+        return response()->json([
+            'success' => true,
+            'error' => false,
+            'data' => $steps,
+            'message' => null
+        ]);
     }
 
     /**
diff --git a/app/Utilities/Updater.php b/app/Utilities/Updater.php
index ad1309f14..7eeb028b7 100644
--- a/app/Utilities/Updater.php
+++ b/app/Utilities/Updater.php
@@ -43,7 +43,8 @@ class Updater
         if ($response instanceof RequestException) {
             return [
                 'success' => false,
-                'errors' => trans('modules.errors.download', ['module' => $name]),
+                'error' => true,
+                'message' => trans('modules.errors.download', ['module' => $alias]),
                 'data' => [
                     'path' => $path
                 ]
@@ -69,7 +70,8 @@ class Updater
             if (!$uploaded) {
                 return [
                     'success' => false,
-                    'errors' => trans('modules.errors.zip', ['module' => $alias]),
+                    'error' => true,
+                    'message' => trans('modules.errors.zip', ['module' => $alias]),
                     'data' => [
                         'path' => $path
                     ]
@@ -81,7 +83,8 @@ class Updater
 
                 return [
                     'success' => true,
-                    'errors' => false,
+                    'error' => false,
+                    'message' => null,
                     'data' => [
                         'path' => $path
                     ]
@@ -89,7 +92,8 @@ class Updater
             } catch (\Exception $e) {
                 return [
                     'success' => false,
-                    'errors' => trans('modules.errors.download', ['module' => $alias]),
+                    'error' => true,
+                    'message' => trans('modules.errors.download', ['module' => $alias]),
                     'data' => []
                 ];
             }
@@ -97,7 +101,8 @@ class Updater
 
         return [
             'success' => false,
-            'errors' => trans('modules.errors.download', ['module' => $alias]),
+            'error' => true,
+            'message' => trans('modules.errors.download', ['module' => $alias]),
             'data' => [
                 'path' => $path
             ]
@@ -116,7 +121,8 @@ class Updater
         if (($zip->open($file) !== true) || !$zip->extractTo($temp_path)) {
             return [
                 'success' => false,
-                'errors' => trans('modules.errors.unzip', ['module' => $alias]),
+                'error' => true,
+                'message' => trans('modules.errors.unzip', ['module' => $alias]),
                 'data' => [
                     'path' => $path
                 ]
@@ -133,7 +139,8 @@ class Updater
 
             return [
                 'success' => true,
-                'errors' => false,
+                'error' => false,
+                'message' => null,
                 'data' => [
                     'path' => $path
                 ]
@@ -141,7 +148,8 @@ class Updater
         } catch (\Exception $e) {
             return [
                 'success' => false,
-                'errors' => trans('modules.errors.unzip', ['module' => $alias]),
+                'error' => true,
+                'message' => trans('modules.errors.unzip', ['module' => $alias]),
                 'data' => []
             ];
         }
@@ -156,7 +164,8 @@ class Updater
             if (!File::copyDirectory($temp_path, base_path())) {
                 return [
                     'success' => false,
-                    'errors' => trans('modules.errors.file_copy', ['module' => $alias]),
+                    'error' => true,
+                    'message' => trans('modules.errors.file_copy', ['module' => $alias]),
                     'data' => [
                         'path' => $path
                     ]
@@ -177,7 +186,8 @@ class Updater
             if (!File::copyDirectory($temp_path, $module_path)) {
                 return [
                     'success' => false,
-                    'errors' => trans('modules.errors.file_copy', ['module' => $alias]),
+                    'error' => true,
+                    'message' => trans('modules.errors.file_copy', ['module' => $alias]),
                     'data' => [
                         'path' => $path
                     ]
@@ -208,7 +218,8 @@ class Updater
 
             return [
                 'success' => true,
-                'errors' => false,
+                'error' => false,
+                'message' => null,
                 'data' => [
                     'path' => $path
                 ]
@@ -216,7 +227,8 @@ class Updater
         } catch (\Exception $e) {
             return [
                 'success' => false,
-                'errors' => trans('modules.errors.file_copy', ['module' => $alias]),
+                'error' => true,
+                'message' => trans('modules.errors.file_copy', ['module' => $alias]),
                 'data' => []
             ];
         }
@@ -228,7 +240,8 @@ class Updater
         if (($alias == 'core') && (version('short') != $version)) {
             return [
                 'success' => false,
-                'errors' => trans('modules.errors.file_copy', ['module' => $alias]),
+                'error' => true,
+                'message' => trans('modules.errors.file_copy', ['module' => $alias]),
                 'data' => []
             ];
         }
@@ -241,13 +254,15 @@ class Updater
 
             return [
                 'success' => true,
-                'errors' => false,
+                'error' => false,
+                'message' => null,
                 'data' => []
             ];
         } catch (\Exception $e) {
             return [
                 'success' => false,
-                'errors' => trans('modules.errors.finish', ['module' => $alias]),
+                'error' => true,
+                'message' => trans('modules.errors.finish', ['module' => $alias]),
                 'data' => []
             ];
         }
diff --git a/app/Utilities/Versions.php b/app/Utilities/Versions.php
index 03aecf414..71e71468b 100644
--- a/app/Utilities/Versions.php
+++ b/app/Utilities/Versions.php
@@ -43,7 +43,7 @@ class Versions
                 continue;
             }
 
-            $output .= '<h2><span class="label label-success">'.$release->tag_name.'</span></h2>';
+            $output .= '<h2><span class="badge badge-pill badge-success">' . $release->tag_name . '</span></h2>';
 
             $output .= $parsedown->text($release->body);
 
diff --git a/resources/assets/js/views/install/update.js b/resources/assets/js/views/install/update.js
new file mode 100644
index 000000000..8e1309945
--- /dev/null
+++ b/resources/assets/js/views/install/update.js
@@ -0,0 +1,145 @@
+/**
+ * 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 Global from './../../mixins/global';
+
+import {Progress} from 'element-ui';
+
+Vue.use(Progress);
+
+const app = new Vue({
+    el: '#app',
+
+    mixins: [
+        Global
+    ],
+
+    components: {
+        [Progress.name]: Progress,
+    },
+
+    data: function () {
+        return {
+            changelog: {
+                show:false,
+                html: null
+            },
+            update: {
+                steps: [],
+                steps_total: 0,
+                total: 0,
+                path: '',
+                status: 'success',
+                html: ''
+            },
+            page: 'check',
+            name: null,
+            version: null
+        }
+    },
+
+    mounted() {
+        if (document.getElementById('page') != null && document.getElementById('page').value == 'update') {
+            this.steps();
+        }
+    },
+
+    methods: {
+        onChangelog() {
+            axios.get(url + '/install/updates/changelog')
+            .then(response => {
+                this.changelog.show = true;
+                this.changelog.html = response.data;
+            })
+            .catch(e => {
+                this.errors.push(e)
+            })
+            .finally(function () {
+                // always executed
+            });
+        },
+
+        steps() {
+            let name = document.getElementById('name').value;
+
+            axios.post(url + '/install/updates/steps', {
+                name: name,
+                version: version
+            })
+            .then(response => {
+                if (response.data.error) {
+                    this.update.status = 'exception';
+                    this.update.html = '<div class="text-danger">' + response.data.message + '</div>';
+                }
+
+                // Set steps
+                if (response.data.data) {
+                    this.update.steps = response.data.data;
+                    this.update.steps_total = this.update.steps.length;
+
+                    this.next();
+                }
+            })
+            .catch(error => {
+            });
+        },
+
+        next() {
+            let data = this.update.steps.shift();
+
+            let name = document.getElementById('name').value;
+            let alias = document.getElementById('alias').value;
+            let version = document.getElementById('version').value;
+            let installed = document.getElementById('installed').value;
+
+            if (data) {
+                this.update.total = (100 - ((this.update.steps.length / this.update.steps_total) * 100));
+
+                this.update.html = '<span class="text-default"><i class="fa fa-spinner fa-spin update-spin"></i> ' + data['text'] + '</span> </br>';
+
+                axios.post(data.url, {
+                    name: name,
+                    alias: alias,
+                    version: version,
+                    installed: installed,
+                    path: this.update.path,
+                })
+                .then(response => {
+                    if (response.data.error) {
+                        this.update.status = 'exception';
+                        this.update.html = '<div class="text-danger"><i class="fa fa-times update-error"></i> ' + response.data.message + '</div>';
+                    }
+
+                    if (response.data.success) {
+                        this.update.status = 'success';
+                    }
+
+                    if (response.data.data.path) {
+                        this.update.path = response.data.data.path;
+                    }
+
+                    if (!response.data.error && !response.data.redirect) {
+                        let self = this;
+
+                        setTimeout(function() {
+                            self.next();
+                        }, 800);
+                    }
+
+                    if (response.data.redirect) {
+                        window.location = response.data.redirect;
+                    }
+                })
+                .catch(error => {
+                });
+            }
+        }
+    }
+});
diff --git a/resources/views/install/updates/edit.blade.php b/resources/views/install/updates/edit.blade.php
index e65555235..83489a0c3 100644
--- a/resources/views/install/updates/edit.blade.php
+++ b/resources/views/install/updates/edit.blade.php
@@ -3,7 +3,11 @@
 @section('title', trans_choice('general.updates', 2))
 
 @section('new_button')
-    <span class="new-button"><a href="{{ route('updates.check') }}" class="btn btn-warning btn-sm"><span class="fa fa-history"></span> &nbsp;{{ trans('updates.check') }}</a></span>
+    <span class="new-button">
+        <a href="{{ route('updates.check') }}" class="btn btn-warning btn-sm">
+            <span class="fa fa-history"></span> &nbsp;{{ trans('updates.check') }}
+        </a>
+    </span>
 @endsection
 
 @section('content')
@@ -14,100 +18,20 @@
 
         <div class="card-body">
             <p>
-                <div class="progress">
-                    <div id="progress-bar" class="progress-bar progress-bar-success w-0" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-                        <span class="sr-only">{{ trans('modules.installation.start', ['module' => $name]) }}</span>
-                    </div>
-                </div>
+                <el-progress :text-inside="true" :stroke-width="24" :percentage="update.total" :status="update.status"></el-progress>
 
-                <div id="progress-text"></div>
+                <div id="progress-text" v-html="update.html"></div>
+
+                {{ Form::hidden('page', 'update', ['id' => 'page']) }}
+                {{ Form::hidden('name', $name, ['id' => 'name']) }}
+                {{ Form::hidden('version', $version, ['id' => 'version']) }}
+                {{ Form::hidden('alias', $alias, ['id' => 'alias']) }}
+                {{ Form::hidden('installed', $installed, ['id' => 'installed']) }}
             </p>
         </div>
     </div>
 @endsection
 
-@push('scripts')
-    <script type="text/javascript">
-        var step = new Array();
-        var total = 0;
-        var path = '';
-
-        $(document).ready(function() {
-            $.ajax({
-                url: '{{ route("updates.steps") }}',
-                type: 'post',
-                dataType: 'json',
-                data: {name: '{{ $name }}', version: '{{ $version }}'},
-                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
-                success: function(json) {
-                    if (json['errorr']) {
-                        $('#progress-bar').addClass('progress-bar-danger');
-                        $('#progress-text').html('<div class="text-danger">' + json['error'] + '</div>');
-                    }
-
-                    if (json['step']) {
-                        step = json['step'];
-                        total = step.length;
-
-                        next();
-                    }
-                }
-            });
-        });
-
-        function next() {
-            data = step.shift();
-
-            if (data) {
-                $('#progress-bar').css('width', (100 - (step.length / total) * 100) + '%');
-
-                $.each($('#progress-text .text-default'), function( index, value ) {
-                    // Remove Loading font
-                    $(this).find('.update-spin').remove();
-                    // Remove Check font
-                    $(this).find('.update-check').remove();
-                    // Add Check font
-                    $(this).append(' <i class="fa fa-check update-check text-success"></i>');
-                });
-
-                $('#progress-text').append('<span class="text-default"><i class="fa fa-spinner fa-spin update-spin"></i> ' + data['text'] + '</span> </br>');
-
-                setTimeout(function() {
-                    $.ajax({
-                        url: data.url,
-                        type: 'post',
-                        dataType: 'json',
-                        data: {path: path, alias: '{{ $alias }}', installed: '{{ $installed }}', version: '{{ $version }}'},
-                        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
-                        success: function(json) {
-                            if (json['errors']) {
-                                $('#progress-bar').addClass('progress-bar-danger');
-                                $('#progress-text').append('<div class="text-danger"><i class="fa fa-times update-error"></i> ' + json['errors'] + '</div>');
-                            }
-
-                            if (json['success']) {
-                                $('#progress-bar').removeClass('progress-bar-danger');
-                                $('#progress-bar').addClass('progress-bar-success');
-                            }
-
-                            if (json['data']['path']) {
-                                path = json['data']['path'];
-                            }
-
-                            if (!json['errors'] && !json['redirect']) {
-                                next();
-                            }
-
-                            if (json['redirect']) {
-                                window.location = json['redirect'];
-                            }
-                        },
-                        error: function(xhr, ajaxOptions, thrownError) {
-                            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
-                        }
-                    });
-                }, 800);
-            }
-        }
-    </script>
+@push('scripts_start')
+    <script src="{{ asset('public/js/install/update.js?v=' . version('short')) }}"></script>
 @endpush
diff --git a/resources/views/install/updates/index.blade.php b/resources/views/install/updates/index.blade.php
index f805c5d1e..b24a90e33 100644
--- a/resources/views/install/updates/index.blade.php
+++ b/resources/views/install/updates/index.blade.php
@@ -23,8 +23,13 @@
                         {{ trans('updates.new_core') }}
                     </div>
                     <div class="col-sm-10 col-md-6 text-right">
-                        <a href="{{ url('install/updates/update', ['alias' => 'core', 'version' => $core]) }}" data-toggle="tooltip" title="{{ trans('updates.update', ['version' => $core]) }}" class="btn btn-info btn-sm header-button-top o-y"><i class="fa fa-refresh"></i> &nbsp;{{ trans('updates.update', ['version' => $core]) }}</a>
-                        <a href="{{ route('updates.changelog') }}" data-toggle="tooltip" title="{{ trans('updates.changelog') }}" class="btn btn-white btn-sm header-button-bottom"><i class="fa fa-exchange-alt"></i> &nbsp;{{ trans('updates.changelog') }}</a>
+                        <a href="{{ url('install/updates/update', ['alias' => 'core', 'version' => $core]) }}"
+                            class="btn btn-info btn-sm header-button-top o-y">
+                            <i class="fa fa-refresh"></i> &nbsp;{{ trans('updates.update', ['version' => $core]) }}
+                        </a>
+                        <button type="button" @click="onChangelog" class="btn btn-white btn-sm header-button-bottom">
+                            <i class="fa fa-exchange-alt"></i> &nbsp;{{ trans('updates.changelog') }}
+                        </button>
                     </div>
                 @endif
             </div>
@@ -56,7 +61,9 @@
                                 <td class="col-sm-3 col-md-2 hidden-sm">{{ $module->installed }}</td>
                                 <td class="col-xs-4 col-md-2 col-sm-3">{{ $module->latest }}</td>
                                 <td class="col-xs-4 col-sm-2 col-md-2 text-center">
-                                    <a href="{{ url('install/updates/update/' . $module->alias . '/' . $module->latest) }}" class="btn btn-warning btn-sm"><i class="fa fa-refresh" aria-hidden="true"></i> {{ trans_choice('general.updates', 1) }}</a>
+                                    <a href="{{ url('install/updates/update/' . $module->alias . '/' . $module->latest) }}" class="btn btn-warning btn-sm">
+                                        <i class="fa fa-refresh" aria-hidden="true"></i> {{ trans_choice('general.updates', 1) }}
+                                    </a>
                                 </td>
                             </tr>
                         @endforeach
@@ -73,4 +80,18 @@
             </table>
         </div>
     </div>
+
+    <akaunting-modal v-if="changelog.show"
+        :show="changelog.show"
+        :title="'{{ trans('updates.changelog') }}'"
+        @cancel="changelog.show = false"
+        :message="changelog.html">
+        <template #card-footer>
+            <span></span>
+        </template>
+    </akaunting-modal>
 @endsection
+
+@push('scripts_start')
+    <script src="{{ asset('public/js/install/update.js?v=' . version('short')) }}"></script>
+@endpush
diff --git a/routes/admin.php b/routes/admin.php
index df58fa116..3a0685d70 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -199,6 +199,7 @@ Route::group(['prefix' => 'install'], function () {
     Route::post('updates/file-copy', 'Install\Updates@fileCopy')->middleware('api.key')->name('updates.copy');
     Route::post('updates/migrate', 'Install\Updates@migrate')->name('updates.migrate');
     Route::post('updates/finish', 'Install\Updates@finish')->name('updates.finish');
+    Route::post('updates/redirect', 'Install\Updates@redirect')->name('updates.redirect');
     Route::resource('updates', 'Install\Updates');
 });
 
diff --git a/webpack.mix.js b/webpack.mix.js
index 684dcf31d..aba132fbc 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -47,6 +47,7 @@ mix
 
     // Install
     .js('resources/assets/js/install.js', 'public/js')
+    .js('resources/assets/js/views/install/update.js', 'public/js/install')
 
     // Modules
     .js('resources/assets/js/views/modules/item.js', 'public/js/modules')