diff --git a/login.html b/login.html
index 2320925..d8ac1d7 100644
--- a/login.html
+++ b/login.html
@@ -1,34 +1,72 @@
-<!-- index.html -->
-<!doctype html>
-    <html lang="id">
-        <head>
-            <meta charset="utf-8">
-            <meta name="viewport" content="width=device-width,initial-scale=1">
-            <title>Halaman Login</title>
-            <link rel="stylesheet" href="style.css">
-        </head>
-        <body>
-        <main class="container" aria-live="polite">
-        <h1>Masuk ke Akun Anda</h1>
-        <p class="lead">Masukkan email dan kata sandi.</p>
+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Login Page</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
 
+  <div class="min-h-screen flex items-center justify-center p-4 relative overflow-hidden">
 
-        <form id="loginForm" novalidate>
-        <div class="form-group">
-        <label for="email">Email</label>
-        <input id="email" name="email" type="email" placeholder="name@contoh.com" required>
-        <div class="error" id="emailError"></div>
+    <!-- Animated Background -->
+    <div class="bg-animated">
+      <div class="bg-circle one"></div>
+      <div class="bg-circle two"></div>
+      <div class="bg-circle three"></div>
+    </div>
+
+    <!-- Login Card -->
+    <div class="login-card">
+      <div class="icon-wrapper">
+        <div class="icon-bg"></div>
+        <div class="icon-circle">
+          <img src="login-icon.png" class="login-icon" />
+        </div>
+      </div>
+
+      <div class="header-text">
+        <h2>Selamat Datang! ✨</h2>
+        <p>Login untuk bermain Memory Card Game</p>
+      </div>
+
+      <form id="loginForm">
+        <label>Username</label>
+        <input type="text" id="username" placeholder="Masukkan username">
+
+        <label>Password</label>
+        <input type="password" id="password" placeholder="Masukkan password">
+
+        <div id="errorBox" class="error"></div>
+
+        <button type="submit" class="btn-login">Login Sekarang</button>
+      </form>
+
+      <p class="register-text">
+        Belum punya akun?
+        <a href="register.html">Daftar Sekarang</a>
+      </p>
+
+      <div class="demo-box">
+        <p><strong>🎮 Demo Akun</strong></p>
+
+        <div class="demo-item">
+          <p><strong>Player:</strong></p>
+          <p>Username: <code>player</code></p>
+          <p>Password: <code>player123</code></p>
         </div>
 
-        <div class="form-group password-row">
-        <label for="password">Kata sandi</label>
-        <input id="password" name="password" type="password" placeholder="Masukkan kata sandi" required minlength="6">
-        <button type="button" class="toggle-pass" id="togglePass">Tampilkan</button>
-        <div class="error" id="passError"></div>
+        <div class="demo-item">
+          <p><strong>Admin:</strong></p>
+          <p>Username: <code>admin</code></p>
+          <p>Password: <code>admin123</code></p>
         </div>
-        <button id="submitBtn" type="submit">Masuk</button>
-        <div id="result"></div>
-        </form>
-        </main>
-    </body>
+      </div>
+
+    </div>
+  </div>
+
+<script src="login.js"></script>
+</body>
 </html>
\ No newline at end of file
