diff --git a/advanced-features/openvidu-recording/public/app.js b/advanced-features/openvidu-recording/public/app.js
index 6bae46f2..53ac8256 100644
--- a/advanced-features/openvidu-recording/public/app.js
+++ b/advanced-features/openvidu-recording/public/app.js
@@ -214,7 +214,7 @@ async function updateRecordingInfo(isRecording) {
     } else {
         recordingButton.disabled = false;
         recordingButton.innerText = "Start Recording";
-        recordingButton.className = "btn btn-success";
+        recordingButton.className = "btn btn-primary";
         recordingText.hidden = true;
     }
 
@@ -304,35 +304,37 @@ function showRecordingList(recordings) {
     const recordingsList = document.getElementById("recording-list");
 
     if (recordings.length === 0) {
-        recordingsList.innerHTML = "There are no recordings available";
+        recordingsList.innerHTML = "<span>There are no recordings available</span>";
     } else {
         recordingsList.innerHTML = "";
     }
 
     recordings.forEach((recording) => {
+        const recordingName = recording.name;
+        const recordingDuration = secondsToHms(recording.duration);
+        const recordingSize = formatBytes(recording.size);
+        const recordingDate = new Date(recording.startedAt).toLocaleString();
+
         const recordingContainer = document.createElement("div");
         recordingContainer.className = "recording-container";
-        recordingContainer.id = recording.name;
+        recordingContainer.id = recordingName;
 
-        const recordingName = document.createElement("p");
-        recordingName.innerText = `${recording.name} - ${recording.duration} - ${recording.size} - ${new Date(
-            recording.startedAt
-        ).toLocaleString()}`;
-        recordingContainer.append(recordingName);
-
-        const playButton = document.createElement("button");
-        playButton.innerText = "Play";
-        playButton.className = "btn btn-primary";
-        playButton.onclick = () => displayRecording(recording.name);
-        recordingContainer.append(playButton);
-
-        const deleteButton = document.createElement("button");
-        deleteButton.innerText = "Delete";
-        deleteButton.className = "btn btn-danger";
-        deleteButton.onclick = async () => {
-            await deleteRecording(recording.name);
-        };
-        recordingContainer.append(deleteButton);
+        recordingContainer.innerHTML = `
+            <i class="fa-solid fa-file-video"></i>
+            <div class="recording-info">
+                <p class="recording-name">${recordingName}</p>
+                <p class="recording-details">${recordingDuration} | ${recordingSize}</p>
+                <p class="recording-date">${recordingDate}</p>
+            </div>
+            <div class="recording-actions">
+                <button title="Play" class="icon-button" onclick="displayRecording('${recordingName}')">
+                    <i class="fa-solid fa-play"></i>
+                </button>
+                <button title="Delete" class="icon-button delete-button" onclick="deleteRecording('${recordingName}')">
+                    <i class="fa-solid fa-trash"></i>
+                </button>
+            </div>
+        `;
 
         recordingsList.append(recordingContainer);
     });
@@ -353,3 +355,27 @@ function displayRecording(recordingName) {
 
     recordingVideo.src = `/recordings/${recordingName}`;
 }
+
+function secondsToHms(seconds) {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor((seconds % 3600) % 60);
+
+    const hDisplay = h > 0 ? h + "h " : "";
+    const mDisplay = m > 0 ? m + "m " : "";
+    const sDisplay = s + "s";
+    return hDisplay + mDisplay + sDisplay;
+}
+
+function formatBytes(bytes) {
+    if (bytes === 0) {
+        return "0Bytes";
+    }
+
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const decimals = i < 2 ? 0 : 1;
+
+    return (bytes / Math.pow(k, i)).toFixed(decimals) + sizes[i];
+}
diff --git a/advanced-features/openvidu-recording/public/index.html b/advanced-features/openvidu-recording/public/index.html
index a717b685..659565d4 100644
--- a/advanced-features/openvidu-recording/public/index.html
+++ b/advanced-features/openvidu-recording/public/index.html
@@ -75,7 +75,7 @@
             <div id="room" hidden>
                 <div id="room-header">
                     <h2 id="room-title"></h2>
-                    <button class="btn btn-info" id="open-recordings-dialog" onclick="openRecordingsDialog()">
+                    <button class="btn btn-primary" id="open-recordings-dialog" onclick="openRecordingsDialog()">
                         Recordings
                     </button>
                     <button class="btn btn-danger" id="leave-room-button" onclick="leaveRoom()">Leave Room</button>
@@ -83,15 +83,13 @@
                 <div id="layout-container"></div>
                 <dialog id="recordings-dialog">
                     <h2>Recordings</h2>
-                    <div id="recording-text" hidden>Room is being recorded</div>
-                    <button class="btn btn-success" id="recording-button" onclick="manageRecording()">
-                        Start Recording
-                    </button>
+                    <div id="recording-controls">
+                        <button class="btn btn-primary" id="recording-button" onclick="manageRecording()">Start Recording</button>
+                        <div id="recording-text" hidden>Room is being recorded</div>
+                    </div>
                     <div id="recording-video-container"></div>
                     <div id="recording-list"></div>
-                    <button class="btn btn-danger" id="close-recordings-dialog" onclick="closeRecordingsDialog()">
-                        Close
-                    </button>
+                    <button class="btn btn-secondary" id="close-recordings-dialog" onclick="closeRecordingsDialog()">Close</button>
                 </dialog>
             </div>
         </main>
diff --git a/advanced-features/openvidu-recording/public/styles.css b/advanced-features/openvidu-recording/public/styles.css
index de4037d7..b6ad89b9 100644
--- a/advanced-features/openvidu-recording/public/styles.css
+++ b/advanced-features/openvidu-recording/public/styles.css
@@ -143,6 +143,10 @@ main {
     margin: 0;
 }
 
+#open-recordings-dialog {
+    margin: 0 10px;
+}
+
 #layout-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -182,6 +186,134 @@ main {
     border-bottom-right-radius: 4px;
 }
 
