diff --git a/app/Http/Controllers/ProfileController.php b/app/Http/Controllers/ProfileController.php
index baf2b1f..a9a2e2a 100644
--- a/app/Http/Controllers/ProfileController.php
+++ b/app/Http/Controllers/ProfileController.php
@@ -2,6 +2,8 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\User;
+
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Session;
@@ -14,23 +16,22 @@ class ProfileController extends Controller
 {
     public function changepassword(Request $request){
         $api_url = config('api.url');
-        $auth_user = Auth::user();
-
 
         $request->validate([
             'current_password' => 'required',
-            'new_password' => 'required|min:6|confirmed',
+            'new_password' => 'required|min:9',
         ]);
-    
-        $user = Auth::user();
-    
+
+        
+        $user = User::where('email',$request->email)->first();
+
         if (Hash::check($request->current_password, $user->password)) {
             $user->password = Hash::make($request->new_password);
             $user->save();
     
-            return back()->with('success', 'Password changed successfully!');
+            return response('success',200);
         } else {
-            return back()->with('error', 'Current password is incorrect');
+            return response('wrongpass',401);
         }
         // return view('pengguna.index',compact('api_url','auth_user'));
     }
diff --git a/resources/js/Pengguna/index.vue b/resources/js/Pengguna/index.vue
index ef8b7bb..a1e49b2 100644
--- a/resources/js/Pengguna/index.vue
+++ b/resources/js/Pengguna/index.vue
@@ -18,54 +18,83 @@
 
             <form class="mx-auto my-16 bg-white p-4 rounded">
                 <div class="grid grid-cols-2">
-                <div class="mb-4 p-2">
-                    <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name</label>
-                    <input type="text" id="name" disabled :value="user.name"
-                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+                    <div class="mb-4 p-2">
+                        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name</label>
+                        <input type="text" id="name" disabled :value="user.name"
+                            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+                    </div>
+                    <div class="mb-4 p-2">
+                        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email</label>
+                        <input type="email" id="email" disabled :value="user.email"
+                            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+                    </div>
                 </div>
-                <div class="mb-4 p-2">
-                    <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email</label>
-                    <input type="email" id="email" disabled :value="user.email"
-                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+                <div class="grid grid-cols-2">
+                    <div class="mb-4 p-2">
+                        <label for="no_kp" class="block text-gray-700 text-sm font-bold mb-2">No KP</label>
+                        <input type="text" id="no_kp" disabled :value="user.no_kp"
+                            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+                    </div>
+                    <div class="mb-4 p-2">
+                        <label for="no_telefon" class="block text-gray-700 text-sm font-bold mb-2">No Telefon</label>
+                        <input type="tel" id="no_telefon" disabled :value="user.no_telefon"
+                            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+                    </div>
                 </div>
-            </div>
-            <div class="grid grid-cols-2">
-                <div class="mb-4 p-2">
-                    <label for="no_kp" class="block text-gray-700 text-sm font-bold mb-2">No KP</label>
-                    <input type="text" id="no_kp" disabled :value="user.no_kp"
-                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
-                </div>
-                <div class="mb-4 p-2">
-                    <label for="no_telefon" class="block text-gray-700 text-sm font-bold mb-2">No Telefon</label>
-                    <input type="tel" id="no_telefon" disabled :value="user.no_telefon"
-                        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
-                </div>
-            </div>
             </form>
         </div>
         <div id="tabs-2" v-if="showpassword">
-            <form class="max-w-md mx-auto my-16 bg-white p-4 rounded">
+            <form class="max-w-md mx-auto my-16 bg-white p-4 rounded" @submit.prevent="submit" novalidate>
                 <div class="mb-4">
                     <label for="currentpass" class="block text-gray-700 text-sm font-bold mb-2">Katalaluan Lama</label>
-                    <input type="password" id="currentpass"
+                    <input type="password"
+                        :class="{ 'border border-red-500 focus:border-red-500': $v.currentPassword.$error }"
+                        v-model.trim="$v.currentPassword.$model" id="currentpass"
                         class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+                    <span class="text-red-500 text-xs italic" v-if="!$v.currentPassword.required">Kata laluan
+                        diperlukan</span>
                 </div>
                 <div class="mb-4">
                     <label for="newpass" class="block text-gray-700 text-sm font-bold mb-2">Katalaluan Baru</label>
-                    <input type="password" id="newpass"
+                    <input type="password"
+                        :class="{ 'border border-red-500 focus:border-red-500': $v.newPassword.$error }"
+                        v-model.trim="$v.newPassword.$model"
                         class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+                    <div>
+                        <span class="text-red-500 text-xs italic" v-if="!$v.newPassword.required">Kata laluan
+                            diperlukan</span>
+                        <span class="text-red-500 text-xs italic" v-if="newPassword && !$v.newPassword.valid">Katalaluan
+                            harus sekurang-kurangnya mengandungi Satu Huruf Besar, Satu Huruf Kecil, Satu Nombor dan
+                            Satu Special Character </span>
+                        <span class="text-red-500 text-xs italic"
+                            v-if="newPassword && $v.newPassword.valid && !$v.newPassword.minLength">Katalaluan mestilah
+                            sekurang-kurangnya 9 aksara</span>
+                        <span class="text-red-500 text-xs italic"
+                            v-if="newPassword && !$v.newPassword.maxLength">Katalaluan mestilah maksimum 19
+                            aksara</span>
+                    </div>
                 </div>
                 <div class="mb-4">
-                    <label for="confirmpass" class="block text-gray-700 text-sm font-bold mb-2">Sahkan Katalaluan Baru </label>
-                    <input type="password" id="confirmpass"
+                    <label for="confirmpass" class="block text-gray-700 text-sm font-bold mb-2">Sahkan Katalaluan Baru
+                    </label>
+                    <input type="password"
+                        :class="{ 'border border-red-500 focus:border-red-500': $v.confirmPassword.$error }"
+                        v-model.trim="$v.confirmPassword.$model" id="confirmpass"
                         class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
+                    <div>
+                        <span class="text-red-500 text-xs italic" v-if="!$v.confirmPassword.required">Pengesahan
+                            Katalaluan diperlukan</span>
+                        <span class="text-red-500 text-xs italic"
+                            v-if="confirmPassword && !$v.confirmPassword.sameAsPassword">Katalaluan dan Sahkan
+                            Katalaluan haruslah sama</span>
+                    </div>
                 </div>
                 <div class="flex items-center justify-between">
-                    <span>arrahn</span>
-                    <button
-                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
-                        <span v-if="submitStatus === 'PENDING'"><i class="animate-spin fas fa-spinner mr-2"></i>Loading..</span>
-                        <span @click="submit">Tukar</span>
+                    <span class="invisible">arrahn</span>
+                    <button type="submit" :disabled="this.isDisabled"
+                        :class="this.isDisabled ? 'bg-blue-200' : 'bg-blue-500 hover:bg-blue-700'"
+                        class=" text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
+                        <span>Tukar</span>
                     </button>
                 </div>
             </form>
@@ -73,18 +102,39 @@
     </div>
 </template>
 <script>
+    import {
+        assertExpressionStatement
+    } from '@babel/types';
+    import {
+        required,
+        minLength,
+        between,
+        maxLength,
+        sameAs
+    } from 'vuelidate/lib/validators'
+
     export default {
-        // props:[
-        //     'user'
-        // ],
         data() {
             return {
                 showprofile: true,
                 showpassword: false,
-                submitStatus:'',
-                user: this.$attrs.user
+                submitStatus: '',
+                user: this.$attrs.user,
+                newPassword: "",
+                currentPassword: "",
+                confirmPassword: "",
+                submitted: false,
             }
         },
+        created() {
+            this.submitted = true;
+            return this.$v.$touch();
+        },
+        computed: {
+            isDisabled() {
+                return this.$v.$invalid;
+            },
+        },
         methods: {
             TabsAndPills: function (event) {
                 let targetId = event.currentTarget.id
@@ -100,9 +150,64 @@
                     this.showpassword = true
                 }
             },
-            submit: function(){
-                console.log('test');
+            submit: function () {
+                this.submitted = true;
+                this.$v.$touch();
+                if (this.$v.$invalid) {
+                    this.$toast.warning('Masukkan data dalam kotak yang disediakan.')
+                    return false;
+                } else {
+                    let self = this
+
+                    return this.axios.post('/api/changepass', {
+                        current_password: this.currentPassword,
+                        new_password: this.newPassword,
+                        email: this.user.email
+                    }).then((response) => {
+                        if(response.data == 'success'){
+                            self.$toast.success('Kemaskini Katalaluan berjaya.')
+                        }
+
+                    }).catch(function (error) {
+                        if (error.response) {
+                            // console.log(error.response.data);
+                            // console.log(error.response.status);
+                            // console.log(error.response.headers);
+                            if(error.response.status == 401){
+                                // console.log('tidak sama la');
+                                self.$toast.error('Masukkan katalaluan yang betul.')
+                            }
+                        } else if (error.request) {
+                            // console.log(error.request);
+                        } else {
+                            // console.log('Error', error.message);
+                        }
+                        // console.log(error.config);
+                    });
+                    alert("Form Valid");
+                }
             }
+        },
+        validations: {
+            newPassword: {
+                required,
+                valid: function (value) {
+                    const containsUppercase = /[A-Z]/.test(value)
+                    const containsLowercase = /[a-z]/.test(value)
+                    const containsNumber = /[0-9]/.test(value)
+                    const containsSpecial = /[#?!@$%^&*-]/.test(value)
+                    return containsUppercase && containsLowercase && containsNumber && containsSpecial
+                },
+                minLength: minLength(9),
+                maxLength: maxLength(19),
+            },
+            currentPassword: {
+                required
+            },
+            confirmPassword: {
+                required,
+                sameAsPassword: sameAs("newPassword")
+            },
         }
     }
 
diff --git a/resources/js/app.js b/resources/js/app.js
index 1667dbd..08a88cb 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -236,6 +236,8 @@ Vue.component('audit-component', require('./Audit/Home.vue').default)
 
 //Tetapan
 Vue.component('tetapan-component', require('./Tetapan/index.vue').default)
+Vue.component('pengguna-component', require('./Pengguna/index.vue').default)
+
 
 
 
diff --git a/routes/api.php b/routes/api.php
index 390b6dd..d8caf03 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -30,7 +30,9 @@ Route::group(['prefix' => 'check'], function () {
     Route::post('/kelulusan/pb', 'App\Http\Controllers\KelulusanController@updatePB');
     Route::get('/muatturun', 'App\Http\Controllers\KelulusanController@download');
 
-    Route::post('/changepass','App\Http\Controllers\ProfileController@changepassword');
     Route::get('/profileinfo','App\Http\Controllers\ProfileController@showProfileInformation');
 
 });
+
+Route::post('/changepass','App\Http\Controllers\ProfileController@changepassword');
+