diff --git a/mainboard.css b/mainboard.css
deleted file mode 100644
index c7c7d86..0000000
--- a/mainboard.css
+++ /dev/null
@@ -1,205 +0,0 @@
-/* ================================
-BODY & BACKGROUND STYLES
-================================== */
-
-body {
-  margin: 0;
-  font-family: Poppins, Arial, sans-serif;
-  background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
-  min-height: 100vh;
-  overflow-x: hidden;
-  overflow-y: auto;
-  display: flex;
-  justify-content: center;
-  padding: 50px 0;
-  position: relative;
-}
-
-
-/* Glow Background Floating */
-.bg-circle {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(70px);
-  opacity: 0.7;
-  animation: float 6s infinite ease-in-out;
-}
-
-.circle-one { top: 10%; left: 5%; width: 250px; height: 250px; background: rgba(255,255,255,0.25); }
-.circle-two { bottom: 15%; right: 8%; width: 300px; height: 300px; background: rgba(255,192,203,0.35); animation-delay: 1s; }
-.circle-three { top: 45%; left: 60%; width: 260px; height: 260px; background: rgba(180,120,255,0.35); animation-delay: 2s; }
-
-@keyframes float {
-  0%,100% { transform: translateY(0); }
-  50% { transform: translateY(-25px); }
-}
-
-/* ================================
-    CONTAINER CARD
-================================== */
-
-.container {
-  width: 750px;
-  background: rgba(255,255,255,0.7);
-  backdrop-filter: blur(15px);
-  padding: 45px;
-  border-radius: 28px;
-  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
-  z-index: 10;
-  animation: fadeIn 0.6s ease-out;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-/* ================================
-    HEADER PROFILE 
-================================== */
-
-.header {
-  background: rgba(255,255,255,0.65);
-  backdrop-filter: blur(15px);
-  padding: 22px;
-  border-radius: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-  margin-bottom: 35px;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
-.user-icon {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, purple, hotpink);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 25px;
-  font-weight: bold;
-  box-shadow: 0 5px 18px rgba(0,0,0,0.22);
-}
-
-/* ================================
-   🎀 BUTTONS
-================================== */
-
-.btn {
-  padding: 12px 25px;
-  border: none;
-  border-radius: 14px;
-  cursor: pointer;
-  font-size: 16px;
-  transition: .25s;
-}
-
-.gold {
-  background: linear-gradient(to right, gold, orange);
-  color: white;
-}
-.gold:hover {
-  transform: scale(1.07);
-  box-shadow: 0 4px 12px rgba(255,165,0,0.4);
-}
-
-.gray {
-  background: #444;
-  color: white;
-}
-.gray:hover {
-  background: #222;
-  transform: scale(1.05);
-}
-
-/* ================================
-   📝 TITLE
-================================== */
-
-.title {
-  text-align: center;
-  margin: 40px 0;
-}
-
-.title h1 {
-  font-size: 46px;
-  background: linear-gradient(purple, hotpink);
-  background-clip: text;             /* Standar */
-  -webkit-background-clip: text;
-  color: transparent;
-  font-weight: bold;
-  text-shadow: 0 0 10px rgba(255,255,255,0.2);
-}
-
-/* ================================
-   🎮 STAGE SELECTION GRID
-================================== */
-
-.stage-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 30px;
-}
-
-.stage-btn {
-  background: rgba(255,255,255,0.65);
-  backdrop-filter: blur(10px);
-  padding: 35px;
-  border-radius: 25px;
-  text-align: center;
-  cursor: pointer;
-  transition: .25s ease;
-  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
-}
-
-.stage-btn:hover {
-  transform: scale(1.08);
-  background: rgba(255,255,255,0.88);
-  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
-}
-
-.icon {
-  font-size: 48px;
-  display: block;
-  margin-bottom: 12px;
-}
-
-.fruit {
-  position: absolute;
-  width: 95px;
-  opacity: .85;
-  animation: float 6s infinite ease-in-out, drift 15s infinite linear;
-  pointer-events: none;
-}
-
-.f1 { top: 8%; left: 10%; animation-delay: .3s; }
-.f2 { top: 65%; right: 12%; animation-delay: .7s; }
-.f3 { top: 22%; right: 55%; animation-delay: 1.1s; }
-.f4 { bottom: 15%; left: 28%; animation-delay: .9s; }
-.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; }
-.f6 { top: 40%; left: 50%; animation-delay: .5s; }
-.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; }
-.f8 { top: 75%; right: 40%; animation-delay: .8s; }
-.f9 { top: 50%; left: 80%; animation-delay: 1s; }
-.f10 { bottom: 20%; right: 5%; animation-delay: 1.3s; }
-
-@keyframes float {
-  0% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-20px) rotate(6deg); }
-  100% { transform: translateY(0) rotate(0deg); }
-}
-
-@keyframes drift {
-  0% { transform: translateX(0); }
-  50% { transform: translateX(15px); }
-  100% { transform: translateX(0); }
-}
\ No newline at end of file
diff --git a/mainboard.html b/mainboard.html
index 71ef4f0..51ab506 100644
--- a/mainboard.html
+++ b/mainboard.html
@@ -4,7 +4,216 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Memory Flip Card Game</title>
-  <link rel="stylesheet" href="mainboard.css">
+
+  <style>
+/* ================================
+BODY & BACKGROUND STYLES
+================================== */
+
+body {
+  margin: 0;
+  font-family: Poppins, Arial, sans-serif;
+  background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
+  min-height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  justify-content: center;
+  padding: 50px 0;
+  position: relative;
+}
+
+
+/* Glow Background Floating */
+.bg-circle {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(70px);
+  opacity: 0.7;
+  animation: float 6s infinite ease-in-out;
+}
+
+.circle-one { top: 10%; left: 5%; width: 250px; height: 250px; background: rgba(255,255,255,0.25); }
+.circle-two { bottom: 15%; right: 8%; width: 300px; height: 300px; background: rgba(255,192,203,0.35); animation-delay: 1s; }
+.circle-three { top: 45%; left: 60%; width: 260px; height: 260px; background: rgba(180,120,255,0.35); animation-delay: 2s; }
+
+@keyframes float {
+  0%,100% { transform: translateY(0); }
+  50% { transform: translateY(-25px); }
+}
+
+/* ================================
+    CONTAINER CARD
+================================== */
+
+.container {
+  width: 750px;
+  background: rgba(255,255,255,0.7);
+  backdrop-filter: blur(15px);
+  padding: 45px;
+  border-radius: 28px;
+  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
+  z-index: 10;
+  animation: fadeIn 0.6s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ================================
+    HEADER PROFILE 
+================================== */
+
+.header {
+  background: rgba(255,255,255,0.65);
+  backdrop-filter: blur(15px);
+  padding: 22px;
+  border-radius: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+  margin-bottom: 35px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.user-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, purple, hotpink);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 25px;
+  font-weight: bold;
+  box-shadow: 0 5px 18px rgba(0,0,0,0.22);
+}
+
+/* ================================
+   🎀 BUTTONS
+================================== */
+
+.btn {
+  padding: 12px 25px;
+  border: none;
+  border-radius: 14px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: .25s;
+}
+
+.gold {
+  background: linear-gradient(to right, gold, orange);
+  color: white;
+}
+.gold:hover {
+  transform: scale(1.07);
+  box-shadow: 0 4px 12px rgba(255,165,0,0.4);
+}
+
+.gray {
+  background: #444;
+  color: white;
+}
+.gray:hover {
+  background: #222;
+  transform: scale(1.05);
+}
+
+/* ================================
+   📝 TITLE
+================================== */
+
+.title {
+  text-align: center;
+  margin: 40px 0;
+}
+
+.title h1 {
+  font-size: 46px;
+  background: linear-gradient(purple, hotpink);
+  background-clip: text;             /* Standar */
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+  text-shadow: 0 0 10px rgba(255,255,255,0.2);
+}
+
+/* ================================
+   🎮 STAGE SELECTION GRID
+================================== */
+
+.stage-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+}
+
+.stage-btn {
+  background: rgba(255,255,255,0.65);
+  backdrop-filter: blur(10px);
+  padding: 35px;
+  border-radius: 25px;
+  text-align: center;
+  cursor: pointer;
+  transition: .25s ease;
+  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
+}
+
+.stage-btn:hover {
+  transform: scale(1.08);
+  background: rgba(255,255,255,0.88);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
+}
+
+.icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 12px;
+}
+
+.fruit {
+  position: absolute;
+  width: 95px;
+  opacity: .85;
+  animation: float 6s infinite ease-in-out, drift 15s infinite linear;
+  pointer-events: none;
+}
+
+.f1 { top: 8%; left: 10%; animation-delay: .3s; }
+.f2 { top: 65%; right: 12%; animation-delay: .7s; }
+.f3 { top: 22%; right: 55%; animation-delay: 1.1s; }
+.f4 { bottom: 15%; left: 28%; animation-delay: .9s; }
+.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; }
+.f6 { top: 40%; left: 50%; animation-delay: .5s; }
+.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; }
+.f8 { top: 75%; right: 40%; animation-delay: .8s; }
+.f9 { top: 50%; left: 80%; animation-delay: 1s; }
+.f10 { bottom: 20%; right: 5%; animation-delay: 1.3s; }
+
+@keyframes float {
+  0% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-20px) rotate(6deg); }
+  100% { transform: translateY(0) rotate(0deg); }
+}
+
+@keyframes drift {
+  0% { transform: translateX(0); }
+  50% { transform: translateX(15px); }
+  100% { transform: translateX(0); }
+}
+
+  </style>
+
 </head>
 
 <body>