+#recordings-dialog {
+    width: 500px;
+    max-width: 90%;
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+    background-color: #fff;
+}
+
+#recordings-dialog h2 {
+    margin-bottom: 15px;
+    font-size: 30px;
+    font-weight: bold;
+    text-align: center;
+    color: #444;
+}
+
+#recording-controls {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+#recording-text {
+    background-color: #ffeb3b;
+    color: #333;
+    border-radius: 5px;
+    margin-left: 20px;
+    padding: 0 5px;
+    font-weight: bold;
+    font-style: italic;
+}
+
+#recording-video-container {
+    margin-bottom: 15px;
+}
+
+#recording-video {
+    width: 100%;
+    border-radius: 5px;
+}
+
+#recording-list {
+    margin-bottom: 15px;
+}
+
+#recording-list span {
+    font-size: 16px;
+    font-weight: bold;
+    font-style: italic;
+    color: #333;
+    text-align: center;
+    display: block;
+    margin: 0;
+}
+
+.recording-container {
+    display: flex;
+    align-items: center;
+    border: 1px solid #dcdcdc;
+    border-radius: 5px;
+    padding: 10px;
+    background-color: #f4f4f4;
+    margin: 10px;
+}
+
+.fa-file-video {
+    font-size: 30px;
+    color: #333;
+    margin-right: 10px;
+}
+
+.recording-info {
+    flex-grow: 1;
+    font-size: 14px;
+    color: #333;
+}
+
+.recording-info p {
+    margin: 0;
+}
+
+.recording-name {
+    font-weight: bold;
+}
+
+.recording-details,
+.recording-date {
+    color: #777;
+}
+
+.recording-date {
+    font-style: italic;
+}
+
+.recording-actions {
+    display: flex;
+    align-items: center;
+}
+
+.icon-button {
+    background-color: transparent;
+    border: none;
+    color: #333;
+    margin-left: 10px;
+    padding: 4px 12px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: background-color 0.3s ease;
+}
+
+.icon-button:hover {
+    background-color: #e0e0e0;
+}
+
+.delete-button {
+    color: #d9534f;
+}
+
+#close-recordings-dialog {
+    float: right;
+}
+
 footer {
     height: 60px;
     width: 100%;