diff --git a/app/Http/Controllers/DashboardRplController.php b/app/Http/Controllers/DashboardRplController.php
index 7991693..e12937e 100644
--- a/app/Http/Controllers/DashboardRplController.php
+++ b/app/Http/Controllers/DashboardRplController.php
@@ -90,6 +90,19 @@ public function index(Request $request)
         $persentaseLearning = $totalAktivitas > 0 ? ($jumlahDataLearning / $totalAktivitas) * 100 : 0;
         $persentaseProject = $totalAktivitas > 0 ? ($jumlahDataProject / $totalAktivitas) * 100 : 0;
 
+        $chartData = [
+            'labels' => ['Learning', 'Project'],
+            'datasets' => [
+                [
+                    'data' => [$persentaseLearning, $persentaseProject],
+                    'backgroundColor' => ['#FF9F43', '#42A5F5'],
+                    'hoverBackgroundColor' => ['#FF7043', '#1E88E5']
+                ]
+            ]
+        ];
+        
+        $activityData = $jumlahAktivitasLearning;
+        
         return view('dashboardrpl', compact(
             'jumlahDataProject',
             'jumlahDataLearning',
@@ -97,7 +110,10 @@ public function index(Request $request)
             'persentaseLearning',
             'persentaseProject',
             'aktivitasNames',
-            'siswaData'
+            'siswaData',
+            'chartData',
+            'activityData'
         ));
+        
     }
 }
diff --git a/resources/views/dashboard_siswa.blade.php b/resources/views/dashboard_siswa.blade.php
index 24416fe..8e4ddbc 100644
--- a/resources/views/dashboard_siswa.blade.php
+++ b/resources/views/dashboard_siswa.blade.php
@@ -5,13 +5,15 @@
         <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
         <style>
-            #dashboard-content {
+            #dashboard-content,
+            #detail-content {
                 transition: opacity 0.3s ease-in-out;
                 opacity: 0;
                 visibility: hidden;
             }
 
-            #dashboard-content.show {
+            #dashboard-content.show,
+            #detail-content.show {
                 opacity: 1;
                 visibility: visible;
             }
@@ -36,7 +38,7 @@ class="btn btn-sm btn-outline-info d-flex align-items-center me-2">
                             <div class="d-flex">
                                 <button id="show-detail-content" type="button"
                                     class="btn btn-sm btn-outline-dark d-flex align-items-center me-2">
-                                    <i class="fas fa-chart-pie me-1"></i> Detail
+                                    <i class="fas fa-info-circle me-1"></i> Detail
                                 </button>
                             </div>
                         </div>
@@ -46,8 +48,7 @@ class="btn btn-sm btn-outline-dark d-flex align-items-center me-2">
                 <hr class="my-3">
                 {{-- Detail --}}
                 <div class="container mt-4" id="detail-content">
-                    <h4 class="text-left mb-4 font-weaight-bold">Statistik Aktivitas Selama PKL</h4>
-
+                    <h4>Detail</h4>
                     <div class="row g-3">
                         <!-- Card Total Aktivitas Dikantor -->
                         <div class="col-md-4">
@@ -127,18 +128,9 @@ class="btn btn-sm btn-outline-dark d-flex align-items-center me-2">
                     </div>
                 </div>
 
-
-
-                <div class="row">
-                    <div class="col-md-12 mt-5">
-                        <h4 class="font-weight-bold mb-3 text-center">Grafik Persentase Aktivitas Dikantor dan Keluar
-                            Dengan
-                            Teknisi</h4>
-                    </div>
-                </div>
                 {{-- Diagram --}}
                 <div class="d-flex row mt-4" id="dashboard-content" style="display: none;">
-                    <!-- Card 1: Untuk Diagram Lingkaran dan Batang DiKantor -->
+                    <h4>Diagram</h4>
                     <div class="col-md-12">
                         <div class="card shadow-sm border h-100">
                             <div class="card-body py-4">
@@ -334,7 +326,6 @@ function formatTime(seconds) {
             }
         });
 
-        // Pie Chart Dikantor
         // Pie Chart Dikantor
         const ctxPieDikantor = document.getElementById('chart-pie-dikantor').getContext('2d');
         const gradientColorsPieDikantor = [];