@@ -65,6 +274,23 @@
 
   </div>
 
-  <script src="mainboard.js"></script>
+<script>
+function selectStage(stage) {
+  if (stage === "easy") {
+    window.location.href = "gameboard-easy.html";
+  } else if (stage === "medium") {
+    window.location.href = "gameboard-medium.html";
+  } else if (stage === "hard") {
+    window.location.href = "gameboard-hard.html";
+  }
+}
+
+document.getElementById("leaderboardBtn").addEventListener("click", () => {window.location.href = "Leaderboard.html"});
+
+document.getElementById("logoutBtn").addEventListener("click", () => {
+  alert("Logout berhasil!");
+});
+
+</script>
 </body>
 </html>
diff --git a/mainboard.js b/mainboard.js
deleted file mode 100644
index 83dfd75..0000000
--- a/mainboard.js
+++ /dev/null
@@ -1,15 +0,0 @@
-function selectStage(stage) {
-  if (stage === "easy") {
-    window.location.href = "gameboard-easy.html";
-  } else if (stage === "medium") {
-    window.location.href = "gameboard-medium.html";
-  } else if (stage === "hard") {
-    window.location.href = "gameboard-hard.html";
-  }
-}
-
-document.getElementById("leaderboardBtn").addEventListener("click", () => {window.location.href = "Leaderboard.html"});
-
-document.getElementById("logoutBtn").addEventListener("click", () => {
-  alert("Logout berhasil!");
-});