diff --git a/public/images/icon/main/hi.png b/public/images/icon/main/hi.png
new file mode 100644
index 0000000..543e954
Binary files /dev/null and b/public/images/icon/main/hi.png differ
diff --git a/public/index.php b/public/index.php
index 6e83460..2c90301 100644
--- a/public/index.php
+++ b/public/index.php
@@ -11,7 +11,7 @@
 if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
     require $maintenance;
 }
-
+ 
 // Register the Composer autoloader...
 require __DIR__.'/../vendor/autoload.php';
 
diff --git a/resources/views/auth/login-guru.blade.php b/resources/views/auth/login-guru.blade.php
index 592dc86..6627a4c 100644
--- a/resources/views/auth/login-guru.blade.php
+++ b/resources/views/auth/login-guru.blade.php
@@ -1,62 +1,92 @@
-<!DOCTYPE html>
-<html lang="id">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login Guru - E-Learning</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>
-        body {
-            background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .login-card {
-            background: white;
-            border-radius: 20px;
-            padding: 40px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-            max-width: 450px;
-            width: 100%;
-        }
-    </style>
-</head>
-<body>
-    <div class="login-card">
-        <h2 class="text-center mb-4">👨‍🏫 Login Guru</h2>
-        
-        @if($errors->any())
-            <div class="alert alert-danger">
-                {{ $errors->first() }}
-            </div>
-        @endif
-        
-        <form action="{{ route('guru.login.submit') }}" method="POST">
-            @csrf
-            
-            <div class="mb-3">
-                <label class="form-label">NIP</label>
-                <input type="text" name="nip" class="form-control" 
-                       value="{{ old('nip') }}" required autofocus>
-            </div>
-            
-            <div class="mb-3">
-                <label class="form-label">Password</label>
-                <input type="password" name="password" class="form-control" required>
-            </div>
-            
-            <button type="submit" class="btn btn-primary w-100">
-                LOGIN
-            </button>
-        </form>
-        
-        <div class="text-center mt-3">
-            <a href="{{ route('landing-page') }}" class="text-muted">
-                ← Kembali ke Halaman Utama
-            </a>
+@extends('layouts.auth')
+
+@section('title', 'Login Guru')
+
+@section('content')
+<link rel="stylesheet" href="{{ asset('css/login-admin.css') }}">
+
+<section id="signin" class="signin-section">
+  <div class="signin-container">
+    <h1 class="signin-title">SIGN IN GURU</h1>
+
+    {{-- Toast Notifikasi Error --}}
+    @if ($errors->any())
+      <div id="toast-error" class="toast-error">
+        {{ $errors->first() }}
+      </div>
+    @endif
+
+    <form method="POST" action="{{ route('guru.login.submit') }}">
+      @csrf
+
+      <div class="form-card">
+
+        {{-- NIP --}}
+        <div class="input-group">
+          <img src="{{ asset('icons/username.svg') }}" class="input-icon">
+          <input type="text" name="nip"
+                 class="form-input"
+                 placeholder="NIP"
+                 value="{{ old('nip') }}"
+                 required>
         </div>
-    </div>
-</body>
-</html>
\ No newline at end of file
+
+        {{-- Password --}}
+        <div class="input-group password-wrapper">
+          <img src="{{ asset('icons/password.svg') }}" class="input-icon">
+
+          <input type="password"
+                 name="password"
+                 class="form-input password-input"
+                 placeholder="Password"
+                 required>
+
+          <button type="button" class="toggle-password">
+            <img src="{{ asset('icons/show.svg') }}" class="eye-icon">
+          </button>
+        </div>
+
+        {{-- Remember --}}
+        <div class="remember-wrapper">
+          <label class="remember-label">
+            <input type="checkbox" name="remember">
+            <span>Remember me</span>
+          </label>
+        </div>
+
+      </div>
+
+      <button type="submit" class="submit-btn">
+        SIGN IN
+      </button>
+    </form>
+
+    <a href="{{ route('landing-page') }}" class="back-link">
+      ← Kembali ke Landing Page
+    </a>
+
+  </div>
+</section>
+
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+  const toggleBtn = document.querySelector('.toggle-password');
+  const passwordInput = document.querySelector('.password-input');
+  const eyeIcon = toggleBtn.querySelector('img');
+
+  toggleBtn.addEventListener('click', () => {
+    const isVisible = passwordInput.type === 'text';
+    passwordInput.type = isVisible ? 'password' : 'text';
+    eyeIcon.src = isVisible
+      ? "{{ asset('icons/show.svg') }}"
+      : "{{ asset('icons/hide.svg') }}";
+  });
+
+  const toast = document.getElementById('toast-error');
+  if (toast) {
+    setTimeout(() => toast.remove(), 4000);
+  }
+});
+</script>
+
+@endsection
diff --git a/resources/views/guru/dashboard.blade.php b/resources/views/guru/dashboard.blade.php
index d6f3c8e..f79f39a 100644
--- a/resources/views/guru/dashboard.blade.php
+++ b/resources/views/guru/dashboard.blade.php
@@ -3,71 +3,46 @@
 @section('title', 'Dashboard Guru')
 
 @section('content')
