diff --git a/src/Components/AudioPlayer.js b/src/Components/AudioPlayer.js
index d707eea..54da4ba 100644
--- a/src/Components/AudioPlayer.js
+++ b/src/Components/AudioPlayer.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, useState} from 'react';
 import VolumeSlider from './VolumeSlider';
 import AudioPlayerButtons from './AudioPlayerButtons';
 
@@ -7,13 +7,16 @@ class AudioPlayer extends Component {
 		super(props);
 		this.state = {
 			volumeBeforeMute:.50,
-			speakerEntity:"🔊"
+			speakerEntity:"🔊",
+			
 		}
 		this.pause = this.pause.bind(this);
 		this.play = this.play.bind(this);
 		this.mute = this.mute.bind(this);
 		this.changeVolume = this.changeVolume.bind(this);
 		this.volumeRef = React.createRef();
+		
+		
 	}
 	
 	componentDidMount(){
@@ -36,32 +39,35 @@ class AudioPlayer extends Component {
 	}
 
 	mute(){
-		if(this.refs.audio.volume === 0)
+		
+		if(this.refs.audio.volume === 0 )
 		{
 			// To unmute the player
-			this.refs.audio.volume=this.volumeRef.current.value/100;
-			this.setState((state)=>({
+			this.refs.audio.volume = this.volumeRef.current.value/100;
+			this.setState((state) => ({
 				speakerEntity:'🔊'
 			}));
 		} else {		
 			// To mute the player
-			this.setState((state)=>({
+			this.setState((state) =>({
 				speakerEntity:'🔇',
 			}));
-			this.refs.audio.volume=0;
+			this.refs.audio.volume = 0;
 		}
 
 	}
+
+	
 	
 	changeVolume() {
 		this.refs.audio.volume = this.volumeRef.current.value/100;
-		if(this.refs.audio.volume>0) {
-			this.setState((state)=>({
-				speakerEntity:'🔊',
+		if(this.refs.audio.volume > 0) {
+			this.setState((state) => ({
+				speakerEntity: '🔊',
 			}));			
 		} else {
-			this.setState((state)=>({
-				speakerEntity:'🔇',
+			this.setState((state) => ({
+				speakerEntity: '🔇',
 			}));			
 		}
 	}
@@ -74,7 +80,7 @@ class AudioPlayer extends Component {
 					<source src={this.props.audiopath} type="audio/mpeg" />
 				</audio>
 
-				<AudioPlayerButtons entity={this.state.speakerEntity} pause={this.pause} play={this.play} mute={this.mute} />
+				<AudioPlayerButtons id="songInfo" entity={this.state.speakerEntity} pause={this.pause} play={this.play} mute={this.mute} duration={this.duration} clickedButtonId={this.state.buttonClass} />
 				<div className="slider-ctn">
 					<VolumeSlider changeVolume={this.changeVolume} volumeRef={this.volumeRef}/>
 				</div>
diff --git a/src/Components/AudioPlayerButtons.js b/src/Components/AudioPlayerButtons.js
index 0bdc0de..c562fdd 100644
--- a/src/Components/AudioPlayerButtons.js
+++ b/src/Components/AudioPlayerButtons.js
@@ -2,33 +2,45 @@
 import React, {Component} from 'react';
 
 class AudioPlayerButtons extends Component {
-	
+	constructor(props) {
+		super(props);
+		this.state = {
+			isMute: false,
+		}
+		this.muteIcon = this.muteIcon.bind(this);
+		this.muteActions = this.muteActions.bind(this);
+	}
+
 	shouldComponentUpdate(newProps) {
 		if(newProps.entity !== this.props.entity) {
-			console.log('component has update');
+			console.log('component has updated');
 			return true;
 		} else {
 			console.log('component has not updated.');
 			return false;
 		}
 	}
-	
+
+	muteIcon() {
+		this.setState({ isMute: !this.state.isMute })
+	}
+
+	muteActions(){
+		// this.state.mute;
+		this.muteIcon();
+	}
+
 	render() {
 		return (
 			<>
-				{/* <aside>
-					<button onClick={this.props.pause} className='pause-button'>||</button>
-					<button onClick={this.props.play} className='play-button'>&#9654;</button>
-					<button onClick={this.props.mute} className='mute-button' dangerouslySetInnerHTML={{__html: this.props.entity}} ></button>
-				</aside> */}
-				
-
+	
 				<div className="infos-ctn">
+				<div className="timer">00:00</div>
 				<div className="title">
 						<h3>Artist name - Song name</h3>
 				</div>
-				<div className="timer">00:00</div>
-				<div className="duration">00:00</div>
+				
+					<div id="songLength" className="duration">{this.duration}</div>
 				</div>
 
 				{/* //  PROGRESS BAR / NO COMPONENT  */}
@@ -40,53 +52,56 @@ class AudioPlayerButtons extends Component {
 			
 				{/* //  PREVIOUS SONG BUTTON / NO COMPONENT  */}
 				<div className="btn-ctn">
-					<div className="btn-action first-btn" onclick="">
+					<div className="btn-action first-btn" >
 						<div id="btn-faws-back">
 							<i className='fas fa-step-backward'></i>
 						</div>
 					</div>
 				
 				{/* //   REWIND SONG BUTTON / NO COMPONENT  */}
-					<div className="btn-action" onclick="">
+					<div className="btn-action" >
 						<div id="btn-faws-rewind">
 							<i className='fas fa-backward'></i>
 						</div>
 					</div>
 
 				{/* //  PLAY BUTTON / AUDIOPLAYER > AUDIOPLAYERBUTTONS (this.play)  */}
-					<div className="btn-action" onclick="">
+					<div className="btn-action" >
 						<div id="btn-faws-play-pause">
 							<i className='fas fa-play' id="icon-play" onClick={this.props.play} ></i>
 						</div>
 					</div>
 
-					<div className="btn-action" onclick="">
+					<div className="btn-action" >
 						<div id="btn-faws-play-pause">
 							<i className='fas fa-pause' id="icon-pause" onClick={this.props.pause} ></i>
 						</div>
 					</div>
 				
 				{/* //  FFWD BUTTON / NO COMPONENT  */}
-					<div className="btn-play" onclick="">
+					<div className="btn-play" >
 						<div id="btn-faws-forward">
 							<i className='fas fa-forward'></i>
 						</div>
 					</div>
 				
 				{/* //  NEXT SONG BUTTON / NO COMPONENT  */}
-					<div className="btn-action" onclick="">
+					<div className="btn-action" >
 						<div id="btn-faws-next">
 							<i className='fas fa-step-forward'></i>
 						</div>
 					</div>
 				
 				{/* //  MUTE BUTTON / AUDIOPLAYER > AUDIOPLAYERBUTTONS (this.mute)  */}
-					<div className="btn-mute" id="toggleMute" onClick={this.props.mute}  >
-						<div id="btn-faws-volume">
-							<i id="icon-vol-up" className='fas fa-volume-up'></i>
-							<i id="icon-vol-mute" className='fas fa-volume-mute' style={{ display: 'none' }}></i>
+					<div className="btn-mute" id="toggleMute" onClick={this.muteActions}>
+						<div id="btn-faws-volume" >
+							 { this.state.isMute
+         					 ? <i id="iconVolUp" className="fas fa-volume-up"></i>
+          						: <i id="iconVolMute" className="fas fa-volume-mute"></i>
+        					}
 						</div>
 					</div>
+				
 				</div>
 				
 				</>
diff --git a/src/index.js b/src/index.js
index ea8908e..4d806cc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,15 +12,15 @@ class WebPlayer extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			mp3path:`${process.env.PUBLIC_URL}/songs/`,
-			mp3name:'Waxwork.mp3',
-			mp3artist:'Azure Window',
-			audiopath:'',
-			mp3autoplay:'autoPlay',
-			mp3genre:'IDM',
-			currentButtonId:0,
-			clickedButtonId:'',
-			mp3Data:[],
+			mp3path: `${process.env.PUBLIC_URL}/songs/`,
+			mp3name: 'Waxwork.mp3',
+			mp3artist: 'Azure Window',
+			audiopath: '',
+			mp3autoplay: 'autoPlay',
+			mp3genre: 'IDM',
+			currentButtonId: 0,
+			clickedButtonId: '',
+			mp3Data: [],
 		}
 	}
 	
@@ -29,18 +29,18 @@ class WebPlayer extends Component {
 		mp3title = mp3title.replace('.mp3','');
 		this.changeMP3 = this.changeMP3.bind(this);
 		this.setState((state)=>({
-			mp3title:mp3title,
-			audiopath:state.mp3path+state.mp3name,
+			mp3title: mp3title,
+			audiopath: state.mp3path+state.mp3name,
 			mp3Data:[
 				{
-					name:'Waxwork.mp3',
-					artist:'Azure Window',
-					genre:'IDM'
+					name: 'Waxwork.mp3',
+					artist: 'Azure Window',
+					genre: 'IDM'
 				},
 				{
-					name:'Grime.mp3',
-					artist:'Caliper',
-					genre:'Beats'
+					name: 'Grime.mp3',
+					artist: 'Caliper',
+					genre: 'Beats'
 				}
 			]
 		}));
@@ -51,13 +51,13 @@ class WebPlayer extends Component {
 		var mp3name = name;
 		mp3title = mp3title.replace('.mp3','').replaceAll('_',' ').toUpperCase();
 		this.setState((state)=>({
-			audiopath:state.mp3path+mp3name,
-			mp3title:mp3title,
-			mp3artist:artist,
-			mp3genre:genre,
-			currentButtonId:currentButtonId,
-			clickedButtonId:currentButtonId,
-			mp3name:mp3name
+			audiopath: state.mp3path+mp3name,
+			mp3title: mp3title,
+			mp3artist: artist,
+			mp3genre: genre,
+			currentButtonId: currentButtonId,
+			clickedButtonId: currentButtonId,
+			mp3name: mp3name
 		}));
 		
 	}