.

frontend/src/components/AudioPlayer.jsx

@@ -4,6 +4,11 @@ const SingleAudioPlayer = ({ src }) => {
   const audioRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
 
+  // Early return if no src provided
+  if (!src) {
+    return <div>No audio file available</div>;
+  }
+
   const togglePlay = () => {
     const audio = audioRef.current;
     if (!audio) return;

frontend/src/screens/StationPage.jsx

@@ -1,4 +1,3 @@
-import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 import React, { useState, useEffect } from "react";
 import { addClientToStation } from "../utils/AddClientToStation";
@@ -63,7 +62,7 @@ function StationPage() {
           <div className="join-station-right-section">
             <div className="join-station-content">
               <header className="join-station-header">
-                <h1>Join Station {stationId}</h1>
+                <h1>Join Station {stationID}</h1>
                 <p className="join-station-subtitle">Enter your details to access this collaborative music experience</p>
               </header>
 
@@ -144,7 +143,9 @@ function StationPage() {
           <h1>Serena Station</h1>
           <p className="station-subtitle">Collaborative Music Experience</p>
         </header>
-        <SingleAudioPlayer src={recommendedSongs[0]}></SingleAudioPlayer>
+        {recommendedSongs.length > 0 && (
+          <SingleAudioPlayer src={recommendedSongs[0]}></SingleAudioPlayer>
+        )}
 
         <div className="songs-section">
           <div className="section-header">