diff --git a/htdocs/pages/dashboard.html b/htdocs/pages/dashboard.html
new file mode 100644
index 0000000..287de2f
--- /dev/null
+++ b/htdocs/pages/dashboard.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Leaderboard</title>
+  <style>
+    body {
+     font-family: Arial, sans-serif;
+     text-align: center;
+     background: linear-gradient(
+       135deg,
+       hsl(236, 90%, 33%),
+       lab(17.89% 52.32 -72.14)
+     );
+     height: 100vh;
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     margin: 50px;
+     overflow: hidden;
+   }
+
+   body::before {
+     content: "";
+     position: absolute;
+     bottom: -300px;
+     left: 50%;
+     width: 1500px;
+     height: 800px;
+     transform: translateX(-50%);
+     border-radius: 50%;
+     background: radial-gradient(
+       circle,
+       oklab(48.019% 0.10824 -0.2361) 0%,
+       rgba(255, 255, 255, 0) 70%
+     );
+     filter: blur(80px);
+     z-index: -1;
+   }
+
+    
+
+    .leaderboard {
+      background: linear-gradient(to bottom, #3a63e0, #142a99);
+      border-radius: 30px;
+      width: 300px;
+      padding: 20px;
+      box-shadow: 0px 8px 16px rgba(0,0,0,0.4);
+    }
+
+    .leaderboard h2 {
+      text-align: center;
+      margin: 0 0 20px;
+      font-size: 24px;
+      text-shadow: 1px 1px 2px black;
+    }
+
+    .player {
+      background-color: #0d18f0;
+      margin: 8px 0;
+      padding: 10px 15px;
+      border-radius: 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: bold;
+      box-shadow: inset 0px 2px 5px rgba(0,0,0,0.3);
+    }
+    header {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  padding: 20px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.logo {
+  height: 60px;
+}
+
+   
+
+  </style>
+</head>
+<body>
+
+  <!-- Watermark / Logo -->
+  <header>
+  <img src="../resources/img/Coperight.png" alt="My Logo" class="logo">
+</header>
+
+
+  <!-- Leaderboard -->
+  <div class="leaderboard">
+    <h2>Leaderboard</h2>
+    <div id="player-list"></div>
+  </div>
+
+  <script>
+    
+    const players = [
+      { name: "Cyrus", score: 30 },
+      { name: "Nebab", score: 29 },
+      { name: "Mark", score: 25 },
+      { name: "Shane", score: 23 },
+      { name: "Faulve", score: 23 },
+      { name: "Belardo", score: 21 }
+    ];
+
+    const maxScore = 30; 
+    const playerList = document.getElementById("player-list");
+
+    
+    players.forEach(player => {
+      const div = document.createElement("div");
+      div.className = "player";
+      div.innerHTML = `<span>${player.name}</span><span>${player.score}/${maxScore}</span>`;
+      playerList.appendChild(div);
+    });
+  </script>
+
+</body>
+</html>
diff --git a/htdocs/pages/homepage.html b/htdocs/pages/homepage.html
new file mode 100644
index 0000000..01fe8d1
--- /dev/null
+++ b/htdocs/pages/homepage.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Coperight</title>
+  <style>
+   body {
+     font-family: Arial, sans-serif;
+     text-align: center;
+     background: linear-gradient(
+       135deg,
+       hsl(236, 90%, 33%),
+       lab(17.89% 52.32 -72.14)
+     );
+     height: 100vh;
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     margin: 50px;
+     overflow: hidden;
+   }
+
+   body::before {
+     content: "";
+     position: absolute;
+     bottom: -300px;
+     left: 50%;
+     width: 1500px;
+     height: 800px;
+     transform: translateX(-50%);
+     border-radius: 50%;
+     background: radial-gradient(
+       circle,
+       oklab(48.019% 0.10824 -0.2361) 0%,
+       rgba(255, 255, 255, 0) 70%
+     );
+     filter: blur(80px);
+     z-index: -1;
+   }
+
+   .logo {
+     height: 300px;   
+     margin-bottom: 20px;
+     transition: filter 0.5s ease;
+   }
+
+   .start-button {
+     background: linear-gradient(135deg, orange, yellow);
+     color: black;
+     font-size: 18px;
+     font-weight: 600;
+     padding: 12px 28px;
+     border: none;
+     border-radius: 12px;
+     cursor: pointer;
+     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+     transition: all 0.3s ease;
+   }
+   .start-button:hover {
+     transform: scale(1.08);
+     background: linear-gradient(135deg, #FFA500, #FF4500);
+     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+   }
+   .start-button:active {
+     transform: scale(0.96);
+   }
+
+   .instructions {
+     margin-top: 20px;
+     max-width: 400px;
+     font-size: 1.1em;
+   }
+
+   p {
+     color: #FFFFFF;
+   }
+  </style>
+</head>
+<body>
+
+  <!-- Pinag palit nayung position ng tittle sa logo -->
+  <img src="../resources/img/Coperight.png" alt="My Logo" class="logo" id="logo">
+
+  <button class="start-button" onclick="startQuiz()">Start Quiz</button>
+
+  <div class="instructions">
+    <p>Challenge yourself and deepen your understanding of plagiarism</p>
+  </div>
+
+  <script>
+    const logo = document.getElementById("logo");
+
+    // Colors
+    const colors = ["#FFA500", "#99AABB", "#708090", "#FFFF00", "#FFC0CB", "#FFFFFF", "#FFFF00", "#00FFFF", "#D3D3D3", "#F5F5DC", "#FFB6C1", "#e1ff00"]; 
+    let index = 0;
+
+    // Change to the next color every second 
+    setInterval(() => {
+      logo.style.filter = `drop-shadow(0 0 15px ${colors[index]}) 
+                           drop-shadow(0 0 30px ${colors[index]})`;
+      index = (index + 1) % colors.length; // loop back to start
+    }, 1000);
+
+    function startQuiz() {
+      window.location.href = "quiz.html";
+    }
+  </script>
+
+</body>
+</html>
diff --git a/htdocs/pages/leaderboard.html b/htdocs/pages/leaderboard.html
new file mode 100644
index 0000000..9027e57
--- /dev/null
+++ b/htdocs/pages/leaderboard.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Leaderboard</title>
+  <style>
+    body {
+     font-family: Arial, sans-serif;
+     text-align: center;
+     background: linear-gradient(
+       135deg,
+       hsl(236, 90%, 33%),
+       lab(17.89% 52.32 -72.14)
+     );
+     height: 100vh;
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     margin: 50px;
+     overflow: hidden;
+   }
+
+   body::before {
+     content: "";
+     position: absolute;
+     bottom: -300px;
+     left: 50%;
+     width: 1500px;
+     height: 800px;
+     transform: translateX(-50%);
+     border-radius: 50%;
+     background: radial-gradient(
+       circle,
+       oklab(48.019% 0.10824 -0.2361) 0%,
+       rgba(255, 255, 255, 0) 70%
+     );
+     filter: blur(80px);
+     z-index: -1;
+   }
+
+    .leaderboard {
+      background: linear-gradient(to bottom, #FFB347, #FFA500);
+      border-radius: 30px;
+      width: 300px;
+      padding: 20px;
+      box-shadow: 0px 8px 16px rgba(0,0,0,0.4);
+      max-height: 400px;       /* 👈 Limit height */
+      overflow-y: auto;        /* 👈 Enable vertical scroll */
+    }
+
+    .leaderboard::-webkit-scrollbar {
+      width: 8px;
+    }
+    .leaderboard::-webkit-scrollbar-thumb {
+      background: rgba(0,0,0,0.4);
+      border-radius: 6px;
+    }
+    .leaderboard::-webkit-scrollbar-track {
+      background: rgba(255,255,255,0.2);
+    }
+
+    .leaderboard h2 {
+      text-align: center;
+      margin: 0 0 20px;
+      font-size: 24px;
+      text-shadow: 1px 1px 2px black;
+    }
+
+    .player {
+      background-color: #E0FFFF;
+      margin: 8px 0;
+      padding: 10px 15px;
+      border-radius: 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: bold;
+      box-shadow: inset 0px 2px 5px rgba(0,0,0,0.3);
+    }
+
+    .top-player {
+      background-color: #FFD700; /* Gold color */
+      color: black;
+      box-shadow: 0px 0px 12px 3px rgba(255, 215, 0, 0.8);
+    }
+
+    header {
+      width: 100%;
+      display: flex;
+      justify-content: flex-start;
+      padding: 20px;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .logo {
+      height: 60px;
+    }
+
+  </style>
+</head>
+<body>
+
+  <!-- Watermark / Logo -->
+  <header>
+    <img src="../resources/img/Coperight.png" alt="My Logo" class="logo">
+  </header>
+
+  <!-- Leaderboard -->
+  <div class="leaderboard">
+    <h2>Leaderboard</h2>
+    <div id="player-list"></div>
+  </div>
+
+  <script>
+   const participants = [
+     ["Alice", 30],
+     ["Alex", 25],
+     ["Mark", 27],
+     ["Nebab", 28],
+     ["Shane", 25],
+     
+    
+   ];
+
+   // Sort by score (highest → lowest)
+   participants.sort((a, b) => b[1] - a[1]);
+
+   // Find highest score and top players
+   const highestScore = participants[0][1];
+   const topPlayers = participants.filter(p => p[1] === highestScore).map(p => p[0]);
+
+   // Render leaderboard
+   const playerList = document.getElementById("player-list");
+   participants.forEach(([name, score]) => {
+     playerList.innerHTML += `
+       <div class="player ${topPlayers.includes(name) ? "top-player" : ""}">
+         <span>${name}</span>
+         <span>${score}</span>
+       </div>
+     `;
+   });
+
+   console.log("Top participants:", topPlayers);
+   console.log("Highest score:", highestScore);
+  </script>
+
+</body>
+</html>
