diff --git a/src/web/presentation/music/info/css/musicInfo.css b/src/web/presentation/music/info/css/musicInfo.css
index 1b86c7a233707057427dce997801f66e60799ff9..f618f5312d45f9208cf220adeff4bff88dfd4db9 100644
--- a/src/web/presentation/music/info/css/musicInfo.css
+++ b/src/web/presentation/music/info/css/musicInfo.css
@@ -126,4 +126,13 @@ body {
 
 #audio {
     width: 100%
+}
+
+#lyrics-box {
+    margin-top: 16px;
+    height: 512px;
+    padding: 16px;
+    width: 512px;
+    resize: none;
+    overflow: auto;
 }
\ No newline at end of file
diff --git a/src/web/presentation/music/info/js/musicInfo.js b/src/web/presentation/music/info/js/musicInfo.js
index c3aa029864359b292572fd9381f633d31fd72f38..5ef2687065c0b7a09f51e3c87143c5261b7be8a4 100644
--- a/src/web/presentation/music/info/js/musicInfo.js
+++ b/src/web/presentation/music/info/js/musicInfo.js
@@ -1,6 +1,7 @@
 const playButton = document.querySelector("#play-b")
 const audioPlayer = document.querySelector("#audio")
 const lyricsText = document.querySelector("#lyrics")
+const lyricsBox = document.querySelector("#lyrics-box")
 
 playButton && playButton.addEventListener("click", (e) => {
     e.preventDefault()
@@ -36,19 +37,37 @@ playButton && playButton.addEventListener("click", (e) => {
     xhr.send()
 })
 
+let lyrics = false
+
 lyricsText && lyricsText.addEventListener("click", (e) => {
     e.preventDefault()
 
+    if (lyrics) {
+        lyricsBox.hidden = true
+        lyrics = false
+        return
+    } else {
+        if (lyricsBox.innerHTML !== "") {
+            lyricsBox.hidden = false
+            lyrics = true
+            return
+        }
+    }
+
     const query = new URLSearchParams(window.location.search)
     const id = query.get("id")
-    const url = `http://node:3000/services/lyrics/${id}`
+    const url = `http://localhost:3000/services/lyrics/${id}`
     const xhr = new XMLHttpRequest()
 
     xhr.open('GET', url)
     xhr.onreadystatechange = function() {
+        lyricsBox.hidden = false
+        lyrics = true
         if (xhr.readyState === 4 && xhr.status === 200) {
-            const lyrics = JSON.parse(xhr.responseText)
-            console.log(lyrics.data)
+            const { message } = JSON.parse(xhr.responseText)
+            lyricsBox.innerHTML = message
+        } else if (xhr.readyState === 4 && xhr.status === 404) {
+            lyricsBox.innerHTML = "Lyrics not found."
         }
     }
 
diff --git a/src/web/presentation/music/info/musicInfo.view.php b/src/web/presentation/music/info/musicInfo.view.php
index 76dda418707cb9d4e8477c53bc76dbdb69d77d91..e465d83d14c0dd0b29272f2049df2451f5abb2a3 100644
--- a/src/web/presentation/music/info/musicInfo.view.php
+++ b/src/web/presentation/music/info/musicInfo.view.php
@@ -75,6 +75,9 @@ if (is_numeric($id)) {
             <div id="lyrics-d">
                 <a href="#" id="lyrics">Lyrics</a>
             </div>
+            <div id="lyrics-b">
+                <label for="lyrics-box"></label><textarea wrap="hard" cols="450" rows="6" maxlength="5000" id="lyrics-box" hidden="hidden" disabled readonly></textarea>
+            </div>
         </div>
         <div id="audio-d">
             <audio id="audio" controls hidden="hidden">