diff --git a/resources/assets/js/views/portal/profile.js b/resources/assets/js/views/portal/profile.js
index e90bfd1cd..61987d352 100644
--- a/resources/assets/js/views/portal/profile.js
+++ b/resources/assets/js/views/portal/profile.js
@@ -15,7 +15,6 @@ import DashboardPlugin from './../../plugins/dashboard-plugin';
 import Global from './../../mixins/global';
 
 import Form from './../../plugins/form';
-import BulkAction from './../../plugins/bulk-action';
 
 // plugin setup
 Vue.use(DashboardPlugin);
@@ -29,6 +28,7 @@ const app = new Vue({
 
     data: function () {
         return {
+            form: new Form('profile'),
         }
     }
 });
diff --git a/resources/views/portal/profile/edit.blade.php b/resources/views/portal/profile/edit.blade.php
index b58823870..3af89ac2e 100644
--- a/resources/views/portal/profile/edit.blade.php
+++ b/resources/views/portal/profile/edit.blade.php
@@ -5,11 +5,14 @@
 @section('content')
     <div class="card">
         {!! Form::model($user, [
-            'method' => 'PATCH',
-            'files' => true,
             'url' => 'portal/profile/update',
+            'id' => 'profile',
+            '@submit.prevent' => 'onSubmit',
+            '@keydown' => 'form.errors.clear($event.target.name)',
+            'files' => true,
             'role' => 'form',
-            'class' => 'form-loading-button'
+            'class' => 'form-loading-button',
+            'novalidate' => true
         ]) !!}
 
         <div class="card-body">
@@ -46,50 +49,7 @@
     </div>
 @endsection
 
-@push('js')
-    <script src="{{ asset('public/js/bootstrap-fancyfile.js') }}"></script>
+@push('scripts_start')
+    <script src="{{ asset('public/js/portal/profile.js?v=' . version('short')) }}"></script>
 @endpush
 
-@push('css')
-    <link rel="stylesheet" href="{{ asset('public/css/bootstrap-fancyfile.css') }}">
-@endpush
-
-@push('scripts')
-    <script type="text/javascript">
-        $(document).ready(function(){
-            $("#locale").select2({
-                placeholder: "{{ trans('general.form.select.field', ['field' => trans_choice('general.languages', 1)]) }}"
-            });
-
-            $('#picture').fancyfile({
-                text  : '{{ trans('general.form.select.file') }}',
-                style : 'btn-default',
-                @if($user->picture)
-                placeholder : '{{ $user->picture->basename }}'
-                @else
-                placeholder : '{{ trans('general.form.no_file_selected') }}'
-                @endif
-            });
-
-            @if($user->picture)
-            $.ajax({
-                url: '{{ url('uploads/' . $user->picture->id . '/show') }}',
-                type: 'GET',
-                data: {column_name: 'picture'},
-                dataType: 'JSON',
-                success: function(json) {
-                    if (json['success']) {
-                        $('.fancy-file').after(json['html']);
-                    }
-                }
-            });
-
-            @permission('delete-common-uploads')
-            $(document).on('click', '#remove-picture', function (e) {
-                confirmDelete("#picture-{!! $user->picture->id !!}", "{!! trans('general.attachment') !!}", "{!! trans('general.delete_confirm', ['name' => '<strong>' . $user->picture->basename . '</strong>', 'type' => strtolower(trans('general.attachment'))]) !!}", "{!! trans('general.cancel') !!}", "{!! trans('general.delete')  !!}");
-            });
-            @endpermission
-            @endif
-        });
-    </script>
-@endpush