diff --git a/app/Http/Controllers/ProfileController.php b/app/Http/Controllers/ProfileController.php
index b4a6669..69654d5 100644
--- a/app/Http/Controllers/ProfileController.php
+++ b/app/Http/Controllers/ProfileController.php
@@ -55,15 +55,16 @@ public function edit(Request $request): View
      */
     public function update(Request $request): RedirectResponse
     {
-        // Validasi input
         $request->validate([
-            'name' => ['required', 'string', 'max:255'],
+            'name' => ['required', 'string', 'max:255'], 
             'email' => ['required', 'string', 'email', 'max:255', 'unique:users,email,'.Auth::id()],
-            'nomor_hp' => ['nullable', 'string', 'max:15'],
+            'no_hp' => ['nullable', 'string', 'max:15'], 
         ]);
 
         $user = $request->user();
-        $user->fill($request->all());
+        $user->name = $request->name;
+        $user->email = $request->email;
+        $user->no_hp = $request->no_hp; 
 
         if ($user->isDirty('email')) {
             $user->email_verified_at = null;
diff --git a/app/Models/User.php b/app/Models/User.php
index b7b5077..3e95629 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -24,7 +24,7 @@ class User extends Authenticatable
         'role',
         'nisn',
         'nip',
-        'nomor_hp',
+        'no_hp',
         'kelas',
         'nomor_induk'
     ];
diff --git a/resources/views/admin/buku/create.blade.php b/resources/views/admin/buku/create.blade.php
index bcfa8f8..576e5c6 100644
--- a/resources/views/admin/buku/create.blade.php
+++ b/resources/views/admin/buku/create.blade.php
@@ -12,40 +12,63 @@
         <div class="col-md-11">
             <div class="card border-0 shadow-sm">
                 <div class="card-body p-4">
-                    <div class="card-body">
-                        {{-- TAMBAHKAN ID PADA FORM --}}
-                        <form action="#" method="POST" id="formTambahBuku">
-                            <div class="row">
-                                <div class="col-md-8">
-                                    <div class="mb-3">
-                                        <label for="judul" class="form-label">Judul Buku</label>
-                                        <input type="text" class="form-control" id="judul" placeholder="Masukkan judul buku" required>
+                    <form action="#" method="POST" id="formTambahBuku">
+                        <div class="row">
+                            <div class="col-md-8">
+                                {{-- JUDUL --}}
+                                <div class="mb-3">
+                                    <label for="judul" class="form-label">Judul Buku</label>
+                                    <input type="text" class="form-control" id="judul" placeholder="Masukkan judul buku" required>
+                                </div>
+                                
+                                {{-- PENULIS --}}
+                                <div class="mb-3">
+                                    <label for="penulis" class="form-label">Penulis</label>
+                                    <input type="text" class="form-control" id="penulis" placeholder="Masukkan nama penulis" required>
+                                </div>
+
+                                <div class="row">
+                                    {{-- KATEGORI --}}
+                                    <div class="col-md-3 mb-3">
+                                        <label for="kategori" class="form-label">Kategori</label>
+                                        <input type="text" class="form-control" id="kategori" placeholder="Contoh: Fiksi" required>
                                     </div>
-                                    <div class="mb-3">
-                                        <label for="penulis" class="form-label">Penulis</label>
-                                        <input type="text" class="form-control" id="penulis" placeholder="Masukkan nama penulis" required>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-md-3 mb-3">
-                                            <label for="kategori" class="form-label">Kategori</label>
-                                            <input type="text" class="form-control" id="kategori" placeholder="Contoh: Fiksi" required>
-                                        </div>
-                                        <div class="col-md-3 mb-3">
-                                            <label for="tahun" class="form-label">Tahun Terbit</label>
-                                            <input type="number" class="form-control" id="tahun" min="1000" max="2099" oninput="this.value = Math.abs(this.value)" placeholder="Contoh: 2024" required>
-                                        </div>
-                                        <div class="col-md-3 mb-3">
-                                            <label for="kode_buku" class="form-label">Kode Buku</label>
-                                            <input type="text" class="form-control" id="kode_buku" placeholder="Contoh: 330" required>
-                                        </div>
-                                        
-                                        <div class="col-md-3 mb-3">
-                                            <label for="stok_buku" class="form-label">Stok Buku</label>
-                                            <input type="number" class="form-control" id="stok_buku" min="0" oninput="this.value = Math.abs(this.value)" placeholder="Contoh: 15" required>
+                                    
+                                    {{-- TAHUN TERBIT (SOLUSI DROPDOWN / SELECT) --}}
+                                    <div class="col-md-3 mb-3">
+                                        <label for="tahun" class="form-label">Tahun Terbit</label>
+                                        <div class="input-group">
+                                            <span class="input-group-text bg-white border-end-0"><i class="bi bi-calendar-event"></i></span>
+                                            <select class="form-select border-start-0 ps-0" id="tahun" required>
+                                                <option value="" selected disabled>Pilih Tahun</option>
+                                                @php
+                                                    $tahunSekarang = date('Y');
+                                                    $tahunMulai = 1900;
+                                                @endphp
+                                                @for ($i = $tahunSekarang; $i >= $tahunMulai; $i--)
+                                                    <option value="{{ $i }}">{{ $i }}</option>
+                                                @endfor
+                                            </select>
                                         </div>
                                     </div>
-                                    <div class="mb-3">
-                                        <label class="form-label">Tipe Akses</label>
+
+                                    {{-- KODE BUKU --}}
+                                    <div class="col-md-3 mb-3">
+                                        <label for="kode_buku" class="form-label">Kode Buku</label>
+                                        <input type="text" class="form-control" id="kode_buku" placeholder="Contoh: 330" required>
+                                    </div>
+                                    
+                                    {{-- STOK BUKU --}}
+                                    <div class="col-md-3 mb-3">
+                                        <label for="stok_buku" class="form-label">Stok Buku</label>
+                                        <input type="number" class="form-control" id="stok_buku" min="0" oninput="this.value = Math.abs(this.value)" placeholder="Contoh: 15" required>
+                                    </div>
+                                </div>
+
+                                {{-- TIPE AKSES --}}
+                                <div class="mb-3">
+                                    <label class="form-label">Tipe Akses</label>
+                                    <div class="d-flex gap-3">
                                         <div class="form-check">
                                             <input class="form-check-input" type="checkbox" id="tipe_offline" checked>
                                             <label class="form-check-label" for="tipe_offline">Peminjaman Offline</label>
@@ -56,23 +79,29 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-md-4">
-                                    <div class="mb-3">
-                                        <label for="cover" class="form-label">Cover Buku</label>
-                                        <input type="file" class="form-control" id="cover">
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="file_pdf" class="form-label">File PDF (untuk buku online)</label>
-                                        <input type="file" class="form-control" id="file_pdf">
-                                    </div>
+                            </div>
+
+                            {{-- UPLOAD FILE --}}
+                            <div class="col-md-4">
+                                <div class="mb-3">
+                                    <label for="cover" class="form-label">Cover Buku</label>
+                                    <input type="file" class="form-control" id="cover">
+                                    <div class="form-text small">Format: JPG, PNG. Maks: 2MB</div>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="file_pdf" class="form-label">File PDF (untuk buku online)</label>
+                                    <input type="file" class="form-control" id="file_pdf">
+                                    <div class="form-text small">Format: PDF. Maks: 10MB</div>
                                 </div>
                             </div>
-                            <hr>
-                            <div class="d-flex justify-content-end">
-                                <button type="submit" class="btn btn-primary">Simpan Buku</button>
-                            </div>
-                        </form>
-                    </div>
+                        </div>
+                        <hr class="my-4">
+                        <div class="d-flex justify-content-end">
+                            <button type="submit" class="btn btn-primary px-4 fw-bold">
+                                <i class="bi bi-save me-2"></i>Simpan Buku
+                            </button>
+                        </div>
+                    </form>
                 </div>
             </div>
         </div>
@@ -80,23 +109,16 @@
 
     @push('scripts')
     <script>
-        document.getElementById('formTambahBuku').addEventListener('submit', function(e) {
-            e.preventDefault(); 
-            
-            modernSwal.fire({
-                title: 'Menyimpan...',
-                timer: 800, 
-                didOpen: () => Swal.showLoading()
-            }).then(() => {
-                Toast.fire({
-                    icon: 'success',
-                    title: 'Berhasil',
-                    text: 'Buku baru berhasil ditambahkan.'
+        document.addEventListener('DOMContentLoaded', function() {
+            // LOGIC SIMPAN
+            document.getElementById('formTambahBuku').addEventListener('submit', function(e) {
+                e.preventDefault(); 
+                modernSwal.fire({
+                    title: 'Menyimpan...', timer: 1500, didOpen: () => Swal.showLoading()
+                }).then(() => {
+                    Toast.fire({ icon: 'success', title: 'Berhasil', text: 'Buku baru berhasil ditambahkan.' });
+                    setTimeout(() => { window.location.href = "{{ route('admin.buku.index') }}"; }, 1500);
                 });
-                
-                setTimeout(() => {
-                    window.location.href = "{{ route('admin.buku.index') }}";
-                }, 1500);
             });
         });
     </script>
diff --git a/resources/views/admin/buku/index.blade.php b/resources/views/admin/buku/index.blade.php
index 4bc1863..8cdbc97 100644
--- a/resources/views/admin/buku/index.blade.php
+++ b/resources/views/admin/buku/index.blade.php
@@ -9,82 +9,91 @@
             </a>
         </div>
         <div class="card-body">
+            {{-- NAV TABS --}}
             <ul class="nav nav-tabs" id="bukuTab" role="tablist">
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link active" id="offline-tab" data-bs-toggle="tab" data-bs-target="#offline-tab-pane" type="button" role="tab">Peminjaman Offline (<span id="countOffline">{{ $bukuOffline->count() }}</span>)</button>
+                    <button class="nav-link active" id="offline-tab" data-bs-toggle="tab"
+                        data-bs-target="#offline-tab-pane" type="button" role="tab">Peminjaman Offline (<span
+                            id="countOffline">{{ $bukuOffline->count() }}</span>)</button>
                 </li>
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link" id="online-tab" data-bs-toggle="tab" data-bs-target="#online-tab-pane" type="button" role="tab">Baca Online (<span id="countOnline">{{ $bukuOnline->count() }}</span>)</button>
+                    <button class="nav-link" id="online-tab" data-bs-toggle="tab" data-bs-target="#online-tab-pane"
+                        type="button" role="tab">Baca Online (<span id="countOnline">{{ $bukuOnline->count()
+                            }}</span>)</button>
                 </li>
-                {{-- TAB BARU KHUSUS ARSIP --}}
                 <li class="nav-item" role="presentation">
-                    <button class="nav-link text-warning" id="arsip-tab" data-bs-toggle="tab" data-bs-target="#arsip-tab-pane" type="button" role="tab"><i class="bi bi-archive-fill me-1"></i>Diarsipkan (<span id="countArsip">0</span>)</button>
+                    <button class="nav-link text-warning" id="arsip-tab" data-bs-toggle="tab"
+                        data-bs-target="#arsip-tab-pane" type="button" role="tab">
+                        <i class="bi bi-archive-fill me-1"></i>Diarsipkan (<span id="countArsip">0</span>)
+                    </button>
                 </li>
             </ul>
 
             <div class="tab-content" id="bukuTabContent">
-                {{-- TAB UNTUK BUKU OFFLINE --}}
+
+                {{-- BUKU OFFLINE --}}
                 <div class="tab-pane fade show active" id="offline-tab-pane" role="tabpanel">
                     <div class="table-responsive mt-3">
                         <table class="table table-hover align-middle" id="tableOffline">
-                            <thead>
+                            <thead class="table-light">
                                 <tr>
                                     <th>No</th>
                                     <th>Cover</th>
                                     <th>Judul</th>
                                     <th>Kode Buku</th>
                                     <th>Penulis</th>
-                                    <th>Stok</th> 
+                                    <th>Stok</th>
                                     <th>Status</th>
                                     <th class="text-center">Aksi</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 @forelse($bukuOffline as $buku)
-                                    <tr data-tipe="offline">
-                                        <td class="row-number">{{ $loop->iteration }}</td>
-                                        <td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40" class="rounded shadow-sm"></td>
-                                        <td class="fw-bold">{{ $buku['judul'] }}</td>
-                                        <td>{{ $buku['kode_buku'] }}</td>
-                                        <td>{{ $buku['penulis'] }}</td>
-                                        <td><span class="badge bg-secondary">{{ $buku['stok'] ?? 0 }}</span></td>
-                                        <td>
-                                            @if ($buku['status'] == 'Tersedia')
-                                                <span class="badge bg-success-subtle text-success-emphasis">Tersedia</span>
-                                            @else
-                                                <span class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span>
-                                            @endif
-                                        </td>
-                                        <td>
-                                            <div class="d-flex justify-content-center gap-2 aksi-buttons">
-                                                <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
-                                                    data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}"
-                                                    data-cover="{{ asset($buku['cover']) }}" data-judul="{{ $buku['judul'] }}"
-                                                    data-kode_buku="{{ $buku['kode_buku'] }}" data-penulis="{{ $buku['penulis'] }}"
-                                                    data-kategori="{{ $buku['kategori'] }}" data-tahun="{{ $buku['tahun'] }}" 
-                                                    data-status="{{ $buku['status'] }}">
-                                                    <i class="bi bi-eye-fill"></i> Detail
-                                                </button>
-                                                <button class="btn btn-sm btn-outline-warning btn-arsipkan" 
-                                                    data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku">
-                                                    <i class="bi bi-archive-fill"></i> Arsip
-                                                </button>
-                                            </div>
-                                        </td>
-                                    </tr>
+                                <tr data-tipe="offline" data-id="{{ $buku['id'] }}">
+                                    <td class="row-number">{{ $loop->iteration }}</td>
+                                    <td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40"
+                                            class="rounded shadow-sm"></td>
+                                    <td class="fw-bold">{{ $buku['judul'] }}</td>
+                                    <td>{{ $buku['kode_buku'] }}</td>
+                                    <td>{{ $buku['penulis'] }}</td>
+                                    <td><span class="badge bg-secondary">{{ $buku['stok'] ?? 0 }}</span></td>
+                                    <td>
+                                        @if ($buku['status'] == 'Tersedia')
+                                        <span class="badge bg-success-subtle text-success-emphasis">Tersedia</span>
+                                        @else
+                                        <span class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span>
+                                        @endif
+                                    </td>
+                                    <td class="text-center">
+                                        <div class="d-flex justify-content-center gap-2">
+                                            <button class="btn btn-sm btn-outline-secondary btn-detail"
+                                                data-bs-toggle="modal" data-bs-target="#detailBukuModal"
+                                                data-buku='@json($buku)'>
+                                                <i class="bi bi-eye-fill"></i> Detail
+                                            </button>
+                                            <button class="btn btn-sm btn-outline-warning btn-arsipkan"
+                                                data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku">
+                                                <i class="bi bi-archive-fill"></i> Arsip
+                                            </button>
+                                        </div>
+                                    </td>
+                                </tr>
                                 @empty
-                                    <tr class="empty-row"><td colspan="8" class="text-center py-4">Tidak ada data buku offline.</td></tr>
+                                <tr class="empty-row">
+                                    <td colspan="8" class="text-center py-4 text-muted">Tidak ada data buku offline.
+                                    </td>
+                                </tr>
                                 @endforelse
                             </tbody>
                         </table>
                     </div>
                 </div>
 
-                {{-- TAB UNTUK BUKU ONLINE --}}
+                {{-- BUKU ONLINE --}}
                 <div class="tab-pane fade" id="online-tab-pane" role="tabpanel">
                     <div class="table-responsive mt-3">
                         <table class="table table-hover align-middle" id="tableOnline">
-                            <thead>
+                            <thead class="table-light">
                                 <tr>
                                     <th>No</th>
                                     <th>Cover</th>
@@ -96,52 +105,58 @@
                             </thead>
                             <tbody>
                                 @forelse($bukuOnline as $buku)
-                                    <tr data-tipe="online">
-                                        <td class="row-number">{{ $loop->iteration }}</td>
-                                        <td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40" class="rounded shadow-sm"></td>
-                                        <td class="fw-bold">{{ $buku['judul'] }}</td>
-                                        <td>{{ $buku['penulis'] }}</td>
-                                        <td><span class="badge bg-info-subtle text-info-emphasis">{{ $buku['file_pdf'] ?? 'N/A' }}</span></td>
-                                        <td>
-                                            <div class="d-flex justify-content-center gap-2 aksi-buttons">
-                                                <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
-                                                    data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}"
-                                                    data-cover="{{ asset($buku['cover']) }}" data-judul="{{ $buku['judul'] }}"
-                                                    data-penulis="{{ $buku['penulis'] }}" data-kategori="{{ $buku['kategori'] }}"
-                                                    data-tahun="{{ $buku['tahun'] }}" data-status="Dapat Dibaca Online">
-                                                    <i class="bi bi-eye-fill"></i> Detail
-                                                </button>
-                                                <button class="btn btn-sm btn-outline-warning btn-arsipkan" 
-                                                    data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku">
-                                                    <i class="bi bi-archive-fill"></i> Arsip
-                                                </button>
-                                            </div>
-                                        </td>
-                                    </tr>
+                                <tr data-tipe="online" data-id="{{ $buku['id'] }}">
+                                    <td class="row-number">{{ $loop->iteration }}</td>
+                                    <td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40"
+                                            class="rounded shadow-sm"></td>
+                                    <td class="fw-bold">{{ $buku['judul'] }}</td>
+                                    <td>{{ $buku['penulis'] }}</td>
+                                    <td><span class="badge bg-info-subtle text-info-emphasis">PDF Available</span></td>
+                                    <td class="text-center">
+                                        <div class="d-flex justify-content-center gap-2">
+                                            <button class="btn btn-sm btn-outline-secondary btn-detail"
+                                                data-bs-toggle="modal" data-bs-target="#detailBukuModal"
+                                                data-buku='@json($buku)'>
+                                                <i class="bi bi-eye-fill"></i> Detail
+                                            </button>
+                                            <button class="btn btn-sm btn-outline-warning btn-arsipkan"
+                                                data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku">
+                                                <i class="bi bi-archive-fill"></i> Arsip
+                                            </button>
+                                        </div>
+                                    </td>
+                                </tr>
                                 @empty
-                                    <tr class="empty-row"><td colspan="6" class="text-center py-4">Tidak ada data buku online.</td></tr>
+                                <tr class="empty-row">
+                                    <td colspan="6" class="text-center py-4 text-muted">Tidak ada data buku online.</td>
+                                </tr>
                                 @endforelse
                             </tbody>
                         </table>
                     </div>
                 </div>
 
-                {{-- TAB UNTUK ARSIP --}}
+                {{-- ARSIP --}}
                 <div class="tab-pane fade" id="arsip-tab-pane" role="tabpanel">
                     <div class="table-responsive mt-3">
                         <table class="table table-hover align-middle" id="tableArsip">
-                            <thead>
+                            <thead class="table-light">
                                 <tr>
                                     <th>No</th>
                                     <th>Cover</th>
                                     <th>Judul</th>
                                     <th>Penulis</th>
-                                    <th>Tipe</th>
+                                    <th>Tipe Asal</th>
                                     <th class="text-center">Aksi</th>
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr class="empty-row-arsip"><td colspan="6" class="text-center py-4 text-muted"><i class="bi bi-inbox fs-4 d-block mb-2"></i>Belum ada buku yang diarsipkan.</td></tr>
+                                <tr class="empty-row-arsip">
+                                    <td colspan="6" class="text-center py-5 text-muted">
+                                        <i class="bi bi-inbox fs-1 d-block mb-2 text-secondary opacity-50"></i>
+                                        Belum ada buku yang diarsipkan.
+                                    </td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>
@@ -154,174 +169,200 @@
     {{-- MODAL DETAIL BUKU --}}
     <div class="modal fade" id="detailBukuModal" tabindex="-1">
         <div class="modal-dialog modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
+            <div class="modal-content border-0 shadow">
+                <div class="modal-header border-0">
                     <h5 class="modal-title fw-bold" id="modalJudul">Detail Buku</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body">
                     <div class="row">
-                        <div class="col-md-4 text-center mb-4 mb-md-0">
-                            <img src="" id="modalCover" class="img-fluid rounded shadow mx-auto d-block" style="max-height: 250px; object-fit: cover;" alt="Cover Buku">
+                        <div class="col-md-4 text-center mb-3">
+                            <img src="" id="modalCover" class="img-fluid rounded shadow"
+                                style="max-height: 250px; object-fit: cover;">
                         </div>
                         <div class="col-md-8">
-                            <h3 id="modalJudulContent" class="fw-bold text-dark"></h3>
-                            <p class="text-muted mb-4" id="modalPenulis"></p>
-                            <table class="table table-sm table-borderless">
-                                <tr><th width="120px" class="text-black">Kategori</th><td id="modalKategori" class="fw-semibold"></td></tr>
-                                <tr id="rowKodeBuku"><th class="text-black">Kode Buku</th><td id="modalKode_buku" class="fw-semibold"></td></tr>
-                                <tr><th class="text-black">Tahun Terbit</th><td id="modalTahun" class="fw-semibold"></td></tr>
-                                <tr><th class="text-black">Status</th><td><span id="modalStatus" class="badge"></span></td></tr>
-                            </table>
+                            <h3 id="modalJudulContent" class="fw-bold text-dark mb-1"></h3>
+                            <p class="text-muted mb-3" id="modalPenulis"></p>
+
+                            <div class="bg-light p-3 rounded-3">
+                                <table class="table table-sm table-borderless mb-0">
+                                    <tr>
+                                        <td class="text-secondary" width="130">Kategori</td>
+                                        <td id="modalKategori" class="fw-bold"></td>
+                                    </tr>
+                                    <tr id="rowKodeBuku">
+                                        <td class="text-secondary">Kode Buku</td>
+                                        <td id="modalKode" class="fw-bold font-monospace"></td>
+                                    </tr>
+                                    <tr>
+                                        <td class="text-secondary">Tahun Terbit</td>
+                                        <td id="modalTahun" class="fw-bold"></td>
+                                    </tr>
+                                    <tr>
+                                        <td class="text-secondary">Stok</td>
+                                        <td id="modalStok" class="fw-bold"></td>
+                                    </tr>
+                                    <tr>
+                                        <td class="text-secondary">Status</td>
+                                        <td><span id="modalStatus" class="badge"></span></td>
+                                    </tr>
+                                </table>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="modal-footer bg-light">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
-                    <a href="#" id="modalEditButton" class="btn btn-primary"><i class="bi bi-pencil-fill me-2"></i>Edit Buku</a>
+                <div class="modal-footer border-0 bg-light">
+                    <button type="button" class="btn btn-secondary rounded-pill px-4"
+                        data-bs-dismiss="modal">Tutup</button>
+                    <a href="#" id="modalEditButton" class="btn btn-primary rounded-pill px-4">
+                        <i class="bi bi-pencil-square me-2"></i>Edit Buku
+                    </a>
                 </div>
             </div>
         </div>
     </div>
 
     @push('scripts')
-        <script>
-            document.addEventListener('DOMContentLoaded', function() {
-                // LOGIC UNTUK MODAL DETAIL
-                const detailBukuModal = document.getElementById('detailBukuModal');
-                if (detailBukuModal) {
-                    detailBukuModal.addEventListener('show.bs.modal', event => {
-                        const button = event.relatedTarget;
-
-                        const id = button.getAttribute('data-id');
-                        const cover = button.getAttribute('data-cover');
-                        const judul = button.getAttribute('data-judul');
-                        const kode_buku = button.getAttribute('data-kode_buku');
-                        const penulis = button.getAttribute('data-penulis');
-                        const kategori = button.getAttribute('data-kategori');
-                        const tahun = button.getAttribute('data-tahun');
-                        const status = button.getAttribute('data-status');
-
-                        const editUrl = `{{ url('admin/buku') }}/${id}/edit`;
-
-                        const modalJudul = detailBukuModal.querySelector('#modalJudul');
-                        const modalCover = detailBukuModal.querySelector('#modalCover');
-                        const modalKode_buku = detailBukuModal.querySelector('#modalKode_buku');
-                        const modalJudulContent = detailBukuModal.querySelector('#modalJudulContent');
-                        const modalPenulis = detailBukuModal.querySelector('#modalPenulis');
-                        const modalKategori = detailBukuModal.querySelector('#modalKategori');
-                        const modalTahun = detailBukuModal.querySelector('#modalTahun');
-                        const modalStatus = detailBukuModal.querySelector('#modalStatus');
-                        const modalEditButton = detailBukuModal.querySelector('#modalEditButton');
-                        const rowKodeBuku = detailBukuModal.querySelector('#rowKodeBuku');
-
-                        modalJudul.textContent = judul;
-                        modalCover.src = cover;
-                        modalJudulContent.textContent = judul;
-                        modalPenulis.textContent = `oleh ${penulis}`;
-                        modalKategori.textContent = `: ${kategori}`;
-                        modalTahun.textContent = `: ${tahun}`;
-                        modalStatus.textContent = status;
-                        modalEditButton.href = editUrl;
-
-                        if (kode_buku && kode_buku !== 'null' && kode_buku !== '') {
-                            rowKodeBuku.style.display = '';
-                            modalKode_buku.textContent = `: ${kode_buku}`;
-                        } else {
-                            rowKodeBuku.style.display = 'none';
-                        }
-
-                        if (status === 'Tersedia' || status === 'Dapat Dibaca Online') {
-                            modalStatus.className = 'badge bg-success-subtle text-success-emphasis';
-                        } else {
-                            modalStatus.className = 'badge bg-warning-subtle text-warning-emphasis';
-                        }
-                    });
-                }
-
-                function updateTableNumbers() {
-                    let countOffline = 0;
-                    $('#tableOffline tbody tr').not('.empty-row').each(function(index) {
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            
+            function updateTableNumbers() {
+                ['#tableOffline', '#tableOnline', '#tableArsip'].forEach(tableId => {
+                    let count = 0;
+                    $(tableId + ' tbody tr').not('[class^="empty-row"]').each(function(index) {
                         $(this).find('.row-number').text(index + 1);
-                        countOffline++;
+                        count++;
                     });
-                    $('#countOffline').text(countOffline);
 
-                    let countOnline = 0;
-                    $('#tableOnline tbody tr').not('.empty-row').each(function(index) {
-                        $(this).find('.row-number').text(index + 1);
-                        countOnline++;
-                    });
-                    $('#countOnline').text(countOnline);
-
-                    let countArsip = 0;
-                    $('#tableArsip tbody tr').not('.empty-row-arsip').each(function(index) {
-                        $(this).find('.row-number').text(index + 1);
-                        countArsip++;
-                    });
-                    $('#countArsip').text(countArsip);
-
-                    if(countArsip === 0) {
-                        $('.empty-row-arsip').show();
-                    } else {
-                        $('.empty-row-arsip').hide();
+                    if (tableId === '#tableOffline') $('#countOffline').text(count);
+                    if (tableId === '#tableOnline') $('#countOnline').text(count);
+                    if (tableId === '#tableArsip') {
+                        $('#countArsip').text(count);
+                        if(count === 0) $('.empty-row-arsip').show(); else $('.empty-row-arsip').hide();
                     }
+                });
+            }
+
+            // LOGIC MODAL DETAIL
+            $('#detailBukuModal').on('show.bs.modal', function(event) {
+                const button = $(event.relatedTarget);
+                const buku = button.data('buku'); 
+                
+                $('#modalCover').attr('src', "{{ asset('') }}" + buku.cover);
+                $('#modalJudulContent').text(buku.judul);
+                $('#modalPenulis').text('Penulis: ' + buku.penulis);
+                $('#modalKategori').text(buku.kategori);
+                $('#modalTahun').text(buku.tahun);
+                $('#modalStok').text(buku.stok ? buku.stok + ' Buku' : '-');
+                
+                if (buku.kode_buku) {
+                    $('#rowKodeBuku').show();
+                    $('#modalKode').text(buku.kode_buku);
+                } else {
+                    $('#rowKodeBuku').hide();
                 }
 
-                // LOGIC UNTUK TOMBOL ARSIPKAN
-                $(document).on('click', '.btn-arsipkan', function() {
-                    const judul = $(this).data('judul');
-                    const row = $(this).closest('tr');
-                    const coverHtml = row.find('td:eq(1)').html();
-                    const tipe = row.data('tipe'); 
-                    const penulis = tipe === 'offline' ? row.find('td:eq(4)').text() : row.find('td:eq(3)').text();
+                // Status Badge
+                const statusBadge = $('#modalStatus');
+                statusBadge.removeClass().addClass('badge');
+                if (buku.status === 'Tersedia' || !buku.status) {
+                    statusBadge.addClass('bg-success-subtle text-success-emphasis').text('Tersedia / Online');
+                } else {
+                    statusBadge.addClass('bg-warning-subtle text-warning-emphasis').text('Dipinjam');
+                }
 
-                    modernSwal.fire({
-                        title: 'Arsipkan Buku?',
-                        text: `Apakah Anda yakin ingin mengarsipkan buku "${judul}"?`,
-                        icon: 'warning',
-                        showCancelButton: true,
-                        confirmButtonText: 'Ya, Arsipkan!',
-                        cancelButtonText: 'Batal',
-                        confirmButtonColor: '#ffc107',
-                        cancelButtonColor: '#6c757d'
-                    }).then((result) => {
-                        if (result.isConfirmed) {
-                            modernSwal.fire({
-                                title: 'Memproses...',
-                                timer: 800,
-                                didOpen: () => Swal.showLoading()
-                            }).then(() => {
-                                Toast.fire({
-                                    icon: 'success',
-                                    title: 'Berhasil',
-                                    text: `Buku "${judul}" telah dipindahkan ke Arsip.`
-                                });
-                                
-                                let badgeTipe = tipe === 'offline' ? '<span class="badge bg-secondary">Offline</span>' : '<span class="badge bg-info">Online</span>';
-                                let newRow = `
-                                    <tr>
-                                        <td class="row-number"></td>
-                                        <td>${coverHtml}</td>
-                                        <td class="fw-bold text-muted">${judul}</td>
-                                        <td class="text-muted">${penulis}</td>
-                                        <td>${badgeTipe}</td>
-                                        <td class="text-center">
-                                            <span class="badge bg-warning"><i class="bi bi-archive-fill me-1"></i>Diarsipkan</span>
-                                        </td>
-                                    </tr>
-                                `;
+                $('#modalEditButton').attr('href', "{{ url('admin/buku') }}/" + buku.id + "/edit");
+            });
 
-                                row.fadeOut('slow', function() {
-                                    $(this).remove();
-                                    $('#tableArsip tbody').append(newRow);
-                                    updateTableNumbers(); 
-                                });
-                            });
-                        }
-                    });
+            // LOGIC ARSIPKAN BUKU
+            $(document).on('click', '.btn-arsipkan', function() {
+                const row = $(this).closest('tr');
+                const judul = $(this).data('judul');
+                const tipe = row.data('tipe'); 
+                
+                const rowData = row.prop('outerHTML'); 
+                
+                modernSwal.fire({
+                    title: 'Arsipkan Buku?',
+                    text: `Buku "${judul}" akan dipindahkan ke tab Arsip.`,
+                    icon: 'warning',
+                    showCancelButton: true,
+                    confirmButtonText: 'Ya, Arsipkan',
+                    cancelButtonText: 'Batal',
+                    confirmButtonColor: '#ffc107',
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        row.fadeOut(300, function() {
+                            const coverHtml = row.find('td:eq(1)').html();
+                            const penulis = row.find('td:eq(3)').text(); 
+                            const badgeTipe = tipe === 'offline' 
+                                ? '<span class="badge bg-secondary"><i class="bi bi-book me-1"></i>Offline</span>' 
+                                : '<span class="badge bg-info"><i class="bi bi-globe me-1"></i>Online</span>';
+
+                            const originalDataEncoded = encodeURIComponent(rowData);
+
+                            const arsipRow = `
+                                <tr data-origin="${originalDataEncoded}">
+                                    <td class="row-number"></td>
+                                    <td>${coverHtml}</td>
+                                    <td class="fw-bold text-muted">${judul}</td>
+                                    <td class="text-muted">${penulis}</td>
+                                    <td>${badgeTipe}</td>
+                                    <td class="text-center">
+                                        <button class="btn btn-sm btn-outline-success btn-pulihkan" 
+                                            data-judul="${judul}" title="Kembalikan ke Daftar Aktif">
+                                            <i class="bi bi-arrow-counterclockwise me-1"></i>Kembalikan
+                                        </button>
+                                    </td>
+                                </tr>
+                            `;
+
+                            $('#tableArsip tbody').append(arsipRow);
+                            $(this).remove(); 
+                            
+                            updateTableNumbers();
+                            Toast.fire({ icon: 'success', title: 'Diarsipkan', text: `Buku "${judul}" berhasil diarsipkan.` });
+                        });
+                    }
                 });
             });
-        </script>
+
+            // LOGIC PULIHKAN BUKU 
+            $(document).on('click', '.btn-pulihkan', function() {
+                const row = $(this).closest('tr');
+                const judul = $(this).data('judul');
+                const originalDataEncoded = row.data('origin');
+
+                modernSwal.fire({
+                    title: 'Kembalikan Buku?',
+                    text: `Buku "${judul}" akan dikembalikan ke daftar aktif.`,
+                    icon: 'question',
+                    showCancelButton: true,
+                    confirmButtonText: 'Ya, Kembalikan',
+                    cancelButtonText: 'Batal',
+                    confirmButtonColor: '#198754',
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        row.fadeOut(300, function() {
+                            const originalRowHtml = decodeURIComponent(originalDataEncoded);
+                            const $originalRow = $(originalRowHtml);
+                            
+                            const tipe = $originalRow.data('tipe');
+                            const targetTable = tipe === 'offline' ? '#tableOffline' : '#tableOnline';
+
+                            $originalRow.removeAttr('style');
+
+                            $(targetTable + ' tbody').append($originalRow);
+                            $(this).remove(); 
+                            
+                            updateTableNumbers();
+                            Toast.fire({ icon: 'success', title: 'Dipulihkan', text: `Buku "${judul}" aktif kembali.` });
+                        });
+                    }
+                });
+            });
+
+        });
+    </script>
     @endpush
 </x-app-layout>
\ No newline at end of file
diff --git a/resources/views/admin/denda/index.blade.php b/resources/views/admin/denda/index.blade.php
index d455dc2..d724c67 100644
--- a/resources/views/admin/denda/index.blade.php
+++ b/resources/views/admin/denda/index.blade.php
@@ -61,7 +61,7 @@
                                     <div class="fw-bold text-dark">{{ $item['peminjam'] }}</div>
                                     <span class="badge bg-light text-secondary border mt-1 mb-1">{{ $item['kelas'] }}</span>
                                     <div class="small text-muted">
-                                        <i class="bi bi-telephone me-1"></i>{{ $item['nomor_hp'] }}
+                                        <i class="bi bi-telephone me-1"></i>{{ $item['no_hp'] }}
                                     </div>
                                 </td>
                                 <td>
diff --git a/resources/views/admin/peminjaman/index.blade.php b/resources/views/admin/peminjaman/index.blade.php
index 417cba0..22ffef8 100644
--- a/resources/views/admin/peminjaman/index.blade.php
+++ b/resources/views/admin/peminjaman/index.blade.php
@@ -75,7 +75,7 @@
                                 </td>
                                 <td>
                                     <div class="fw-bold">{{ $transaksi['peminjam'] }}</div>
-                                    <div class="small text-muted">{{ $transaksi['nomor_hp'] }}</div>
+                                    <div class="small text-muted">{{ $transaksi['no_hp'] }}</div>
                                 </td>
                                 <td>
                                     <ul class="mb-0 ps-3 small">
diff --git a/resources/views/admin/pengguna/index.blade.php b/resources/views/admin/pengguna/index.blade.php
index 32ccc89..cd829cb 100644
--- a/resources/views/admin/pengguna/index.blade.php
+++ b/resources/views/admin/pengguna/index.blade.php
@@ -35,7 +35,7 @@
                                 <th>Nama Lengkap</th>
                                 <th>Kontak (Email & HP)</th>
                                 <th>Role</th>
-                                <th>NISN / NIP</th>
+                                <th>NISN / NIP / NIK</th>
                                 <th>Kelas / Golongan</th>
                                 <th class="text-center">Aksi</th>
                             </tr>
@@ -111,7 +111,7 @@ class="bi bi-trash"></i></button>
             <div>
                 <h4 class="fw-bold text-success mb-1"><i class="bi bi-database-lock me-2"></i>Data Induk (Whitelist)
                 </h4>
-                <p class="text-muted mb-0">Daftar NIP/NISN yang <b>diizinkan</b> untuk mendaftar.</p>
+                <p class="text-muted mb-0">Daftar NIP/NISN/NIK yang <b>diizinkan</b> untuk mendaftar.</p>
             </div>
             <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalMasterInduk">
                 <i class="bi bi-plus-lg me-1"></i> Tambah Data Induk
@@ -121,15 +121,15 @@ class="bi bi-trash"></i></button>
         <div class="card shadow mb-4 border-left-success">
             <div class="card-body">
                 <div class="table-responsive">
-                    <table class="table table-hover align-middle mb-0">
+                    <table class="table table-hover table-bordered align-middle mb-0">
                         <thead class="table-light">
                             <tr>
                                 <th>No</th>
                                 <th>NIP / NISN</th>
                                 <th>Nama Pemilik</th>
-                                <th>Role</th>
+                                <th class="text-center">Role</th>
                                 <th class="text-center">Status Akun</th>
-                                <th class="text-end">Aksi</th>
+                                <th class="text-center">Aksi</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -138,7 +138,7 @@ class="bi bi-trash"></i></button>
                                 <td>{{ $index + 1 }}</td>
                                 <td class="fw-bold font-monospace">{{ $item->nomor_induk }}</td>
                                 <td>{{ $item->nama_pemilik }}</td>
-                                <td>
+                                <td class="text-center">
                                     @if($item->role == 'guru')
                                     <span class="badge bg-info text-dark">Guru</span>
                                     @elseif($item->role == 'siswa')
@@ -160,7 +160,7 @@ class="bi bi-check-circle-fill me-1"></i>Terdaftar</span>
                                             class="bi bi-hourglass-split me-1"></i>Belum Daftar</span>
                                     @endif
                                 </td>
-                                <td class="text-end">
+                                <td class="text-center">
                                     <form action="{{ route('admin.master-induk.destroy', $item->id) }}" method="POST"
                                         class="d-inline form-delete-whitelist" data-induk="{{ $item->nomor_induk }}">
                                         @csrf
@@ -209,7 +209,7 @@ class="d-inline form-delete-whitelist" data-induk="{{ $item->nomor_induk }}">
                             </select>
                         </div>
                         <div class="mb-3">
-                            <label class="form-label">NIP / NISN</label>
+                            <label class="form-label">NIP / NISN / NIK</label>
                             <input type="number" name="nomor_induk" class="form-control"
                                 placeholder="Contoh: 1234567890" required>
                         </div>
diff --git a/resources/views/auth/admin-login.blade.php b/resources/views/auth/admin-login.blade.php
index 701a42a..97a3a92 100644
--- a/resources/views/auth/admin-login.blade.php
+++ b/resources/views/auth/admin-login.blade.php
@@ -20,7 +20,7 @@
         </div>
 
         <div class="mb-3">
-                <label for="nip" class="form-label">Nomor Induk Pegawai (NIP)</label>
+                <label for="nip" class="form-label">NIP/NIK</label>
                 <input id="nip" class="form-control" type="text" name="nip" required autofocus />
                 <x-input-error :messages="$errors->get('nip')" class="mt-2" /> 
             </div>
@@ -36,7 +36,7 @@
         </div>
 
         <div class="d-grid mt-4">
-            <button type="submit" class="btn btn-primary btn-lg">Masuk</button>
+            <button type="submit" class="btn btn-primary py-2 fw-medium shadow-sm">Masuk</button>
         </div>
         <p class="mt-4 text-center text-muted small">
             Kembali ke <a href="/" class="fw-semibold text-decoration-none">halaman utama</a>.
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 5faa683..3894534 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -36,10 +36,10 @@
                     <i class="bi bi-person-fill"></i>
                 </span>
                 @if ($role == 'siswa')
-                <input id="nisn" class="form-control border-start-0 ps-0 bg-light" type="text" name="nisn"
+                <input id="nisn" class="form-control border-start-0 ps-2 bg-light" type="text" name="nisn"
                     placeholder="Contoh: 0012345678" required autofocus />
                 @else
-                <input id="nip" class="form-control border-start-0 ps-0 bg-light" type="text" name="nip"
+                <input id="nip" class="form-control border-start-0 ps-2 bg-light" type="text" name="nip"
                     placeholder="Contoh: 19800101..." required autofocus />
                 @endif
             </div>
@@ -60,7 +60,7 @@
                 <span class="input-group-text bg-light text-muted border-end-0">
                     <i class="bi bi-lock-fill"></i>
                 </span>
-                <input id="password" class="form-control border-start-0 border-end-0 ps-0 bg-light" type="password"
+                <input id="password" class="form-control border-start-0 border-end-0 ps-2 bg-light" type="password"
                     name="password" placeholder="Masukan kata sandi" required />
                 <button class="btn btn-light border border-start-0 text-muted" type="button" id="togglePassword">
                     <i class="bi bi-eye-slash-fill"></i>
@@ -71,8 +71,8 @@
 
         {{-- TOMBOL LOGIN --}}
         <div class="d-grid mb-4">
-            <button type="submit" class="btn btn-primary py-2 fw-bold shadow-sm">
-                Masuk Sekarang <i class="bi bi-arrow-right ms-2"></i>
+            <button type="submit" class="btn btn-primary py-2 fw-medium shadow-sm">
+                Masuk
             </button>
         </div>
 
@@ -85,11 +85,9 @@
             </a>
         </div>
 
-        <div class="text-center mt-4">
-            <a href="/" class="text-decoration-none text-muted small hover-text-primary">
-                <i class="bi bi-arrow-left me-1"></i>Kembali ke Halaman Utama
-            </a>
-        </div>
+        <p class="mt-4 text-center text-muted small">
+            Kembali ke <a href="/" class="fw-semibold text-decoration-none">halaman utama</a>.
+        </p>
     </form>
 
     <script>
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index b376f05..b4e58fe 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -105,7 +105,13 @@ class="notification-item my-1 rounded-pill dropdown-item @if (!$item['read']) un
                     <li>
                         <a class="dropdown-item" href="{{ route('profile.index') }}">
                             <i class="bi bi-person-circle"></i>
-                            <span>{{ __('Profile') }}</span>
+                            <span>{{ __('Profil') }}</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="dropdown-item" href="{{ route('profile.edit') }}">
+                            <i class="bi bi-gear"></i>
+                            <span>{{ __('Pengaturan') }}</span>
                         </a>
                     </li>
                     <li>
diff --git a/resources/views/peminjaman/form.blade.php b/resources/views/peminjaman/form.blade.php
index 4214124..34bdda7 100644
--- a/resources/views/peminjaman/form.blade.php
+++ b/resources/views/peminjaman/form.blade.php
@@ -13,54 +13,72 @@
 
                     <h1 class="h2 fw-semibold mb-5 text-center">Form Peminjaman Offline</h1>
 
-                    {{-- Informasi Peminjam --}}
-                    <div class="card-body p-4">
-                        <div class="row g-3">
-                            {{-- Nama Lengkap (Muncul untuk semua role) --}}
-                            <div class="col-md-6">
-                                <label class="form-label text-muted small">Nama Lengkap</label>
-                                <p class="fw-semibold">{{ $user['nama_lengkap'] ?? $user->name ?? '-' }}</p>
+                    <div class="card border-0 shadow-sm mb-4">
+                        <div class="card-body p-4">
+                            {{-- Header Section: Judul & Tombol Edit --}}
+                            <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
+                                <h5 class="fw-bold text-primary m-0">
+                                    <i class="bi bi-person-lines-fill me-2"></i>Informasi Peminjam
+                                </h5>
+                                <a href="{{ route('profile.edit') }}" class="btn btn-sm btn-primary rounded-pill px-3">
+                                    <i class="bi bi-pencil-square me-2"></i>Edit Profil
+                                </a>
                             </div>
 
-                            {{-- KONDISI UNTUK GURU --}}
-                            @if(isset($user['role']) && strtolower($user['role']) == 'guru' || isset($user->role) &&
-                            strtolower($user->role) == 'guru')
-                            <div class="col-md-6">
-                                <label class="form-label text-muted small">NIP/NIK</label>
-                                <p class="fw-semibold">{{ $user['nip'] ?? $user->nip ?? '-' }}</p>
-                            </div>
-                            <div class="col-md-6">
-                                <label class="form-label text-muted small">Email</label>
-                                <p class="fw-semibold text-break">{{ $user['email'] ?? $user->email ?? '-' }}</p>
-                            </div>
-                            <div class="col-md-6">
-                                <label class="form-label text-muted small">Nomor Handphone</label>
-                                <p class="fw-semibold">{{ $user['nomor_hp'] ?? $user->nomor_hp ?? '-' }}</p>
-                            </div>
+                            <div class="row g-3">
+                                {{-- Nama Lengkap (Semua Role) --}}
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">Nama
+                                        Lengkap</label>
+                                    <p class="fw-semibold text-dark fs-5">{{ $user->nama_lengkap ?? $user->name }}</p>
+                                </div>
 
-                            {{-- KONDISI UNTUK SISWA --}}
-                            @else
-                            <div class="col-md-6">
-                                <label class="form-label text-muted small">NISN</label>
-                                <p class="fw-semibold">{{ $user['nisn'] ?? $user->nisn ?? '-' }}</p>
+                                {{-- KONDISI UNTUK GURU / PETUGAS --}}
+                                @if(in_array($user->role, ['guru', 'penjaga perpus']))
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">NIP / NIK</label>
+                                    <p class="fw-semibold text-dark">{{ $user->nip ?? '-' }}</p>
+                                </div>
+                                {{-- KONDISI UNTUK SISWA --}}
+                                @else
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">NISN</label>
+                                    <p class="fw-semibold text-dark">{{ $user->nisn ?? '-' }}</p>
+                                </div>
+                                @endif
+
+                                {{-- Email (Semua Role) --}}
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">Email</label>
+                                    <p class="fw-semibold text-dark">{{ $user->email }}</p>
+                                </div>
+
+                                {{-- Nomor HP (Semua Role) --}}
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">Nomor Handphone
+                                        (WA)</label>
+                                    <p class="fw-semibold text-dark">
+                                        @if($user->no_hp)
+                                        <span>{{ $user->no_hp
+                                            }}</span>
+                                        @else
+                                        <span class="text-muted fst-italic">- Belum diatur -</span>
+                                        @endif
+                                    </p>
+                                </div>
+
+                                {{-- Info Tambahan Khusus Siswa --}}
+                                @if($user->role == 'siswa')
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">Kelas</label>
+                                    <p class="fw-semibold text-dark">{{ $user->kelas ?? '-' }}</p>
+                                </div>
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">Golongan</label>
+                                    <p class="fw-semibold text-dark">{{ $user->golongan ?? '-' }}</p>
+                                </div>
+                                @endif
                             </div>
-                            <div class="col-md-6">
-                                <label class="form-label text-muted small">Email</label>
-                                <p class="fw-semibold text-break">{{ $user['email'] ?? $user->email ?? '-' }}</p>
-                            </div>
-                            <div class="col-md-6">
-                                <label class="form-label text-muted small">Nomor Handphone</label>
-                                <p class="fw-semibold">{{ $user['nomor_hp'] ?? $user->nomor_hp ?? '-' }}</p>
-                            </div>
-                            <div class="col-md-6">
-                                <label class="form-label text-muted small">Kelas</label>
-                                <p class="fw-semibold">{{ $user['kelas'] ?? $user->kelas ?? '-' }}</p>
-                            </div>
-                            <div class="col-md-6">
-                                <label class="form-label text-muted small">Golongan</label>
-                                <p class="fw-semibold">{{ $user['golongan'] ?? $user->golongan ?? '-' }}</p>
-                            </div>
-                            @endif
                         </div>
                     </div>
 
diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
index 7e40df7..aabf59d 100644
--- a/resources/views/profile/edit.blade.php
+++ b/resources/views/profile/edit.blade.php
@@ -1,32 +1,124 @@
-@section('page-title', 'Profil')
 <x-app-layout>
-    <div class="d-flex align-items-center mb-4">
-        <a href="{{ route('profile.index') }}" class="btn btn-outline-secondary me-3">
-            <i class="bi bi-arrow-left"></i>
-        </a>
-        <h1 class="h2 mb-0">Edit Profil</h1>
-    </div>
+    @section('page-title', 'Pengaturan Akun')
 
-    <div class="row justify-content-center">
-        <div class="col-lg-10">
-            <div class="card border-0 shadow-sm mb-4">
-                <div class="card-body p-4">
-                    @include('profile.partials.update-profile-information-form')
+    <div class="container py-4">
+        <div class="row gx-4">
+            
+            {{-- SIDEBAR MENU (KIRI) --}}
+            <div class="col-md-3 mb-4">
+                <div class="card border-0 shadow-sm sticky-top" style="top: 80px; z-index: 1;">
+                    <div class="card-body p-0">
+                        <div class="list-group list-group-flush rounded-3">
+                            {{-- Header --}}
+                            <div class="p-3 border-bottom bg-light">
+                                <h6 class="m-0 fw-bold text-dark">
+                                    <i class="bi bi-gear-fill me-2 text-primary"></i>Pengaturan
+                                </h6>
+                            </div>
+                            
+                            {{-- Menu Tabs --}}
+                            <div class="nav flex-column nav-pills p-2" id="v-pills-tab" role="tablist" aria-orientation="vertical">
+                                {{-- Tab Profil --}}
+                                <button class="nav-link active d-flex align-items-center mb-1 py-3 px-3" id="v-pills-profile-tab" 
+                                    data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab">
+                                    <i class="bi bi-person-badge me-3 fs-5"></i>
+                                    <div class="text-start">
+                                        <div class="fw-bold">Profil Saya</div>
+                                        <div class="small opacity-75">Nama, Email, & Hapus Akun</div>
+                                    </div>
+                                </button>
+
+                                {{-- Tab Keamanan --}}
+                                <button class="nav-link d-flex align-items-center py-3 px-3" id="v-pills-security-tab" 
+                                    data-bs-toggle="pill" data-bs-target="#v-pills-security" type="button" role="tab">
+                                    <i class="bi bi-shield-lock me-3 fs-5"></i>
+                                    <div class="text-start">
+                                        <div class="fw-bold">Keamanan</div>
+                                        <div class="small opacity-75">Kata Sandi & Proteksi</div>
+                                    </div>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
-            <div id="security" class="card border-0 shadow-sm mb-4">
-                <div class="card-body p-4">
-                    @include('profile.partials.update-password-form')
-                </div>
-            </div>
+            {{-- KONTEN KANAN (FORM) --}}
+            <div class="col-md-9">
+                <div class="tab-content" id="v-pills-tabContent" style="min-height: 500px;"> 
+                    {{-- PROFIL & HAPUS AKUN --}}
+                    <div class="tab-pane fade show active" id="v-pills-profile" role="tabpanel">
+                        
+                        {{-- Form Edit Profil --}}
+                        <div class="card border-0 shadow-sm mb-4">
+                            <div class="card-header bg-white py-3 border-bottom">
+                                <h6 class="m-0 fw-bold text-primary">Informasi Profil</h6>
+                            </div>
+                            <div class="card-body p-4">
+                                @include('profile.partials.update-profile-information-form')
+                            </div>
+                        </div>
+
+                        {{-- Form Hapus Akun --}}
+                        <div class="card border-0 shadow-sm border-danger-subtle">
+                            <div class="card-body p-4">
+                                <div class="d-flex align-items-start">
+                                    <div class="flex-shrink-0">
+                                        <i class="bi bi-exclamation-triangle-fill text-danger fs-3 me-3"></i>
+                                    </div>
+                                    <div>
+                                        <h6 class="fw-bold text-danger">Hapus Akun Permanen</h6>
+                                        <p class="text-muted small mb-3">
+                                            Tindakan ini tidak dapat dibatalkan. Semua data Anda akan hilang.
+                                        </p>
+                                        @include('profile.partials.delete-user-form')
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {{-- KEAMANAN (PASSWORD) --}}
+                    <div class="tab-pane fade" id="v-pills-security" role="tabpanel">
+                        <div class="card border-0 shadow-sm h-100"> 
+                            <div class="card-header bg-white py-3 border-bottom">
+                                <h6 class="m-0 fw-bold text-primary">Ganti Kata Sandi</h6>
+                            </div>
+                            <div class="card-body p-4">
+                                <div class="alert alert-info border-0 d-flex align-items-center mb-4">
+                                    <i class="bi bi-info-circle-fill me-2 fs-5"></i>
+                                    <div>
+                                        Gunakan password minimal 8 karakter dengan kombinasi huruf dan angka agar akun lebih aman.
+                                    </div>
+                                </div>
+                                
+                                @include('profile.partials.update-password-form')
+                            </div>
+                        </div>
+                    </div>
 
-            <div class="card border-danger shadow-sm">
-                <div class="card-body p-4">
-                    @include('profile.partials.delete-user-form')
                 </div>
             </div>
         </div>
     </div>
-
+    
+    @push('styles')
+    <style>
+        .nav-pills .nav-link {
+            color: #495057;
+            border-radius: 8px;
+            margin-bottom: 4px;
+            transition: all 0.2s ease-in-out;
+        }
+        .nav-pills .nav-link:hover {
+            background-color: #e9ecef;
+            color: #0d6efd;
+        }
+        .nav-pills .nav-link.active {
+            background-color: #0d6efd;
+            color: white;
+            box-shadow: 0 4px 6px rgba(13, 110, 253, 0.15);
+        }
+    </style>
+    @endpush
 </x-app-layout>
\ No newline at end of file
diff --git a/resources/views/profile/index.blade.php b/resources/views/profile/index.blade.php
index 99cbd5f..6aecc5a 100644
--- a/resources/views/profile/index.blade.php
+++ b/resources/views/profile/index.blade.php
@@ -70,7 +70,7 @@ class="btn btn-light text-start py-3 d-flex align-items-center">
                     </div>
                 </div>
 
-                <div class="card border-0">
+                {{-- <div class="card border-0">
                     <div class="card-body p-3 p-md-4">
                         <h5 class="fw-bold mb-3">Keamanan Akun</h5>
                         <p class="small text-muted mb-3">Ubah password Anda secara berkala untuk menjaga keamanan akun.
@@ -79,7 +79,7 @@ class="btn btn-light text-start py-3 d-flex align-items-center">
                             <i class="bi bi-shield-lock me-2"></i>Ubah Password
                         </a>
                     </div>
-                </div>
+                </div> --}}
             </div>
         </div>
 
@@ -117,7 +117,7 @@ class="btn btn-outline-primary rounded-pill ms-sm-auto w-100 w-sm-auto">
                             </div>
                             <div class="col-sm-6">
                                 <small class="text-muted d-block mb-1">Nomor HP</small>
-                                <p class="fw-semibold mb-0">{{ $user->nomor_hp ?? '-' }}</p>
+                                <p class="fw-semibold mb-0">{{ $user->no_hp ?? '-' }}</p>
                             </div>
                         </div>
                     </div>
@@ -207,7 +207,7 @@ class="btn btn-outline-primary rounded-pill ms-sm-auto w-100 w-sm-auto">
                             </div>
                             <div class="col-sm-6">
                                 <small class="text-muted d-block mb-1">Nomor HP</small>
-                                <p class="fw-semibold mb-0">{{ $user->nomor_hp ?? '-' }}</p>
+                                <p class="fw-semibold mb-0">{{ $user->no_hp ?? '-' }}</p>
                             </div>
                             <div class="col-sm-6">
                                 <small class="text-muted d-block mb-1">Kelas</small>
diff --git a/resources/views/profile/partials/personal-activities.blade.php b/resources/views/profile/partials/personal-activities.blade.php
index ffc0917..1862ad0 100644
--- a/resources/views/profile/partials/personal-activities.blade.php
+++ b/resources/views/profile/partials/personal-activities.blade.php
@@ -34,11 +34,11 @@
     </div>
 </div>
 
-{{-- Card Keamanan Akun --}}
+{{-- Card Keamanan Akun
 <div class="card border-0">
     <div class="card-body p-4">
         <h5 class="fw-bold mb-3">Keamanan Akun</h5>
         <p class="small text-muted">Ubah password Anda secara berkala.</p>
         <a href="{{ route('profile.edit') }}" class="btn btn-outline-secondary rounded-pill">Ubah Password</a>
     </div>
-</div>
\ No newline at end of file
+</div> --}}
\ No newline at end of file
diff --git a/resources/views/profile/partials/update-profile-information-form.blade.php b/resources/views/profile/partials/update-profile-information-form.blade.php
index fea16f4..b50d66f 100644
--- a/resources/views/profile/partials/update-profile-information-form.blade.php
+++ b/resources/views/profile/partials/update-profile-information-form.blade.php
@@ -19,10 +19,10 @@
 
         {{-- Bagian Nama Lengkap --}}
         <div class="mb-3">
-            <label for="nama_lengkap" class="form-label">{{ __('Nama Lengkap') }}</label>
-            <input id="nama_lengkap" name="nama_lengkap" type="text" class="form-control @error('nama_lengkap') is-invalid @enderror"
-                value="{{ old('nama_lengkap', $user->nama_lengkap) }}" required autofocus autocomplete="name">
-            @error('nama_lengkap')
+            <label for="name" class="form-label">{{ __('Nama Lengkap') }}</label>
+            <input id="name" name="name" type="text" class="form-control @error('name') is-invalid @enderror"
+                value="{{ old('name', $user->name) }}" required autofocus autocomplete="name">
+            @error('name')
                 <div class="invalid-feedback">{{ $message }}</div>
             @enderror
         </div>
@@ -54,18 +54,19 @@ class="form-control @error('email') is-invalid @enderror" value="{{ old('email',
             @endif
         </div>
         
-        {{-- Bagian Nomor Telepon --}}
-        @if ($user->nomor_hp)
-            <div class="mb-3">
-                <label for="nomor_hp" class="form-label">{{ __('Nomor Telepon (WA)') }}</label>
-                <input id="nomor_hp" name="nomor_hp" type="text" class="form-control @error('nomor_hp') is-invalid @enderror"
-                    value="{{ old('nomor_hp', $user->nomor_hp) }}" required>
-                @error('nomor_hp')
-                    <div class="invalid-feedback">{{ $message }}</div>
-                @enderror
-                <small class="text-muted">*Nomor telepon wajib disi</small>
+        {{-- Bagian Nomor Telepon (WA) --}}
+        <div class="mb-3">
+            <label for="no_hp" class="form-label">{{ __('Nomor Telepon (WA)') }}</label>
+            <div class="input-group">
+                <span class="input-group-text bg-light text-muted"><i class="bi bi-telephone"></i></span>
+                <input id="no_hp" name="no_hp" type="text" class="form-control @error('no_hp') is-invalid @enderror"
+                    value="{{ old('no_hp', $user->no_hp) }}" placeholder="Contoh: 081234567890">
             </div>
-        @endif
+            @error('no_hp')
+                <div class="invalid-feedback d-block">{{ $message }}</div>
+            @enderror
+            <small class="text-muted d-block mt-1">*Nomor ini digunakan untuk verifikasi & notifikasi.</small>
+        </div>
         
         <hr class="my-4">
 
@@ -89,9 +90,9 @@ class="form-control @error('email') is-invalid @enderror" value="{{ old('email',
         @else
             {{-- Untuk Guru atau Penjaga Perpus --}}
             <div class="mb-3">
-                <label for="nip" class="form-label">NIP (Nomor Induk Pegawai)</label>
+                <label for="nip" class="form-label">NIP/NIK</label>
                 <input id="nip" type="text" class="form-control" value="{{ $user->nip }}" readonly disabled>
-                <small class="text-muted">NIP tidak dapat diubah.</small>
+                <small class="text-muted">NIP/NIK tidak dapat diubah.</small>
             </div>
         @endif
 
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 23f2787..b866bd5 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -61,7 +61,7 @@ class="btn btn-primary dropdown-toggle fw-semibold w-100 d-flex align-items-cent
                             type="button" data-bs-toggle="dropdown" aria-expanded="false"
                             style="border-radius: 0.6rem; padding: 0.5rem 1.25rem;">
                             <i class="bi bi-person-circle me-2"></i>
-                            <span>Masuk / Daftar</span>
+                            <span>Masuk</span>
                         </button>
                         <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 mt-2 p-2"
                             style="border-radius: 12px; min-width: 250px;">
@@ -378,10 +378,10 @@ class="bi bi-star-half"></i>
                 <div class="col-md-3">
                     <h6 class="text-white fw-bold mb-3">Hubungi Kami</h6>
                     <ul class="list-unstyled small">
-                        <li class="mb-2 text-white-50"><i class="bi bi-envelope-fill me-2"></i> admin@digipus.go.id
+                        <li class="mb-2 text-white-50"><i class="bi bi-envelope-fill me-2"></i> smpn1bagor@yahoo.co.id
                         </li>
-                        <li class="mb-2 text-white-50"><i class="bi bi-telephone-fill me-2"></i> (021) 1234 5678</li>
-                        <li class="mb-2 text-white-50"><i class="bi bi-geo-alt-fill me-2"></i> [Alamat Pustaka Anda]
+                        <li class="mb-2 text-white-50"><i class="bi bi-telephone-fill me-2"></i> (+62) 856-0642-8357</li>
+                        <li class="mb-2 text-white-50"><i class="bi bi-geo-alt-fill me-2"></i> Banaran Kulon, Kec. Bagor, Kabupaten Nganjuk, Jawa Timur 64461
                         </li>
                     </ul>
                 </div>