diff --git a/static/index.js b/static/index.js
index 72be570..18cc6ac 100644
--- a/static/index.js
+++ b/static/index.js
@@ -96,13 +96,22 @@ async function subscribe(user, mediaType) {
   // subscribe to a remote user
   await client.subscribe(user, mediaType);
   console.log("subscribe success");
-  const player = $(`
-    <div class="qbox" id="player-${uid}">
-      <p class="player-name">${uid}</p>
-      <progress value="0" max="1"></progress>
-    </div>
-  `);
-  $("#remote-playerlist").append(player);
+  $.getJSON(`api/user/${uid}`, function (user) {
+    console.log(user);
+    const player = $(`
+      <div class="qbox" id="player-${uid}">
+        <p>
+          <a href="${user.url}" target="_blank">
+            <img class="rounded-circle" src="${user.avat}" width="20">
+            ${user.disp} @${user.acct}
+          </a>
+          )
+        </p>
+        <progress value="0" max="1"></progress>
+      </div>
+    `);
+    $("#remote-playerlist").append(player);
+  });
   user.audioTrack.play();
   user.intervalId = window.setInterval(set_soundmeter, 20, `#player-${uid} progress`, user.audioTrack);
 }