@@ -445,31 +436,27 @@ function formatTime(seconds) {
             }
         });
         document.getElementById('show-dashboard-content').addEventListener('click', function() {
-            const dashboardContent = document.getElementById('dashboard-content');
-            if (dashboardContent.style.display === 'none' || dashboardContent.style.display === '') {
-                dashboardContent.style.display = 'block'; 
-            } else {
-                dashboardContent.style.display = 'none'; 
-            }
-        });
+    const dashboardContent = document.getElementById('dashboard-content');
+    const detailContent = document.getElementById('detail-content');
 
-        document.getElementById('show-dashboard-content').addEventListener('click', function() {
-            const dashboardContent = document.getElementById('dashboard-content');
-            dashboardContent.classList.toggle('show');
-        });
-        document.getElementById('show-detail-content').addEventListener('click', function() {
-            const detailContent = document.getElementById('detail-content');
-            if (detailContent.style.display === 'none' || detailContent.style.display === '') {
-                detailContent.style.display = 'block'; 
-            } else {
-                detailContent.style.display = 'none'; 
-            }
-        });
+    // Tampilkan dashboard content dan sembunyikan detail content
+    dashboardContent.style.display = 'block';
+    dashboardContent.classList.add('show');
+    detailContent.style.display = 'none';
+    detailContent.classList.remove('show');
+});
+
+document.getElementById('show-detail-content').addEventListener('click', function() {
+    const detailContent = document.getElementById('detail-content');
+    const dashboardContent = document.getElementById('dashboard-content');
+
+    // Tampilkan detail content dan sembunyikan dashboard content
+    detailContent.style.display = 'block';
+    detailContent.classList.add('show');
+    dashboardContent.style.display = 'none';
+    dashboardContent.classList.remove('show');
+});
 
-        document.getElementById('show-detail-content').addEventListener('click', function() {
-            const detailContent = document.getElementById('detail-content');
-            dashboardContent.classList.toggle('show');
-        });
     </script>
 
 </x-app-layout>
diff --git a/resources/views/dashboardrpl.blade.php b/resources/views/dashboardrpl.blade.php
index a58f250..15c509f 100644
--- a/resources/views/dashboardrpl.blade.php
+++ b/resources/views/dashboardrpl.blade.php
@@ -1,22 +1,39 @@
 <x-app-layout>
     <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg">
-
-        <x-app.navbar/>
-
+        <x-app.navbar />
         <div class="container-fluid py-4 px-5">
-            <h3 class="font-weight-bold mb-0">Hi, {{ auth()->user()->username }}</h3>
-            <p class="text-muted mb-0">Berikut data aktivitas Anda!</p>
-            
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="d-md-flex align-items-center justify-content-between mx-2">
+                        <div>
+                            <h3 class="font-weight-bold mb-0">Hi, {{ auth()->user()->username }}</h3>
+                            <p class="text-muted mb-0">Berikut ini data aktivitas semua siswa pkl</p>
+                        </div>
+                        <div class="d-flex">
+                            <button id="show-diagram" type="button"
+                                class="btn btn-sm btn-outline-info d-flex align-items-center me-2">
+                                <i class="fas fa-chart-pie me-1"></i> Diagram
+                            </button>
+                            <button id="show-detail" type="button"
+                                class="btn btn-sm btn-outline-dark d-flex align-items-center">
+                                <i class="fas fa-list-alt me-1"></i> Detail
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <hr class="my-3">
 
-            <div class="container mt-4">
+            <!-- Konten Detail -->
+            <div id="detail-content" class="container mt-4">
                 <h4 class="text-left mb-4 font-weight-bold">Statistik Aktivitas Selama PKL</h4>
-
                 <div class="row g-3">
-                    <!-- Card Total Aktivitas Dikantor -->
+                    <!-- Card Total Aktivitas Learning -->
                     <div class="col-md-4">
                         <div class="card text-center shadow border-0">
-                            <div class="card-header text-white" style="background: linear-gradient(45deg, #ff9f43, #ff6f61);">
+                            <div class="card-header text-white"
+                                style="background: linear-gradient(45deg, #ff9f43, #ff6f61);">
                                 <h6 class="text-white">Total Aktivitas Learning</h6>
                             </div>
                             <div class="card-body">
@@ -28,7 +45,8 @@
                     <!-- Card Total Aktivitas Dengan Teknisi -->
                     <div class="col-md-4">
                         <div class="card text-center shadow border-0">
