diff --git a/html/app.js b/html/app.js
new file mode 100644
index 0000000..c3edee3
--- /dev/null
+++ b/html/app.js
@@ -0,0 +1,70 @@
+window.addEventListener("message", (event) => {
+    switch (event.data.action) {
+        case "open":
+            open(event.data);
+            break;
+        case "close":
+            close();
+            break;
+        case "setup":
+            setup(event.data);
+            break;
+    }
+});
+
+const open = (data) => {
+    const scoreboard = document.querySelector(".scoreboard-block");
+    scoreboard.style.display = "block";
+    const totalPlayers = document.getElementById("total-players");
+    if (totalPlayers) {
+        totalPlayers.innerHTML = `<p>${data.players} of ${data.maxPlayers}</p>`;
+    }
+    Object.entries(data.requiredCops).forEach(([category, info]) => {
+        const beam = document.querySelector(`.scoreboard-info [data-type="${category}"]`);
+        if (!beam) return;
+        const status = beam.querySelector(".info-beam-status");
+        if (!status) return;
+        if (info.busy) {
+            status.innerHTML = "⏳";
+        } else if (data.currentCops >= info.minimumPolice) {
+            status.innerHTML = "✅";
+        } else {
+            status.innerHTML = "❌";
+        }
+    });
+};
+
+const close = () => {
+    const scoreboard = document.querySelector(".scoreboard-block");
+    scoreboard.style.display = "flex";
+};
+
+const setup = (data) => {
+    const scoreboardInfo = document.querySelector(".scoreboard-info");
+    if (!scoreboardInfo) return;
+    scoreboardInfo.innerHTML = "";
+    Object.entries(data.items).forEach(([index, value]) => {
+        const beamElement = document.createElement("div");
+        beamElement.className = "scoreboard-info-beam";
+        beamElement.setAttribute("data-type", index);
+        const titleElement = document.createElement("div");
+        titleElement.className = "info-beam-title";
+        titleElement.innerHTML = `<p>${value}</p>`;
+        const statusElement = document.createElement("div");
+        statusElement.className = "info-beam-status";
+        beamElement.appendChild(titleElement);
+        beamElement.appendChild(statusElement);
+        scoreboardInfo.appendChild(beamElement);
+    });
+    const playersBeam = document.createElement("div");
+    playersBeam.className = "scoreboard-info-beam";
+    const playersTitle = document.createElement("div");
+    playersTitle.className = "info-beam-title";
+    playersTitle.innerHTML = "<p>Total Players</p>";
+    const playersStatus = document.createElement("div");
+    playersStatus.className = "info-beam-status";
+    playersStatus.id = "total-players";
+    playersBeam.appendChild(playersTitle);
+    playersBeam.appendChild(playersStatus);
+    scoreboardInfo.appendChild(playersBeam);
+};
diff --git a/html/style.css b/html/style.css
new file mode 100644
index 0000000..27bf6b0
--- /dev/null
+++ b/html/style.css
@@ -0,0 +1,145 @@
+@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap");
+
+:root {
+    --md-dark-primary: #f44336;
+    --md-dark-on-primary: #ffffff;
+    --md-dark-primary-container: #ffdad6;
+    --md-dark-on-primary-container: #410002;
+    --md-dark-secondary: #d32f2f;
+    --md-dark-on-secondary: #ffffff;
+    --md-dark-secondary-container: #ffdad5;
+    --md-dark-on-secondary-container: #410001;
+    --md-dark-tertiary: #ff8a65;
+    --md-dark-on-tertiary: #ffffff;
+    --md-dark-tertiary-container: #ffdacc;
+    --md-dark-on-tertiary-container: #410002;
+    --md-dark-surface: #1c1b1f;
+    --md-dark-on-surface: #e6e1e5;
+    --md-dark-surface-container-lowest: #0f0d13;
+    --md-dark-surface-container-low: #1d1b20;
+    --md-dark-surface-container: #211f26;
+    --md-dark-surface-container-high: #2b2930;
+    --md-dark-surface-container-highest: #36343b;
+    --md-dark-error: #b3261e;
+    --md-dark-on-error: #ffffff;
+    --md-dark-error-container: #93000a;
+    --md-dark-on-error-container: #ffdad5;
+    --md-dark-outline: #79747e;
+    --md-dark-outline-variant: #49454f;
+    --md-dark-inverse-surface: #e6e1e5;
+    --md-dark-inverse-on-surface: #1c1b1f;
+    --md-dark-scrim: rgba(0, 0, 0, 0.6);
+    --md-dark-shadow: rgba(0, 0, 0, 0.15);
+    --md-dark-success: #9bd880;
+    --md-dark-on-success: #193800;
+    --md-dark-success-container: #275000;
+    --md-dark-on-success-container: #b6f397;
+    --md-dark-warning: #ffba47;
+    --md-dark-on-warning: #422b00;
+    --md-dark-warning-container: #5f3f00;
+    --md-dark-on-warning-container: #ffddb0;
+    --md-dark-info: #b3c5ff;
+    --md-dark-on-info: #002a77;
+    --md-dark-info-container: #003ea7;
+    --md-dark-on-info-container: #dae1ff;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Exo 2", sans-serif;
+}
+
+body {
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+
+.container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    padding: 3vh;
+}
+
+.scoreboard-block {
+    display: none;
+    width: 30vh;
+    background-color: var(--md-dark-surface-container-high);
+    overflow: hidden;
+    box-shadow: 0 4px 8px var(--md-dark-shadow);
+    margin-top: 30vh;
+    margin-top: 5vh; /* 30vh から変更 */
+    max-height: 90vh; /* 新規追加 */
+    display: flex; /* 新規追加 */
+    flex-direction: column; /* 新規追加 */
+}
+
+.scoreboard-header {
+    width: 100%;
+    background: var(--md-dark-primary);
+    padding: 1.5vh;
+    text-align: center;
+}
+
+.scoreboard-header p {
+    font-weight: 700;
+    color: var(--md-dark-on-primary);
+    font-size: 2.5vh;
+}
+
+.scoreboard-info {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow-y: auto; /* 新規追加 */
+    flex: 1; /* 新規追加 */
+}
+
+.scoreboard-info-beam {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 4.25vh;
+    width: 100%;
+    background-color: var(--md-dark-surface-container);
+    padding: 0 2.7vh 0 2.7vh;
+    border-bottom: 1px solid var(--md-dark-surface-container-lowest);
+}
+
+.info-beam-title,
+.info-beam-title-players {
+    font-size: 1.3vh;
+    letter-spacing: 0.1vh;
+    font-weight: 700;
+    color: var(--md-dark-on-surface);
+}
+
+.info-beam-status {
+    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.info-beam-status p {
+    color: var(--md-dark-on-surface);
+    font-size: 1.3vh;
+}
+
+.scoreboard-info::-webkit-scrollbar {
+    width: 6px;
+}
+
+.scoreboard-info::-webkit-scrollbar-track {
+    background: var(--md-dark-surface-container-lowest);
+}
+
+.scoreboard-info::-webkit-scrollbar-thumb {
+    background: var(--md-dark-outline);
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/html/ui.html b/html/ui.html
new file mode 100644
index 0000000..9923a89
--- /dev/null
+++ b/html/ui.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>QBCore Scoreboard</title>
+        <style>
+@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap");
+
+:root {
+    --md-dark-primary: #f44336;
+    --md-dark-on-primary: #ffffff;
+    --md-dark-primary-container: #ffdad6;
+    --md-dark-on-primary-container: #410002;
+    --md-dark-secondary: #d32f2f;
+    --md-dark-on-secondary: #ffffff;
+    --md-dark-secondary-container: #ffdad5;
+    --md-dark-on-secondary-container: #410001;
+    --md-dark-tertiary: #ff8a65;
+    --md-dark-on-tertiary: #ffffff;
+    --md-dark-tertiary-container: #ffdacc;
+    --md-dark-on-tertiary-container: #410002;
+    --md-dark-surface: #1c1b1f;
+    --md-dark-on-surface: #e6e1e5;
+    --md-dark-surface-container-lowest: #0f0d13;
+    --md-dark-surface-container-low: #1d1b20;
+    --md-dark-surface-container: #211f26;
+    --md-dark-surface-container-high: #2b2930;
+    --md-dark-surface-container-highest: #36343b;
+    --md-dark-error: #b3261e;
+    --md-dark-on-error: #ffffff;
+    --md-dark-error-container: #93000a;
+    --md-dark-on-error-container: #ffdad5;
+    --md-dark-outline: #79747e;
+    --md-dark-outline-variant: #49454f;
+    --md-dark-inverse-surface: #e6e1e5;
+    --md-dark-inverse-on-surface: #1c1b1f;
+    --md-dark-scrim: rgba(0, 0, 0, 0.6);
+    --md-dark-shadow: rgba(0, 0, 0, 0.15);
+    --md-dark-success: #9bd880;
+    --md-dark-on-success: #193800;
+    --md-dark-success-container: #275000;
+    --md-dark-on-success-container: #b6f397;
+    --md-dark-warning: #ffba47;
+    --md-dark-on-warning: #422b00;
+    --md-dark-warning-container: #5f3f00;
+    --md-dark-on-warning-container: #ffddb0;
+    --md-dark-info: #b3c5ff;
+    --md-dark-on-info: #002a77;
+    --md-dark-info-container: #003ea7;
+    --md-dark-on-info-container: #dae1ff;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Exo 2", sans-serif;
+}
+
+body {
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+
+.container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    padding: 3vh;
+}
+
+.scoreboard-block {
+    display: none;
+    width: 30vh;
+    background-color: var(--md-dark-surface-container-high);
+    overflow: hidden;
+    box-shadow: 0 4px 8px var(--md-dark-shadow);
+    margin-top: 5vh;
+}
+
+.scoreboard-header {
+    width: 100%;
+    background: var(--md-dark-primary);
+    padding: 1vh; /* 1.5vh */
+    text-align: center;
+}
+
+.scoreboard-header p {
+    font-weight: 700;
+    color: var(--md-dark-on-primary);
+    font-size: 2vh; /* 2.5vh */
+}
+
+.scoreboard-info {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+
+.scoreboard-info-beam {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 3.8vh; /* 4.25vh */
+    width: 100%;
+    background-color: var(--md-dark-surface-container);
+    padding: 0 1.9vh 0 1.9vh; /* 2.7vh */
+    border-bottom: 1px solid var(--md-dark-surface-container-lowest);
+}
+
+.info-beam-title,
+.info-beam-title-players {
+    font-size: 1.2vh; /* 1.2vh */
+    letter-spacing: 0.05vh; /* 0.1vh */
+    font-weight: 600; /* 700 */
+    color: var(--md-dark-on-surface);
+    line-height: 1.1; /* 1.2 */
+}
+
+.info-beam-status {
+    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.info-beam-status p {
+    color: var(--md-dark-on-surface);
+    font-size: 1.2vh; /* 1.2vh */
+}
+
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="scoreboard-block">
+                <div class="scoreboard-header">
+                    <p>SERVER INFO</p>
+                </div>
+                <div class="scoreboard-info"></div>
+            </div>
+        </div>
+        <script>
+window.addEventListener("message", (event) => {
+    switch (event.data.action) {
+        case "open":
+            open(event.data);
+            break;
+        case "close":
+            close();
+            break;
+        case "setup":
+            setup(event.data);
+            break;
+    }
+});
+
+const open = (data) => {
+    const scoreboard = document.querySelector(".scoreboard-block");
+    scoreboard.style.display = "block"; 
+    const totalPlayers = document.getElementById("total-players");
+    if (totalPlayers) {
+        totalPlayers.innerHTML = `<p>${data.players} of ${data.maxPlayers}</p>`;
+    }
+    Object.entries(data.requiredCops).forEach(([category, info]) => {
+        const beam = document.querySelector(`.scoreboard-info [data-type="${category}"]`);
+        if (!beam) return;
+        const status = beam.querySelector(".info-beam-status");
+        if (!status) return;
+        if (info.busy) {
+            status.innerHTML = "⏳";
+        } else if (data.currentCops >= info.minimumPolice) {
+            status.innerHTML = "✅";
+        } else {
+            status.innerHTML = "❌";
+        }
+    });
+};
+
+const close = () => {
+    const scoreboard = document.querySelector(".scoreboard-block");
+    scoreboard.style.display = "none";
+};
+
+const setup = (data) => {
+    const scoreboardInfo = document.querySelector(".scoreboard-info");
+    if (!scoreboardInfo) return;
+    scoreboardInfo.innerHTML = "";
+    Object.entries(data.items).forEach(([index, value]) => {
+        const beamElement = document.createElement("div");
+        beamElement.className = "scoreboard-info-beam";
+        beamElement.setAttribute("data-type", index);
+        const titleElement = document.createElement("div");
+        titleElement.className = "info-beam-title";
+        titleElement.innerHTML = `<p>${value}</p>`;
+        const statusElement = document.createElement("div");
+        statusElement.className = "info-beam-status";
+        beamElement.appendChild(titleElement);
+        beamElement.appendChild(statusElement);
+        scoreboardInfo.appendChild(beamElement);
+    });
+    const playersBeam = document.createElement("div");
+    playersBeam.className = "scoreboard-info-beam";
+    const playersTitle = document.createElement("div");
+    playersTitle.className = "info-beam-title";
+    playersTitle.innerHTML = "<p>Total Players</p>";
+    const playersStatus = document.createElement("div");
+    playersStatus.className = "info-beam-status";
+    playersStatus.id = "total-players";
+    playersBeam.appendChild(playersTitle);
+    playersBeam.appendChild(playersStatus);
+    scoreboardInfo.appendChild(playersBeam);
+};
+        </script>
+    </body>
+</html>
\ No newline at end of file