diff --git a/database/migrations/2026_03_13_040814_remember_token.php b/database/migrations/2026_03_13_040814_remember_token.php
new file mode 100644
index 0000000..85e36d3
--- /dev/null
+++ b/database/migrations/2026_03_13_040814_remember_token.php
@@ -0,0 +1,47 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        // Siswa
+        if (!Schema::hasColumn('siswas', 'remember_token')) {
+            Schema::table('siswas', function (Blueprint $table) {
+                $table->rememberToken();
+            });
+        }
+
+        // Guru
+        if (!Schema::hasColumn('gurus', 'remember_token')) {
+            Schema::table('gurus', function (Blueprint $table) {
+                $table->rememberToken();
+            });
+        }
+
+        // Admin
+        if (!Schema::hasColumn('admins', 'remember_token')) {
+            Schema::table('admins', function (Blueprint $table) {
+                $table->rememberToken();
+            });
+        }
+    }
+
+    public function down(): void
+    {
+        Schema::table('siswas', function (Blueprint $table) {
+            $table->dropColumn('remember_token');
+        });
+
+        Schema::table('gurus', function (Blueprint $table) {
+            $table->dropColumn('remember_token');
+        });
+
+        Schema::table('admins', function (Blueprint $table) {
+            $table->dropColumn('remember_token');
+        });
+    }
+};
\ No newline at end of file
diff --git a/public/css/login.css b/public/css/login.css
index 0ea7543..6eb0e6d 100644
--- a/public/css/login.css
+++ b/public/css/login.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@400;600;700;800&display=swap");
 
 *,
 *::before,
