diff --git a/app/Http/Controllers/PenggunaController.php b/app/Http/Controllers/PenggunaController.php
new file mode 100644
index 0000000..bdcb549
--- /dev/null
+++ b/app/Http/Controllers/PenggunaController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Storage;
+use Carbon\Carbon;
+
+class PenggunaController extends Controller
+{
+    public function index(){
+        $api_url = config('api.url');
+        $auth_user = Auth::user();
+
+        return view('pengguna.index',compact('api_url','auth_user'));
+    }
+}
diff --git a/app/Http/Controllers/ProfileController.php b/app/Http/Controllers/ProfileController.php
new file mode 100644
index 0000000..baf2b1f
--- /dev/null
+++ b/app/Http/Controllers/ProfileController.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\Hash;
+use Carbon\Carbon;
+
+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',
+        ]);
+    
+        $user = Auth::user();
+    
+        if (Hash::check($request->current_password, $user->password)) {
+            $user->password = Hash::make($request->new_password);
+            $user->save();
+    
+            return back()->with('success', 'Password changed successfully!');
+        } else {
+            return back()->with('error', 'Current password is incorrect');
+        }
+        // return view('pengguna.index',compact('api_url','auth_user'));
+    }
+}
+
+?>
diff --git a/resources/js/Pengguna/index.vue b/resources/js/Pengguna/index.vue
new file mode 100644
index 0000000..98b41ca
--- /dev/null
+++ b/resources/js/Pengguna/index.vue
@@ -0,0 +1,105 @@
+<template>
+    <div>
+        <ul class="flex hidden rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 mb-4">
+            <li class="w-full">
+                <button id="profile" type="button"
+                    :class="{'bg-gray-300 text-gray-900 hover:bg-gray-300': this.showprofile}"
+                    class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 rounded-l-lg focus:z-20 active hover:bg-gray-50 dark:bg-gray-700 dark:text-white"
+                    aria-current="page" @click="TabsAndPills($event)">Profil Pengguna</button>
+            </li>
+            <li class="w-full">
+                <button id="password" type="button"
+                    :class="{'bg-gray-300 text-gray-900 hover:bg-gray-300': this.showpassword}"
+                    class="inline-block relative py-4 px-4 w-full text-sm font-medium text-center text-gray-500 hover:text-gray-700 hover:bg-gray-50 focus:z-20 dark:text-gray-400 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white"
+                    @click="TabsAndPills($event)">Katalaluan</button>
+            </li>
+        </ul>
+        <div id="tabs-1" v-if="showprofile">
+
+            <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
+                        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
+                        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="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
+                        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
+                        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">
+                <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"
+                        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">
+                    <label for="newpass" class="block text-gray-700 text-sm font-bold mb-2">Katalaluan Baru</label>
+                    <input type="password" id="newpass"
+                        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">
+                    <label for="confirmpass" class="block text-gray-700 text-sm font-bold mb-2">Sahkan Katalaluan Baru </label>
+                    <input type="password" 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>
+                <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>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                showprofile: true,
+                showpassword: false,
+                submitStatus:''
+            }
+        },
+        methods: {
+            TabsAndPills: function (event) {
+                let targetId = event.currentTarget.id
+
+                event.preventDefault()
+                if (targetId === 'profile' && this.showprofile === false) {
+                    this.showprofile = true
+                    this.showpassword = false
+                }
+
+                if (targetId === 'password' && this.showpassword === false) {
+                    this.showprofile = false
+                    this.showpassword = true
+                }
+            },
+            submit: function(){
+                console.log('test');
+            }
+        }
+    }
+
+</script>
diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
index af9ab85..6f49897 100644
--- a/resources/views/layouts/sidebar.blade.php
+++ b/resources/views/layouts/sidebar.blade.php
@@ -317,7 +317,8 @@
             <hr class="mb-2">
 
 
-            <a href="#" class="hover:bg-yellow-300 rounded mb-2 mr-2">
+            <a href="{{ route('pengguna') }}" 
+            class="rounded mb-2 mr-2 {{ Route::is('pengguna') || Route::is('pengguna.*')  ? 'bg-gray-200 rounded text-white-500' : 'hover:bg-yellow-300 ' }}">
                 <li class="flex w-full justify-between text-red-600 cursor-pointer items-center ">
                     <div class="flex items-center">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
diff --git a/resources/views/pengguna/index.blade.php b/resources/views/pengguna/index.blade.php
new file mode 100644
index 0000000..ebba824
--- /dev/null
+++ b/resources/views/pengguna/index.blade.php
@@ -0,0 +1,18 @@
+
+@extends('layouts.app')
+
+@section('content')
+<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
+<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
+   <main>
+
+      <div class="pt-6 px-4">
+          
+      <breadcrumb :items="[{ 'title' : 'Pengguna', 'icon' : 'fas fa-globe-asia' }]"></breadcrumb>
+
+      <pengguna-component></pengguna-component>
+
+      </div>
+   </main>
+   @include('layouts.footer')
+@endsection
diff --git a/routes/api.php b/routes/api.php
index 596c152..e734471 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -30,5 +30,5 @@ 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');
 });
diff --git a/routes/web.php b/routes/web.php
index bbbcf0a..be80796 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -130,7 +130,8 @@ Route::get('/audit/cetakan', ['as'=>'audit.cetak','uses'=>'App\Http\Controllers\
 //Tetapan Server
 Route::get('/tetapan',['as'=>'tetapan','uses'=>'App\Http\Controllers\TetapanController@index'])->middleware(['roleChecker:null,null,operasi']);
 
-
+//Pengguna
+Route::get('/pengguna',['as'=>'pengguna','uses'=>'App\Http\Controllers\PenggunaController@index'])->middleware(['roleChecker:admin,akaun,operasi']);
 
 
 Route::get('{any}', function () {