diff --git a/src/App.js b/src/App.js
index d1a06a9..a718772 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,10 +27,10 @@ render() {
 				<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
 					<TopBar />
 				</ReactHeight>
-				<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2" >
+				<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" >
 					<Col
 						xs="12"
-						lg={this.state.isInfoToggled ? { span: 6, offset: 1, order: 2 } : { span: 7, offset: 1, order: 2 }}
+						lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
 						className="align-content-center pt-2 p-1 pr-2">
 						<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
 							<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> {/* change component to children */}
@@ -45,19 +45,17 @@ render() {
 						<Button
 							variant="outline-light"
 							onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
-							className="w-50 pt-1 "
+							className="pt-1 "
 							aria-controls="infovideo-collapse"
 							aria-expanded={this.state.isInfoToggled}>
 							{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
 						</Button>
-						</div>
-													<div class="d-flex justify-content-center">
+						</div>	
 						<Collapse in={this.state.isInfoToggled}>
 							<div className="pt-1" id="infovideo-collapse">
 								<Route path={["/video/:id", "/search/:query", "/"]} component={VideoInfo} />
 							</div>
 						</Collapse>
-						</div>
 					</Col>
 				</ReactHeight>
 				<Row style={{ "max-height": `calc(99vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
diff --git a/src/VideoInfo.js b/src/VideoInfo.js
index d6f611d..3e470ac 100644
--- a/src/VideoInfo.js
+++ b/src/VideoInfo.js
@@ -29,15 +29,6 @@ class VideoInfo extends Component {
         return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
     }
 
-    // componentWillMount() {
-    //     if (this.props.match.params.id) {
-    //         if (this.props.match.params.id === this.state.videoId) { }
-    //         else {
-    //             this.setState({ videoId: this.props.match.params.id });
-    //         }
-    //     }
-    // }
-
     componentDidMount() {
         console.log('didmount', this.state.videoId)
         axios.all([
@@ -71,92 +62,43 @@ class VideoInfo extends Component {
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
-        console.info('didup', this.props.match.params.id)
-        // this.setState((state, props) => { return {  }});
-        if (this.props.match.params.id && !(prevProps.match.params.id === this.props.match.params.id)) {
-            this.setState({ videoId: this.props.match.params.id, isLoaded: false });
-            axios.all([
-                axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
-                    params: {
-                        'part': 'snippet,contentDetails,statistics,topicDetails',
-                        'id': this.props.match.params.id,
-                        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
-                    }
-                }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
-                    params: {
-                        'part': 'snippet',
-                        'videoId': this.props.match.params.id,
-                        'order': 'relevance',
-                        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
-                    }
-                })])
-                .then(axios.spread((videosResponse, commentThreadResponse) => {
-                    this.setState({
-                        VideoDetails: videosResponse.data.items[0],
-                        comments: commentThreadResponse.data.items,
-                        isLoaded: true
-                    });
-                }), error => {
-                    console.error(error);
-                    this.setState({
-                        isLoaded: true,
-                        error
-                    });
+        if(!(prevState.videoId === this.state.videoId))
+        axios.all([
+            axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
+                params: {
+                    'part': 'snippet,contentDetails,statistics,topicDetails',
+                    'id': this.state.videoId,
+                    'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+                }
+            }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
+                params: {
+                    'part': 'snippet',
+                    'videoId': this.state.videoId,
+                    'order': 'relevance',
+                    'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+                }
+            })])
+            .then(axios.spread((videosResponse, commentThreadResponse) => {
+                this.setState({
+                    VideoDetails: videosResponse.data.items[0],
+                    comments: commentThreadResponse.data.items,
+                    isLoaded: true
                 });
-        }
+            }), error => {
+                console.error(error);
+                this.setState({
+                    isLoaded: true,
+                    error
+                });
+            });
     }
 
-    // shouldComponentUpdate(nextProps, nextState){
-    //     console.log('shouldup', nextProps, nextState)
-    //     if(nextProps.match.params.id)
-    //         return console.log('a',!(nextProps.match.params.id === this.state.videoId)) && !(nextProps.match.params.id === this.state.videoId) ;
-    //     else if(!(nextState.videoId === this.state.videoId))
-    //         return console.log('b') && true;
-    //     else if(nextState.isLoaded)
-    //         return console.log('d') && true;
-    //     else
-    //         return console.log('c') && false;
-
-    // }
-
-    // componentWillReceiveProps(nextProps){
-    //     if (nextProps.match.params.id === this.state.videoId) {  console.log('1',nextProps)}
-    //     else if (nextProps.match.params.id) {
-    //         console.log('2',nextProps)
-    //         this.setState({ videoId: nextProps.match.params.id });
-    //         axios.all([
-    //             axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
-    //             params: {
-    //                 'part': 'snippet,contentDetails,statistics,topicDetails',
-    //                 'id': nextProps.match.params.id,
-    //                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
-    //             }
-    //         }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
-    //             params: {
-    //                 'part': 'snippet',
-    //                 'videoId': nextProps.match.params.id,
-    //                 'order': 'relevance',
-    //                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
-    //             }
-    //         })])
-    //             .then(axios.spread((videosResponse, commentThreadResponse) => {
-    //                 this.setState({
-    //                     VideoDetails: videosResponse.data.items,
-    //                     comments: commentThreadResponse.data.items,
-    //                     isLoaded: true
-    //                 });
-    //             }), error => {
-    //                 console.error(error);
-    //                 this.setState({
-    //                     isLoaded: true,
-    //                     error
-    //                 });
-    //             });
-    //     }
-    //     else{
-    //         console.log('3',nextProps)
-    //     }
-    // }
+    componentWillReceiveProps(nextProps){
+        console.log(nextProps)
+        if(nextProps.match.params.id && !( nextProps.match.params.id === this.state.videoId )){
+            this.setState({videoId: nextProps.match.params.id})
+        } // mindfuck 
+    }
 
     render() {
         const { error, isLoaded, VideoDetails, comments } = this.state;
@@ -164,50 +106,35 @@ class VideoInfo extends Component {
         const ISO_8601parse = this.ISO_8601parse; // bind momentDuration in render to the actual method
         if (error) {
             return (
-                <React.Fragment>
+                <span className="text-white">
                     Error: {error.message} -- Cannot get {error.config.url}
-                </React.Fragment>
+                </span>
             );
         } else if (!isLoaded) {
-            return <React.Fragment>Loading...</React.Fragment>;
+            return <span className="text-white">Loading...</span>;
         } else {
             return (
                 <React.Fragment>
                     <span class="h5 text-white">{VideoDetails.snippet.title}</span>
                     <Tabs defaultActiveKey="video" id="tabs">
-                        <Tab eventKey="video" title="Video">
-                            {/* 
-                            <Table striped bordered hover size="sm" variant="dark">
-                            <tbody>
-                            <tr><td><b>ID Video:</b></td><td>{VideoDetails.id}</td></tr>
-                            <tr><td><b>Publish Time:</b></td><td>{ISO_8601parse(VideoDetails.snippet.publishedAt)}</td></tr>
-                            <tr><td><b>Channel Name:</b></td><td>{VideoDetails.snippet.channelTitle}</td></tr>
-                            <tr><td><b>Description:</b></td><td>
-                                <p><Linkify>{VideoDetails.snippet.description}</Linkify></p></td></tr>
-                                    
-                                    <tr><td>  <b>Tags: </b></td><td>
-                                <p>{VideoDetails.snippet.tags.map(element =>
-                                    (<span className="card-link">{element}</span>)
-                                )}</p></td></tr>
-                            </tbody>
-                            </Table> 
-                            */}
+                        <Tab className="text-white" eventKey="video" title="Video">
                             <p>
                                 <b>ID Video: </b>{VideoDetails.id}<br />
                                 <b>Published: </b>{ISO_8601parse(VideoDetails.snippet.publishedAt)}<br />
                                 <b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br />
-                                {/* <b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br /> */}
-                                <b>Tags: </b>{ }<br />
+                                <b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br />
+                                <b>Tags: </b>{ VideoDetails.snippet.tags ? 
+                                    VideoDetails.snippet.tags.map(tag => (<span>{tag}</span>)): ""}
+                                    {/* tags should be links  */}
                             </p>
                         </Tab>
                         <Tab className="text-white" eventKey="techinfo" title="Tecnical Informations">
-                            <h5 style={{ marginTop: '1rem' }}>{VideoDetails.snippet.title}</h5>
                             <p><b>Duration: </b>{momentDuration(VideoDetails.contentDetails.duration)}<br />
                                 <b>Definition: </b> {VideoDetails.contentDetails.definition}<br />
                                 <b>Dimension: </b> {VideoDetails.contentDetails.dimension}<br />
                                 <b>Views: </b> {VideoDetails.statistics.viewCount}<br />
-                                <b>Likes: </b> {VideoDetails.statistics.likeCount}<br />
-                                <b>Dislikes: </b> {VideoDetails.statistics.dislikeCount}
+                                <b>Likes: </b> {VideoDetails.statistics.likeCount}{String.fromCodePoint(0x1F44D)}<br />
+                                <b>Dislikes: </b> {VideoDetails.statistics.dislikeCount}{String.fromCodePoint(0x1F44E)}
                             </p>
                         </Tab>
                         <Tab eventKey="comments" title="Comment">