@@ -9,267 +9,292 @@
 }
 
 body {
-    font-family: "Outfit", sans-serif;
+    font-family: "Plus Jakarta Sans", sans-serif;
     min-height: 100vh;
     width: 100vw;
     overflow: hidden;
-    background: #eee8f4;
-}
-
-body::before {
-    content: "";
-    position: fixed;
-    inset: 0;
-    background-image: radial-gradient(
-        circle,
-        rgba(120, 80, 180, 0.08) 1px,
-        transparent 1px
+    background: linear-gradient(
+        135deg,
+        #0d47a1 0%,
+        #1565c0 35%,
+        #1976d2 65%,
+        #283593 100%
     );
-    background-size: 24px 24px;
-    pointer-events: none;
-    z-index: 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-/* ── WRAPPER ── */
+/* ── DECORATIVE SHAPES ── */
+.shape {
+    position: fixed;
+    pointer-events: none;
+}
+
+.shape-1 {
+    width: 320px;
+    height: 320px;
+    border: 2.5px solid rgba(255, 255, 255, 0.07);
+    border-radius: 60px;
+    top: -80px;
+    left: 80px;
+    transform: rotate(20deg);
+}
+
+.shape-2 {
+    width: 220px;
+    height: 220px;
+    border: 2px solid rgba(255, 255, 255, 0.06);
+    border-radius: 40px;
+    bottom: -40px;
+    left: 260px;
+    transform: rotate(-15deg);
+}
+
+.shape-3 {
+    width: 180px;
+    height: 180px;
+    border: 2px solid rgba(255, 255, 255, 0.05);
+    border-radius: 36px;
+    top: 40px;
+    right: 320px;
+    transform: rotate(30deg);
+}
+
+.shape-4 {
+    width: 400px;
+    height: 400px;
+    border: 2px solid rgba(255, 255, 255, 0.04);
+    border-radius: 80px;
+    bottom: -160px;
+    right: -80px;
+    transform: rotate(12deg);
+}
+
+.shape-5 {
+    width: 100px;
+    height: 100px;
+    background: rgba(255, 255, 255, 0.04);
+    border-radius: 24px;
+    top: 30%;
+    left: 38%;
+    transform: rotate(20deg);
+}
+
+.blob {
+    position: fixed;
+    border-radius: 50%;
+    pointer-events: none;
+    filter: blur(80px);
+}
+
+.blob-1 {
+    width: 500px;
+    height: 500px;
+    background: rgba(100, 180, 255, 0.12);
+    top: -200px;
+    left: -100px;
+}
+
+.blob-2 {
+    width: 350px;
+    height: 350px;
+    background: rgba(120, 80, 255, 0.1);
+    bottom: -100px;
+    right: 200px;
+}
+
+/* ── MAIN LAYOUT ── */
 .page-wrap {
+    width: 100%;
+    max-width: 1100px;
     min-height: 100vh;
     display: flex;
-    align-items: stretch;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 80px;
     position: relative;
     z-index: 1;
+    gap: 60px;
 }
 
 /* ── LEFT PANEL ── */
 .left-panel {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 60px 56px;
     color: white;
-    position: relative;
-    overflow: hidden;
-    background: linear-gradient(155deg, #1a5fd4 0%, #1e3fa8 55%, #162d82 100%);
 }
 
-.left-panel::before {
+.school-tag {
+    font-family: "Sora", sans-serif;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.4);
+    margin-bottom: 28px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.school-tag::before {
     content: "";
-    position: absolute;
-    width: 420px;
-    height: 420px;
-    border-radius: 50%;
-    background: radial-gradient(
-        circle,
-        rgba(100, 180, 255, 0.18) 0%,
-        transparent 65%
-    );
-    top: -120px;
-    right: -100px;
-    pointer-events: none;
+    display: block;
+    width: 28px;
+    height: 2px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 99px;
 }
 
-.left-panel::after {
-    content: "";
-    position: absolute;
-    width: 320px;
-    height: 320px;
-    border-radius: 50%;
-    border: 1.5px solid rgba(255, 255, 255, 0.07);
-    bottom: -80px;
-    left: -60px;
-    pointer-events: none;
-}
-
-.left-accent {
-    position: absolute;
-    inset: 0;
-    background-image: repeating-linear-gradient(
-        -55deg,
-        transparent,
-        transparent 40px,
-        rgba(255, 255, 255, 0.015) 40px,
-        rgba(255, 255, 255, 0.015) 80px
-    );
-    pointer-events: none;
-}
-
-.school-logo {
-    width: 68px;
-    height: 68px;
-    border-radius: 18px;
-    background: rgba(255, 255, 255, 0.12);
-    border: 1.5px solid rgba(255, 255, 255, 0.2);
+.left-logo {
+    width: 56px;
+    height: 56px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1.5px solid rgba(255, 255, 255, 0.18);
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 36px;
-    position: relative;
+    margin-bottom: 32px;
 }
 
-.school-logo img {
-    width: 48px;
-    height: 48px;
+.left-logo img {
+    width: 38px;
+    height: 38px;
     object-fit: contain;
     filter: brightness(0) invert(1);
 }
 
-.left-tag {
-    font-family: "JetBrains Mono", monospace;
-    font-size: 10px;
-    font-weight: 700;
-    letter-spacing: 2.5px;
-    text-transform: uppercase;
-    color: rgba(255, 255, 255, 0.45);
-    margin-bottom: 12px;
-    position: relative;
-}
-
-.left-title {
-    font-size: clamp(26px, 3vw, 40px);
+.left-welcome {
+    font-family: "Sora", sans-serif;
+    font-size: clamp(42px, 5.5vw, 72px);
     font-weight: 800;
-    line-height: 1.15;
-    margin-bottom: 14px;
-    letter-spacing: -0.5px;
-    position: relative;
-}
-
-.left-title em {
-    font-style: normal;
-    position: relative;
-}
-
-.left-title em::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 1px;
-    height: 3px;
-    border-radius: 99px;
-    background: #a5d8ff;
-    opacity: 0.55;
-}
-
-.left-school {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.42);
-    font-weight: 500;
+    line-height: 1.05;
+    margin-bottom: 20px;
+    letter-spacing: -1px;
+    color: white;
+}
+
+.left-welcome span {
+    display: block;
+    color: rgba(255, 255, 255, 0.35);
+    font-size: 0.42em;
+    font-weight: 600;
+    font-family: "Plus Jakarta Sans", sans-serif;
+    letter-spacing: 0;
+    margin-top: 8px;
+}
+
+.left-divider {
+    width: 40px;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 99px;
     margin-bottom: 20px;
-    position: relative;
 }
 
 .left-desc {
     font-size: 14px;
-    color: rgba(255, 255, 255, 0.6);
-    line-height: 1.75;
-    max-width: 320px;
-    margin-bottom: 40px;
-    position: relative;
+    color: rgba(255, 255, 255, 0.5);
+    line-height: 1.8;
+    max-width: 300px;
+    margin-bottom: 32px;
 }
 
-.stats-row {
-    display: flex;
-    gap: 12px;
-    position: relative;
-}
-
-.stat-item {
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 14px;
-    padding: 14px 18px;
-}
-
-.stat-num {
-    font-family: "JetBrains Mono", monospace;
-    font-size: 20px;
-    font-weight: 700;
+.btn-learn {
+    display: inline-block;
+    background: rgba(255, 255, 255, 0.12);
+    border: 1.5px solid rgba(255, 255, 255, 0.22);
     color: white;
-    line-height: 1;
+    font-family: "Plus Jakarta Sans", sans-serif;
+    font-size: 13px;
+    font-weight: 700;
+    padding: 10px 22px;
+    border-radius: 99px;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.2s;
 }
 
-.stat-label {
-    font-size: 10px;
-    color: rgba(255, 255, 255, 0.45);
-    margin-top: 5px;
-    font-weight: 500;
-    letter-spacing: 0.3px;
-}
-
-/* ── RIGHT PANEL ── */
-.right-panel {
-    width: 420px;
-    flex-shrink: 0;
-    background: #eee8f4;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 48px 44px;
+.btn-learn:hover {
+    background: rgba(255, 255, 255, 0.2);
 }
 
 /* ── FORM CARD ── */
 .form-card {
-    width: 100%;
-    background: white;
-    border-radius: 24px;
-    padding: 36px 36px 32px;
+    width: 380px;
+    flex-shrink: 0;
+    background: #f3effc;
+    border: 1px solid rgba(180, 160, 230, 0.3);
+    border-radius: 28px;
+    padding: 40px 40px 36px;
     box-shadow:
-        0 4px 6px rgba(100, 60, 180, 0.04),
-        0 20px 40px rgba(100, 60, 180, 0.1),
-        0 0 0 1px rgba(100, 60, 180, 0.06);
+        0 32px 64px rgba(0, 0, 0, 0.22),
+        0 0 0 1px rgba(255, 255, 255, 0.7);
+    color: #1a1a2e;
+}
+
+.card-title-wrap {
+    text-align: center;
+    margin-bottom: 28px;
 }
 
 .role-badge {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 7px;
-    background: #ede9fb;
+    background: white;
+    border: 1px solid rgba(180, 160, 230, 0.35);
     border-radius: 99px;
-    padding: 5px 13px;
+    padding: 5px 14px;
     font-size: 10px;
     font-weight: 700;
     color: #5b3fc0;
     letter-spacing: 1.5px;
     text-transform: uppercase;
-    font-family: "JetBrains Mono", monospace;
-    margin-bottom: 18px;
+    font-family: "Sora", sans-serif;
+    margin-bottom: 14px;
 }
 
 .badge-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: #7c5cbf;
+    background: #69f0ae;
+    box-shadow: 0 0 6px #69f0ae;
 }
 
-.form-title {
-    font-size: 22px;
+.card-title {
+    font-family: "Sora", sans-serif;
+    font-size: 26px;
     font-weight: 800;
     color: #1a1a2e;
-    margin-bottom: 3px;
+    margin-bottom: 6px;
     letter-spacing: -0.3px;
 }
 
-.form-sub {
-    font-size: 13px;
-    color: #9ba3b8;
-    margin-bottom: 24px;
-    font-weight: 500;
+.title-underline {
+    display: inline-block;
+    width: 36px;
+    height: 3px;
+    background: linear-gradient(90deg, #60b4ff, #a78bfa);
+    border-radius: 99px;
+    margin-top: 2px;
 }
 
+/* ── FIELDS ── */
 .field-group {
-    margin-bottom: 12px;
+    margin-bottom: 14px;
 }
 
 .field-label {
     display: block;
-    font-size: 11px;
-    font-weight: 700;
+    font-size: 13px;
+    font-weight: 600;
     color: #4a5568;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-    margin-bottom: 6px;
+    margin-bottom: 7px;
 }
 
 .field-wrap {
@@ -278,23 +303,18 @@ .field-wrap {
     align-items: center;
 }
 
-.field-icon {
-    position: absolute;
-    left: 13px;
-    width: 15px;
-    height: 15px;
-    opacity: 0.3;
-    pointer-events: none;
+.field-wrap .field-input {
+    padding-right: 44px;
 }
 
 .field-input {
     width: 100%;
-    background: #f7f5fc;
-    border: 1.5px solid #e8e2f5;
-    border-radius: 11px;
-    padding: 11px 13px 11px 38px;
+    background: white;
+    border: 1.5px solid #ddd6f5;
+    border-radius: 12px;
+    padding: 12px 16px;
     font-size: 14px;
-    font-family: "Outfit", sans-serif;
+    font-family: "Plus Jakarta Sans", sans-serif;
     font-weight: 500;
     color: #1a1a2e;
     outline: none;
@@ -314,19 +334,18 @@ .field-input:focus {
 
 .toggle-password {
     position: absolute;
-    right: 11px;
+    right: 12px;
     background: none;
     border: none;
     cursor: pointer;
     padding: 4px;
-    border-radius: 6px;
     display: flex;
     align-items: center;
 }
 
 .eye-icon {
-    width: 16px;
-    height: 16px;
+    width: 17px;
+    height: 17px;
     opacity: 0.3;
     pointer-events: none;
     transition: opacity 0.2s;
@@ -336,10 +355,11 @@ .toggle-password:hover .eye-icon {
     opacity: 0.6;
 }
 
+/* ── REMEMBER ── */
 .remember-row {
     display: flex;
     align-items: center;
-    margin: 8px 0 18px;
+    margin: 6px 0 20px;
     gap: 8px;
 }
 
@@ -382,37 +402,40 @@ .remember-text {
     user-select: none;
 }
 
+/* ── SUBMIT BUTTON ── */
 .submit-btn {
     width: 100%;
-    background: linear-gradient(135deg, #1e6fd4, #1a3fa8);
+    background: linear-gradient(135deg, #7c5cbf, #5b3fc0);
     color: white;
     border: none;
-    border-radius: 11px;
-    padding: 13px;
+    border-radius: 12px;
+    padding: 14px;
     font-size: 14px;
     font-weight: 700;
-    font-family: "Outfit", sans-serif;
+    font-family: "Plus Jakarta Sans", sans-serif;
     cursor: pointer;
     transition: all 0.25s;
-    box-shadow: 0 6px 18px rgba(30, 63, 168, 0.3);
+    box-shadow: 0 8px 24px rgba(91, 63, 192, 0.3);
     letter-spacing: 0.3px;
 }
 
 .submit-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 10px 26px rgba(30, 63, 168, 0.4);
+    box-shadow: 0 12px 30px rgba(91, 63, 192, 0.4);
 }
 
 .submit-btn:active {
     transform: translateY(0);
 }
 
+/* ── DIVIDER ── */
 .card-divider {
     border: none;
-    border-top: 1px solid #f0ebfa;
-    margin: 18px 0 14px;
+    border-top: 1px solid #ede9fb;
+    margin: 20px 0 16px;
 }
 
+/* ── OTHER PORTALS ── */
 .other-portals {
     text-align: center;
     font-size: 12px;
@@ -436,31 +459,17 @@ .other-portals a:hover {
     background: #ede9fb;
 }
 
-.back-link {
-    display: block;
-    text-align: center;
-    color: rgba(80, 60, 140, 0.45);
-    font-size: 12px;
-    text-decoration: none;
-    margin-top: 16px;
-    transition: color 0.2s;
-    font-weight: 500;
-}
-
-.back-link:hover {
-    color: rgba(80, 60, 140, 0.75);
-}
-
+/* ── TOAST ── */
 .toast-error {
-    background: linear-gradient(135deg, #ff6b6b, #d32f2f);
-    color: white;
+    background: #fee2e2;
+    border: 1px solid #fca5a5;
+    color: #dc2626;
     padding: 10px 14px;
     border-radius: 10px;
     font-size: 13px;
     font-weight: 500;
     text-align: center;
     margin-bottom: 14px;
-    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2);
     animation:
         toastIn 0.3s ease both,
         toastOut 0.4s ease 3.5s forwards;
@@ -487,22 +496,38 @@ @keyframes toastOut {
     }
 }
 
+/* ── BACK LINK ── */
+.back-link {
+    display: block;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.35);
+    font-size: 12px;
+    text-decoration: none;
+    margin-top: 14px;
+    transition: color 0.2s;
+    font-weight: 500;
+}
+
+.back-link:hover {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* ── RESPONSIVE ── */
 @media (max-width: 860px) {
-    .page-wrap {
-        flex-direction: column;
-    }
     body {
         overflow: auto;
+        align-items: flex-start;
     }
-    .left-panel {
-        padding: 40px 32px 32px;
+    .page-wrap {
+        flex-direction: column;
+        padding: 48px 24px;
+        gap: 32px;
         min-height: auto;
     }
-    .right-panel {
+    .form-card {
         width: 100%;
-        padding: 32px 24px 48px;
     }
-    .stats-row {
-        display: none;
+    .left-welcome {
+        font-size: 40px;
     }
 }
diff --git a/resources/views/auth/login-admin.blade.php b/resources/views/auth/login-admin.blade.php
index 44cea3f..8d80f07 100644
--- a/resources/views/auth/login-admin.blade.php
+++ b/resources/views/auth/login-admin.blade.php
@@ -5,120 +5,121 @@
 @section('content')
 <link rel="stylesheet" href="{{ asset('css/login.css') }}">
 
+<div class="shape shape-1"></div>
+<div class="shape shape-2"></div>
+<div class="shape shape-3"></div>
+<div class="shape shape-4"></div>
+<div class="shape shape-5"></div>
+<div class="blob blob-1"></div>
+<div class="blob blob-2"></div>
+
 <div class="page-wrap">
 
-  {{-- LEFT: Info Panel --}}
+  {{-- LEFT --}}
   <div class="left-panel">
-    <div class="left-accent"></div>
-
-    <div class="school-logo">
+    <div class="left-logo">
       <img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo SMK">
     </div>
-
-    <div class="left-tag">SMK Negeri 1 Tapen</div>
-
-    <h1 class="left-title">
-      Platform<br>
-      <em>E-Learning</em><br>
-      RPL
-    </h1>
-
-    <div class="left-school">Rekayasa Perangkat Lunak</div>
-
-    <p class="left-desc">
-      Kelola data jurusan, publish challenge, dan pantau seluruh aktivitas di platform.
-    </p>
-
-    <div class="stats-row">
-      <div class="stat-item">
-        <div class="stat-num">3</div>
-        <div class="stat-label">Kelas RPL</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-num">EXP</div>
-        <div class="stat-label">Sistem Poin</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-num">#1</div>
-        <div class="stat-label">Leaderboard</div>
-      </div>
+    <div class="school-tag">SMK Negeri 1 Tapen</div>
+    <div class="left-welcome">
+      Selamat<br>Datang!
+      <span>Rekayasa Perangkat Lunak</span>
     </div>
+    <div class="left-divider"></div>
+    <p class="left-desc">
+      Kelola data jurusan RPL, publish challenge, dan pantau seluruh aktivitas di platform.
+    </p>
+    <a href="{{ route('landing-page') }}" class="btn-learn">Pelajari Platform</a>
   </div>
 
-  {{-- RIGHT: Form --}}
-  <div class="right-panel">
-    <div>
-      <div class="form-card">
-
-        <div class="role-badge">
-          <span class="badge-dot"></span>
-          Portal Admin
-        </div>
-
-        <div class="form-title">Masuk ke Akun</div>
-        <div class="form-sub">Gunakan username kamu untuk login</div>
-
-        @if ($errors->any())
-          <div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
-        @endif
-
-        <form method="POST" action="{{ route('admin.login.submit') }}">
-          @csrf
-
-          <div class="field-group">
-            <label class="field-label">Username</label>
-            <div class="field-wrap">
-              <img src="{{ asset('icons/username.svg') }}" class="field-icon" alt="">
-              <input type="text" name="username" class="field-input"
-                placeholder="Masukkan username" required
-                value="{{ old('username') }}" autocomplete="username">
-            </div>
-          </div>
-
-          <div class="field-group">
-            <label class="field-label">Password</label>
-            <div class="field-wrap">
-              <img src="{{ asset('icons/password.svg') }}" class="field-icon" alt="">
-              <input type="password" name="password" class="field-input password-input"
-                placeholder="Masukkan password" required autocomplete="current-password">
-              <button type="button" class="toggle-password" aria-label="Lihat password">
-                <img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
-              </button>
-            </div>
-          </div>
-
-          <div class="remember-row">
-            <input type="checkbox" class="remember-check" name="remember" id="remember"
-              {{ old('remember') ? 'checked' : '' }}>
-            <label class="remember-text" for="remember">Ingat saya</label>
-          </div>
-
-          <button type="submit" class="submit-btn">Masuk ke Dashboard</button>
-        </form>
-
-        <hr class="card-divider">
-
-        <div class="other-portals">
-          <span>Login sebagai</span>
-          <a href="{{ route('siswa.login') }}">Siswa</a>
-          <span>·</span>
-          <a href="{{ route('guru.login') }}">Guru</a>
-        </div>
+  {{-- RIGHT: Form Card --}}
+  <div>
+    <div class="form-card">
 
+      <div class="card-title-wrap">
+        <div class="role-badge"><span class="badge-dot"></span>Portal Admin</div>
+        <div class="card-title">Sign In</div>
+        <div class="title-underline"></div>
+      </div>
+
+      @if ($errors->any())
+        <div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
+      @endif
+
+      <form method="POST" action="{{ route('admin.login.submit') }}" id="login-form">
+        @csrf
+
+        <div class="field-group">
+          <label class="field-label">Username</label>
+          <input type="text" name="username" id="field-identity" class="field-input"
+            placeholder="Masukkan username" required
+            value="{{ old('username') }}" autocomplete="username">
+        </div>
+
+        <div class="field-group">
+          <label class="field-label">Password</label>
+          <div class="field-wrap">
+            <input type="password" name="password" class="field-input password-input"
+              placeholder="Masukkan password" required autocomplete="current-password">
+            <button type="button" class="toggle-password" aria-label="Lihat password">
+              <img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
+            </button>
+          </div>
+        </div>
+
+        <div class="remember-row">
+          <input type="checkbox" class="remember-check" name="remember" id="remember"
+            {{ old('remember') ? 'checked' : '' }}>
+          <label class="remember-text" for="remember">Ingat saya</label>
+        </div>
+
+        <button type="submit" class="submit-btn">Masuk</button>
+      </form>
+
+      <hr class="card-divider">
+
+      <div class="other-portals">
+        <span>Login sebagai</span>
+        <a href="{{ route('siswa.login') }}">Siswa</a>
+        <span>·</span>
+        <a href="{{ route('guru.login') }}">Guru</a>
       </div>
 
-      <a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
     </div>
+    <a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
   </div>
 
 </div>
 
 <script>
 document.addEventListener('DOMContentLoaded', function () {
+  const identityInput = document.getElementById('field-identity');
+  const rememberCheck = document.getElementById('remember');
+  const form          = document.getElementById('login-form');
   const toggleBtn     = document.querySelector('.toggle-password');
   const passwordInput = document.querySelector('.password-input');
   const eyeIcon       = toggleBtn?.querySelector('img');
+  const STORAGE_KEY   = 'remember_username';
 
+  // Auto-fill dari localStorage jika tidak ada old() value
+  if (!identityInput.value) {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      identityInput.value = saved;
+      rememberCheck.checked = true;
+    }
+  }
+
+  // Simpan / hapus saat submit
+  form.addEventListener('submit', function () {
+    if (rememberCheck.checked) {
+      localStorage.setItem(STORAGE_KEY, identityInput.value);
+    } else {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+  });
+
+  // Toggle password
   toggleBtn?.addEventListener('click', () => {
     const isVisible = passwordInput.type === 'text';
     passwordInput.type = isVisible ? 'password' : 'text';
@@ -127,6 +128,7 @@
       : "{{ asset('icons/hide.svg') }}";
   });
 
+  // Auto remove toast
   const toast = document.getElementById('toast-error');
   if (toast) setTimeout(() => toast.remove(), 4000);
 });
diff --git a/resources/views/auth/login-guru.blade.php b/resources/views/auth/login-guru.blade.php
index e6ed3fd..dce92f5 100644
--- a/resources/views/auth/login-guru.blade.php
+++ b/resources/views/auth/login-guru.blade.php
@@ -5,120 +5,121 @@
 @section('content')
 <link rel="stylesheet" href="{{ asset('css/login.css') }}">
 
+<div class="shape shape-1"></div>
+<div class="shape shape-2"></div>
+<div class="shape shape-3"></div>
+<div class="shape shape-4"></div>
+<div class="shape shape-5"></div>
+<div class="blob blob-1"></div>
+<div class="blob blob-2"></div>
+
 <div class="page-wrap">
 
-  {{-- LEFT: Info Panel --}}
+  {{-- LEFT --}}
   <div class="left-panel">
-    <div class="left-accent"></div>
-
-    <div class="school-logo">
+    <div class="left-logo">
       <img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo SMK">
     </div>
-
-    <div class="left-tag">SMK Negeri 1 Tapen</div>
-
-    <h1 class="left-title">
-      Platform<br>
-      <em>E-Learning</em><br>
-      RPL
-    </h1>
-
-    <div class="left-school">Rekayasa Perangkat Lunak</div>
-
+    <div class="school-tag">SMK Negeri 1 Tapen</div>
+    <div class="left-welcome">
+      Selamat<br>Datang!
+      <span>Rekayasa Perangkat Lunak</span>
+    </div>
+    <div class="left-divider"></div>
     <p class="left-desc">
       Kelola materi, buat tugas, pantau pengumpulan, dan lihat perkembangan kelas kamu.
     </p>
-
-    <div class="stats-row">
-      <div class="stat-item">
-        <div class="stat-num">3</div>
-        <div class="stat-label">Kelas RPL</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-num">EXP</div>
-        <div class="stat-label">Sistem Poin</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-num">#1</div>
-        <div class="stat-label">Leaderboard</div>
-      </div>
-    </div>
+    <a href="{{ route('landing-page') }}" class="btn-learn">Pelajari Platform</a>
   </div>
 
-  {{-- RIGHT: Form --}}
-  <div class="right-panel">
-    <div>
-      <div class="form-card">
-
-        <div class="role-badge">
-          <span class="badge-dot"></span>
-          Portal Guru
-        </div>
-
-        <div class="form-title">Masuk ke Akun</div>
-        <div class="form-sub">Gunakan NIP kamu untuk login</div>
-
-        @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="field-group">
-            <label class="field-label">NIP</label>
-            <div class="field-wrap">
-              <img src="{{ asset('icons/username.svg') }}" class="field-icon" alt="">
-              <input type="text" name="nip" class="field-input"
-                placeholder="Masukkan NIP" required
-                value="{{ old('nip') }}" autocomplete="username">
-            </div>
-          </div>
-
-          <div class="field-group">
-            <label class="field-label">Password</label>
-            <div class="field-wrap">
-              <img src="{{ asset('icons/password.svg') }}" class="field-icon" alt="">
-              <input type="password" name="password" class="field-input password-input"
-                placeholder="Masukkan password" required autocomplete="current-password">
-              <button type="button" class="toggle-password" aria-label="Lihat password">
-                <img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
-              </button>
-            </div>
-          </div>
-
-          <div class="remember-row">
-            <input type="checkbox" class="remember-check" name="remember" id="remember"
-              {{ old('remember') ? 'checked' : '' }}>
-            <label class="remember-text" for="remember">Ingat saya</label>
-          </div>
-
-          <button type="submit" class="submit-btn">Masuk ke Dashboard</button>
-        </form>
-
-        <hr class="card-divider">
-
-        <div class="other-portals">
-          <span>Login sebagai</span>
-          <a href="{{ route('siswa.login') }}">Siswa</a>
-          <span>·</span>
-          <a href="{{ route('admin.login') }}">Admin</a>
-        </div>
+  {{-- RIGHT: Form Card --}}
+  <div>
+    <div class="form-card">
 
+      <div class="card-title-wrap">
+        <div class="role-badge"><span class="badge-dot"></span>Portal Guru</div>
+        <div class="card-title">Sign In</div>
+        <div class="title-underline"></div>
+      </div>
+
+      @if ($errors->any())
+        <div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
+      @endif
+
+      <form method="POST" action="{{ route('guru.login.submit') }}" id="login-form">
+        @csrf
+
+        <div class="field-group">
+          <label class="field-label">NIP</label>
+          <input type="text" name="nip" id="field-identity" class="field-input"
+            placeholder="Masukkan NIP" required
+            value="{{ old('nip') }}" autocomplete="username">
+        </div>
+
+        <div class="field-group">
+          <label class="field-label">Password</label>
+          <div class="field-wrap">
+            <input type="password" name="password" class="field-input password-input"
+              placeholder="Masukkan password" required autocomplete="current-password">
+            <button type="button" class="toggle-password" aria-label="Lihat password">
+              <img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
+            </button>
+          </div>
+        </div>
+
+        <div class="remember-row">
+          <input type="checkbox" class="remember-check" name="remember" id="remember"
+            {{ old('remember') ? 'checked' : '' }}>
+          <label class="remember-text" for="remember">Ingat saya</label>
+        </div>
+
+        <button type="submit" class="submit-btn">Masuk</button>
+      </form>
+
+      <hr class="card-divider">
+
+      <div class="other-portals">
+        <span>Login sebagai</span>
+        <a href="{{ route('siswa.login') }}">Siswa</a>
+        <span>·</span>
+        <a href="{{ route('admin.login') }}">Admin</a>
       </div>
 
-      <a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
     </div>
+    <a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
   </div>
 
 </div>
 
 <script>
 document.addEventListener('DOMContentLoaded', function () {
+  const identityInput = document.getElementById('field-identity');
+  const rememberCheck = document.getElementById('remember');
+  const form          = document.getElementById('login-form');
   const toggleBtn     = document.querySelector('.toggle-password');
   const passwordInput = document.querySelector('.password-input');
   const eyeIcon       = toggleBtn?.querySelector('img');
+  const STORAGE_KEY   = 'remember_nip';
 
+  // Auto-fill dari localStorage jika tidak ada old() value
+  if (!identityInput.value) {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      identityInput.value = saved;
+      rememberCheck.checked = true;
+    }
+  }
+
+  // Simpan / hapus saat submit
+  form.addEventListener('submit', function () {
+    if (rememberCheck.checked) {
+      localStorage.setItem(STORAGE_KEY, identityInput.value);
+    } else {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+  });
+
+  // Toggle password
   toggleBtn?.addEventListener('click', () => {
     const isVisible = passwordInput.type === 'text';
     passwordInput.type = isVisible ? 'password' : 'text';
@@ -127,6 +128,7 @@
       : "{{ asset('icons/hide.svg') }}";
   });
 
+  // Auto remove toast
   const toast = document.getElementById('toast-error');
   if (toast) setTimeout(() => toast.remove(), 4000);
 });
diff --git a/resources/views/auth/login-siswa.blade.php b/resources/views/auth/login-siswa.blade.php
index 94b745b..3632365 100644
--- a/resources/views/auth/login-siswa.blade.php
+++ b/resources/views/auth/login-siswa.blade.php
@@ -5,120 +5,121 @@
 @section('content')
 <link rel="stylesheet" href="{{ asset('css/login.css') }}">
 
+<div class="shape shape-1"></div>
+<div class="shape shape-2"></div>
+<div class="shape shape-3"></div>
+<div class="shape shape-4"></div>
+<div class="shape shape-5"></div>
+<div class="blob blob-1"></div>
+<div class="blob blob-2"></div>
+
 <div class="page-wrap">
 
-  {{-- LEFT: Info Panel --}}
+  {{-- LEFT --}}
   <div class="left-panel">
-    <div class="left-accent"></div>
-
-    <div class="school-logo">
+    <div class="left-logo">
       <img src="{{ asset('images/logo/logosmk.png') }}" alt="Logo SMK">
     </div>
-
-    <div class="left-tag">SMK Negeri 1 Tapen</div>
-
-    <h1 class="left-title">
-      Platform<br>
-      <em>E-Learning</em><br>
-      RPL
-    </h1>
-
-    <div class="left-school">Rekayasa Perangkat Lunak</div>
-
+    <div class="school-tag">SMK Negeri 1 Tapen</div>
+    <div class="left-welcome">
+      Selamat<br>Datang!
+      <span>Rekayasa Perangkat Lunak</span>
+    </div>
+    <div class="left-divider"></div>
     <p class="left-desc">
       Akses materi, kumpulkan tugas, ikuti challenge, dan bersaing di leaderboard kelas.
     </p>
-
-    <div class="stats-row">
-      <div class="stat-item">
-        <div class="stat-num">3</div>
-        <div class="stat-label">Kelas RPL</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-num">EXP</div>
-        <div class="stat-label">Sistem Poin</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-num">#1</div>
-        <div class="stat-label">Leaderboard</div>
-      </div>
-    </div>
+    <a href="{{ route('landing-page') }}" class="btn-learn">Pelajari Platform</a>
   </div>
 
-  {{-- RIGHT: Form --}}
-  <div class="right-panel">
-    <div>
-      <div class="form-card">
-
-        <div class="role-badge">
-          <span class="badge-dot"></span>
-          Portal Siswa
-        </div>
-
-        <div class="form-title">Masuk ke Akun</div>
-        <div class="form-sub">Gunakan NISN kamu untuk login</div>
-
-        @if ($errors->any())
-          <div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
-        @endif
-
-        <form method="POST" action="{{ route('siswa.login.submit') }}">
-          @csrf
-
-          <div class="field-group">
-            <label class="field-label">NISN</label>
-            <div class="field-wrap">
-              <img src="{{ asset('icons/username.svg') }}" class="field-icon" alt="">
-              <input type="text" name="nisn" class="field-input"
-                placeholder="Masukkan NISN" required
-                value="{{ old('nisn') }}" autocomplete="username">
-            </div>
-          </div>
-
-          <div class="field-group">
-            <label class="field-label">Password</label>
-            <div class="field-wrap">
-              <img src="{{ asset('icons/password.svg') }}" class="field-icon" alt="">
-              <input type="password" name="password" class="field-input password-input"
-                placeholder="Masukkan password" required autocomplete="current-password">
-              <button type="button" class="toggle-password" aria-label="Lihat password">
-                <img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
-              </button>
-            </div>
-          </div>
-
-          <div class="remember-row">
-            <input type="checkbox" class="remember-check" name="remember" id="remember"
-              {{ old('remember') ? 'checked' : '' }}>
-            <label class="remember-text" for="remember">Ingat saya</label>
-          </div>
-
-          <button type="submit" class="submit-btn">Masuk ke Dashboard</button>
-        </form>
-
-        <hr class="card-divider">
-
-        <div class="other-portals">
-          <span>Login sebagai</span>
-          <a href="{{ route('guru.login') }}">Guru</a>
-          <span>·</span>
-          <a href="{{ route('admin.login') }}">Admin</a>
-        </div>
+  {{-- RIGHT: Form Card --}}
+  <div>
+    <div class="form-card">
 
+      <div class="card-title-wrap">
+        <div class="role-badge"><span class="badge-dot"></span>Portal Siswa</div>
+        <div class="card-title">Sign In</div>
+        <div class="title-underline"></div>
+      </div>
+
+      @if ($errors->any())
+        <div id="toast-error" class="toast-error">{{ $errors->first() }}</div>
+      @endif
+
+      <form method="POST" action="{{ route('siswa.login.submit') }}" id="login-form">
+        @csrf
+
+        <div class="field-group">
+          <label class="field-label">NISN</label>
+          <input type="text" name="nisn" id="field-identity" class="field-input"
+            placeholder="Masukkan NISN" required
+            value="{{ old('nisn') }}" autocomplete="username">
+        </div>
+
+        <div class="field-group">
+          <label class="field-label">Password</label>
+          <div class="field-wrap">
+            <input type="password" name="password" class="field-input password-input"
+              placeholder="Masukkan password" required autocomplete="current-password">
+            <button type="button" class="toggle-password" aria-label="Lihat password">
+              <img src="{{ asset('icons/show.svg') }}" class="eye-icon" alt="show">
+            </button>
+          </div>
+        </div>
+
+        <div class="remember-row">
+          <input type="checkbox" class="remember-check" name="remember" id="remember"
+            {{ old('remember') ? 'checked' : '' }}>
+          <label class="remember-text" for="remember">Ingat saya</label>
+        </div>
+
+        <button type="submit" class="submit-btn">Masuk</button>
+      </form>
+
+      <hr class="card-divider">
+
+      <div class="other-portals">
+        <span>Login sebagai</span>
+        <a href="{{ route('guru.login') }}">Guru</a>
+        <span>·</span>
+        <a href="{{ route('admin.login') }}">Admin</a>
       </div>
 
-      <a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
     </div>
+    <a href="{{ route('landing-page') }}" class="back-link">← Kembali ke Landing Page</a>
   </div>
 
 </div>
 
 <script>
 document.addEventListener('DOMContentLoaded', function () {
+  const identityInput = document.getElementById('field-identity');
+  const rememberCheck = document.getElementById('remember');
+  const form          = document.getElementById('login-form');
   const toggleBtn     = document.querySelector('.toggle-password');
   const passwordInput = document.querySelector('.password-input');
   const eyeIcon       = toggleBtn?.querySelector('img');
+  const STORAGE_KEY   = 'remember_nisn';
 
+  // Auto-fill dari localStorage jika tidak ada old() value
+  if (!identityInput.value) {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      identityInput.value = saved;
+      rememberCheck.checked = true;
+    }
+  }
+
+  // Simpan / hapus saat submit
+  form.addEventListener('submit', function () {
+    if (rememberCheck.checked) {
+      localStorage.setItem(STORAGE_KEY, identityInput.value);
+    } else {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+  });
+
+  // Toggle password
   toggleBtn?.addEventListener('click', () => {
     const isVisible = passwordInput.type === 'text';
     passwordInput.type = isVisible ? 'password' : 'text';
@@ -127,6 +128,7 @@
       : "{{ asset('icons/hide.svg') }}";
   });
 
+  // Auto remove toast
   const toast = document.getElementById('toast-error');
   if (toast) setTimeout(() => toast.remove(), 4000);
 });