diff --git a/assets/mainboard.css b/assets/mainboard.css
index 20c0315..d9e8212 100644
--- a/assets/mainboard.css
+++ b/assets/mainboard.css
@@ -61,15 +61,20 @@ body {
 .btn:hover { transform: scale(1.05); }
 
 /* Judul & Grid */
+/* Sedikit perbaikan CSS internal agar judul Pink muncul sempurna */
 .title { text-align: center; margin-bottom: 20px; }
 .title h1 {
-  font-size: 38px;
-  margin: 0;
-  background: linear-gradient(purple, hotpink);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+    font-size: 38px;
+    margin: 0;
+    background: linear-gradient(purple, hotpink);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-weight: bold;
 }
+/* Pastikan user-info rata kiri rapi */
+.user-info h2 { margin: 0; font-size: 1.5rem; color: #333; }
+.user-info p { margin: 0; color: #666; font-size: 0.9rem; }
 
 .stage-grid {
   display: grid;
@@ -160,4 +165,5 @@ body {
 
 /* Musik */
 .music-container { position: fixed; top: 20px; right: 20px; z-index: 1000; }
-.music-btn { width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; font-size: 24px; background: white; }
\ No newline at end of file
+.music-btn { width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; font-size: 24px; background: white; }
+
diff --git a/assets/mainboard.js b/assets/mainboard.js
index 95f74ca..fff760a 100644
--- a/assets/mainboard.js
+++ b/assets/mainboard.js
@@ -29,4 +29,13 @@
 
     function closeCredits() {
         document.getElementById('creditsOverlay').style.display = 'none';
-    }
\ No newline at end of file
+    }
+
+    // Karena JS eksternal mungkin tidak tahu lokasi logout.php, kita bantu disini
+    document.getElementById("logoutBtn").addEventListener("click", () => {
+      window.location.href = "logout.php";
+    });
+    
+    document.getElementById("leaderboardBtn").addEventListener("click", () => {
+      window.location.href = "Leaderboard.html"; // Atau Leaderboard.php jika sudah diubah
+    });
\ No newline at end of file
diff --git a/mainboard.php b/mainboard.php
index 73fd0b8..d57326e 100644
--- a/mainboard.php
+++ b/mainboard.php
@@ -1,59 +1,108 @@
 <?php
 session_start();
+
+// --- 1. CEK LOGIN (SATPAM) ---
 if (!isset($_SESSION['user'])) {
-  header("Location: index.php");
-  exit();
+    header("Location: index.php");
+    exit();
 }
-$user = $_SESSION['user']; // username, role, id
+
+// --- 2. SIAPKAN DATA USER (ANTI ERROR) ---
+$user = $_SESSION['user'];
+$username = isset($user['username']) ? $user['username'] : 'Player';
+// Cek role, jika admin beri mahkota, jika player beri stik game
+$roleRaw = isset($user['role']) ? $user['role'] : 'player';
+$roleDisplay = ($roleRaw === 'admin') ? 'Administrator' : 'Player';
+$roleIcon = ($roleRaw === 'admin') ? '👑' : '🎮';
 ?>
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>MainBoard - Memory Card Game</title>
-  <link rel="stylesheet" href="mainboard.css">
+  <title>Memory Flip Card Game</title>
+  
+  <link rel="stylesheet" href="assets/mainboard.css">
 </head>
 
 <body>
 
-  <!-- Floating Fruits -->
-  <img src="img/banana.png" class="fruit f1">
-  <img src="img/apple.png" class="fruit f2">
-  <img src="img/watermelon.png" class="fruit f3">
-  <img src="img/orange.png" class="fruit f4">
-  <img src="img/pineapple.png" class="fruit f5">
-  <img src="img/pear.png" class="fruit f6">
-  <img src="img/dragonfruit.png" class="fruit f7">
+  <img src="images/fruit1.png" class="fruit f1">
+  <img src="images/fruit2.png" class="fruit f2">
+  <img src="images/fruit3.png" class="fruit f3">
+  <img src="images/fruit4.png" class="fruit f4">
+
+  <div class="music-container">
+    <button id="musicBtn" class="music-btn">🔇</button>
+  </div>
+  <audio id="bgMusic" loop src="music/music_background.mp3"></audio>
 
   <div class="container glass">
 
     <header class="header">
-      <div class="user-profile">
-        <div class="avatar">
-          <?php echo strtoupper(substr($user['username'], 0, 1)); ?>
-        </div>
-        <div>
-          <h2><?php echo $user['username']; ?> <?php echo $user['role'] === 'admin' ? '👑' : '🎮'; ?></h2>
-          <p><?php echo $user['role'] === 'admin' ? "Administrator" : "Player"; ?></p>
-        </div>
+      <div class="user-info">
+        <h2><?php echo htmlspecialchars($username); ?></h2>
+        <p><?php echo $roleIcon . " " . $roleDisplay; ?></p>
       </div>
 
       <div class="actions">
+        <button class="btn blue" onclick="openCredits()">ℹ️ Credit</button>
         <button id="leaderboardBtn" class="btn gold">🏆 Leaderboard</button>
         <button id="logoutBtn" class="btn gray">🚪 Logout</button>
       </div>
     </header>
 
-    <h1 class="page-title">Pilih Tingkat Kesulitan</h1>
+    <div class="title">
+      <h1>Memory Flip Card</h1>
+      <p>Pilih tingkat kesulitan untuk memulai permainan</p>
+    </div>
 
     <div class="stage-grid">
-      <button class="stage-btn" onclick="selectStage('easy')">😊 Easy<br>3 x 4</button>
-      <button class="stage-btn" onclick="selectStage('medium')">🤔 Medium<br>4 x 4</button>
-      <button class="stage-btn" onclick="selectStage('hard')">😤 Hard<br>4 x 5</button>
+      <button class="stage-btn" onclick="selectStage('easy')">
+        <span class="icon">😊</span>
+        <h3>Easy Mode</h3>
+      </button>
+      <button class="stage-btn" onclick="selectStage('medium')">
+        <span class="icon">🤔</span>
+        <h3>Medium Mode</h3>
+      </button>
+      <button class="stage-btn" onclick="selectStage('hard')">
+        <span class="icon">😤</span>
+        <h3>Hard Mode</h3>
+      </button>
     </div>
   </div>
 
-<script src="mainboard.js"></script>
+  <div id="creditsOverlay" class="credits-overlay">
+    <div class="credits-box">
+      <div class="credits-scroll">
+        <h2 class="credits-title">CREDITS</h2>
+        
+        <div class="credits-section">
+            <p><strong>KELOMPOK 2</strong></p>
+            <p>Evelyn Adi Gloria - 5803025026</p>
+            <p>Nathan Handoko S - 5803025001</p>
+            <p>Yustina Rizky S.P - 5803025041</p>
+        </div>
+        
+        <div class="credits-section">
+            <p><strong>PROJECT UAS</strong></p>
+            <p>MEMORI FLIP CARD</p>
+        </div>
+        
+        <div class="credits-section">
+            <p><strong>SPECIAL THANKS</strong></p>
+            <p>Bu Devi dan Pak Andrew<br>dan teman-teman informatika</p>
+        </div>
+        
+        <p>© 2025 UKWMS</p>
+      </div>
+    </div>
+    <button class="close-credits" onclick="closeCredits()">TUTUP</button>
+  </div>
+
+<script src="assets/mainboard.js"></script>
+
 </body>
-</html>
+</html>
\ No newline at end of file
