diff --git a/index.php b/index.php
index 809ee3c..44f8f31 100644
--- a/index.php
+++ b/index.php
@@ -3,8 +3,8 @@ 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;
+$isLoggedIn = isset($_SESSION['user']); // SUDAH DIPERBAIKI
+$username = $isLoggedIn ? htmlspecialchars($_SESSION['user']) : null; // SUDAH DIPERBAIKI
 ?>
 <!DOCTYPE html>
 <html lang="en">
@@ -13,150 +13,28 @@ $username = $isLoggedIn ? htmlspecialchars($_SESSION['username']) : null;
     <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">
+    
+    <link rel="stylesheet" href="style.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><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="login.php"><i class="fas fa-sign-in-alt"></i> Login</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>
 
@@ -172,8 +50,22 @@ $username = $isLoggedIn ? htmlspecialchars($_SESSION['username']) : null;
             <button onclick="startGame()">Start Game</button>
         </div>
     </div>
-
+    
+    <div id="gameModal" class="game-modal">
+        <div class="modal-content">
+            <h2 id="modalTitle"></h2>
+            <p id="modalScore"></p>
+            <div class="modal-buttons">
+                <?php if($isLoggedIn): ?>
+                    <button id="saveScoreBtn">Save Score</button>
+                <?php endif; ?>
+                <button id="playAgainBtn">Play Again</button>
+            </div>
+            <a href="leaderboard.php" class="leaderboard-link"><i class="fas fa-trophy"></i> Leaderboard</a>
+            <a href="index.php" class="back-link"><i class="fas fa-home"></i> Home</a>
+        </div>
+    </div>
     <script src="script.js"></script>
 
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/leaderboard.php b/leaderboard.php
index 911ecf5..ae8faf0 100644
--- a/leaderboard.php
+++ b/leaderboard.php
@@ -3,8 +3,8 @@ 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;
+$isLoggedIn = isset($_SESSION['user']); // SUDAH DIPERBAIKI
+$username = $isLoggedIn ? htmlspecialchars($_SESSION['user']) : null; // SUDAH DIPERBAIKI
 ?>
 <!DOCTYPE html>
 <html lang="en">
@@ -12,135 +12,26 @@ $username = $isLoggedIn ? htmlspecialchars($_SESSION['username']) : null;
 <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;
-    }
+<link rel="stylesheet" href="style.css">
 
-    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>
+<body class="leaderboard-body">
 
 <h2><i class="fas fa-trophy"></i> Leaderboard</h2>
 
-<!-- MENU (Same style as index) -->
-<div class="menu">
+<<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>
+        <a href="login.php"><i class="fas fa-sign-in-alt"></i> Login</a>
     <?php endif; ?>
 </div>
 
-<!-- TABLE -->
 <div class="board-container">
     <table>
         <thead>
@@ -163,4 +54,4 @@ $username = $isLoggedIn ? htmlspecialchars($_SESSION['username']) : null;
 <a href="index.php" class="back-button">⬅ Back</a>
 
 </body>
-</html>
+</html>
\ No newline at end of file
