diff --git a/index.php b/index.php
index 54ebc00..809ee3c 100644
--- a/index.php
+++ b/index.php
@@ -1,30 +1,179 @@
-<!---------------------------------- index.php ---------------------------------->
 <?php
 session_start();
 $conn = new mysqli("localhost","root","","breakout_db");
 if($conn->connect_error){ die("DB Error"); }
+
+$isLoggedIn = isset($_SESSION['username']);
+$username = $isLoggedIn ? htmlspecialchars($_SESSION['username']) : null;
 ?>
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-<link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Breakout Game</title>
+
+    <!-- Google Font -->
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
+
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+
+    <style>
+        /* ===== GLOBAL STYLE ===== */
+        body {
+            font-family: 'Poppins', sans-serif;
+            margin: 0;
+            padding: 0;
+            background: radial-gradient(circle at top, #6a85f1, #4834d4);
+            color: white;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        h1 {
+            font-size: 2.7rem;
+            margin-top: 25px;
+            text-shadow: 3px 3px 10px rgba(0,0,0,0.4);
+            letter-spacing: 1px;
+        }
+
+        /* ===== MENU ===== */
+        .menu {
+            margin-top: 10px;
+            display: flex;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+
+        .menu a {
+            text-decoration: none;
+            color: #fff;
+            padding: 10px 18px;
+            background: rgba(255,255,255,0.18);
+            border-radius: 30px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.3);
+            transition: 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+        }
+
+        .menu a:hover {
+            transform: translateY(-3px);
+            background: rgba(255,255,255,0.35);
+        }
+
+        .user-info {
+            font-size: 1.1rem;
+            margin-bottom: 5px;
+            text-align: center;
+        }
+
+        /* ===== GAME CARD ===== */
+        .game-container {
+            margin-top: 20px;
+            background: rgba(255,255,255,0.08);
+            backdrop-filter: blur(12px);
+            padding: 25px;
+            border-radius: 20px;
+            border: 1px solid rgba(255,255,255,0.25);
+            box-shadow: 0px 10px 25px rgba(0,0,0,0.25);
+            text-align: center;
+            width: 95%;
+            max-width: 520px;
+        }
+
+        canvas {
+            border-radius: 12px;
+            border: 3px solid rgba(255,255,255,0.8);
+            background: #111;
+            box-shadow: 0px 8px 25px rgba(0,0,0,0.6);
+        }
+
+        #score {
+            font-size: 1.6rem;
+            font-weight: bold;
+            margin: 10px 0;
+        }
+
+        /* ===== CONTROLS ===== */
+        .controls {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            margin-top: 15px;
+            flex-wrap: wrap;
+        }
+
+        select {
+            padding: 8px 12px;
+            border-radius: 8px;
+            border: none;
+            font-size: 1rem;
+            outline: none;
+        }
+
+        button {
+            padding: 10px 22px;
+            font-size: 1rem;
+            border: none;
+            border-radius: 25px;
+            color: white;
+            background: linear-gradient(45deg, #ff6b6b, #ff4757);
+            box-shadow: 0px 5px 15px rgba(255,76,76,0.4);
+            transition: 0.25s ease;
+            cursor: pointer;
+        }
+
+        button:hover {
+            transform: scale(1.05);
+            box-shadow: 0px 7px 18px rgba(255,76,76,0.55);
+        }
+
+        @media (max-width: 600px) {
+            h1 { font-size: 2.2rem; }
+            canvas { width: 100%; height: auto; }
+        }
+    </style>
 </head>
 <body>
-<h1>Breakout Game</h1>
-<div class="menu">
-    <a href="login.php">Login / Register</a>
-    <a href="leaderboard.php">Leaderboard</a>
-</div>
-<canvas id="game" width="480" height="320"></canvas>
-<p>Score: <span id="score">0</span></p>
-<p>
-<select id="diff">
-<option value="easy">Easy</option>
-<option value="medium">Medium</option>
-<option value="hard">Hard</option>
-</select>
-<button onclick="startGame()">Start</button>
-</p>
-<script src="script.js"></script>
+
+    <h1><i class="fas fa-gamepad"></i> Breakout Game</h1>
+
+    <!-- USER MENU -->
+    <div class="menu">
+        <?php if($isLoggedIn): ?>
+            <span class="user-info">Hello, <b><?= $username ?></b> 👋</span>
+            <a href="leaderboard.php"><i class="fas fa-trophy"></i> Leaderboard</a>
+            <a href="logout.php"><i class="fas fa-right-from-bracket"></i> Logout</a>
+        <?php else: ?>
+            <a href="login.php"><i class="fas fa-sign-in-alt"></i> Logout</a>
+            <a href="leaderboard.php"><i class="fas fa-trophy"></i> Leaderboard</a>
+        <?php endif; ?>
+    </div>
+
+    <!-- GAME CARD -->
+    <div class="game-container">
+        <canvas id="game" width="480" height="320"></canvas>
+
+        <p>Score: <span id="score">0</span></p>
+
+        <div class="controls">
+            <select id="diff">
+                <option value="easy">Easy</option>
+                <option value="medium">Medium</option>
+                <option value="hard">Hard</option>
+            </select>
+
+            <button onclick="startGame()">Start Game</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/leaderboard.php b/leaderboard.php
index 8726d99..911ecf5 100644
--- a/leaderboard.php
+++ b/leaderboard.php
@@ -2,18 +2,165 @@
 session_start();
 $conn = new mysqli("localhost","root","","breakout_db");
 $lb = $conn->query("SELECT username, highscore FROM users ORDER BY highscore DESC LIMIT 10");
+
+$isLoggedIn = isset($_SESSION['username']);
+$username = $isLoggedIn ? htmlspecialchars($_SESSION['username']) : null;
 ?>
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-<link rel="stylesheet" href="style.css">
+<meta charset="UTF-8">
+<title>Leaderboard</title>
+
+<!-- Font & Icons -->
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+
+<style>
+    body {
+        font-family: 'Poppins', sans-serif;
+        margin: 0;
+        padding: 20px;
+        background: radial-gradient(circle at top, #6a85f1, #4834d4);
+        color: white;
+        text-align: center;
+    }
+
+    h2 {
+        font-size: 2.5rem;
+        margin-top: 20px;
+        text-shadow: 3px 3px 10px rgba(0,0,0,0.4);
+    }
+
+    /* ==== GLASS CONTAINER ==== */
+    .board-container {
+        margin: 25px auto;
+        width: 95%;
+        max-width: 650px;
+        background: rgba(255,255,255,0.10);
+        padding: 25px;
+        border-radius: 18px;
+        backdrop-filter: blur(12px);
+        border: 1px solid rgba(255,255,255,0.25);
+        box-shadow: 0px 10px 25px rgba(0,0,0,0.25);
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        color: white;
+        border-radius: 12px;
+        overflow: hidden;
+    }
+
+    th {
+        background: rgba(255,255,255,0.2);
+        padding: 12px;
+        font-weight: 600;
+        letter-spacing: 1px;
+    }
+
+    td {
+        padding: 12px;
+        background: rgba(255,255,255,0.07);
+        border-bottom: 1px solid rgba(255,255,255,0.15);
+    }
+
+    tr:nth-child(even) td {
+        background: rgba(255,255,255,0.12);
+    }
+
+    tr:hover td {
+        background: rgba(255,255,255,0.22);
+        transition: 0.25s;
+    }
+
+    /* ==== BUTTONS ==== */
+    .back-button {
+        display: inline-block;
+        margin-top: 25px;
+        padding: 10px 22px;
+        background: linear-gradient(45deg, #28a745, #21c064);
+        border-radius: 25px;
+        color: white;
+        font-weight: bold;
+        text-decoration: none;
+        font-size: 1rem;
+        box-shadow: 0px 5px 15px rgba(0,0,0,0.25);
+        transition: 0.25s ease;
+    }
+
+    .back-button:hover {
+        transform: scale(1.05);
+        box-shadow: 0px 7px 18px rgba(0,0,0,0.45);
+    }
+
+    /* Menu on top (Optional same style as index) */
+    .menu {
+        display: flex;
+        justify-content: center;
+        gap: 15px;
+        margin-bottom: 10px;
+        flex-wrap: wrap;
+    }
+
+    .menu a {
+        padding: 10px 18px;
+        background: rgba(255,255,255,0.18);
+        border-radius: 30px;
+        color: #fff;
+        text-decoration: none;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255,255,255,0.3);
+        transition: 0.3s ease;
+        display: flex;
+        align-items: center;
+        gap: 7px;
+    }
+
+    .menu a:hover {
+        background: rgba(255,255,255,0.35);
+        transform: translateY(-3px);
+    }
+
+</style>
 </head>
 <body>
-<h2>Leaderboard</h2>
-<table>
-<?php while($r = $lb->fetch_assoc()){ ?>
-<tr><td><?= $r['username'] ?></td><td><?= $r['highscore'] ?></td></tr>
-<?php } ?>
-</table>
+
+<h2><i class="fas fa-trophy"></i> Leaderboard</h2>
+
+<!-- MENU (Same style as index) -->
+<div class="menu">
+    <a href="index.php"><i class="fas fa-home"></i> Home</a>
+
+    <?php if($isLoggedIn): ?>
+        <a href="logout.php"><i class="fas fa-right-from-bracket"></i> Logout</a>
+    <?php else: ?>
+        <a href="login.php"><i class="fas fa-sign-in-alt"></i> Logout</a>
+    <?php endif; ?>
+</div>
+
+<!-- TABLE -->
+<div class="board-container">
+    <table>
+        <thead>
+            <tr>
+                <th>Username</th>
+                <th>Highscore</th>
+            </tr>
+        </thead>
+        <tbody>
+            <?php while($r = $lb->fetch_assoc()) { ?>
+                <tr>
+                    <td><?= htmlspecialchars($r['username']) ?></td>
+                    <td><?= htmlspecialchars($r['highscore']) ?></td>
+                </tr>
+            <?php } ?>
+        </tbody>
+    </table>
+</div>
+
+<a href="index.php" class="back-button">⬅ Back</a>
+
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/login.php b/login.php
index f01c226..1b8c9c9 100644
--- a/login.php
+++ b/login.php
@@ -25,25 +25,81 @@ if(isset($_POST['login'])){
 }
 ?>
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<meta charset="UTF-8">
+<title>Login & Register</title>
 <link rel="stylesheet" href="style.css">
+
+<!-- Font & Icons -->
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+
+<style>
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+/* Membuat box tampak seperti popup modal */
+.login-box {
+    position: relative;
+    width: 380px;
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(12px);
+    border-radius: 15px;
+    padding: 25px;
+    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.86);
+    animation: popup 0.4s ease;
+}
+
+/* Animasi muncul */
+@keyframes popup {
+    from {
+        opacity: 0;
+        transform: scale(0.85);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+</style>
+
 </head>
 <body>
-<div class="login-box">
-<h2>Login</h2>
-<form method="POST">
-<input name="user" placeholder="Username" required>
-<input name="pass" type="password" placeholder="Password" required>
-<button name="login">Login</button>
-</form>
 
-<h2>Register</h2>
-<form method="POST">
-<input name="user" placeholder="Username" required>
-<input name="pass" type="password" placeholder="Password" required>
-<button name="register">Register</button>
-</form>
+<div class="login-box">
+
+    <h2><i class="fas fa-user"></i> Login</h2>
+    <form method="POST">
+        <input name="user" placeholder="Username" required>
+        <input name="pass" type="password" placeholder="Password" required>
+        <button name="login">Login</button>
+    </form>
+
+    <hr style="
+        margin: 25px 0; 
+        border: 1px solid rgba(0, 0, 0, 1);
+        width: 90%;
+    ">
+
+    <h2><i class="fas fa-user-plus"></i> Register</h2>
+    <form method="POST">
+        <input name="user" placeholder="Username" required>
+        <input name="pass" type="password" placeholder="Password" required>
+        <button name="register">Register</button>
+    </form>
+
+    <a href="index.php" class="back-button" style="margin-top:20px; display:inline-block;">
+        <i class="fas fa-arrow-left"></i> Back
+    </a>
+
 </div>
+
 </body>
-</html>
\ No newline at end of file
+</html>
+