-                            <div class="card-header text-white" style="background: linear-gradient(45deg, #42a5f5, #5c6bc0);">
+                            <div class="card-header text-white"
+                                style="background: linear-gradient(45deg, #42a5f5, #5c6bc0);">
                                 <h6 class="text-white">Total Aktivitas Project</h6>
                             </div>
                             <div class="card-body">
@@ -40,13 +58,14 @@
                     <!-- Card Total Waktu -->
                     <div class="col-md-4">
                         <div class="card text-center shadow border-0">
-                            <div class="card-header text-white" style="background: linear-gradient(45deg, #66bb6a, #26a69a);">
+                            <div class="card-header text-white"
+                                style="background: linear-gradient(45deg, #66bb6a, #26a69a);">
                                 <h6 class="text-white">Total Jumlah Waktu</h6>
                             </div>
                             <div class="card-body">
                                 <h5 class="text-success font-weight-bold">
                                     @php
-                                        $totalSeconds = abs($totalWaktu); 
+                                        $totalSeconds = abs($totalWaktu);
                                         $hours = floor($totalSeconds / 3600);
                                         $minutes = floor(($totalSeconds % 3600) / 60);
                                         $seconds = $totalSeconds % 60;
@@ -57,7 +76,6 @@
                         </div>
                     </div>
                 </div>
-
                 <!-- Progress Bars -->
                 <div class="mt-5">
                     <h6 class="font-weight-bold">Perbandingan Aktivitas Learning dan Project</h6>
@@ -66,11 +84,9 @@
                     <div class="mb-4">
                         <small>Aktivitas Learning</small>
                         <div class="progress" style="height: 20px;">
-                            <div class="progress-bar" role="progressbar" 
-                                style="width: {{ $persentaseLearning }}%; background: linear-gradient(90deg, #ff9f43, #ff6f61); height: 20px" 
-                                aria-valuenow="{{ $persentaseLearning }}" 
-                                aria-valuemin="0" 
-                                aria-valuemax="100">
+                            <div class="progress-bar" role="progressbar"
+                                style="width: {{ $persentaseLearning }}%; background: linear-gradient(90deg, #ff9f43, #ff6f61); height: 20px"
+                                aria-valuenow="{{ $persentaseLearning }}" aria-valuemin="0" aria-valuemax="100">
                                 {{ number_format($persentaseLearning, 2) }}%
                             </div>
                         </div>
@@ -80,38 +96,27 @@
                     <div>
                         <small>Aktivitas Project</small>
                         <div class="progress" style="height: 20px;">
-                            <div class="progress-bar" role="progressbar" 
-                                style="width: {{ $persentaseProject }}%; background: linear-gradient(90deg, #42a5f5, #5c6bc0); height: 20px" 
-                                aria-valuenow="{{ $persentaseProject }}" 
-                                aria-valuemin="0" 
-                                aria-valuemax="100">
+                            <div class="progress-bar" role="progressbar"
+                                style="width: {{ $persentaseProject }}%; background: linear-gradient(90deg, #42a5f5, #5c6bc0); height: 20px"
+                                aria-valuenow="{{ $persentaseProject }}" aria-valuemin="0" aria-valuemax="100">
                                 {{ number_format($persentaseProject, 2) }}%
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            
-            <div class="row">
-                <div class="col-md-12 mt-5">
-                    <h4 class="font-weight-bold mb-3 text-center">Grafik Persentase Aktivitas Dikantor dan Keluar
-                        Dengan
-                        Teknisi</h4>
-                </div>
-            </div>
-            {{-- Diagram --}}
-            <div class="d-flex row mt-4" id="dashboard-content" style="display: none;">
-                <!-- Card 1: Untuk Diagram Lingkaran dan Batang DiKantor -->
+
+            <!-- Konten Diagram -->
+            <div class="row mt-4" id="dashboard-content" style="display: none;">
                 <div class="col-md-12">
                     <div class="card shadow-sm border h-100">
                         <div class="card-body py-4">
                             <div class="row w-75" style="margin: auto;">
-                                <!-- Diagram Lingkaran DiKantor -->
+                                <!-- Diagram Lingkaran Learning -->
                                 <div class="col-md-6">
                                     <h6 class="text-center mb-3">Persentase Waktu Per Learning</h6>
                                     <div class="chart">
-                                        <canvas id="chart-pie-dikantor" class="chart-canvas"
-                                            height="240"></canvas>
+                                        <canvas id="chart-pie-Learning" class="chart-canvas" height="240"></canvas>
                                     </div>
                                     <div class="text-center mt-3">
                                         <button id="toggle-legend-dikantor" class="btn btn-sm btn-outline-info">
