diff --git a/src/components/MusicController/MusicController.jsx b/src/components/MusicController/MusicController.jsx
index 5063c9c..e71a5b1 100644
--- a/src/components/MusicController/MusicController.jsx
+++ b/src/components/MusicController/MusicController.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, useRef } from 'react';
+import React, { useContext } from 'react';
 import styles from './MusicController.module.css';
 import { MyContext } from '../../layout/AppLayout';
 import { AudioContext } from '../../context/AudioContext';
@@ -14,40 +14,18 @@ import { MdSkipPrevious, MdSkipNext } from 'react-icons/md';
 import CustomProgressbar from '../ProgressBar/CustomProgressbar';
 
 function MusicController() {
-  const { showPlayer, setShowPlayer, showRightPanel, setShowRightPanel } =
+  const { showRightPanel, togglePlayerWindow, toggleRightPanel } =
     useContext(MyContext);
   const {
-    playAudio,
-    pauseAudio,
+    playPause,
     muteAudio,
+    toggleRepeat,
+    toggleShuffle,
     isPlaying,
-    setIsPlaying,
     repeat,
-    setRepeat,
     shuffle,
-    setShuffle,
     mute,
-    setMute,
   } = useContext(AudioContext);
-  const playerRef = useRef();
-
-  const updatePlayer = () => {
-    setShowPlayer(!showPlayer);
-  };
-  const RightPanel = () => {
-    setShowRightPanel(!showRightPanel);
-  };
-  const playPause = () => {
-    if (isPlaying) pauseAudio(playerRef);
-    else playAudio(playerRef);
-  };
-  const muteUnmute = () => muteAudio(playerRef);
-
-  useEffect(() => {
-    return () => {
-      setIsPlaying(false); // change button state while page switch
-    };
-  }, []);
 
   return (
     <div className={styles.musicContainer}>
@@ -55,7 +33,7 @@ function MusicController() {
         <div className={styles.mainControlSection}>
           <div className={styles.basicBtn}>
             <div className={styles.shuffleBtn}>
-              <button onClick={() => setShuffle(!shuffle)}>
+              <button onClick={toggleShuffle}>
                 {shuffle ? (
                   <RxShuffle size={22} color="#1db954" />
                 ) : (
@@ -69,12 +47,7 @@ function MusicController() {
               </button>
             </div>
             <div className={styles.ctrlBtn}>
-              <button
-                onClick={() => {
-                  playPause();
-                  setIsPlaying(!isPlaying);
-                }}
-              >
+              <button onClick={playPause}>
                 {isPlaying ? <IoPause size={25} /> : <IoPlaySharp size={25} />}
               </button>
             </div>
@@ -84,7 +57,7 @@ function MusicController() {
               </button>
             </div>
             <div className={styles.repeatBtn}>
-              <button onClick={() => setRepeat(!repeat)}>
+              <button onClick={toggleRepeat}>
                 {repeat ? (
                   <TbRepeat size={22} color="#1db954" />
                 ) : (
@@ -99,7 +72,7 @@ function MusicController() {
         </div>
         <div className={styles.featureBtnSection}>
           <div className={styles.rightSidePanelBtn}>
-            <button onClick={() => RightPanel()}>
+            <button onClick={toggleRightPanel}>
               {showRightPanel ? (
                 <BiCaretRightSquare size={19} color="#1db954" />
               ) : (
@@ -118,12 +91,7 @@ function MusicController() {
             </button>
           </div>
           <div className={styles.volumeBtn}>
-            <button
-              onClick={() => {
-                muteUnmute();
-                setMute(!mute);
-              }}
-            >
+            <button onClick={muteAudio}>
               {mute ? (
                 <HiOutlineVolumeOff size={19} />
               ) : (
@@ -135,7 +103,7 @@ function MusicController() {
             <input type="range" />
           </div>
           <div className={styles.expandBtn}>
-            <button onClick={() => updatePlayer()}>
+            <button onClick={togglePlayerWindow}>
               <BsArrowsAngleExpand size={18} />
             </button>
           </div>
diff --git a/src/components/ProgressBar/CustomProgressbar.jsx b/src/components/ProgressBar/CustomProgressbar.jsx
index e9aaaf9..d2f0f56 100644
--- a/src/components/ProgressBar/CustomProgressbar.jsx
+++ b/src/components/ProgressBar/CustomProgressbar.jsx
@@ -1,45 +1,60 @@
-import React from 'react';
+import React, { useState, useEffect, useContext } from 'react';
+import { AudioContext } from '../../context/AudioContext';
 import styles from './CustomProgressbar.module.css';
 
 function CustomProgressbar() {
-  const seekTimeSec = 50;
-  const seekTimePercentage = 50;
-  const durationTimeSec = 200;
-  const loadedPercentage = 80;
+  const [loadedPer, setLoadedPer] = useState(0);
+  const [playedPer, setPlayedPer] = useState(0);
+  const { progress, duration } = useContext(AudioContext);
+
   const timeFormatter = (second) => {
+    if (!second || isNaN(second)) {
+      return '00:00';
+    }
     return new Date(second * 1000).toISOString().substring(14, 19);
   };
+  const FloatToPer = (second) => {
+    return Math.round(second * 100);
+  };
 
+  useEffect(() => {
+    setLoadedPer(FloatToPer(progress.loaded));
+    setPlayedPer(FloatToPer(progress.played));
+  }, [progress]);
   return (
     <div className={styles.progressContainer}>
       <div className={styles.progressLabel}>
-        <span>{timeFormatter(seekTimeSec)}</span>
+        <span>{timeFormatter(progress.playedSeconds)}</span>
       </div>
       <div className={styles.innerSection}>
         <input
           type="range"
           className={styles.loadedProgressBar}
           min={0}
-          value={loadedPercentage}
+          value={loadedPer}
+          defaultValue={0}
           max={100}
           style={{
-            background: `linear-gradient(to right, #232323d6 ${loadedPercentage}%, #4d4d4d ${loadedPercentage}%)`,
+            background: `linear-gradient(to right, #232323d6 ${loadedPer}%, #4d4d4d ${loadedPer}%)`,
           }}
+          readOnly
           disabled
         />
         <input
           type="range"
           min={0}
-          value={seekTimePercentage}
+          value={playedPer}
+          defaultValue={0}
           max={100}
           className={styles.bar}
           style={{
-            background: `linear-gradient(to right, #ffffff ${seekTimePercentage}%, #ffffff00 ${seekTimePercentage}%`,
+            background: `linear-gradient(to right, #ffffff ${playedPer}%, #ffffff00 ${playedPer}%`,
           }}
+          readOnly
         />
       </div>
       <div className={styles.progressLabel}>
-        <span>{timeFormatter(durationTimeSec)}</span>
+        <span>{timeFormatter(duration)}</span>
       </div>
     </div>
   );
diff --git a/src/context/AudioContext.jsx b/src/context/AudioContext.jsx
index 53d8c2f..5031db8 100644
--- a/src/context/AudioContext.jsx
+++ b/src/context/AudioContext.jsx
@@ -1,4 +1,4 @@
-import React, { useState, createContext, useRef } from 'react';
+import React, { useState, createContext } from 'react';
 import AudioPlayer from 'react-player';
 
 export const AudioContext = createContext();
@@ -8,20 +8,13 @@ function AudioProvider({ children }) {
   const [repeat, setRepeat] = useState(false);
   const [shuffle, setShuffle] = useState(false);
   const [mute, setMute] = useState(false);
-  const [showPlayer, setShowPlayer] = useState(false);
-  const [showRightPanel, setShowRightPanel] = useState(false);
-  const playerRef = useRef();
+  const [progress, setProgress] = useState({});
+  const [duration, setDuration] = useState(0);
 
-  const playAudio = () => {
-    playerRef.current.audio.current.play();
-  };
-  const pauseAudio = () => {
-    playerRef.current.audio.current.pause();
-  };
-  const muteAudio = () => {
-    playerRef.current.audio.current.muted =
-      !playerRef.current.audio.current.muted;
-  };
+  const playPause = () => setIsPlaying(!isPlaying);
+  const muteAudio = () => setMute(!mute);
+  const toggleRepeat = () => setRepeat(!repeat);
+  const toggleShuffle = () => setShuffle(!shuffle);
 
   // Reference data
   const TrackData = {
@@ -73,26 +66,25 @@ function AudioProvider({ children }) {
     <AudioContext.Provider
       value={{
         isPlaying,
-        setIsPlaying,
         repeat,
-        setRepeat,
         shuffle,
-        setShuffle,
         mute,
-        setMute,
-        showPlayer,
-        setShowPlayer,
-        showRightPanel,
-        setShowRightPanel,
-        playAudio,
-        pauseAudio,
         muteAudio,
+        playPause,
+        toggleRepeat,
+        toggleShuffle,
         TrackData,
+        progress,
+        duration,
       }}
     >
       <AudioPlayer
-        ref={playerRef}
         url={TrackData.downloadUrl[2].url}
+        playing={isPlaying}
+        muted={mute}
+        loop={repeat}
+        onProgress={setProgress}
+        onDuration={setDuration}
         style={{ display: 'none' }}
       />
       {children}
diff --git a/src/context/ControllerContext.jsx b/src/context/ControllerContext.jsx
deleted file mode 100644
index 0c5c451..0000000
--- a/src/context/ControllerContext.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-function ControllerContext() {
-  const playAudio = (playerRef) => {
-    playerRef.current.audio.current.play();
-  };
-  const pauseAudio = (playerRef) => {
-    playerRef.current.audio.current.pause();
-  };
-  const muteAudio = (playerRef) => {
-    playerRef.current.audio.current.muted =
-      !playerRef.current.audio.current.muted;
-  };
-
-  return { playAudio, pauseAudio, muteAudio };
-}
-
-export default ControllerContext;
diff --git a/src/layout/AppLayout.jsx b/src/layout/AppLayout.jsx
index be7c24e..5227821 100644
--- a/src/layout/AppLayout.jsx
+++ b/src/layout/AppLayout.jsx
@@ -17,6 +17,9 @@ function AppLayout() {
   const [showPlayer, setShowPlayer] = useState(false);
   const [showRightPanel, setShowRightPanel] = useState(false);
 
+  const togglePlayerWindow = () => setShowPlayer(!showPlayer);
+  const toggleRightPanel = () => setShowRightPanel(!showRightPanel);
+
   useEffect(() => {
     if (window.location.hash) {
       const expires_in = Date.now();
@@ -40,6 +43,8 @@ function AppLayout() {
           setShowPlayer,
           showRightPanel,
           setShowRightPanel,
+          togglePlayerWindow,
+          toggleRightPanel,
         }}
       >
         <AudioContext>
diff --git a/src/pages/MusicPanel/MusicPanel.jsx b/src/pages/MusicPanel/MusicPanel.jsx
index 6d38575..447f922 100644
--- a/src/pages/MusicPanel/MusicPanel.jsx
+++ b/src/pages/MusicPanel/MusicPanel.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, useRef } from 'react';
+import React, { useContext } from 'react';
 import CustomProgressbar from '../../components/ProgressBar/CustomProgressbar';
 import { MyContext } from '../../layout/AppLayout';
 import { AudioContext } from '../../context/AudioContext';
@@ -13,85 +13,24 @@ import { HiOutlineVolumeUp, HiOutlineVolumeOff } from 'react-icons/hi';
 import styles from './MusicPanel.module.css';
 
 function MusicPanel() {
-  const data = {
-    name: 'malabari banger',
-    artist: ['dabzee', 'mhr', 'joker', 'sa'],
-    playlist: 'trending now malayalam',
-    images: [
-      {
-        url: 'https://i.scdn.co/image/ab67616d0000b2730a5fda5bb1a466fc1ee47d56',
-        height: 640,
-        width: 640,
-      },
-      {
-        url: 'https://i.scdn.co/image/ab67616d00001e020a5fda5bb1a466fc1ee47d56',
-        height: 300,
-        width: 300,
-      },
-      {
-        url: 'https://i.scdn.co/image/ab67616d000048510a5fda5bb1a466fc1ee47d56',
-        height: 64,
-        width: 64,
-      },
-    ],
-    downloadUrl: [
-      {
-        quality: '12kbps',
-        url: 'https://aac.saavncdn.com/504/05b2fb10b4d21f8422e78412ea344ac5_12.mp4',
-      },
-      {
-        quality: '48kbps',
-        url: 'https://aac.saavncdn.com/504/05b2fb10b4d21f8422e78412ea344ac5_48.mp4',
-      },
-      {
-        quality: '96kbps',
-        url: 'https://aac.saavncdn.com/504/05b2fb10b4d21f8422e78412ea344ac5_96.mp4',
-      },
-      {
-        quality: '160kbps',
-        url: 'https://aac.saavncdn.com/504/05b2fb10b4d21f8422e78412ea344ac5_160.mp4',
-      },
-      {
-        quality: '320kbps',
-        url: 'https://aac.saavncdn.com/504/05b2fb10b4d21f8422e78412ea344ac5_320.mp4',
-      },
-    ],
-  };
-  const { showPlayer, setShowPlayer } = useContext(MyContext);
+  const { togglePlayerWindow } = useContext(MyContext);
   const {
-    playAudio,
-    pauseAudio,
+    playPause,
+    toggleRepeat,
+    toggleShuffle,
     muteAudio,
     isPlaying,
-    setIsPlaying,
     repeat,
-    setRepeat,
     shuffle,
-    setShuffle,
     mute,
-    setMute,
+    TrackData,
   } = useContext(AudioContext);
-  // setIsPlaying(false); // change button state while page switch
-  const playerRef = useRef();
-
-  const updatePlayer = () => setShowPlayer(!showPlayer);
-  const playPause = () => {
-    if (!isPlaying) playAudio(playerRef);
-    else pauseAudio(playerRef);
-  };
-  const muteUnmute = () => muteAudio(playerRef);
-
-  useEffect(() => {
-    return () => {
-      setIsPlaying(false); // change button state while page switch
-    };
-  }, []);
   return (
     <div className={styles.musicPanelContainer}>
       <div className={styles.fadeLayer}></div>
       <div className={styles.innerContainer}>
         <div className={styles.navbarSection}>
-          <div className={styles.backBtnSection} onClick={updatePlayer}>
+          <div className={styles.backBtnSection} onClick={togglePlayerWindow}>
             <IoIosArrowDown size={25} color={'#ffffffc7'} />
           </div>
           <div className={styles.logoSection}>
@@ -100,20 +39,22 @@ function MusicPanel() {
             </div>
             <div className={styles.playlistTitle}>
               <span className={styles.labelType}>Playing from</span>
-              <span className={styles.playlistLabelName}>{data.playlist}</span>
+              <span className={styles.playlistLabelName}>
+                {TrackData.playlist}
+              </span>
             </div>
           </div>
         </div>
         <div className={styles.dataSection}>
           <div className={styles.songImgSection}>
-            <img src={data.images[1].url} className={styles.songImg} />
+            <img src={TrackData.images[1].url} className={styles.songImg} />
           </div>
           <div className={styles.songDescContainer}>
             <div className={styles.TitleSection}>
-              <span>{data.name}</span>
+              <span>{TrackData.name}</span>
             </div>
             <div className={styles.ArtistSection}>
-              <span>{data.artist.join(', ')}</span>
+              <span>{TrackData.artists.join(', ')}</span>
             </div>
           </div>
         </div>
@@ -131,7 +72,7 @@ function MusicPanel() {
             </div>
             <div className={styles.basicFunBtn}>
               <div className={styles.shuffleBtn}>
-                <button onClick={() => setShuffle(!shuffle)}>
+                <button onClick={toggleShuffle}>
                   {shuffle ? (
                     <RxShuffle size={22} color="#1db954" />
                   ) : (
@@ -145,13 +86,7 @@ function MusicPanel() {
                 </button>
               </div>
               <div>
-                <button
-                  onClick={() => {
-                    playPause();
-                    setIsPlaying(!isPlaying);
-                  }}
-                  className={styles.ctrlBtn}
-                >
+                <button onClick={playPause} className={styles.ctrlBtn}>
                   {isPlaying ? (
                     <IoPause size={32} />
                   ) : (
@@ -165,11 +100,7 @@ function MusicPanel() {
                 </button>
               </div>
               <div className={styles.repeatBtn}>
-                <button
-                  onClick={() => {
-                    setRepeat(!repeat);
-                  }}
-                >
+                <button onClick={toggleRepeat}>
                   {repeat ? (
                     <TbRepeat size={25} color="#1db954" />
                   ) : (
@@ -180,13 +111,7 @@ function MusicPanel() {
             </div>
             <div className={styles.additionalFunBtn}>
               <div className={styles.volumeBar}>
-                <button
-                  onClick={() => {
-                    muteUnmute();
-                    setMute(!mute);
-                  }}
-                  className={styles.volumeBtn}
-                >
+                <button onClick={muteAudio} className={styles.volumeBtn}>
                   {mute ? (
                     <HiOutlineVolumeOff size={25} />
                   ) : (
@@ -196,7 +121,7 @@ function MusicPanel() {
                 <input type="range" className={styles.volumeBar} />
               </div>
               <div className={styles.exitBtn}>
-                <button onClick={updatePlayer}>
+                <button onClick={togglePlayerWindow}>
                   <BsArrowsAngleContract size={25} />
                 </button>
               </div>