diff --git a/src/Pages/Album.jsx b/src/Pages/Album.jsx
index 0e41e75..6eb1f27 100644
--- a/src/Pages/Album.jsx
+++ b/src/Pages/Album.jsx
@@ -11,14 +11,16 @@ import '../styles/PagesStyles/Album.scss'
 const Album = () => {
     const {myId} = useParams();
 
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const albumLocalStorage = JSON.parse( localStorage.getItem("albums"))
     const album = albumLocalStorage.find(item => item.spt_album_id === myId);
-    
+
 //---------------FETCH songs(call to API-songs)------------------------------------//
     const songs = useFetchmusic(myId)
 //---------------storing the songs in the local storage----------------------//
     localStorage.setItem( "SongsList", JSON.stringify( songs ))
-    
+
     return(
         <div className='Album__container'>
             <Playbar />
@@ -26,7 +28,7 @@ const Album = () => {
             <section className='ContentSection__Album'>
                 <MenuBar />
                 <InfoAlbum data={album} />
-            </section>   
+            </section>
         </div>
     )
 }
diff --git a/src/Pages/AlbumLibrary.jsx b/src/Pages/AlbumLibrary.jsx
index 9e2ba93..7159036 100644
--- a/src/Pages/AlbumLibrary.jsx
+++ b/src/Pages/AlbumLibrary.jsx
@@ -8,6 +8,8 @@ import MenuBar from '../components/MenuBar'
 import '../styles/PagesStyles/AlbumLibrary.scss'
 
 const AlbumLibrary = () => {
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const albumLocalStorage = JSON.parse( localStorage.getItem("albums"))
 
     return (
@@ -20,14 +22,14 @@ const AlbumLibrary = () => {
                             albumLocalStorage.map((data) => (
                                 <BigSquareAlbum data={data} key={data.spt_album_id} {...data}/>
                             ))
-                        } 
+                        }
                     </div>
                 </section>
                 <Playbar />
         </div>
         );
     }
-     
+
 export default AlbumLibrary;