@@ -119,44 +124,19 @@
                                         </button>
                                     </div>
                                 </div>
-                                <!-- Diagram Batang DiKantor -->
-                                <div class="col-md-6 mt-1">
-                                    <h6 class="text-center mb-3">Jumlah Aktivitas Project</h6>
-                                    <div class="chart">
-                                        <canvas id="chart-bar-dikantor" class="chart-canvas" height="519"
-                                            width="649"
-                                            style="margin-top: 4rem; display: block; box-sizing: border-box; height: 380px; width: 481px;"></canvas>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Card 2: Untuk Diagram Lingkaran dan Batang Dengan Teknisi -->
-                <div class="col-md-12 mt-3">
-                    <div class="card shadow-sm border h-100">
-                        <div class="card-body py-4">
-                            <div class="row w-75" style="margin: auto">
-                                <!-- Diagram Lingkaran Dengan Teknisi -->
+                                <!-- Diagram Lingkaran Project -->
                                 <div class="col-md-6">
-                                    <h6 class="text-center mb-3">Persentase Waktu Per Aktivitas Dengan Teknisi</h6>
+                                    <h6 class="text-center mb-3">Persentase Waktu Per Project</h6>
                                     <div class="chart">
                                         <canvas id="chart-pie" class="chart-canvas" height="240"></canvas>
                                     </div>
                                     <div class="text-center mt-3">
-                                        <button id="toggle-legend" class="btn btn-sm btn-outline-info">
+                                        <button id="toggle-legend-dikantor" class="btn btn-sm btn-outline-info">
                                             <i class="fas fa-info-circle me-1"></i> Detail
                                         </button>
                                     </div>
                                 </div>
-                                <!-- Diagram Batang Dengan Teknisi -->
-                                <div class="col-md-6 mt-1">
-                                    <h6 class="text-center mb-3">Jumlah Aktivitas Dengan Teknisi</h6>
-                                    <div class="chart" style="margin-top: 5rem;">
-                                        <canvas id="chart-bar" class="chart-canvas" height="240"></canvas>
-                                    </div>
-                                </div>
+
                             </div>
                         </div>
                     </div>
@@ -165,92 +145,31 @@
         </div>
     </main>
 
