diff --git a/login.php b/login.php
index fd15b52..e924bbd 100644
--- a/login.php
+++ b/login.php
@@ -1,32 +1,210 @@
 <?php
+
 session_start();
+
+if (isset($_SESSION['user_id'])) { header("Location: dashboard.php"); exit; }
+
 include 'koneksi.php';
 
+$error = '';
+
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+
     $username = mysqli_real_escape_string($conn, trim($_POST['username']));
-    $password = $_POST['password']; // Jangan di-trim jika password mengandung spasi
 
-    $sql = "SELECT * FROM users WHERE username = '$username' LIMIT 1";
-    $result = mysqli_query($conn, $sql);
+    $password = trim($_POST['password']);
 
-    if ($result && mysqli_num_rows($result) === 1) {
-        $user = mysqli_fetch_assoc($result);
+    if (empty($username) || empty($password)) {
+
+        $error = 'Username dan password tidak boleh kosong.';
 
-        // Verifikasi password (menggunakan hash)
-        if (password_verify($password, $user['password'])) {
-            $_SESSION['user_id'] = (int)$user['id'];
-            $_SESSION['username'] = $user['username'];
-            $_SESSION['nama'] = $user['nama'];
-            $_SESSION['role'] = $user['role']; // Sesi role diisi di sini
-            
-            // Arahkan ke dashboard
-            header("Location: dashboard.php");
-            exit;
-        } else {
-            $error = "Password salah!";
-        }
     } else {
-        $error = "Username tidak ditemukan!";
+
+        $sql = "SELECT * FROM users WHERE username = '$username' LIMIT 1";
+
+        $result = mysqli_query($conn, $sql);
+
+        if ($result && mysqli_num_rows($result) === 1) {
+
+            $user = mysqli_fetch_assoc($result);
+
+            if (password_verify($password, $user['password'])) {
+
+                $_SESSION['user_id']         = (int)$user['id'];
+
+                $_SESSION['username']        = $user['username'];
+
+                $_SESSION['nama']            = $user['nama'];
+
+                $_SESSION['role']            = $user['role'];
+
+                $_SESSION['id_rumah_ibadah'] = $user['id_rumah_ibadah'] ? (int)$user['id_rumah_ibadah'] : null;
+
+                header("Location: dashboard.php");
+
+                exit;
+
+            } else { $error = 'Password salah.'; }
+
+        } else { $error = 'Username tidak ditemukan.'; }
+
     }
+
 }
