diff --git a/resources/views/admin/guru/index.blade.php b/resources/views/admin/guru/index.blade.php
index 811a251..3d280fe 100644
--- a/resources/views/admin/guru/index.blade.php
+++ b/resources/views/admin/guru/index.blade.php
@@ -1,13 +1,27 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="bg-white shadow-md rounded-lg p-6">
-    <div class="flex justify-between items-center mb-4">
-        <h1 class="text-xl font-semibold text-gray-700">👨‍🏫 Data Guru</h1>
-        <a href="{{ route('guru.create') }}" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">+ Tambah Guru</a>
+<div class="bg-white shadow-md rounded-2xl border border-[#e1f0e8] overflow-hidden">
+    <!-- Header Section -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-gradient-to-br from-green-600 to-teal-700 p-8 shadow-inner relative overflow-hidden">
+        <!-- Decorative inner pattern -->
+        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 mix-blend-overlay"></div>
+        <div class="relative z-10">
+            <h1 class="text-2xl font-extrabold text-white flex items-center drop-shadow">
+                <span class="bg-white/20 text-white p-2.5 rounded-xl mr-4 backdrop-blur-md"><i class="fas fa-chalkboard-teacher"></i></span> Data Guru
+            </h1>
+            <p class="text-green-50 mt-2 ml-14 font-medium drop-shadow-sm">Kelola informasi tenaga pengajar PAUD.</p>
+        </div>
+        <div class="mt-6 md:mt-0 relative z-10">
+            <a href="{{ route('guru.create') }}" class="inline-flex items-center gap-2 bg-white text-green-700 px-6 py-3 rounded-xl hover:bg-green-50 font-bold text-sm shadow-lg transition-all hover:-translate-y-1">
+                <i class="fas fa-plus"></i> Tambah Guru
+            </a>
+        </div>
     </div>
 
-    <table class="w-full border-collapse">
+    <div class="p-6">
+        <div class="overflow-x-auto">
+            <table class="w-full border-collapse">
         <thead>
             <tr class="bg-green-600 text-white text-left">
                 <th class="p-2">#</th>
@@ -51,5 +65,7 @@
             @endforelse
         </tbody>
     </table>
+    </div>
+    </div>
 </div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/admin/pengumuman/index.blade.php b/resources/views/admin/pengumuman/index.blade.php
index f5777a4..c713f81 100644
--- a/resources/views/admin/pengumuman/index.blade.php
+++ b/resources/views/admin/pengumuman/index.blade.php
@@ -1,13 +1,27 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="bg-white shadow-md rounded p-6">
-    <div class="flex justify-between items-center mb-4">
-        <h1 class="text-xl font-semibold">📢 Pengumuman</h1>
-        <a href="{{ route('pengumuman.create') }}" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">+ Tambah</a>
+<div class="bg-white shadow-md rounded-2xl border border-[#e1f0e8] overflow-hidden">
+    <!-- Header Section -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-gradient-to-br from-green-600 to-teal-700 p-8 shadow-inner relative overflow-hidden">
+        <!-- Decorative inner pattern -->
+        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 mix-blend-overlay"></div>
+        <div class="relative z-10">
+            <h1 class="text-2xl font-extrabold text-white flex items-center drop-shadow">
+                <span class="bg-white/20 text-white p-2.5 rounded-xl mr-4 backdrop-blur-md"><i class="fas fa-bullhorn"></i></span> Menu Pengumuman
+            </h1>
+            <p class="text-green-50 mt-2 ml-14 font-medium drop-shadow-sm">Kelola informasi dan pengumuman untuk seluruh pihak.</p>
+        </div>
+        <div class="mt-6 md:mt-0 relative z-10">
+            <a href="{{ route('pengumuman.create') }}" class="inline-flex items-center gap-2 bg-white text-green-700 px-6 py-3 rounded-xl hover:bg-green-50 font-bold text-sm shadow-lg transition-all hover:-translate-y-1">
+                <i class="fas fa-plus"></i> Tambah Pengumuman
+            </a>
+        </div>
     </div>
 
-    <table class="w-full border-collapse">
+    <div class="p-6">
+        <div class="overflow-x-auto">
+            <table class="w-full border-collapse">
         <thead>
             <tr class="bg-green-600 text-white">
                 <th class="p-2">#</th>
@@ -42,5 +56,7 @@
             @endforeach
         </tbody>
     </table>
+    </div>
+    </div>
 </div>
 @endsection