-        {{-- Chart.js Script --}}
-        <script>
-            // Format time utility
-            function formatTime(seconds) {
-                seconds = Math.abs(seconds);
-                const h = Math.floor(seconds / 3600);
-                const m = Math.floor((seconds % 3600) / 60);
-                const s = seconds % 60;
-                return `${h}h ${m}m ${s}s`;
-            }
-        
-            // Data for Pie Chart
-            const ctxPie = document.getElementById('chart-pie').getContext('2d');
-            const gradientColorsPie = [];
-            const colors = [
-                'rgba(75, 192, 192, 1)', 'rgba(255, 99, 132, 1)', 'rgba(255, 159, 64, 1)', 'rgba(153, 102, 255, 1)',
-                'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(231, 233, 237, 1)', 'rgba(255, 99, 99, 1)',
-            ];
-        
-            colors.forEach((color) => {
-                const gradient = ctxPie.createLinearGradient(0, 0, 0, 400);
-                gradient.addColorStop(0, color);
-                gradient.addColorStop(1, color.replace('1)', '0.2)'));
-                gradientColorsPie.push(gradient);
-            });
-        
-            const pieChart = new Chart(ctxPie, {
-                type: 'doughnut',
-                data: {
-                    labels: @json($aktivitasNames),
-                    datasets: [{
-                        data: @json($siswaData->pluck('totalTime')),
-                        backgroundColor: gradientColorsPie,
-                        hoverOffset: 10
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    cutout: '70%',
-                    animation: {
-                        animateRotate: true,
-                        animateScale: true,
-                        duration: 1500
-                    },
-                    plugins: {
-                        tooltip: {
-                            callbacks: {
-                                label: function(tooltipItem) {
-                                    const data = tooltipItem.dataset.data;
-                                    const currentValue = data[tooltipItem.dataIndex];
-                                    return `${tooltipItem.label}: (${formatTime(currentValue)})`;
-                                }
-                            }
-                        }
-                    }
-                }
-            });
-        
-            // Bar Chart
-            const ctxBar = document.getElementById('chart-bar').getContext('2d');
-            const gradientBar = ctxBar.createLinearGradient(0, 0, 0, 400);
-            gradientBar.addColorStop(0, 'rgba(54, 162, 235, 1)');
-            gradientBar.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
-        
-            const barChart = new Chart(ctxBar, {
-                type: 'bar',
-                data: {
-                    labels: @json($aktivitasNames),
-                    datasets: [{
-                        label: 'Total Aktivitas',
-                        data: @json($siswaData->pluck('totalTime')),
-                        backgroundColor: gradientBar,
-                        borderWidth: 2
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    scales: {
-                        y: {
-                            beginAtZero: true
-                        }
-                    }
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Ambil elemen tombol dan konten
+            const showDiagramButton = document.getElementById('show-diagram');
+            const showDetailButton = document.getElementById('show-detail');
+            const dashboardContent = document.getElementById('dashboard-content');
+            const detailContent = document.getElementById('detail-content');
+
+            // Fungsi untuk menampilkan dan menyembunyikan elemen
+            function toggleContent(showDiagram) {
+                if (showDiagram) {
+                    dashboardContent.style.display = 'block'; // Tampilkan diagram
+                    detailContent.style.display = 'none'; // Sembunyikan detail
+                } else {
+                    dashboardContent.style.display = 'none'; // Sembunyikan diagram
+                    detailContent.style.display = 'block'; // Tampilkan detail
                 }
-            });
-        </script>
-        
-    
+            }
+
+            // Tambahkan event listener ke tombol
+            showDiagramButton.addEventListener('click', () => toggleContent(true));
+            showDetailButton.addEventListener('click', () => toggleContent(false));
 
+            // Inisialisasi: tampilkan detail secara default
+            toggleContent(false);
+        });
+    </script>
 </x-app-layout>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 9ef1546..45a2223 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -2,6 +2,7 @@
 <html lang="en">
 
 <head>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     @if (config('app.is_demo'))
diff --git a/resources/views/monitoring_siswa/siswa.blade.php b/resources/views/monitoring_siswa/siswa.blade.php
index 1affc10..8471717 100644
--- a/resources/views/monitoring_siswa/siswa.blade.php
+++ b/resources/views/monitoring_siswa/siswa.blade.php
@@ -89,7 +89,7 @@ class="form-control" value="{{ request('waktu_selesai') }}"
                                     </div>
 
                                     <!-- Reset Button -->
-                                    <div class="col-4 col-md-1 d-flex justify-content-center align-items-end">
+                                    <div class="col-5 col-md-1 d-flex justify-content-center align-items-end">
                                         <button type="button" class="btn btn-outline-secondary"
                                             onclick="window.location.href='{{ route('siswa.index') }}'"
                                             style="margin-top: 30px">Reset</button>
diff --git a/resources/views/monitoring_siswa/siswarpl.blade.php b/resources/views/monitoring_siswa/siswarpl.blade.php
index 9591ca4..ee52589 100644
--- a/resources/views/monitoring_siswa/siswarpl.blade.php
+++ b/resources/views/monitoring_siswa/siswarpl.blade.php
@@ -36,7 +36,7 @@ class="btn btn-sm btn-dark btn-icon d-flex align-items-center me-2"
                         <div class="card-body px-0 py-0">
                             <div class="border-bottom col-md-12 py-3 px-3 d-sm-flex align-items-center">
                                 <form method="GET" action="{{ route('siswarpl.index') }}" id="filterForm"
-                                    class="p-3 mx-0 border rounded shadow-sm w-100 gap-3 d-flex flex-wrap align-items-start">
+                                    class="p-2 mx-0 border rounded shadow-sm w-100 gap-3 d-flex flex-wrap align-items-start">
                                     <!-- Status Filter -->
                                     <div class="col-12 col-md-2 mb-1">
                                         <label for="statusFilter" class="form-label">Status</label>
@@ -91,9 +91,9 @@ class="form-control" value="{{ request('waktu_selesai') }}"
 
 
                                     <!-- Reset Button -->
-                                    <div class="col-4 col-md-1 d-flex justify-content-center align-items-end">
+                                    <div class="col-5 col-md-1 d-flex justify-content-center align-items-end">
                                         <button type="button" class="btn btn-outline-secondary"
-                                            onclick="window.location.href='{{ route('siswa.index') }}'"
+                                            onclick="window.location.href='{{ route('siswarpl.index') }}'"
                                             style="margin-top: 30px">Reset</button>
                                     </div>
                                 </form>