diff --git a/src/router.rs b/src/router.rs
index 56f8ada..cc453ab 100644
--- a/src/router.rs
+++ b/src/router.rs
@@ -170,7 +170,7 @@ async fn api_req(req: HttpRequest, body: String) -> HttpResponse {
 pub async fn request(req: HttpRequest, body: String) -> HttpResponse {
     let args = crate::get_args();
     let headers = req.headers();
-    if args.hidden && req.path().starts_with("/api/webui/") {
+    if args.hidden && (req.path().starts_with("/api/webui/") || req.path().starts_with("/live_clear_rate.html")) {
         return not_found(headers);
     }
     if headers.get("aoharu-asset-version").is_none() && req.path().starts_with("/api") && !req.path().starts_with("/api/webui") {
@@ -212,6 +212,7 @@ pub async fn request(req: HttpRequest, body: String) -> HttpResponse {
             "/v1.0/payment/balance" => gree::balance(req),
             "/web/announcement" => web::announcement(req),
             "/api/webui/userInfo" => webui::user(req),
+            "/live_clear_rate.html" => clear_rate::clearrate_html(req).await,
             "/webui/logout" => webui::logout(req),
             "/api/webui/export" => webui::export(req),
             "/api/webui/serverInfo" => webui::server_info(req),
diff --git a/src/router/clear_rate.rs b/src/router/clear_rate.rs
index 3990cbd..19bbd17 100644
--- a/src/router/clear_rate.rs
+++ b/src/router/clear_rate.rs
@@ -1,5 +1,5 @@
 use json::{object, array, JsonValue};
-use actix_web::{HttpRequest};
+use actix_web::{HttpRequest, HttpResponse, http::header::ContentType};
 use rusqlite::params;
 use std::sync::Mutex;
 use lazy_static::lazy_static;
@@ -7,6 +7,7 @@ use lazy_static::lazy_static;
 use crate::encryption;
 use crate::sql::SQLite;
 use crate::router::{global, databases};
+use crate::include_file;
 
 trait SqlClearRate {
     fn get_live_data(&self, id: i64) -> Result<Live, rusqlite::Error>;
@@ -34,6 +35,7 @@ impl SqlClearRate for SQLite {
 lazy_static! {
     static ref DATABASE: SQLite = SQLite::new("live_statistics.db", setup_tables);
     static ref CACHED_DATA: Mutex<Option<JsonValue>> = Mutex::new(None);
+    static ref CACHED_HTML_DATA: Mutex<Option<JsonValue>> = Mutex::new(None);
 }
 
 pub struct Live {
@@ -150,6 +152,18 @@ pub fn live_completed(id: i64, level: i32, failed: bool, score: i64, uid: i64) {
     };
 }
 
+fn get_song_title(live_id: i32, english: bool) -> String {
+    let details = if english {
+        databases::MUSIC_EN[live_id.to_string()].clone()
+    } else {
+        databases::MUSIC[live_id.to_string()].clone()
+    };
+    if !details.is_null() {
+        return details["name"].to_string();
+    }
+    String::from("Unknown Song")
+}
+
 fn get_pass_percent(failed: i64, pass: i64) -> String {
     let total = (failed + pass) as f64;
     if failed + pass == 0 {
@@ -236,3 +250,101 @@ pub fn ranking(_req: HttpRequest, body: String) -> Option<JsonValue> {
         "ranking_list": rank
     })
 }
+
+fn get_html() -> JsonValue {
+    let lives = DATABASE.lock_and_select_all("SELECT live_id FROM lives", params!()).unwrap();
+
+    let mut table = String::new();
+
+    for id in lives.members() {
+        let live_id = id.as_i64().unwrap();
+
+        let info = match DATABASE.get_live_data(live_id) {
+            Ok(i) => i,
+            Err(_) => continue,
+        };
+
+        let calc_rate = |pass: i64, fail: i64| -> f64 {
+            let total = pass + fail;
+            if total == 0 { 0.0 } else { pass as f64 / total as f64 }
+        };
+
+        let title_jp = get_song_title(info.live_id, false);
+        let title_en = get_song_title(info.live_id, true);
+
+        let normal_txt = get_pass_percent(info.normal_failed, info.normal_pass);
+        let hard_txt = get_pass_percent(info.hard_failed, info.hard_pass);
+        let expert_txt = get_pass_percent(info.expert_failed, info.expert_pass);
+        let master_txt = get_pass_percent(info.master_failed, info.master_pass);
+
+        let normal_plays = info.normal_pass + info.normal_failed;
+        let hard_plays = info.hard_pass + info.hard_failed;
+        let expert_plays = info.expert_pass + info.expert_failed;
+        let master_plays = info.master_pass + info.master_failed;
+
+        let normal_rate_sort = calc_rate(info.normal_pass, info.normal_failed);
+        let hard_rate_sort = calc_rate(info.hard_pass, info.hard_failed);
+        let expert_rate_sort = calc_rate(info.expert_pass, info.expert_failed);
+        let master_rate_sort = calc_rate(info.master_pass, info.master_failed);
+
+        table.push_str(&format!(
+            r#"<tr>
+                <td class="title-cell"
+                    data-val="{title_jp}"
+                    data-title-en="{title_en}"
+                    data-title-jp="{title_jp}">
+                    {title_jp}
+                </td>
+
+                <td data-plays="{normal_plays}" data-rate="{normal_rate_sort}">
+                    <span class="rate-text">{normal_txt}</span>
+                    <span class="meta-text">{normal_plays} plays</span>
+                </td>
+
+                <td data-plays="{hard_plays}" data-rate="{hard_rate_sort}">
+                    <span class="rate-text">{hard_txt}</span>
+                    <span class="meta-text">{hard_plays} plays</span>
+                </td>
+
+                <td data-plays="{expert_plays}" data-rate="{expert_rate_sort}">
+                    <span class="rate-text">{expert_txt}</span>
+                    <span class="meta-text">{expert_plays} plays</span>
+                </td>
+
+                <td data-plays="{master_plays}" data-rate="{master_rate_sort}">
+                    <span class="rate-text">{master_txt}</span>
+                    <span class="meta-text">{master_plays} plays</span>
+                </td>
+            </tr>"#
+        ));
+    }
+
+    let html = include_file!("src/router/clear_rate_template.html").replace("{{TABLEBODY}}", &table);
+    object!{
+        "cache": html,
+        "last_updated": global::timestamp()
+    }
+}
+
+async fn get_clearrate_html() -> String {
+    let cache = {
+        let mut result = crate::lock_onto_mutex!(CACHED_HTML_DATA);
+        if result.is_none() {
+            result.replace(get_html());
+        }
+        result.as_ref().unwrap().clone()
+    };
+    if cache["last_updated"].as_u64().unwrap() + (60 * 60) < global::timestamp() {
+        let mut result = crate::lock_onto_mutex!(CACHED_HTML_DATA);
+        result.replace(get_html());
+    }
+    cache["cache"].to_string()
+}
+
+pub async fn clearrate_html(_req: HttpRequest) -> HttpResponse {
+    let html = get_clearrate_html().await;
+
+    HttpResponse::Ok()
+        .content_type(ContentType::html())
+        .body(html)
+}
diff --git a/src/router/clear_rate_template.html b/src/router/clear_rate_template.html
new file mode 100644
index 0000000..4e9e2e9
--- /dev/null
+++ b/src/router/clear_rate_template.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Live Clear Rates</title>
+    <style>
+        :root {
+            --bg-color: #f4f4f9;
+            --text-color: #333;
+            --table-bg: #ffffff;
+            --primary-color: #6c5ce7;
+            --primary-hover: #5649c0;
+            --header-text: #ffffff;
+            --border-color: #dddddd;
+            --row-even: #f8f9fa;
+            --row-hover: #eef2ff;
+            --meta-text: #666;
+            --shadow: rgba(0, 0, 0, 0.1);
+        }
+
+        body.dark-mode {
+            --bg-color: #18181b;
+            --text-color: #e4e4e7;
+            --table-bg: #27272a;
+            --primary-color: #818cf8;
+            --primary-hover: #6366f1;
+            --header-text: #ffffff;
+            --border-color: #3f3f46;
+            --row-even: #2f2f35;
+            --row-hover: #353540;
+            --meta-text: #a1a1aa;
+            --shadow: rgba(0, 0, 0, 0.4);
+        }
+
+        body { 
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
+            background-color: var(--bg-color); 
+            color: var(--text-color); 
+            padding: 20px; 
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        h1 { text-align: center; margin-bottom: 20px; }
+
+        .controls {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            padding: 8px 16px;
+            border: 2px solid var(--primary-color);
+            background: transparent;
+            color: var(--text-color);
+            border-radius: 20px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn:hover, .btn.active {
+            background-color: var(--primary-color);
+            color: var(--header-text);
+        }
+
+        .table-container { 
+            overflow-x: auto; 
+            box-shadow: 0 0 20px var(--shadow); 
+            border-radius: 8px; 
+            background: var(--table-bg); 
+        }
+
+        table { width: 100%; border-collapse: collapse; min-width: 600px; }
+
+        th, td { 
+            padding: 12px 15px; 
+            text-align: center; 
+            border-bottom: 1px solid var(--border-color); 
+        }
+
+        th { 
+            background-color: var(--primary-color); 
+            color: var(--header-text); 
+            cursor: pointer; 
+            user-select: none; 
+            position: sticky; 
+            top: 0;
+            white-space: nowrap;
+        }
+        th:hover { background-color: var(--primary-hover); }
+
+        tr:nth-of-type(even) { background-color: var(--row-even); }
+        tr:last-of-type { border-bottom: 2px solid var(--primary-color); }
+        tr:hover { background-color: var(--row-hover); transition: 0.2s; }
+
+        th::after { content: ' \2195'; opacity: 0.3; font-size: 0.8em; margin-left: 5px; }
+        th.asc::after { content: ' \2191'; opacity: 1; }
+        th.desc::after { content: ' \2193'; opacity: 1; }
+
+        .meta-text { font-size: 0.85em; color: var(--meta-text); display: block; margin-top: 4px; }
+        .rate-text { font-weight: bold; font-size: 1.1em; }
+        .title-cell { text-align: left; font-weight: 600; }
+    </style>
+</head>
+<body>
+    <h1>Live Clear Rates</h1>
+
+    <div class="controls">
+        <button class="btn" id="btnLang" onclick="toggleLanguage()">Language: JP</button>
+
+        <button class="btn active" id="btnPlays" onclick="setSortMode('plays')">Sort by Plays</button>
+        <button class="btn" id="btnRate" onclick="setSortMode('rate')">Sort by Rate %</button>
+        <button class="btn" onclick="toggleTheme()">Dark Mode 🌓</button>
+    </div>
+
+    <div class="table-container">
+        <table id="rateTable">
+            <thead>
+                <tr>
+                    <th onclick="sortTable(0)">Song Title</th>
+                    <th onclick="sortTable(1)">Normal</th>
+                    <th onclick="sortTable(2)">Hard</th>
+                    <th onclick="sortTable(3)">Expert</th>
+                    <th onclick="sortTable(4)">Master</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{TABLEBODY}}
+            </tbody>
+        </table>
+    </div>
+
+    <script>
+        let currentSortMode = 'plays'; 
+        let currentLang = localStorage.getItem('lang') || 'jp';
+
+        updateLanguageDisplay();
+
+        function toggleTheme() {
+            document.body.classList.toggle('dark-mode');
+            const isDark = document.body.classList.contains('dark-mode');
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        }
+
+        if (localStorage.getItem('theme') === 'dark') {
+            document.body.classList.add('dark-mode');
+        }
+
+        function toggleLanguage() {
+            currentLang = currentLang === 'jp' ? 'en' : 'jp';
+            localStorage.setItem('lang', currentLang);
+            updateLanguageDisplay();
+        }
+
+        function updateLanguageDisplay() {
+            const btn = document.getElementById('btnLang');
+            btn.innerText = 'Language: ' + (currentLang === 'jp' ? 'JP' : 'EN');
+
+            const titleCells = document.querySelectorAll('.title-cell');
+            
+            titleCells.forEach(td => {
+                const newTitle = td.getAttribute(`data-title-${currentLang}`);
+                
+                if (newTitle) {
+                    td.innerText = newTitle;
+                    td.setAttribute('data-val', newTitle);
+                }
+            });
+        }
+
+        function setSortMode(mode) {
+            currentSortMode = mode;
+
+            document.getElementById('btnPlays').classList.toggle('active', mode === 'plays');
+            document.getElementById('btnRate').classList.toggle('active', mode === 'rate');
+        }
+
+        function sortTable(n) {
+            var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+            table = document.getElementById("rateTable");
+            switching = true;
+            dir = "desc"; 
+
+            var headers = table.getElementsByTagName("TH");
+            for (var h of headers) { h.classList.remove("asc", "desc"); }
+
+            while (switching) {
+                switching = false;
+                rows = table.rows;
+                for (i = 1; i < (rows.length - 1); i++) {
+                    shouldSwitch = false;
+                    x = rows[i].getElementsByTagName("TD")[n];
+                    y = rows[i + 1].getElementsByTagName("TD")[n];
+
+                    let attrName = (n === 0) ? 'data-val' : (currentSortMode === 'plays' ? 'data-plays' : 'data-rate');
+
+                    var xVal = x.getAttribute(attrName);
+                    var yVal = y.getAttribute(attrName);
+
+                    var xNum = parseFloat(xVal);
+                    var yNum = parseFloat(yVal);
+
+                    if (!isNaN(xNum) && !isNaN(yNum)) {
+                        if (dir == "asc") {
+                            if (xNum > yNum) { shouldSwitch = true; break; }
+                        } else if (dir == "desc") {
+                            if (xNum < yNum) { shouldSwitch = true; break; }
+                        }
+                    } else {
+                        // String sorting (for titles)
+                        if (dir == "asc") {
+                            if (xVal.toLowerCase() > yVal.toLowerCase()) { shouldSwitch = true; break; }
+                        } else if (dir == "desc") {
+                            if (xVal.toLowerCase() < yVal.toLowerCase()) { shouldSwitch = true; break; }
+                        }
+                    }
+                }
+                if (shouldSwitch) {
+                    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+                    switching = true;
+                    switchcount ++; 
+                } else {
+                    if (switchcount == 0 && dir == "desc") {
+                        dir = "asc";
+                        switching = true;
+                    }
+                }
+            }
+            headers[n].classList.add(dir);
+        }
+    </script>
+</body>
+</html>
diff --git a/src/router/databases/mod.rs b/src/router/databases/mod.rs
index 1b9b408..be88c0d 100644
--- a/src/router/databases/mod.rs
+++ b/src/router/databases/mod.rs
@@ -277,9 +277,35 @@ lazy_static! {
     pub static ref MUSIC: JsonValue = {
         let mut info = object!{};
         let items = json::parse(&include_file!("src/router/databases/json/music.json")).unwrap();
-        for data in items.members() {
-            info[data["id"].to_string()] = data.clone();
-        }
+        for live in LIVE_LIST.entries() {
+            info[live.1["id"].to_string()] = loop {
+                let mut val = object!{};
+                for data in items.members() {
+                    if live.1["masterMusicId"] == data["id"] {
+                        val = data.clone();
+                        break;
+                    }
+                }
+                break val;
+            };
+        };
+        info
+    };
+    pub static ref MUSIC_EN: JsonValue = {
+        let mut info = object!{};
+        let items = json::parse(&include_file!("src/router/databases/json/global/music.json")).unwrap();
+        for live in LIVE_LIST.entries() {
+            info[live.1["id"].to_string()] = loop {
+                let mut val = object!{};
+                for data in items.members() {
+                    if live.1["masterMusicId"] == data["id"] {
+                        val = data.clone();
+                        break;
+                    }
+                }
+                break val;
+            };
+        };
         info
     };
     pub static ref RANKS: JsonValue = {