diff --git a/resources/views/admin/penjemputan/index.blade.php b/resources/views/admin/penjemputan/index.blade.php
index 5d58332..3356573 100644
--- a/resources/views/admin/penjemputan/index.blade.php
+++ b/resources/views/admin/penjemputan/index.blade.php
@@ -1,59 +1,57 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container mx-auto px-4">
-    
-    <div class="flex flex-col md:flex-row justify-between items-center mb-6 mt-6">
+<div class="bg-white shadow-md rounded-2xl p-6 border border-[#e1f0e8]">
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b border-[#e1f0e8] pb-4">
         <div>
-            <h1 class="text-2xl font-bold text-gray-800">🛵 Log Penjemputan</h1>
-            <p class="text-gray-500 text-sm mt-1">Daftar riwayat penjemputan siswa (Real-time).</p>
+            <h1 class="text-2xl font-extrabold text-gray-800 flex items-center">
+                <span class="bg-green-100 text-green-700 p-2 rounded-xl mr-3"><i class="fas fa-bus"></i></span> Log Penjemputan
+            </h1>
+            <p class="text-sm text-gray-500 mt-1 ml-12">Daftar riwayat penjemputan siswa (Real-time).</p>
         </div>
         
-        <div class="flex gap-3">
-            <div class="bg-blue-50 text-blue-700 px-4 py-2 rounded-lg text-sm font-semibold border border-blue-100">
-                Hari Ini: {{ $logs->where('waktu_jemput', '>=', now()->today())->count() }}
-            </div>
+        <div class="mt-4 md:mt-0 flex items-center bg-green-50 text-green-800 px-4 py-2.5 rounded-xl font-bold text-sm border border-green-100 shadow-sm">
+            <i class="fas fa-calendar-day mr-2 text-green-500"></i> Hari Ini: {{ $logs->where('waktu_jemput', '>=', now()->today())->count() }}
         </div>
     </div>
 
-    <div class="bg-white shadow-md rounded-xl overflow-hidden border border-gray-100">
-        <div class="overflow-x-auto">
-            <table class="w-full text-left border-collapse">
-                <thead>
-                    <tr class="bg-gray-100 text-gray-600 uppercase text-xs tracking-wider border-b border-gray-200">
-                        <th class="p-4 font-bold">Waktu Jemput</th>
-                        <th class="p-4 font-bold">Nama Siswa</th>
-                        <th class="p-4 font-bold">Nama Penjemput</th>
-                        <th class="p-4 font-bold text-center">Status Hubungan</th>
-                        <th class="p-4 font-bold text-center">Aksi</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-50">
-                    @forelse($logs as $log)
-                    <tr class="hover:bg-blue-50 transition duration-150 group">
-                        <td class="p-4 whitespace-nowrap">
-                            <div class="text-gray-800 font-semibold">
-                                {{ \Carbon\Carbon::parse($log->waktu_jemput)->timezone('Asia/Jakarta')->format('H:i') }} WIB
-                            </div>
-                            <div class="text-xs text-gray-500">
-                                {{ \Carbon\Carbon::parse($log->waktu_jemput)->timezone('Asia/Jakarta')->format('d M Y') }}
-                            </div>
-                        </td>
-                        
-                        <td class="p-4">
-                            <div class="font-bold text-gray-800">{{ $log->siswa->nama_siswa ?? 'Siswa Terhapus' }}</div>
-                            <div class="text-xs text-gray-500">NIS: {{ $log->siswa->nis ?? '-' }}</div>
-                        </td>
+    <div class="overflow-x-auto">
+        <table class="w-full text-left border-collapse">
+            <thead>
+                <tr class="bg-gray-100 text-gray-600 uppercase text-xs tracking-wider border-b border-gray-200">
+                    <th class="p-4 font-bold">Waktu Jemput</th>
+                    <th class="p-4 font-bold">Nama Siswa</th>
+                    <th class="p-4 font-bold">Nama Penjemput</th>
+                    <th class="p-4 font-bold text-center">Status Hubungan</th>
+                    <th class="p-4 font-bold text-center">Aksi</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-50">
+                @forelse($logs as $log)
+                <tr class="hover:bg-green-50/50 transition duration-150 group">
+                    <td class="p-4 whitespace-nowrap">
+                        <div class="text-gray-800 font-semibold">
+                            {{ \Carbon\Carbon::parse($log->waktu_jemput)->timezone('Asia/Jakarta')->format('H:i') }} WIB
+                        </div>
+                        <div class="text-xs text-gray-500">
+                            {{ \Carbon\Carbon::parse($log->waktu_jemput)->timezone('Asia/Jakarta')->format('d M Y') }}
+                        </div>
+                    </td>
+                    
+                    <td class="p-4">
+                        <div class="font-bold text-gray-800">{{ $log->siswa->nama_siswa ?? 'Siswa Terhapus' }}</div>
+                        <div class="text-xs text-gray-500">NIS: {{ $log->siswa->nis ?? '-' }}</div>
+                    </td>
 
-                        <td class="p-4 text-gray-700 font-medium">
-                            {{ $log->nama_penjemput }}
-                        </td>
+                    <td class="p-4 text-gray-700 font-medium">
+                        {{ $log->nama_penjemput }}
+                    </td>
 
-                        <td class="p-4 text-center">
-                            <span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700 border border-blue-200">
-                                {{ $log->status_hubungan }}
-                            </span>
-                        </td>
+                    <td class="p-4 text-center">
+                        <span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700 border border-green-200 shadow-sm">
+                            {{ $log->status_hubungan }}
+                        </span>
+                    </td>
 
                         <td class="p-4 text-center">
                             <form action="{{ route('penjemputan.destroy', $log->id) }}" method="POST" onsubmit="return confirm('Hapus data log ini?');">
@@ -80,6 +78,5 @@
                 </tbody>
             </table>
         </div>
-    </div>
 </div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/admin/perkembangan/index.blade.php b/resources/views/admin/perkembangan/index.blade.php
index 6b6c58c..830aae0 100644
--- a/resources/views/admin/perkembangan/index.blade.php
+++ b/resources/views/admin/perkembangan/index.blade.php
@@ -1,19 +1,25 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container mx-auto px-4">
-    <div class="mb-6 flex justify-between items-center">
-        <div>
-            <h1 class="text-2xl font-bold text-gray-800">📈 Laporan Perkembangan</h1>
-            <p class="text-gray-600 text-sm mt-1">Pilih siswa untuk melihat Catatan Anekdot, Hasil Karya, dan Ceklis.</p>
+<div class="bg-white shadow-md rounded-2xl border border-[#e1f0e8] overflow-hidden">
+    <!-- Header Section -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-gradient-to-br from-green-600 to-teal-700 p-8 shadow-inner relative overflow-hidden">
+        <!-- Decorative inner pattern -->
+        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 mix-blend-overlay"></div>
+        <div class="relative z-10">
+            <h1 class="text-2xl font-extrabold text-white flex items-center drop-shadow">
+                <span class="bg-white/20 text-white p-2.5 rounded-xl mr-4 backdrop-blur-md"><i class="fas fa-chart-line"></i></span> Laporan Perkembangan
+            </h1>
+            <p class="text-green-50 mt-2 ml-14 font-medium drop-shadow-sm">Pilih siswa untuk melihat Catatan Anekdot, Hasil Karya, dan Ceklis.</p>
         </div>
-        <div class="bg-green-100 text-green-800 px-4 py-2 rounded-lg font-bold text-sm">
-            Total Siswa: {{ $siswas->count() }}
+        <div class="mt-6 md:mt-0 relative z-10 flex items-center bg-white text-green-800 px-5 py-3 rounded-xl font-bold text-sm shadow-lg">
+            <i class="fas fa-users mr-2 text-green-500"></i> Total Siswa: {{ $siswas->count() }}
         </div>
     </div>
 
-    <div class="bg-white shadow-md rounded-lg overflow-hidden">
-        <table class="min-w-full bg-white">
+    <div class="p-6">
+        <div class="overflow-x-auto">
+            <table class="w-full border-collapse">
             <thead class="bg-green-600 text-white">
                 <tr>
                     <th class="py-3 px-4 text-left uppercase font-semibold text-sm">No</th>
@@ -59,11 +65,12 @@
                     </td>
                 </tr>
                 @endforelse
-            </tbody>
-        </table>
+        </tbody>
+    </table>
+    </div>
     </div>
     
-    <div class="mt-4 text-center text-xs text-gray-400">
+    <div class="mt-4 pb-6 text-center text-xs text-gray-400">
         &copy; {{ date('Y') }} PAUD Aisyiyah Monitoring System
     </div>
 </div>
diff --git a/resources/views/admin/siswa/index.blade.php b/resources/views/admin/siswa/index.blade.php
index d371528..508cfc2 100644
--- a/resources/views/admin/siswa/index.blade.php
+++ b/resources/views/admin/siswa/index.blade.php
@@ -1,21 +1,34 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container mx-auto px-4">
-    <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold text-gray-800">👶 Data Peserta Didik</h1>
-        <a href="{{ route('siswa.create') }}" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded shadow-lg transition duration-200">
-            + Tambah Siswa
-        </a>
+<div class="bg-white shadow-md rounded-2xl border border-[#e1f0e8] overflow-hidden">
+    <!-- Header Section -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-gradient-to-br from-green-600 to-teal-700 p-8 shadow-inner relative overflow-hidden">
+        <!-- Decorative inner pattern -->
+        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 mix-blend-overlay"></div>
+        <div class="relative z-10">
+            <h1 class="text-2xl font-extrabold text-white flex items-center drop-shadow">
+                <span class="bg-white/20 text-white p-2.5 rounded-xl mr-4 backdrop-blur-md"><i class="fas fa-child"></i></span> Data Peserta Didik
+            </h1>
+            <p class="text-green-50 mt-2 ml-14 font-medium drop-shadow-sm">Manajemen data peserta didik PAUD.</p>
+        </div>
+        <div class="mt-6 md:mt-0 relative z-10">
+            <a href="{{ route('siswa.create') }}" class="inline-flex items-center gap-2 bg-white text-green-700 px-6 py-3 rounded-xl hover:bg-green-50 font-bold text-sm shadow-lg transition-all hover:-translate-y-1">
+                <i class="fas fa-plus"></i> Tambah Siswa
+            </a>
+        </div>
     </div>
 
+    <div class="p-6">
+
     @if(session('success'))
-    <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
-        <p>{{ session('success') }}</p>
+    <div class="bg-green-50/50 border border-green-200 text-green-700 p-4 mb-6 rounded-xl flex items-center shadow-sm" role="alert">
+        <i class="fas fa-check-circle mr-3 text-xl text-green-500"></i>
+        <p class="font-medium">{{ session('success') }}</p>
     </div>
     @endif
 
-    <div class="bg-white shadow-md rounded-lg overflow-hidden">
+    <div class="overflow-x-auto">
         <table class="min-w-full bg-white">
             <thead class="bg-green-600 text-white">
                 <tr>
@@ -86,7 +99,8 @@
                 </tr>
                 @endforelse
             </tbody>
-        </table>
+    </table>
+    </div>
     </div>
 </div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/admin/wali_murid/index.blade.php b/resources/views/admin/wali_murid/index.blade.php
index 70f8da8..5935422 100644
--- a/resources/views/admin/wali_murid/index.blade.php
+++ b/resources/views/admin/wali_murid/index.blade.php
@@ -1,13 +1,27 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="bg-white shadow-md rounded-lg p-6">
-    <div class="flex justify-between items-center mb-4">
-        <h1 class="text-xl font-semibold text-gray-700">👪 Data Wali Murid</h1>
-        <a href="{{ route('wali.create') }}" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">+ Tambah Wali</a>
+<div class="bg-white shadow-md rounded-2xl border border-[#e1f0e8] overflow-hidden">
+    <!-- Header Section -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-gradient-to-br from-green-600 to-teal-700 p-8 shadow-inner relative overflow-hidden">
+        <!-- Decorative inner pattern -->
+        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 mix-blend-overlay"></div>
+        <div class="relative z-10">
+            <h1 class="text-2xl font-extrabold text-white flex items-center drop-shadow">
+                <span class="bg-white/20 text-white p-2.5 rounded-xl mr-4 backdrop-blur-md"><i class="fas fa-users"></i></span> Data Wali Murid
+            </h1>
+            <p class="text-green-50 mt-2 ml-14 font-medium drop-shadow-sm">Kelola informasi orang tua / wali peserta didik.</p>
+        </div>
+        <div class="mt-6 md:mt-0 relative z-10">
+            <a href="{{ route('wali.create') }}" class="inline-flex items-center gap-2 bg-white text-green-700 px-6 py-3 rounded-xl hover:bg-green-50 font-bold text-sm shadow-lg transition-all hover:-translate-y-1">
+                <i class="fas fa-plus"></i> Tambah Wali
+            </a>
+        </div>
     </div>
 
-    <table class="w-full border-collapse">
+    <div class="p-6">
+        <div class="overflow-x-auto">
+            <table class="w-full border-collapse">
         <thead>
             <tr class="bg-green-600 text-white text-left">
                 <th class="p-2">No</th>
@@ -40,5 +54,7 @@
             @endforelse
         </tbody>
     </table>
+    </div>
+    </div>
 </div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index e2f8772..67167c6 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,52 +1,104 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="id">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login - Simpaud</title>
+    <title>Login - Simpaud Kartoharjo</title>
+    
+    <!-- Google Fonts: Plus Jakarta Sans -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: { sans: ['"Plus Jakarta Sans"', 'sans-serif'] },
+                }
+            }
+        }
+    </script>
+    <style>
+        body { font-family: 'Plus Jakarta Sans', sans-serif; }
+        .mesh-bg {
+            background-color: #f2f8f5;
+            background-image: 
+                radial-gradient(at 40% 20%, #c5e2d4 0px, transparent 50%),
+                radial-gradient(at 80% 0%, #e1f0e8 0px, transparent 50%),
+                radial-gradient(at 0% 50%, #d4ebe0 0px, transparent 50%),
+                radial-gradient(at 80% 50%, #b7dac9 0px, transparent 50%),
+                radial-gradient(at 0% 100%, #e1f0e8 0px, transparent 50%),
+                radial-gradient(at 80% 100%, #c5e2d4 0px, transparent 50%),
+                radial-gradient(at 0% 0%, #f2f8f5 0px, transparent 50%);
+        }
+    </style>
 </head>
-<body class="h-screen flex items-center justify-center bg-gradient-to-br from-green-400 via-green-500 to-green-700">
+<body class="h-screen flex items-center justify-center mesh-bg relative overflow-hidden">
 
-    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-5xl flex flex-col md:flex-row overflow-hidden">
+    <!-- Decorative floating elements -->
+    <div class="absolute top-10 left-10 w-72 h-72 bg-green-200/50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse"></div>
+    <div class="absolute bottom-10 right-10 w-72 h-72 bg-teal-200/50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse" style="animation-delay: 2s;"></div>
+
+    <div class="bg-[#f0f9f4]/80 backdrop-blur-xl rounded-[2rem] shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-green-100 w-full max-w-5xl flex flex-col md:flex-row overflow-hidden relative z-10 m-4">
         
         <!-- Left Side (hidden di HP, tampil di desktop) -->
-        <div class="hidden md:flex w-1/2 bg-gradient-to-br from-green-500 to-green-700 text-white p-10 flex-col justify-center">
-            <h2 class="text-3xl font-bold">Selamat Datang</h2>
-            <p class="mt-4 text-lg">Silahkan login untuk mengakses dashboard admin Simpaud Kartoharjo</p>
-            <!-- Ganti logo -->
-            <img src="{{ asset('images/logo.png') }}" alt="logo" class="mt-10 w-40 mx-auto animate-pulse">
+        <div class="hidden md:flex w-1/2 bg-gradient-to-br from-green-500/90 to-teal-600/90 text-white p-12 flex-col justify-center relative overflow-hidden">
+            <!-- inner flare -->
+            <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 mix-blend-overlay"></div>
+            
+            <div class="relative z-10 flex flex-col items-center text-center">
+                <img src="{{ asset('images/logo.png') }}" alt="logo" class="w-32 h-32 object-contain mb-8 drop-shadow-lg">
+                
+                <h2 class="text-4xl font-extrabold tracking-tight mb-4">Selamat Datang</h2>
+                <p class="text-lg text-green-50 font-medium leading-relaxed max-w-sm">
+                    Sistem Informasi Monitoring dan Manajemen PAUD Terpadu Kartoharjo.
+                </p>
+                <div class="mt-8 flex items-center space-x-2 text-green-100 text-sm justify-center">
+                    <span class="w-8 h-px bg-green-200/50"></span>
+                    <span>Akses khusus staf & admin</span>
+                    <span class="w-8 h-px bg-green-200/50"></span>
+                </div>
+            </div>
         </div>
 
         <!-- Right Side (Form Login) -->
-        <div class="w-full md:w-1/2 p-10 flex flex-col justify-center">
-            <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center md:text-left">Sign In</h2>
+        <div class="w-full md:w-1/2 p-10 lg:p-14 flex flex-col justify-center bg-[#e8f5ed]/30 backdrop-blur-md">
+            <div class="mb-8">
+                <h2 class="text-3xl font-extrabold text-gray-800 tracking-tight">Sign In</h2>
+                <p class="text-gray-500 mt-2 font-medium">Masuk untuk melanjutkan ke dashboard.</p>
+            </div>
             
-            <form method="POST" action="{{ route('login') }}" class="space-y-5">
+            <form method="POST" action="{{ route('login') }}" class="space-y-6">
                 @csrf
                 <div>
-                    <label class="block text-sm font-semibold text-gray-600">Email</label>
-                    <input type="text" name="email" required
-                        class="w-full mt-2 px-4 py-2 rounded-lg border focus:ring-2 focus:ring-green-400 outline-none">
+                    <label class="block text-sm font-semibold text-gray-700 mb-2">Alamat Email</label>
+                    <input type="email" name="email" required placeholder="admin@simpaud.com"
+                        class="w-full px-5 py-3.5 bg-[#f0f9f4]/80 border border-green-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition-all shadow-sm text-gray-700">
                 </div>
 
                 <div>
-                    <label class="block text-sm font-semibold text-gray-600">Password</label>
-                    <input type="password" name="password" required
-                        class="w-full mt-2 px-4 py-2 rounded-lg border focus:ring-2 focus:ring-green-400 outline-none">
+                    <label class="block text-sm font-semibold text-gray-700 mb-2">Kata Sandi</label>
+                    <input type="password" name="password" required placeholder="••••••••"
+                        class="w-full px-5 py-3.5 bg-[#f0f9f4]/80 border border-green-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition-all shadow-sm text-gray-700">
                 </div>
 
-                        @if (session('error'))
-                        <div style="color:red;">{{ session('error') }}</div>
-                        @endif
+                @if (session('error'))
+                <div class="p-4 bg-red-50 border-l-4 border-red-500 rounded-r-xl">
+                    <p class="text-sm font-medium text-red-700">{{ session('error') }}</p>
+                </div>
+                @endif
 
                 <button type="submit"
-                    class="w-full py-3 rounded-lg bg-gradient-to-r from-green-400 to-green-600 text-white font-bold shadow-lg hover:opacity-90 transition">
-                    Login
+                    class="w-full py-3.5 mt-4 rounded-xl bg-green-600 text-white font-bold tracking-wide shadow-[0_4px_14px_0_rgba(22,163,74,0.39)] hover:bg-green-700 hover:shadow-[0_6px_20px_rgba(22,163,74,0.23)] hover:-translate-y-0.5 transition-all duration-200">
+                    Masuk ke Sistem
                 </button>
             </form>
 
-            <p class="text-sm text-gray-500 mt-6 text-center md:text-left">© 2025 Simpaud Kartoharjo</p>
+            <div class="mt-auto pt-10 text-center md:text-left">
+                <p class="text-sm text-gray-400 font-medium tracking-wide">© 2026 Simpaud Kartoharjo.</p>
+            </div>
         </div>
 
     </div>
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index ff1f47d..d6dc21e 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -1,99 +1,149 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="py-12">
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+<div class="py-6">
+    <div class="max-w-7xl mx-auto space-y-8">
         
-        <div class="flex justify-between items-center mb-6">
-            <div>
-                <h2 class="text-2xl font-bold text-gray-800">📊 Dashboard Utama</h2>
-                <p class="text-sm text-gray-500">Ringkasan aktivitas dan informasi sekolah.</p>
+        <!-- Header Section -->
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-gradient-to-br from-green-600 to-teal-700 p-8 rounded-2xl shadow-lg relative overflow-hidden">
+            <!-- Decorative inner pattern -->
+            <div class="absolute inset-0 bg-white/5 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-20 mix-blend-overlay"></div>
+            
+            <div class="relative z-10">
+                <h2 class="text-3xl font-extrabold text-white flex items-center drop-shadow-md">
+                    <span class="bg-white/20 text-white p-2.5 rounded-xl mr-4 backdrop-blur-sm"><i class="fas fa-chart-pie"></i></span> 
+                    Dashboard Utama
+                </h2>
+                <p class="text-green-50 text-base mt-2 ml-14 font-medium drop-shadow">Ringkasan aktivitas dan informasi sekolah terkini.</p>
             </div>
             
             @if(Auth::user()->role == 'admin')
-                <a href="{{ route('pengumuman.index') }}" class="bg-indigo-600 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 text-sm font-bold flex items-center gap-2">
-                    <span>📢</span> Buat Pengumuman
-                </a>
+                <div class="mt-6 md:mt-0 relative z-10">
+                    <a href="{{ route('pengumuman.index') }}" class="group flex items-center gap-2 bg-white text-green-700 px-6 py-3 rounded-xl shadow-lg hover:shadow-xl hover:bg-green-50 font-bold text-sm transition-all hover:-translate-y-1">
+                        <i class="fas fa-bullhorn group-hover:scale-110 transition-transform"></i>
+                        <span>Buat Pengumuman</span>
+                    </a>
+                </div>
             @endif
         </div>
 
-        <div class="mb-8">
-            <h3 class="text-lg font-bold text-gray-700 mb-3 flex items-center">
-                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path></svg>
-                Papan Pengumuman
-            </h3>
+        <!-- Stats Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="bg-white overflow-hidden rounded-2xl p-6 border border-[#e1f0e8] relative group hover:shadow-md transition-shadow">
+                <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
+                    <i class="fas fa-child text-6xl text-teal-600"></i>
+                </div>
+                <div class="text-green-500/80 text-xs font-bold tracking-widest uppercase mb-1">Total Siswa</div>
+                <div class="text-4xl font-extrabold text-gray-800 flex items-baseline">
+                    {{ $totalSiswa }} <span class="text-sm text-gray-400 font-medium ml-2">Anak</span>
+                </div>
+            </div>
+            
+            <div class="bg-white overflow-hidden rounded-2xl p-6 border border-[#e1f0e8] relative group hover:shadow-md transition-shadow">
+                <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
+                    <i class="fas fa-chalkboard-teacher text-6xl text-green-600"></i>
+                </div>
+                <div class="text-green-500/80 text-xs font-bold tracking-widest uppercase mb-1">Total Guru</div>
+                <div class="text-4xl font-extrabold text-gray-800 flex items-baseline">
+                    {{ $totalGuru }} <span class="text-sm text-gray-400 font-medium ml-2">Pengajar</span>
+                </div>
+            </div>
+            
+            <div class="bg-white overflow-hidden rounded-2xl p-6 border border-[#e1f0e8] relative group hover:shadow-md transition-shadow">
+                <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
+                    <i class="fas fa-door-open text-6xl text-emerald-600"></i>
+                </div>
+                <div class="text-green-500/80 text-xs font-bold tracking-widest uppercase mb-1">Total Kelas</div>
+                <div class="text-4xl font-extrabold text-gray-800 flex items-baseline">
+                    {{ $totalKelas }} <span class="text-sm text-gray-400 font-medium ml-2">Ruangan</span>
+                </div>
+            </div>
+        </div>
 
-            @forelse($pengumuman as $info)
-                <div class="bg-white border-l-4 border-indigo-500 shadow-sm rounded-r-lg p-4 mb-4 relative">
-                    <div class="flex justify-between items-start">
-                        <div>
-                            <h4 class="text-lg font-bold text-gray-800">{{ $info->judul }}</h4>
-                            <p class="text-gray-600 mt-1 text-sm">{{ Str::limit($info->isi, 150) }}</p>
-                            
-                            <div class="mt-2 text-xs text-gray-500 flex items-center bg-gray-100 w-fit px-2 py-1 rounded">
-                                📅 
-                                @if($info->tanggal_mulai)
-                                    {{ \Carbon\Carbon::parse($info->tanggal_mulai)->format('d M Y') }} 
-                                    s/d 
-                                    {{ \Carbon\Carbon::parse($info->tanggal_selesai)->format('d M Y') }}
-                                @else
-                                    Permanen
-                                @endif
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Papan Pengumuman -->
+            <div class="lg:col-span-2">
+                <div class="flex items-center mb-4 px-2">
+                    <div class="w-8 h-8 rounded-lg bg-green-100 text-green-600 flex items-center justify-center mr-3">
+                        <i class="fas fa-bell"></i>
+                    </div>
+                    <h3 class="text-lg font-bold text-gray-700">Info & Pengumuman</h3>
+                </div>
+
+                <div class="space-y-4 max-h-[500px] overflow-y-auto custom-scrollbar pr-2">
+                    @forelse($pengumuman as $info)
+                        <div class="bg-white rounded-2xl p-5 border border-l-4 border-[#e1f0e8] border-l-green-400 hover:border-l-green-500 transition-colors shadow-sm group">
+                            <div class="flex justify-between items-start">
+                                <div class="flex-1 pr-4">
+                                    <h4 class="text-base font-bold text-gray-800 group-hover:text-green-700 transition-colors">{{ $info->judul }}</h4>
+                                    <p class="text-gray-500 mt-2 text-sm leading-relaxed">{{ Str::limit($info->isi, 150) }}</p>
+                                    
+                                    <div class="mt-4 flex items-center gap-3">
+                                        <div class="inline-flex items-center text-xs font-medium text-green-700 bg-green-50 px-2.5 py-1 rounded-md">
+                                            <i class="far fa-calendar-alt mr-1.5 opacity-70"></i> 
+                                            @if($info->tanggal_mulai)
+                                                {{ \Carbon\Carbon::parse($info->tanggal_mulai)->format('d M y') }} 
+                                                - 
+                                                {{ \Carbon\Carbon::parse($info->tanggal_selesai)->format('d M y') }}
+                                            @else
+                                                Info Permanen
+                                            @endif
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="text-[10px] uppercase tracking-wider font-bold text-gray-400 bg-gray-50 px-2 py-1 rounded-md whitespace-nowrap">
+                                    {{ $info->created_at->diffForHumans() }}
+                                </div>
                             </div>
                         </div>
-                        <span class="text-xs text-gray-400 italic">
-                            {{ $info->created_at->diffForHumans() }}
-                        </span>
+                    @empty
+                        <div class="bg-white/50 border border-dashed border-gray-300 rounded-2xl p-10 text-center flex flex-col items-center justify-center">
+                            <div class="w-16 h-16 bg-gray-100 text-gray-300 rounded-full flex items-center justify-center mb-3">
+                                <i class="fas fa-inbox text-2xl"></i>
+                            </div>
+                            <p class="text-gray-500 font-medium">Belum ada pengumuman aktif saat ini.</p>
+                        </div>
+                    @endforelse
+                </div>
+            </div>
+
+            <!-- Siswa Terbaru -->
+            <div class="lg:col-span-1">
+                <div class="bg-white rounded-2xl shadow-sm border border-[#e1f0e8] overflow-hidden flex flex-col h-full">
+                    <div class="px-6 py-5 border-b border-[#f2f8f5] flex items-center justify-between bg-green-50/30">
+                        <h3 class="text-sm font-bold tracking-wider uppercase text-green-800 flex items-center">
+                            <i class="fas fa-user-plus mr-2 text-green-500"></i> Siswa Baru
+                        </h3>
+                    </div>
+                    
+                    <div class="p-6 flex-1">
+                        @if($siswaBaru->count() > 0)
+                            <ul class="space-y-4">
+                                @foreach($siswaBaru as $siswa)
+                                <li class="flex items-center justify-between pb-4 border-b border-gray-50 last:border-0 last:pb-0">
+                                    <div class="flex items-center">
+                                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-100 to-teal-100 flex justify-center items-center text-green-700 font-bold text-sm shadow-sm border border-white">
+                                            {{ substr($siswa->nama_siswa, 0, 1) }}
+                                        </div>
+                                        <div class="ml-3">
+                                            <p class="text-sm font-bold text-gray-800">{{ $siswa->nama_siswa }}</p>
+                                            <p class="text-xs text-gray-500">{{ $siswa->nis }}</p>
+                                        </div>
+                                    </div>
+                                    <span class="w-2 h-2 rounded-full bg-green-400 cursor-help" title="Aktif"></span>
+                                </li>
+                                @endforeach
+                            </ul>
+                        @else
+                            <div class="h-full flex flex-col items-center justify-center text-center py-8">
+                                <i class="fas fa-user-slash text-gray-300 text-3xl mb-2"></i>
+                                <p class="text-sm text-gray-500">Belum ada siswa baru.</p>
+                            </div>
+                        @endif
                     </div>
                 </div>
-            @empty
-                <div class="bg-gray-50 border border-gray-200 rounded-lg p-6 text-center text-gray-500">
-                    Belum ada pengumuman aktif saat ini.
-                </div>
-            @endforelse
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-            <div class="bg-white overflow-hidden shadow rounded-lg p-5 border-b-4 border-blue-500">
-                <div class="text-gray-500 text-sm font-bold uppercase">Total Siswa</div>
-                <div class="text-3xl font-bold text-gray-800">{{ $totalSiswa }}</div>
             </div>
-            <div class="bg-white overflow-hidden shadow rounded-lg p-5 border-b-4 border-green-500">
-                <div class="text-gray-500 text-sm font-bold uppercase">Total Guru</div>
-                <div class="text-3xl font-bold text-gray-800">{{ $totalGuru }}</div>
-            </div>
-            <div class="bg-white overflow-hidden shadow rounded-lg p-5 border-b-4 border-purple-500">
-                <div class="text-gray-500 text-sm font-bold uppercase">Total Kelas</div>
-                <div class="text-3xl font-bold text-gray-800">{{ $totalKelas }}</div>
-            </div>
-        </div>
-
-        <div class="bg-white shadow rounded-lg overflow-hidden">
-            <div class="px-6 py-4 border-b border-gray-200 font-bold text-gray-700">
-                Siswa Terbaru
-            </div>
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
-                    <tr>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nama</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">NIS</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
-                    </tr>
-                </thead>
-                <tbody class="bg-white divide-y divide-gray-200">
-                    @foreach($siswaBaru as $siswa)
-                    <tr>
-                        <td class="px-6 py-4 whitespace-nowrap">{{ $siswa->nama_siswa }}</td>
-                        <td class="px-6 py-4 whitespace-nowrap">{{ $siswa->nis }}</td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                                Aktif
-                            </span>
-                        </td>
-                    </tr>
-                    @endforeach
-                </tbody>
-            </table>
+            
         </div>
 
     </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index f62cdbb..a3cdf2e 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -2,78 +2,222 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Simpaud Kartoharjo</title>
+    
+    <!-- Google Fonts: Plus Jakarta Sans -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
+    
+    <!-- Tailwind Custom Config & Global CSS -->
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
+                    },
+                    colors: {
+                        green: {
+                            50: '#f2f8f5',
+                            100: '#e1f0e8',
+                            200: '#c5e2d4',
+                            300: '#9dcdb9',
+                            400: '#70b197',
+                            500: '#4e957a',
+                            600: '#3a7760',
+                            700: '#30604e',
+                            800: '#274d40',
+                            900: '#213f35',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        /* Global Enhancements */
+        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #e5f0ea; }
+        
+        /* Soften all cards globally and tint white to pastel green */
+        .bg-white {
+            background-color: #f3fbf6 !important; /* Soft green tint instead of stark white */
+        }
+        .bg-white.shadow-md {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+            border-radius: 1rem;
+            border: 1px solid rgba(225, 240, 232, 0.8);
+        }
+        
+        /* Beautify all inputs/selects globally */
+        input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
+            border-radius: 0.75rem !important;
+            border-color: #c5e2d4 !important;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
+            transition: all 0.2s ease;
+        }
+        input:focus, select:focus, textarea:focus {
+            ring: 2px !important;
+            ring-color: #70b197 !important;
+            border-color: #70b197 !important;
+            outline: none !important;
+        }
+        
+        /* Global Button Enhancements */
+        button, .btn, a.bg-green-600, a.bg-blue-600 {
+            transition: all 0.2s ease;
+        }
+        button:hover, .btn:hover, a.bg-green-600:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 6px -1px rgba(58, 119, 96, 0.2);
+        }
+        
+        /* Improve HTML Table looks globally */
+        table.w-full {
+            border-radius: 0.75rem;
+            overflow: hidden;
+            border-collapse: separate;
+            border-spacing: 0;
+            border: 1px solid #e1f0e8;
+        }
+        table th {
+            background-color: #f2f8f5 !important;
+            color: #30604e !important;
+            text-transform: uppercase;
+            font-size: 0.75rem;
+            letter-spacing: 0.05em;
+            padding: 1rem !important;
+        }
+        table td {
+            padding: 1rem !important;
+            color: #4a5568;
+            border-bottom: 1px solid #e1f0e8;
+        }
+        table tr:last-child td {
+            border-bottom: none;
+        }
+        table tr:hover td {
+            background-color: #fcfdfd;
+        }
+    </style>
 </head>
-<body class="flex bg-gray-100 font-sans">
+<body class="flex bg-[#e5f0ea] text-gray-800 font-sans antialiased selection:bg-green-200 selection:text-green-900">
 
     <!-- Sidebar -->
-    <aside class="w-64 bg-green-600 text-white min-h-screen p-6 shadow-xl">
-            <h2 class="text-2xl font-bold mb-10">Simpaud Kartoharjo</h2>
-    
-            <nav class="space-y-4 text-sm">
-                <a href="{{ route('dashboard') }}" class="flex items-center p-2 rounded-lg hover:bg-green-700 transition">
-                    <i class="fas fa-home mr-3"></i> Home
+    <aside class="w-64 bg-[#f1f8f4] border-r border-[#d4ebd8] flex flex-col transition-all duration-300 shadow-sm z-20">
+        <div class="p-6 flex items-center border-b border-[#f2f8f5]">
+            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg text-white font-bold text-xl mr-3">
+                S
+            </div>
+            <h2 class="text-xl font-extrabold text-gray-800 tracking-tight">Simpaud</h2>
+        </div>
+
+        <nav class="flex-1 p-4 space-y-6 overflow-y-auto custom-scrollbar">
+            
+            <!-- Main Menu -->
+            <div>
+                <p class="px-3 text-xs font-bold text-green-500 uppercase tracking-wider mb-2">Menu Utama</p>
+                <a href="{{ route('dashboard') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-xl text-green-900 bg-green-50 hover:bg-green-100 transition-colors shadow-sm">
+                    <i class="fas fa-home w-5 h-5 mr-3 flex items-center justify-center text-green-600"></i> 
+                    Dashboard
                 </a>
-    
-                @if(auth()->user()->role == 'admin')
-                <div>
-                    <p class="font-semibold uppercase text-xs mb-2 text-green-200">Data Master</p>
-                    <ul class="ml-4 space-y-1">
-                        <li><a href="{{ route('guru.index') }}" class="block p-2 hover:bg-green-700 rounded text-white">👨‍🏫 Guru</a></li>
-                        <li><a href="{{ route('wali-murid.index') }}" class="block p-2 hover:bg-green-700 rounded text-white">👪 Wali Murid</a></li>
-                        <li><a href="{{ route('siswa.index') }}" class="block p-2 hover:bg-green-700 rounded text-white">🧒 Peserta Didik</a></li>
-                    </ul>
+            </div>
+
+            @if(auth()->user()->role == 'admin')
+            <!-- Data Master -->
+            <div>
+                <p class="px-3 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Data Master</p>
+                <ul class="space-y-1">
+                    <li><a href="{{ route('guru.index') }}" class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl text-gray-600 hover:text-green-800 hover:bg-green-50/50 transition-colors">
+                        <i class="fas fa-chalkboard-teacher w-5 h-5 mr-3 text-gray-400 flex items-center justify-center group-hover:text-green-500"></i> Guru</a>
+                    </li>
+                    <li><a href="{{ route('wali-murid.index') }}" class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl text-gray-600 hover:text-green-800 hover:bg-green-50/50 transition-colors">
+                        <i class="fas fa-users w-5 h-5 mr-3 text-gray-400 flex items-center justify-center group-hover:text-green-500"></i> Wali Murid</a>
+                    </li>
+                    <li><a href="{{ route('siswa.index') }}" class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl text-gray-600 hover:text-green-800 hover:bg-green-50/50 transition-colors">
+                        <i class="fas fa-child w-5 h-5 mr-3 text-gray-400 flex items-center justify-center group-hover:text-green-500"></i> Peserta Didik</a>
+                    </li>
+                </ul>
+            </div>
+            @endif
+
+            <!-- Laporan & Info -->
+            <div>
+                <p class="px-3 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Laporan & Info</p>
+                <ul class="space-y-1">
+                    <li>
+                        <a href="{{ route('admin.perkembangan.index') }}" class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl text-gray-600 hover:text-green-800 hover:bg-green-50/50 transition-colors">
+                            <i class="fas fa-chart-line w-5 h-5 mr-3 text-gray-400 flex items-center justify-center group-hover:text-green-500"></i> Perkembangan
+                        </a>
+                    </li>
+                    @if(auth()->user()->role == 'admin')
+                    <li>
+                        <a href="{{ route('pengumuman.index') }}" class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl text-gray-600 hover:text-green-800 hover:bg-green-50/50 transition-colors">
+                            <i class="fas fa-bullhorn w-5 h-5 mr-3 text-gray-400 flex items-center justify-center group-hover:text-green-500"></i> Pengumuman
+                        </a>
+                    </li>
+                    @endif
+                    <li>
+                        <a href="{{ route('penjemputan.index') }}" class="group flex items-center px-3 py-2 text-sm font-medium rounded-xl text-gray-600 hover:text-green-800 hover:bg-green-50/50 transition-colors">
+                            <i class="fas fa-bus w-5 h-5 mr-3 text-gray-400 flex items-center justify-center group-hover:text-green-500"></i> Penjemputan
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+        
+        <div class="p-4 border-t border-[#e1f0e8]">
+            <div class="flex items-center p-3 bg-gradient-to-r from-green-50 to-white rounded-xl shadow-sm border border-green-100">
+                <div class="w-9 h-9 rounded-full bg-green-200 flex items-center justify-center text-green-800 font-bold mr-3 border-2 border-white shadow-sm">
+                    {{ substr(Auth::user()->name, 0, 1) }}
                 </div>
-                @endif
-    
-                <div>
-                    <p class="font-semibold uppercase text-xs mb-2 text-green-200">Laporan & Info</p>
-                    <div class="space-y-1">
-                        <a href="{{ route('admin.perkembangan.index') }}" class="flex items-center p-2 rounded-lg hover:bg-green-700 transition">
-                            <i class="fas fa-chart-line mr-3"></i> Laporan Perkembangan
-                        </a>
-    
-                        @if(auth()->user()->role == 'admin')
-                        <a href="{{ route('pengumuman.index') }}" class="flex items-center p-2 rounded-lg hover:bg-green-700 transition">
-                            <i class="fas fa-bullhorn mr-3"></i> Menu Pengumuman
-                        </a>
-                        @endif
-    
-                        <a href="{{ route('penjemputan.index') }}" class="flex items-center p-2 rounded-lg hover:bg-green-700 transition">
-                            <i class="fas fa-bus mr-3"></i> Penjemputan
-                        </a>
-                    </div>
+                <div class="overflow-hidden">
+                    <p class="text-sm font-bold text-gray-800 truncate">{{ Auth::user()->name }}</p>
+                    <p class="text-xs text-green-600 uppercase font-semibold">{{ Auth::user()->role }}</p>
                 </div>
-    
-                </nav>
-        </aside>
+            </div>
+        </div>
+    </aside>
 
     <!-- Main Content -->
-    <div class="flex-1 flex flex-col">
+    <div class="flex-1 flex flex-col h-screen overflow-hidden relative">
         
         <!-- Navbar -->
-        <header class="flex items-center justify-between bg-white px-6 py-4 shadow">
-            Hai, {{ Auth::user()->name }}
-            <div class="flex items-center space-x-4">
-                <input type="text" placeholder="Search Class, Documents, Activities..." 
-                       class="px-4 py-2 rounded-lg border focus:ring-2 focus:ring-green-400 w-72 text-sm">
+        <header class="flex items-center justify-between bg-[#f1f8f4]/80 backdrop-blur-lg px-8 py-4 border-b border-[#d4ebd8] z-10 sticky top-0">
+            <div class="flex items-center text-gray-700">
+                <h1 class="text-lg font-semibold tracking-wide flex items-center">
+                    👋 <span class="ml-2">Halo, <span class="text-green-700">{{ Auth::user()->name }}</span></span>
+                </h1>
+            </div>
+            <div class="flex items-center space-x-6">
+                <!-- Search Input with Icon -->
+                <div class="relative hidden md:block">
+                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
+                    <input type="text" placeholder="Cari..." 
+                           class="pl-10 pr-4 py-2 bg-gray-50/50 border border-gray-200 focus:bg-white rounded-xl w-64 text-sm transition-all focus:w-80 shadow-sm">
+                </div>
+                
                 <form action="{{ route('logout') }}" method="POST">
                     @csrf
-                    <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">
-                        Logout
+                    <button type="submit" class="flex items-center justify-center px-4 py-2 rounded-xl bg-red-50 text-red-500 hover:bg-red-500 hover:text-white transition-all font-medium text-sm shadow-sm" title="Logout">
+                        <i class="fas fa-sign-out-alt mr-2"></i> Keluar
                     </button>
                 </form>
             </div>
         </header>
 
-        <!-- Content -->
-        <main class="p-6">
+        <!-- Content Area -->
+        <main class="flex-1 overflow-x-hidden overflow-y-auto bg-[#e5f0ea] p-8">
             @yield('content')
+            
             @if (session('success'))
-            <div class="bg-green-100 text-green-800 p-3 rounded mb-4">
-                {{ session('success') }}
+            <div class="fixed bottom-6 right-6 bg-green-600 text-white px-6 py-4 rounded-xl shadow-2xl flex items-center animate-bounce border-2 border-green-400 z-50">
+                <i class="fas fa-check-circle mr-3 text-xl"></i>
+                <span class="font-semibold">{{ session('success') }}</span>
             </div>
             @endif
         </main>
diff --git a/resources/views/splash.blade.php b/resources/views/splash.blade.php
index 2eee748..717ceb3 100644
--- a/resources/views/splash.blade.php
+++ b/resources/views/splash.blade.php
@@ -1,28 +1,85 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="id">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Splash Screen</title>
+    <title>Simpaud - Monitoring & Management PAUD</title>
+    
+    <!-- Google Fonts: Plus Jakarta Sans -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: { sans: ['"Plus Jakarta Sans"', 'sans-serif'] },
+                }
+            }
+        }
+    </script>
     <style>
+        body { font-family: 'Plus Jakarta Sans', sans-serif; }
+        .mesh-bg {
+            background-color: #f2f8f5;
+            background-image: 
+                radial-gradient(at 40% 20%, #c5e2d4 0px, transparent 50%),
+                radial-gradient(at 80% 0%, #e1f0e8 0px, transparent 50%),
+                radial-gradient(at 0% 50%, #d4ebe0 0px, transparent 50%),
+                radial-gradient(at 80% 50%, #b7dac9 0px, transparent 50%),
+                radial-gradient(at 0% 100%, #e1f0e8 0px, transparent 50%),
+                radial-gradient(at 80% 100%, #c5e2d4 0px, transparent 50%),
+                radial-gradient(at 0% 0%, #f2f8f5 0px, transparent 50%);
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .animate-float { animation: float 4s ease-in-out infinite; }
+        
         @keyframes fadeOut {
-            to { opacity: 0; visibility: hidden; }
+            0% { opacity: 1; filter: blur(0); transform: scale(1); }
+            100% { opacity: 0; filter: blur(10px); transform: scale(1.1); visibility: hidden; }
         }
         .fade-out {
-            animation: fadeOut 1s ease-in-out forwards;
-            animation-delay: 2.5s;
+            animation: fadeOut 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+            animation-delay: 2.2s;
+        }
+        @keyframes fadeInScale {
+            0% { opacity: 0; transform: scale(0.9); }
+            100% { opacity: 1; transform: scale(1); }
+        }
+        .animate-entrance {
+            animation: fadeInScale 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
         }
     </style>
 </head>
-<body class="h-screen flex items-center justify-center bg-gradient-to-br from-green-400 via-green-500 to-green-700">
+<body class="h-screen flex items-center justify-center mesh-bg overflow-hidden relative">
 
-    <div class="text-center fade-out">
-        <div class="animate-bounce">
+    <!-- Decorative modern blobs -->
+    <div class="absolute top-[-10%] left-[-10%] w-96 h-96 bg-green-200/40 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse"></div>
+    <div class="absolute bottom-[-10%] right-[-10%] w-96 h-96 bg-teal-200/40 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse" style="animation-delay: 1s;"></div>
+
+    <div class="text-center fade-out animate-entrance z-10">
+        <div class="relative inline-block animate-float mb-6">
+            <div class="absolute inset-0 bg-green-400 blur-xl opacity-30 rounded-full"></div>
             <!-- Ganti logo disini -->
-            <img src="{{ asset('images/logo.png') }}" alt="logo" class="h-28 w-28 mx-auto rounded-full object-cover shadow-lg border-4 border-white">
-        <h1 class="mt-6 text-4xl font-extrabold text-white drop-shadow-lg">Simpaud Kartoharjo</h1>
-        <p class="mt-2 text-lg text-green-100">Monitoring & Management PAUD</p>
+            <img src="{{ asset('images/logo.png') }}" alt="Simpaud Logo" class="relative h-32 w-32 mx-auto rounded-3xl object-cover shadow-[0_8px_30px_rgb(0,0,0,0.08)] border border-white/60 bg-white/40 backdrop-blur-sm p-2">
+        </div>
+        
+        <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight text-gray-800 drop-shadow-sm">
+            <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-600 to-teal-600">Simpaud</span>
+        </h1>
+        <p class="mt-3 text-lg md:text-xl font-medium text-gray-600 tracking-wide opacity-80">Monitoring & Management PAUD</p>
+        
+        <div class="mt-10 flex justify-center space-x-2">
+            <div class="w-2 h-2 bg-green-400 rounded-full animate-bounce" style="animation-delay: 0s;"></div>
+            <div class="w-2 h-2 bg-green-400 rounded-full animate-bounce" style="animation-delay: 0.2s;"></div>
+            <div class="w-2 h-2 bg-green-400 rounded-full animate-bounce" style="animation-delay: 0.4s;"></div>
+        </div>
     </div>
 
     <script>
diff --git a/storage/framework/sessions/.gitignore b/storage/framework/sessions/.gitignore
deleted file mode 100644
index d6b7ef3..0000000
--- a/storage/framework/sessions/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-*
-!.gitignore
diff --git a/storage/framework/sessions/alReHfkLxsc3dyrwVveyrxCDs2gc4JPcmP56Bl6I b/storage/framework/sessions/alReHfkLxsc3dyrwVveyrxCDs2gc4JPcmP56Bl6I
new file mode 100644
index 0000000..6da0142
--- /dev/null
+++ b/storage/framework/sessions/alReHfkLxsc3dyrwVveyrxCDs2gc4JPcmP56Bl6I
@@ -0,0 +1 @@
+a:3:{s:6:"_token";s:40:"sDTN2eel2XLvgOIi2iCJoGQPjJjq3y5H52v5TpBf";s:9:"_previous";a:1:{s:3:"url";s:21:"http://127.0.0.1:8000";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}
\ No newline at end of file
diff --git a/storage/framework/sessions/juU28EhnKeLduZypWorwKxaTHMIztIorfVeC66IP b/storage/framework/sessions/juU28EhnKeLduZypWorwKxaTHMIztIorfVeC66IP
new file mode 100644
index 0000000..7ccd3cd
--- /dev/null
+++ b/storage/framework/sessions/juU28EhnKeLduZypWorwKxaTHMIztIorfVeC66IP
@@ -0,0 +1 @@
+a:4:{s:6:"_token";s:40:"eWLnDbrqXYS5aXlTxB1xh6b0Lnp8wmte7kkkWUnz";s:9:"_previous";a:1:{s:3:"url";s:39:"http://127.0.0.1:8000/admin/penjemputan";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}s:50:"login_web_59ba36addc2b2f9401580f014c7f58ea4e30989d";i:1;}
\ No newline at end of file
diff --git a/storage/framework/sessions/knTZDYmppcBomI2yXkgBXst0K6wKYuw8pyBQIVTK b/storage/framework/sessions/knTZDYmppcBomI2yXkgBXst0K6wKYuw8pyBQIVTK
new file mode 100644
index 0000000..879fc0c
--- /dev/null
+++ b/storage/framework/sessions/knTZDYmppcBomI2yXkgBXst0K6wKYuw8pyBQIVTK
@@ -0,0 +1 @@
+a:4:{s:6:"_token";s:40:"00mfxFm9DrbF1elsEluX9X6oWjH0R4XSNXCoGuB3";s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}s:9:"_previous";a:1:{s:3:"url";s:32:"http://127.0.0.1:8000/admin/guru";}s:50:"login_web_59ba36addc2b2f9401580f014c7f58ea4e30989d";i:1;}
\ No newline at end of file
diff --git a/test_db.php b/test_db.php
new file mode 100644
index 0000000..65a36b8
--- /dev/null
+++ b/test_db.php
@@ -0,0 +1 @@
+<?php try { $db = new PDO('mysql:host=127.0.0.1;dbname=paud_monitoring;port=3306', 'root', '', [PDO::ATTR_TIMEOUT => 3, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]); echo 'Koneksi Sukses!'; } catch (Exception $e) { echo 'Error: ' . $e->getMessage(); } ?>
diff --git a/vendor.zip b/vendor.zip
new file mode 100644
index 0000000..75cbe80
Binary files /dev/null and b/vendor.zip differ