diff --git a/player/html/index.html b/player/html/index.html
index 05cdcde..2f28561 100644
--- a/player/html/index.html
+++ b/player/html/index.html
@@ -60,8 +60,8 @@
     /* Grid container */
     .grid {
         display: grid;
-        grid-template-columns: repeat(10, 70px);
-        grid-template-rows: repeat(3, 70px);
+        grid-template-columns: repeat(10, 150px);
+        grid-template-rows: repeat(3, 150px);
         gap: 12px;
         justify-content: center;
         align-content: center;
@@ -76,7 +76,7 @@
         background: rgba(0,0,0, 0.6);
         border: 2px solid #333;
         cursor: pointer;
-        font-size: 18px;
+        font-size: 16px;
         transition: background 0.2s ease, transform 0.2s ease;
         &.current {
             background: #909090;
@@ -269,11 +269,9 @@
         }
     }
 
-
-
-
     function play() {
         let blocked = false, loading
+        isPlaying = true
         document.querySelectorAll("video,audio").forEach(async (media) => {
             if (blocked) { return }
             return media.play().then(() => {
@@ -305,11 +303,28 @@
         })
     }
     function pause() {
-        document.createElementAll("video,audio").forEach(media => {
-            media.paused = true
+        isPlaying = false
+        document.querySelectorAll("video,audio").forEach(media => {
+            media.pause()
         })
     }
 
+    var isPlaying = false
+
+    function toggle() {
+        if (isPlaying) {
+            pause()
+        } else {
+            play()
+        }
+    }
+    window.addEventListener('keydown', event => {
+        console.log('keydown')
+        if (event.key == " ") {
+            toggle()
+        }
+    });
+
     function render() {
         name = document.location.hash.slice(1)
         console.log('on load', name)
@@ -338,7 +353,8 @@
         for (let i = 1; i <= 30; i++) {
             const box = document.createElement("div");
             box.className = "box box" + i;
-            box.textContent = i;
+            box.textContent = titles[i - 1];
+            box.dataset.id = i - 1
 
             box.addEventListener("mouseenter", () => {
                 titleEl.textContent = titles[i - 1];
@@ -348,9 +364,9 @@
                 titleEl.textContent = "";
             });
             box.addEventListener("click", () => {
-                console.log("clicked", box.textContent)
+                console.log("clicked", box.dataset.id)
                 document.querySelector(".page").style.display = ""
-                current = parseInt(box.textContent) - 1
+                current = parseInt(box.dataset.id) - 1
                 nextVideo.src = prefix + name + playlist[current]
                 fetch(nextVideo.src.replace(/.mp4/, '.ass') + '?' +random).then(async (res) => {
                     const content = await res.text()