-        
-       
+
+
diff --git a/src/Pages/AnimationLoader.jsx b/src/Pages/AnimationLoader.jsx
index c86e5c3..bb971ad 100644
--- a/src/Pages/AnimationLoader.jsx
+++ b/src/Pages/AnimationLoader.jsx
@@ -6,10 +6,12 @@ import LogoAnimate from '../components/LogoAnimate'
 const AnimationLoader = () => {
     const history = useHistory();
 
+    // TODO:
+    // Apply a setTimeout it's a bad practice
     setTimeout(() => {
         history.push("/signin");
       }, 6000);
-    
+
     return(
         <LogoAnimate />
         )
diff --git a/src/Pages/ArtistSection.jsx b/src/Pages/ArtistSection.jsx
index 1740b42..b08cf88 100644
--- a/src/Pages/ArtistSection.jsx
+++ b/src/Pages/ArtistSection.jsx
@@ -8,6 +8,9 @@ import '../styles/PagesStyles/ArtistSection.scss'
 
 
 const ArtistSection = () => {
+
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const albumLocalStorage = JSON.parse( localStorage.getItem("albums"))
 
     return(
@@ -20,7 +23,7 @@ const ArtistSection = () => {
                         albumLocalStorage.map((data) => (
                             <ArtistImage data={data} key={data.spt_album_id} {...data}/>
                         ))
-                    } 
+                    }
                 </div>
                 </section>
                 <Playbar />
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 4a03866..11d97d0 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -14,15 +14,19 @@ import MenuBar from '../components/MenuBar'
 
 const Home = () => {
     //-----------------FETCH Albums (call toAPI)------------------------------//
-    const albumList = useFetchAlbum('https://mastersound-backend.azurewebsites.net/api/albums/new-releases')       
-     
+    // TODO:
+    // The API URL should be a global variable
+    const albumList = useFetchAlbum('https://mastersound-backend.azurewebsites.net/api/albums/new-releases')
+
     //-----------------storing the album in the local storage----------------------//
-           localStorage.setItem( "albums", JSON.stringify( albumList ))
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
+    localStorage.setItem( "albums", JSON.stringify( albumList ))
 
     useEffect(() => {
         window.scroll(0, 0)
       }, []);
-      
+
         return(
             <div className='Home__container'>
                     <Panel />
@@ -34,7 +38,7 @@ const Home = () => {
                         <RectangleAlbumGarden SectionName='Escuchado recientemente'/>
                         <TopTracks />
                     </section>
-                    <Playbar />                    
+                    <Playbar />
                 </div>
         )
 }
diff --git a/src/Pages/Register.jsx b/src/Pages/Register.jsx
index 83af546..6d2c683 100644
--- a/src/Pages/Register.jsx
+++ b/src/Pages/Register.jsx
@@ -18,19 +18,23 @@ export default function Register () {
 
     const handleSubmit = (e) => {
         e.preventDefault();
-        
+
+        // TODO:
+        // The API URL should be a global variable
         fetch('https://mastersound-backend.azurewebsites.net/api/auth/signup', {
             method: 'post',
-            mode: 'cors', 
+            mode: 'cors',
             headers: {
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({
                 given_name,
                 last_name,
-                email, 
+                email,
                 password,
                 country_id,
+                // TODO:
+                // Why this image is set by default?
                 image_url: 'https://i.scdn.co/image/23009960c33ef08d5973440cca17985a6c70a515',
                 sex
             })
@@ -41,59 +45,59 @@ export default function Register () {
                 console.log('Success:', response);
                 history.push('/signin');
             }
-        } 
+        }
     )};
 
-    
+
     return(
         <main className='mainRegister'>
             <img src={Logo} alt='Logo' />
             <form onSubmit={handleSubmit} className='mainSignIn__form'>
                 <label>Nombre de Usuario</label>
                 <Input
-                    type='text' 
-                    placeholder='Nombre' 
+                    type='text'
+                    placeholder='Nombre'
                     name='given_name'
                     onChange={(e) => setGiven_name(e.target.value)}
-                    value={given_name} 
+                    value={given_name}
                 />
                 <label>Apellido del Usuario</label>
                 <Input
-                    type='text' 
-                    placeholder='Apellido' 
+                    type='text'
+                    placeholder='Apellido'
                     name='last_name'
                     onChange={(e) => setLast_name(e.target.value)}
-                    value={last_name} 
+                    value={last_name}
                 />
                 <label>e-mail</label>
                 <Input
-                    type='email' 
-                    placeholder='e-mail' 
+                    type='email'
+                    placeholder='e-mail'
                     name='email'
                     onChange={(e) => setEmail(e.target.value)}
-                    value={email} 
+                    value={email}
                 />
                 <label>Password</label>
                 <Input
-                    type='password' 
-                    placeholder='Password' 
-                    name='password' 
+                    type='password'
+                    placeholder='Password'
+                    name='password'
                     onChange={(e) => setPassword(e.target.value)}
-                    value={password} 
-                />      
+                    value={password}
+                />
                 <label>Pais de Origen</label>
                 <select className='select' value={country_id} onChange={(e) => setCountry_id(e.target.value)}>
                     <option>Seleccionar País</option>
                     <option value='137'>Mexico</option>
                     <option value='47'>Colombia</option>
                     <option value='55'>Cuba</option>
-                </select>  
+                </select>
                 <label>Sexo</label>
                 <select className='select' value={sex} onChange={(e) => setSex(e.target.value)}>
                     <option>Seleccionar Genero</option>
                     <option value='M'>Hombre</option>
                     <option value='F'>Mujer</option>
-                </select>  
+                </select>
                 <ButtonWhite text='Crear Cuenta' />
             </form>
         </main>
diff --git a/src/Pages/SignIn.jsx b/src/Pages/SignIn.jsx
index 25b358d..8f4148e 100644
--- a/src/Pages/SignIn.jsx
+++ b/src/Pages/SignIn.jsx
@@ -9,8 +9,12 @@ import { useFetchAlbum } from '../hooks/useFetchAlbum';
 
 export default function SingIn() {
     //-----------------FETCH Albums (call toAPI)------------------------------//
-    const albumList = useFetchAlbum('https://mastersound-backend.azurewebsites.net/api/albums/new-releases')       
+    // TODO:
+    // The API URL should be a global variable
+    const albumList = useFetchAlbum('https://mastersound-backend.azurewebsites.net/api/albums/new-releases')
     //-----------------storing the album in the local storage----------------------//
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     localStorage.setItem( "albums", JSON.stringify( albumList ))
 
     const history = useHistory();
@@ -19,9 +23,11 @@ export default function SingIn() {
 
     const handleSubmit = (e) => {
         e.preventDefault();
+        // TODO:
+        // The API URL should be a global variable
         fetch('https://mastersound-backend.azurewebsites.net/api/auth/login', {
             method: 'post',
-            mode: 'cors', 
+            mode: 'cors',
             headers: {
                 'Content-Type': 'application/json'
             },
@@ -33,39 +39,39 @@ export default function SingIn() {
                 console.log('Success:', response);
                 history.push('/home');
             }
-        } 
+        }
     )};
 
     return(
-        
+
         <main className='mainSignIn'>
         <img src={Logo} alt='Logo' />
         <form onSubmit={handleSubmit} className='mainSignIn__form'>
             <label>e-mail</label>
             <Input
-                type='email' 
-                placeholder='e-mail' 
+                type='email'
+                placeholder='e-mail'
                 name='email'
                 onChange={(e) => setEmail(e.target.value)}
-                value={email} 
+                value={email}
             />
             <label>Password</label>
             <Input
-                type='password' 
-                placeholder='Password' 
-                name='password' 
+                type='password'
+                placeholder='Password'
+                name='password'
                 onChange={(e) => setPassword(e.target.value)}
-                value={password} 
-            />   
+                value={password}
+            />
             <div className="theme-switch-wrapper">
                 <p>Mantener la sesion abierta</p>
                 <label className="theme-switch">
                 <input type="checkbox" id="checkbox" />
                     <div className="slider round"></div>
                 </label>
-            </div>    
+            </div>
             <ButtonWhite text='Iniciar Sesion' />
-            
+
             <section className='mainSignIn__form--link'>
                 <Link to='/'>Olvide mi contraseña</Link>
                 <Link to='/register'>Crear una cuenta</Link>
diff --git a/src/components/ArtistImage.jsx b/src/components/ArtistImage.jsx
index 5854f78..02286e8 100644
--- a/src/components/ArtistImage.jsx
+++ b/src/components/ArtistImage.jsx
@@ -4,9 +4,14 @@ import { Link } from 'react-router-dom';
 import '../styles/componentsStyles/ArtistImage.scss'
 
 const ArtistImage = ({ data }) => {
+    // TODO:
+    // nameArtists is a array but in the HTML show as string
     const nameArtists = data.artists.map((data) => {
         return data.artist_name;
     })
+
+    // TODO:
+    // ArtistPortrait is a array but in the HTML show as string
     const ArtistPortrait = data.artists.map((data) => {
         return data.cover_image_url;
     })
diff --git a/src/components/BigSquareAlbum.jsx b/src/components/BigSquareAlbum.jsx
index 0db602c..060024d 100644
--- a/src/components/BigSquareAlbum.jsx
+++ b/src/components/BigSquareAlbum.jsx
@@ -4,6 +4,8 @@ import { Link } from 'react-router-dom';
 import '../styles/componentsStyles/BigSquareAlbum.scss'
 
 const BigSquareAlbum = ({ data }) => {
+    // TODO:
+    // nameArtists is a array but in the HTML show as string
     const nameArtists = data.artists.map((data) => {
         return data.artist_name;
     })
@@ -19,7 +21,7 @@ const BigSquareAlbum = ({ data }) => {
                 </div>
             </div>
          </Link>
-        
+
     )
 }
 
diff --git a/src/components/CircleAlbum.jsx b/src/components/CircleAlbum.jsx
index 4cf9369..b898fd2 100644
--- a/src/components/CircleAlbum.jsx
+++ b/src/components/CircleAlbum.jsx
@@ -5,6 +5,8 @@ import '../styles/componentsStyles/CircleAlbum.scss'
 
 
 const CircleAlbum = ({data}) => {
+    // TODO:
+    // nameArtists is a array but in the HTML show as string
     const nameArtists = data.artists.map((data) => {
         return data.artist_name;
     })
diff --git a/src/components/CirculeAlbumGarden.jsx b/src/components/CirculeAlbumGarden.jsx
index d053876..55dfffd 100644
--- a/src/components/CirculeAlbumGarden.jsx
+++ b/src/components/CirculeAlbumGarden.jsx
@@ -5,6 +5,8 @@ import '../styles/componentsStyles/CircleAlbumGarden.scss'
 
 
 const CircleAlbumGarden = ({ SectionName }) => {
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const albumLocalStorage = JSON.parse( localStorage.getItem("albums"))
 
     return(
diff --git a/src/components/InfoAlbum.jsx b/src/components/InfoAlbum.jsx
index 26737ff..1919961 100644
--- a/src/components/InfoAlbum.jsx
+++ b/src/components/InfoAlbum.jsx
@@ -9,13 +9,17 @@ const size = {
     height: 300,
 };
 const view = 'list'; // or 'coverart'
-const theme = 'black'; // or 'white' 
+const theme = 'black'; // or 'white'
 
 function InfoAlbum({ data }) {
+    // TODO:
+    // nameArtists is a array but in the HTML show as string
     const nameArtists = data.artists.map((data) => {
         return data.artist_name;
     })
 //----------------------getting songs from local storage-----------------------//
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const musicLocalstorage = JSON.parse( localStorage.getItem("SongsList"))
     const idAlbum = data.spt_album_id;
 
@@ -28,11 +32,11 @@ function InfoAlbum({ data }) {
                     <p className='InfoAlbum__Subtitle--NameAlbum'>{data.album_name}</p>
                     <p className='InfoAlbum__Subtitle--Artist'>{nameArtists}</p>
                     <p className='InfoAlbum__Subtitle--Description'>{data.name}</p>
-                        <MySpotifyPlayer 
+                        <MySpotifyPlayer
                             uri= {`spotify:album:${idAlbum}`}
                             size={size}
                             view={view}
-                            theme={theme} 
+                            theme={theme}
                         />
                         {
                             musicLocalstorage.map( (item) => (
@@ -44,5 +48,5 @@ function InfoAlbum({ data }) {
         </Fragment>
     );
 }
- 
+
 export default InfoAlbum;
\ No newline at end of file
diff --git a/src/components/ListAlbum.jsx b/src/components/ListAlbum.jsx
index c23d090..43e667a 100644
--- a/src/components/ListAlbum.jsx
+++ b/src/components/ListAlbum.jsx
@@ -4,7 +4,7 @@ import '../styles/componentsStyles/ListAlbum.scss';
 
 import {setPlaying} from '../actions/songActions'
 //********  Icons  **********//
-import { FavouriteIcon, DownloadItemsIcon, ShareIcon, PlusIcon } 
+import { FavouriteIcon, DownloadItemsIcon, ShareIcon, PlusIcon }
 from '../components/Icons';
 
 
@@ -17,8 +17,9 @@ const ListAlbum = (props) => {
 
     return (
         <Fragment>
+            {/* The Section with OnClick it's bad practice for accessibility */}
             <section onClick={setPlayingSong} className='listAlbum'>
-                <p className='listAlbum__Number'>{props.data.order_number}</p> 
+                <p className='listAlbum__Number'>{props.data.order_number}</p>
                 <div className='listAlbum__Favourite'>
                     {<FavouriteIcon />}
                 </div>
@@ -39,5 +40,5 @@ const ListAlbum = (props) => {
         </Fragment>
     );
 }
- 
+
 export default ListAlbum;
\ No newline at end of file
diff --git a/src/components/ListTrack.jsx b/src/components/ListTrack.jsx
index c8291ea..2dd60bd 100644
--- a/src/components/ListTrack.jsx
+++ b/src/components/ListTrack.jsx
@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import '../styles/componentsStyles/ListTrack.scss';
 
 //********  Icons  **********//
-import { FavouriteIcon, DownloadItemsIcon, ShareIcon } 
+import { FavouriteIcon, DownloadItemsIcon, ShareIcon }
 from './Icons';
 
 const ListTrack = ({number, song, artist, reproductions, time}) => {
@@ -10,6 +10,7 @@ const ListTrack = ({number, song, artist, reproductions, time}) => {
         <Fragment>
             <section className='listTrack'>
                 <p className='listTrack__Number'>{number}</p>
+                 {/* In these buttons there are no actions */}
                 <button className='listTrack__Favourite'>
                     {<FavouriteIcon />}
                 </button>
@@ -28,5 +29,5 @@ const ListTrack = ({number, song, artist, reproductions, time}) => {
         </Fragment>
     );
 }
- 
+
 export default ListTrack;
\ No newline at end of file
diff --git a/src/components/Playbar.jsx b/src/components/Playbar.jsx
index 32180cd..a410a2b 100644
--- a/src/components/Playbar.jsx
+++ b/src/components/Playbar.jsx
@@ -21,7 +21,7 @@ class Playbar extends React.Component {
         super(props);
         this.state = { play: false };
       };
-    
+
     componentWillReceiveProps() {
         this.setState({ play: true });
     };
@@ -41,7 +41,7 @@ class Playbar extends React.Component {
     componentWillUnmount() {
         this.audio.removeEventListener("timeupdate", () => {});
     }
-        
+
     positionHandle = (position) => {
         let timelineWidth = this.timeline.offsetWidth;
         let handleLeft = position - this.timeline.offsetLeft;
@@ -55,12 +55,12 @@ class Playbar extends React.Component {
             this.handle.style.offsetWidth = timelineWidth + "px";
         }
     };
-    
+
     mouseMove = (e) => {
         this.positionHandle(e.pageX);
         this.audio.currentTime = ((e.pageX - this.timeline.offsetLeft) / this.timeline.offsetWidth) * this.audio.duration;
     };
-    
+
     mouseUp = (e) => {
         window.removeEventListener('mousemove', this.mouseMove);
         window.removeEventListener('mouseup', this.mouseUp);
@@ -121,19 +121,20 @@ class Playbar extends React.Component {
                 <PlaypauseControl icon={<SongsIcon />} event={()=>{document.getElementById('navbar').style.height = "80%";}} classname='play-pause__btn'/>
                 <PlaybarControl icon={<RadioIcon />} classname='playbar__nav-btn' />
                 <PlaybarControl icon={<BellIcon />} classname='playbar__nav-btn' />
-            </div>            
+            </div>
             <div id='navbar' className="playbar__overlay">
                 <div className="playbar__overlay-content">
                     <audio ref={(audio) => { this.audio = audio }} className="Player__Style" controls hidden={true}>
                         <source src="https://p.scdn.co/mp3-preview/9a19a5cf5a03b4b67708275560965f9162913e10?cid=aba92b636b61480c992f35aa022405f7" type="audio/ogg" />
                     </audio>
                     <div className="playbar__overlay-content--btn">
+                        {/* It's bad practice setting directly other element inside another component */}
                         <PlaybarControl icon={<BackIcon />} event={()=>{document.getElementById('navbar').style.height = "0%";}} classname='playbar__btn' />
                     </div>
-                    <div className="playbar__overlay-track">  
-                        <CircleTrack artist='Artic Monkeys' image={Album} song='Arabella' />                      
+                    <div className="playbar__overlay-track">
+                        <CircleTrack artist='Artic Monkeys' image={Album} song='Arabella' />
                     </div>
-                    <div className="playbar__overlay-controls">                        
+                    <div className="playbar__overlay-controls">
                         <PlaybarControl icon={<OptionsIcon />} classname='playbar__btn' />
                         <PlaybarControl icon={<DownloadItemsIcon />} classname='playbar__btn' />
                         <PlaybarControl icon={<LoadingIcon />} classname='playbar__btn' />
@@ -143,21 +144,21 @@ class Playbar extends React.Component {
                         <PlaybarControl icon={<BackwardIcon />} classname='playbar__btn' />
                         <PlaypauseControl icon={!this.state.play ? <PlayIcon/>: <PauseIcon/>} event={this.play} classname='play-pause__btn' />
                         <PlaybarControl icon={<ForwardIcon />} classname='playbar__btn' />
-                    </div>                        
+                    </div>
                     <div className="playbar__center-progress">
                         <p>{currentTime}</p>
                         <div id="timeline" onClick={this.mouseMove} ref={(timeline) => { this.timeline = timeline }} className="playbar__center-progress--bar">
                             <div id="handle" onMouseDown={this.mouseDown} ref={(handle) => { this.handle = handle }} className="playbar__center-progress--meter" />
                         </div>
                         <p>{duration}</p>
-                    </div>  
+                    </div>
                 </div>
             </div>
-            
-            {/*()=>{         
-                let audioPlayer; 
-                let trackList; 
-                let currentTrack = 0;     
+
+            {/*()=>{
+                let audioPlayer;
+                let trackList;
+                let currentTrack = 0;
                 const init = (playerElement) => {
                     trackList = JSON.parse(playerElement.textContent);
                     audioPlayer = new Audio();
diff --git a/src/components/RectangleAlbum.jsx b/src/components/RectangleAlbum.jsx
index 2e17a00..7278ad3 100644
--- a/src/components/RectangleAlbum.jsx
+++ b/src/components/RectangleAlbum.jsx
@@ -4,6 +4,9 @@ import { Link } from 'react-router-dom';
 import '../styles/componentsStyles/RectangleAlbum.scss'
 
 const RectangleAlbum = ({data}) => {
+
+    // TODO:
+    // nameArtists is a array but in the HTML show as string
     const nameArtists = data.artists.map((data) => {
         return data.artist_name;
     })
diff --git a/src/components/RectangleAlbumGarden.jsx b/src/components/RectangleAlbumGarden.jsx
index 74219ac..ac97647 100644
--- a/src/components/RectangleAlbumGarden.jsx
+++ b/src/components/RectangleAlbumGarden.jsx
@@ -5,6 +5,9 @@ import '../styles/componentsStyles/RectangleAlbumGarden.scss'
 
 
 const RectangleAlbumGarden = ({ SectionName }) => {
+
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const albumLocalStorage = JSON.parse( localStorage.getItem("albums"))
 
     return(
@@ -18,7 +21,7 @@ const RectangleAlbumGarden = ({ SectionName }) => {
                     <RectangleAlbum data={data} key={data.spt_album_id} {...data}/>
                     ))
                 }
-                
+
             </section>
         </div>
     )
diff --git a/src/components/SquareAlbum.jsx b/src/components/SquareAlbum.jsx
index f41ebf9..87e6d64 100644
--- a/src/components/SquareAlbum.jsx
+++ b/src/components/SquareAlbum.jsx
@@ -4,10 +4,13 @@ import { Link } from 'react-router-dom';
 import '../styles/componentsStyles/SquareAlbum.scss'
 
 const SquareAlbum = ({data}) => {
+
+  // TODO:
+  // nameArtists is a array but in the HTML show as string
   const nameArtists = data.artists.map((data) => {
     return data.artist_name;
 })
-  
+
   return (
     <div className='SquareAlbum__container'>
       <Link to={`/album/${data.spt_album_id}`}>
diff --git a/src/components/SquareAlbumGarden.jsx b/src/components/SquareAlbumGarden.jsx
index d838df6..b3445df 100644
--- a/src/components/SquareAlbumGarden.jsx
+++ b/src/components/SquareAlbumGarden.jsx
@@ -6,7 +6,9 @@ import '../styles/componentsStyles/SquareAlbumGarden.scss'
 
 
 const SquareAlbumGarden = ({ SectionName }) => {
-    
+
+    // TODO:
+    // localStorage is great but is limited for handle the global state I recommend use React Context or Redux
     const albumLocalStorage = JSON.parse( localStorage.getItem("albums"))
 
     return(
@@ -20,7 +22,7 @@ const SquareAlbumGarden = ({ SectionName }) => {
                     <SquareAlbum data={data} key={data.spt_album_id} {...data}/>
                     ))
                 }
-                
+
             </section>
         </div>
     )
diff --git a/src/hooks/useFetchmusic.jsx b/src/hooks/useFetchmusic.jsx
index fc6bca1..73d119d 100644
--- a/src/hooks/useFetchmusic.jsx
+++ b/src/hooks/useFetchmusic.jsx
@@ -5,6 +5,8 @@ export function useFetchmusic (spt_album_id) {
 
   const [music, setMusic] = useState([]);
 
+  // TODO:
+  // The API URL should be a global variable
   const URL = `https://mastersound-backend.azurewebsites.net/api/albums/${spt_album_id}/songs`
 
   async function fetchMusic () {