-?>
\ No newline at end of file
+
+?>
+
+<!DOCTYPE html>
+
+<html lang="id">
+
+<head>
+
+    <meta charset="UTF-8">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Login — WebGIS Poverty Mapping</title>
+
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+
+    <style>
+
+        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+
+        body{font-family:'Plus Jakarta Sans',sans-serif;background:#0b132b;color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
+
+        .bg-anim{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden}
+
+        .bg-anim .c{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(91,192,190,0.08),transparent 70%);animation:fl 20s infinite ease-in-out}
+
+        .bg-anim .c:nth-child(1){width:600px;height:600px;top:-200px;left:-100px}
+
+        .bg-anim .c:nth-child(2){width:400px;height:400px;bottom:-100px;right:-80px;animation-delay:-7s;background:radial-gradient(circle,rgba(111,255,233,0.06),transparent 70%)}
+
+        .bg-anim .c:nth-child(3){width:300px;height:300px;top:50%;left:60%;animation-delay:-14s}
+
+        @keyframes fl{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(0.95)}}
+
+        .login-wrap{position:relative;z-index:1;width:100%;max-width:420px;padding:20px}
+
+        .login-card{background:rgba(14,23,44,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:44px 36px;box-shadow:0 20px 60px rgba(0,0,0,0.5);animation:cs .6s ease-out}
+
+        @keyframes cs{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
+
+        .brand{text-align:center;margin-bottom:36px}
+
+        .brand-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#5bc0be,#3a506b);display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:16px;box-shadow:0 8px 24px rgba(91,192,190,0.3)}
+
+        .brand h1{font-size:1.3rem;font-weight:800;letter-spacing:-0.5px;margin-bottom:6px}
+
+        .brand p{font-size:0.78rem;color:#78909c;letter-spacing:0.5px}
+
+        .form-group{margin-bottom:20px}
+
+        .form-label{font-size:0.68rem;font-weight:700;color:#5bc0be;text-transform:uppercase;letter-spacing:1.5px;display:block;margin-bottom:8px}
+
+        .input-wrap{position:relative}
+
+        .input-wrap>i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#5bc0be;font-size:1rem;pointer-events:none}
+
+        .form-input{width:100%;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:14px 16px 14px 46px;font-size:0.9rem;color:#fff;font-family:inherit;transition:all .3s}
+
+        .form-input:focus{outline:none;border-color:#5bc0be;background:rgba(0,0,0,0.4);box-shadow:0 0 0 3px rgba(91,192,190,0.1)}
+
+        .form-input::placeholder{color:rgba(255,255,255,0.3)}
+
+        .toggle-pw{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:#78909c;cursor:pointer;font-size:1.1rem;padding:4px}
+
+        .toggle-pw:hover{color:#5bc0be}
+
+        .error-msg{background:rgba(231,76,60,0.12);border:1px solid rgba(231,76,60,0.3);border-radius:10px;padding:12px 16px;font-size:0.82rem;color:#e74c3c;margin-bottom:20px;display:flex;align-items:center;gap:10px;animation:shake .4s ease-out}
+
+        @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
+
+        .btn-login{width:100%;padding:15px;border:none;border-radius:12px;background:linear-gradient(135deg,#5bc0be,#3a506b);color:#fff;font-size:0.95rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:10px}
+
+        .btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(91,192,190,0.4)}
+
+        .login-footer{text-align:center;margin-top:24px;font-size:0.72rem;color:#4a5568}
+
+    </style>
+
+</head>
+
+<body>
+
+<div class="bg-anim"><div class="c"></div><div class="c"></div><div class="c"></div></div>
+
+<div class="login-wrap">
+
+    <div class="login-card">
+
+        <div class="brand">
+
+            <div class="brand-icon"><i class="bi bi-globe-asia-australia"></i></div>
+
+            <h1>WebGIS Poverty Mapping</h1>
+
+            <p>Sistem Informasi Geografis Pemetaan Kemiskinan</p>
+
+        </div>
+
+        <?php if($error): ?>
+
+        <div class="error-msg"><i class="bi bi-exclamation-triangle-fill"></i> <?= htmlspecialchars($error) ?></div>
+
+        <?php endif; ?>
+
+        <form method="POST" action="login.php" autocomplete="off">
+
+            <div class="form-group">
+
+                <label class="form-label">Username</label>
+
+                <div class="input-wrap">
+
+                    <i class="bi bi-person-fill"></i>
+
+                    <input type="text" name="username" class="form-input" placeholder="Masukkan username" value="<?= isset($_POST['username'])?htmlspecialchars($_POST['username']):'' ?>" required autofocus>
+
+                </div>
+
+            </div>
+
+            <div class="form-group">
+
+                <label class="form-label">Password</label>
+
+                <div class="input-wrap">
+
+                    <i class="bi bi-lock-fill"></i>
+
+                    <input type="password" name="password" id="pw" class="form-input" placeholder="Masukkan password" required>
+
+                    <button type="button" class="toggle-pw" onclick="var i=document.getElementById('pw'),e=document.getElementById('eye');if(i.type==='password'){i.type='text';e.className='bi bi-eye-slash-fill'}else{i.type='password';e.className='bi bi-eye-fill'}">
+
+                        <i class="bi bi-eye-fill" id="eye"></i>
+
+                    </button>
+
+                </div>
+
+            </div>
+
+            <button type="submit" class="btn-login"><i class="bi bi-box-arrow-in-right"></i> Masuk ke Sistem</button>
+
+        </form>
+
+        <div class="login-footer">&copy; 2026 WebGIS Poverty Mapping — Pontianak</div>
+
+    </div>
+
+</div>
+
+</body>
+
+</html> 
+