+<div class="container mt-5">
 
-<style>
-    .page-title {
-        font-size: 30px;
-        font-weight: 800;
-        margin-bottom: 20px;
-    }
+    <h1 class="mb-4 fw-bold text-primary">Dashboard Guru</h1>
 
-    .stats-card {
-        background: white;
-        border-radius: 20px;
-        padding: 25px;
-        border: 2px solid #e0f2fe;
-        text-align: center;
-    }
+    <div class="row">
 
-    .stats-number {
-        font-size: 48px;
-        font-weight: 700;
-        color: #0284c7;
-    }
+        <div class="col-md-4 mb-3">
+            <div class="card text-center shadow-sm">
+                <div class="card-body">
+                    <h5>Total Kelas Diampu</h5>
+                    <p class="fs-3 fw-bold text-success">
+                        {{ $totalKelas }}
+                    </p>
+                </div>
+            </div>
+        </div>
 
-    .stats-label {
-        font-size: 16px;
-        color: #64748b;
-        margin-top: 10px;
-    }
+        <div class="col-md-4 mb-3">
+            <div class="card text-center shadow-sm">
+                <div class="card-body">
+                    <h5>Total Mata Pelajaran</h5>
+                    <p class="fs-3 fw-bold text-primary">
+                        {{ $totalMapel }}
+                    </p>
+                </div>
+            </div>
+        </div>
 
-    .welcome-card {
-        background: white;
-        border-radius: 20px;
-        padding: 30px;
-        border: 2px solid #e0f2fe;
-        margin-bottom: 30px;
-    }
-</style>
+        <div class="col-md-4 mb-3">
+            <div class="card text-center shadow-sm">
+                <div class="card-body">
+                    <h5>Total Siswa Diajar</h5>
+                    <p class="fs-3 fw-bold text-warning">
+                        {{ $totalSiswa }}
+                    </p>
+                </div>
+            </div>
+        </div>
 
-<h3 class="page-title">DASHBOARD GURU</h3>
+    </div>
 
-<div class="welcome-card">
-    <h4>Selamat Datang, {{ Auth::guard('guru')->user()->nama }}! 👨‍🏫</h4>
-    <p class="text-muted mb-0">NIP: {{ Auth::guard('guru')->user()->nip }}</p>
 </div>
-
-<div class="row">
-    <div class="col-md-4 mb-3">
-        <div class="stats-card">
-            <div class="stats-number">{{ $totalKelas }}</div>
-            <div class="stats-label">Total Kelas Diampu</div>
-        </div>
-    </div>
-
-    <div class="col-md-4 mb-3">
-        <div class="stats-card">
-            <div class="stats-number">{{ $totalMapel }}</div>
-            <div class="stats-label">Total Mata Pelajaran</div>
-        </div>
-    </div>
-
-    <div class="col-md-4 mb-3">
-        <div class="stats-card">
-            <div class="stats-number">{{ $totalSiswa }}</div>
-            <div class="stats-label">Total Siswa Diajar</div>
-        </div>
-    </div>
-</div>
-
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/views/guru/layouts/app.blade.php b/resources/views/guru/layouts/app.blade.php
index 1896d68..7e54a66 100644
--- a/resources/views/guru/layouts/app.blade.php
+++ b/resources/views/guru/layouts/app.blade.php
@@ -3,72 +3,213 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>@yield('title', 'E-Learning Guru')</title>
-    
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    
+    <title>@yield('title', 'Panel Guru')</title>
+
+    <!-- Fonts & Bootstrap -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
     <style>
         body {
+            font-family: 'Poppins', sans-serif;
             background-color: #f8f9fa;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
         }
