diff --git a/client/src/components/LeaderBoard.tsx b/client/src/components/LeaderBoard.tsx
index 18e2f1a..df2818c 100644
--- a/client/src/components/LeaderBoard.tsx
+++ b/client/src/components/LeaderBoard.tsx
@@ -52,59 +52,59 @@ function LeaderBoard() {
 
 export default LeaderBoard;
 
-// import React, { useState } from 'react';
-// import { useQuery } from '@apollo/client';
-// import { GET_USERS } from '../graphql/queries'; // Adjust the import path as necessary
-
-function LeaderBoard() {
-
-//     interface IUser {
-//         _id: string;
-//         username: string;
-//         correctAnswers: number;
-//         avatar: string; // Assuming you have an avatar property
-//     }
-
-//     // Data for leaderboard
-//    /* const [leaderboardData, setLeaderboardData] = useState([
-//         { _id: 'kjhd63r9bhsef', username: 'Player1', correctAnswers: 100 },
-//         { username: 'Player2', score: 90 },
-//         { username: 'Player4', score: 70 },
-//         { username: 'Player5', score: 60 },
-//     ]);
-//     */
-//     // Fetch leaderboard data from the server (mocked for now)
-//     const [leaderboardData, setLeaderboardData] = useState([]);
-
-//     // How do we get the data from the server?
-
-//     const { loading, data, error } = useQuery<IUser[] | undefined>(GET_USERS);
-
-//     if (loading) return <p>Loading...</p>;
-//     if (error) return <p>Error: {error.message}</p>;
-//     // const { loading, data, errer } = useQuery(GET_LEADERBOARD_DATA, {
-//     //     variables: { difficulty_lvl: 'easy' }, // Example variable
-//     // );
-//     const users = data?.users || [];
-
-//     // Sort the leaderboard data by score in descending order - by what measurement (?)
-//     const sortedLeaderboard = users.sort((a: number, b: number) => b.correctAnswers - a.correctAnswers);
-
-//   return (
-//     <div>
-//       { sortedLeaderboard.length > 0 ? sortedLeaderboard.map(user: IUser => (
-//         <div className="leaderboard-container">
-//             <div className="leaderboard-item" key={user._id}>
-//                 <img src={user.avatar} alt="Avatar" className="avatar" /> {/* Assuming you have an avatar property */}
-//                 <span className="username">{user.username}</span>
-//                 <span className="score">{user.correctAnswers}</span>
-//             </div>
-//         ))
-//         </div>
-//         }
-//     </div>
-
-//   )
-}
-
- export default LeaderBoard
+// // import React, { useState } from 'react';
+// // import { useQuery } from '@apollo/client';
+// // import { GET_USERS } from '../graphql/queries'; // Adjust the import path as necessary
+
+// function LeaderBoard() {
+
+// //     interface IUser {
+// //         _id: string;
+// //         username: string;
+// //         correctAnswers: number;
+// //         avatar: string; // Assuming you have an avatar property
+// //     }
+
+// //     // Data for leaderboard
+// //    /* const [leaderboardData, setLeaderboardData] = useState([
+// //         { _id: 'kjhd63r9bhsef', username: 'Player1', correctAnswers: 100 },
+// //         { username: 'Player2', score: 90 },
+// //         { username: 'Player4', score: 70 },
+// //         { username: 'Player5', score: 60 },
+// //     ]);
+// //     */
+// //     // Fetch leaderboard data from the server (mocked for now)
+// //     const [leaderboardData, setLeaderboardData] = useState([]);
+
+// //     // How do we get the data from the server?
+
+// //     const { loading, data, error } = useQuery<IUser[] | undefined>(GET_USERS);
+
+// //     if (loading) return <p>Loading...</p>;
+// //     if (error) return <p>Error: {error.message}</p>;
+// //     // const { loading, data, errer } = useQuery(GET_LEADERBOARD_DATA, {
+// //     //     variables: { difficulty_lvl: 'easy' }, // Example variable
+// //     // );
+// //     const users = data?.users || [];
+
+// //     // Sort the leaderboard data by score in descending order - by what measurement (?)
+// //     const sortedLeaderboard = users.sort((a: number, b: number) => b.correctAnswers - a.correctAnswers);
+
+// //   return (
+// //     <div>
+// //       { sortedLeaderboard.length > 0 ? sortedLeaderboard.map(user: IUser => (
+// //         <div className="leaderboard-container">
+// //             <div className="leaderboard-item" key={user._id}>
+// //                 <img src={user.avatar} alt="Avatar" className="avatar" /> {/* Assuming you have an avatar property */}
+// //                 <span className="username">{user.username}</span>
+// //                 <span className="score">{user.correctAnswers}</span>
+// //             </div>
+// //         ))
+// //         </div>
+// //         }
+// //     </div>
+
+// //   )
+// }
+
+//  export default LeaderBoard
diff --git a/client/src/components/screens/Questions.tsx b/client/src/components/screens/Questions.tsx
index b070a41..20f4155 100644
--- a/client/src/components/screens/Questions.tsx
+++ b/client/src/components/screens/Questions.tsx
@@ -6,7 +6,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { preloadSounds } from '../../utils/preloadSounds';
 
-import BackgroundMusic from '../BackgroundMusic';
+import BackgroundMusic from '../BackgroundMusicProvider';
 import { UPDATE_STATS } from '@/graphql/mutations';
 import { useMutation } from '@apollo/client';