-        .sidebar {
+
+        .wrapper {
+            display: flex;
             min-height: 100vh;
-            background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
-            color: white;
         }
-        .content-area {
-            padding: 30px;
+
+        /* SIDEBAR */
+        .sidebar {
+            width: 260px;
+            background: #ffffff;
+            border-right: 2px solid #e6f0ff;
+            padding: 30px 20px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .sidebar-logo {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+
+        .sidebar-logo img {
+            width: 90px;
+        }
+
+        .sidebar-link {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px 18px;
+            margin-bottom: 12px;
+            border-radius: 12px;
+            color: #64748b;
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.2s ease;
+        }
+
+        .sidebar-link:hover {
+            background: #e6f0ff;
+            color: #1d4ed8;
+        }
+
+        .sidebar-link.active {
+            background: #e6f0ff;
+            color: #1d4ed8;
+        }
+
+        .sidebar-icon {
+            width: 20px;
+            height: 20px;
+            flex-shrink: 0;
+        }
+
+        .sidebar-logout {
+            margin-top: auto;
+        }
+
+        /* MAIN */
+        .main {
+            flex: 1;
+            background: #f5f9ff;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* TOPBAR */
+        .topbar {
+            background: #2b8ef3;
+            margin: 20px;
+            padding: 16px 24px;
+            border-radius: 16px;
+            color: white;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .topbar-left {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-weight: 600;
+            font-size: 16px;
+        }
+
+        .topbar-waving {
+            width: 26px;
+            height: 26px;
+        }
+
+        .topbar-right {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+
+        .topbar-icon {
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+        }
+
+        /* CONTENT */
+        .content {
+            padding: 20px 30px;
+            flex: 1;
         }
     </style>
-    
-    @stack('styles')
 </head>
+
 <body>
-    <div class="container-fluid">
-        <div class="row">
-            <!-- SIDEBAR -->
-            <div class="col-md-2 sidebar p-0">
-                <div class="p-4">
-                    <h4 class="mb-4">📚 E-Learning</h4>
-                    <nav class="nav flex-column">
-                        <a href="{{ route('guru.dashboard') }}" class="nav-link text-white">
-                            🏠 Dashboard
-                        </a>
-                        <a href="{{ route('guru.guru.index') }}" class="nav-link text-white">
-                            👨‍🏫 Daftar Guru
-                        </a>
-                        <a href="{{ route('guru.kelas.index') }}" class="nav-link text-white">
-                            🏫 Daftar Kelas
-                        </a>
-                        <a href="{{ route('guru.siswa.index') }}" class="nav-link text-white">
-                            👨‍🎓 Daftar Siswa
-                        </a>
-                        <a href="{{ route('guru.profil.show') }}" class="nav-link text-white">
-                            👤 Profil
-                        </a>
-                        <hr class="bg-white">
-                        <form action="{{ route('guru.logout') }}" method="POST">
-                            @csrf
-                            <button type="submit" class="btn btn-danger w-100">
-                                🚪 Logout
-                            </button>
-                        </form>
-                    </nav>
-                </div>
+<div class="wrapper">
+
+    <!-- SIDEBAR -->
+    <aside class="sidebar">
+
+        <div class="sidebar-logo">
+            <img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo">
+        </div>
+
+        <a href="{{ route('guru.dashboard') }}"
+           class="sidebar-link {{ request()->routeIs('guru.dashboard') ? 'active' : '' }}">
+            <img src="{{ asset('images/icon/sidebar/home.png') }}" class="sidebar-icon">
+            <span>Dashboard</span>
+        </a>
+
+        <a href="{{ route('guru.guru.index') }}"
+           class="sidebar-link {{ request()->routeIs('guru.guru.*') ? 'active' : '' }}">
+            <img src="{{ asset('images/icon/sidebar/guru.png') }}" class="sidebar-icon">
+            <span>Daftar Guru</span>
+        </a>
+
+        <a href="{{ route('guru.kelas.index') }}"
+           class="sidebar-link {{ request()->routeIs('guru.kelas.*') ? 'active' : '' }}">
+            <img src="{{ asset('images/icon/sidebar/kelas.png') }}" class="sidebar-icon">
+            <span>Daftar Kelas</span>
+        </a>
+
+        <a href="{{ route('guru.siswa.index') }}"
+           class="sidebar-link {{ request()->routeIs('guru.siswa.*') ? 'active' : '' }}">
+            <img src="{{ asset('images/icon/sidebar/siswa.png') }}" class="sidebar-icon">
+            <span>Daftar Siswa</span>
+        </a>
+
+        <a href="{{ route('guru.profil.show') }}"
+           class="sidebar-link {{ request()->routeIs('guru.profil.*') ? 'active' : '' }}">
+            <img src="{{ asset('images/icon/sidebar/profil.png') }}" class="sidebar-icon">
+            <span>Profil</span>
+        </a>
+
+        <form action="{{ route('guru.logout') }}" method="POST" class="sidebar-logout">
+            @csrf
+            <button type="submit" class="btn btn-danger w-100">
+                Logout
+            </button>
+        </form>
+
+    </aside>
+
+    <!-- MAIN -->
+    <div class="main">
+
+        <!-- TOPBAR -->
+        <header class="topbar">
+
+            <div class="topbar-left">
+                <img src="{{ asset('images/icon/main/hi.png') }}" 
+                     class="topbar-waving" 
+                     alt="Waving">
+
+                Hai, {{ Auth::guard('guru')->user()->nama ?? 'Guru' }}
             </div>
 
-            <!-- MAIN CONTENT -->
-            <div class="col-md-10 content-area">
-                @yield('content')
+            <div class="topbar-right">
+                <img src="{{ asset('images/icon/sidebar/notif.png') }}" 
+                     class="topbar-icon" 
+                     alt="Notification">
+
+                <img src="{{ asset('images/icon/sidebar/profil.png') }}" 
+                     class="topbar-icon" 
+                     alt="Profile">
             </div>
-        </div>
+
+        </header>
+
+        <!-- CONTENT -->
+        <main class="content">
+            @yield('content')
+        </main>
+
     </div>
 
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    
-    @stack('scripts')
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
