diff --git a/src/TopBar.js b/src/TopBar.js
index e44284b..142b71a 100644
--- a/src/TopBar.js
+++ b/src/TopBar.js
@@ -37,11 +37,10 @@ class TopBar extends Component {
 					<Navbar.Collapse id="basic-navbar-nav">
 						<Nav className="mr-auto">
 							<Link to="/" className="text-light nav-link">Home</Link>
-							<Link to={{	pathname: `/video/${localStorage['lastId']}/vitali` }} 
-								className="text-light nav-link">Vitali</Link>
+							<Link to={{	pathname: `/video/${localStorage['lastId']}/vitali` }}  className="text-light nav-link">Vitali</Link>
 							<Link to={{	pathname: `/video/${localStorage['lastId']}/recent` }}  className="text-light nav-link">Recent</Link>
 							<Link to={{	pathname: `/video/${localStorage['lastId']}/random` }}  className="text-light nav-link">Random</Link>
-							<Link to={{	pathname: `/video/${localStorage['lastId']}/related` }}  className="text-light nav-link">Related</Link>
+							<Link to={{	pathname: `/video/${localStorage['lastId']}/related` }} className="text-light nav-link">Related</Link>
 							{ <NavDropdown title="Similarity" id="basic-nav-dropdown" >
 								<NavDropdown.Item href="#action/3.1">
 									Artist
diff --git a/src/VideoPlayer.js b/src/VideoPlayer.js
index ed00972..c7b9aec 100644
--- a/src/VideoPlayer.js
+++ b/src/VideoPlayer.js
@@ -91,11 +91,16 @@ class VideoPlayer extends React.Component {
 											error => console.info(error, videoIdWatched.toString())
 										);
 									// local storage logic for recent reccomender
+									// let temp=localStorage.getItem('lastWatched');
+									// temp.push({id: videoIdWatched.toString(), date: new Date})
+										
+								
 									//.finally(()=>{})
 									clearInterval(timerId1);
 								},
 								error => console.error(error)
 							)
+						
 							.finally(() => this.setState({ promise1: null, outsideReject1: null }));
 						break;
 					case 5:
diff --git a/src/areainfo/Suggestion.js b/src/areainfo/Suggestion.js
index b15a216..2773d09 100644
--- a/src/areainfo/Suggestion.js
+++ b/src/areainfo/Suggestion.js
@@ -33,7 +33,7 @@ class Suggestion extends Component {
   render() {
     return (
       <React.Fragment>
-        <Col xs="10">
+        <Row>
         <Switch>
         <Route path='/video/:id/vitali' component={fvitali} />
         <Route path='/search/:query' component={Search} />
@@ -41,7 +41,7 @@ class Suggestion extends Component {
         {/* lasciare questo per ultimo */}
           <Route component={Related} /> 
         </Switch>
-        </Col>
+        </Row>
       </React.Fragment>
     );
   }
diff --git a/src/index.js b/src/index.js
index 4fcaf5d..c48288e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,5 +6,8 @@ import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line 
 
+let lastWatchedList=[];
+localStorage.setItem('lastWatched', lastWatchedList)
+
 ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
 registerServiceWorker();
diff --git a/src/reccomenders/Random.js b/src/reccomenders/Random.js
index 6b763de..46989cb 100644
--- a/src/reccomenders/Random.js
+++ b/src/reccomenders/Random.js
@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
-import 'bootstrap/dist/css/bootstrap.css';
 import axios from "axios";
 import createpageToken from 'youtube-page-token';
-import {Card} from "react-bootstrap";
+import {Card,Col} from "react-bootstrap";
 import {Link} from "react-router-dom";
 import moment from "moment";
 
@@ -48,11 +47,10 @@ class RecommenderRandom extends Component{
 
     render(){
         const ISO_8601parse = this.ISO_8601parse;
-        return (
-            <div style={{width: '100rem',height:'100rem'}}>
+        return (<React.Fragment>
                 {this.state.items.map(function (item,index) {
                     return(
-                        <div key={index} style={{margin: '1rem',float: 'left'}}>
+                        <Col key={index} md='4'>
                             <Card>
                                 <Link
                                     to={{
@@ -62,7 +60,6 @@ class RecommenderRandom extends Component{
                                     <Card.Img
                                         src={item.snippet.thumbnails.high.url}
                                         alt={'Thumbnail of ' + item.title}
-                                        style={{width:'30rem',height:'20rem'}}
                                     />
                                     <Card.ImgOverlay>
                                         <Card.Title className="bg-dark d-inline text-white">
@@ -72,11 +69,10 @@ class RecommenderRandom extends Component{
                                     </Card.ImgOverlay>
                                 </Link>
                             </Card>
-                        </div>
+                        </Col>
                     )
                 })}
-            </div>
-        );
+       </React.Fragment> );
     }
 }
 export default RecommenderRandom;
\ No newline at end of file
diff --git a/src/reccomenders/Recent.js b/src/reccomenders/Recent.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/reccomenders/Related.js b/src/reccomenders/Related.js
index e816eb9..17305cf 100644
--- a/src/reccomenders/Related.js
+++ b/src/reccomenders/Related.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 import {Link} from "react-router-dom";
-import {Card} from "react-bootstrap";
+import {Card,Col} from "react-bootstrap";
 import moment from "moment";
 
 
@@ -58,10 +58,10 @@ class Related extends Component {
     render() {
         const ISO_8601parse = this.ISO_8601parse;
         return (
-            <div style={{width: '100rem',height:'100rem'}}>
+            <React.Fragment>
                 {this.state.items.map(function (item,index) {
                     return(
-                        <div key={index} style={{margin: '1rem',float: 'left'}}>
+                        <Col key={index} md="4">
                             <Card>
                                 <Link
                                     to={{
@@ -71,7 +71,6 @@ class Related extends Component {
                                     <Card.Img
                                         src={item.snippet.thumbnails.high.url}
                                         alt={'Thumbnail of ' + item.title}
-                                        style={{width:'30rem',height:'20rem'}}
                                     />
                                     <Card.ImgOverlay>
                                         <Card.Title className="bg-dark d-inline text-white">
@@ -82,10 +81,10 @@ class Related extends Component {
                                     </Card.ImgOverlay>
                                 </Link>
                             </Card>
-                        </div>
+                        </Col>
                     )
                 })}
-            </div>
+            </React.Fragment>
         );
     }
 }
diff --git a/src/reccomenders/fvitali.js b/src/reccomenders/fvitali.js
index 168f2c3..09fa81e 100644
--- a/src/reccomenders/fvitali.js
+++ b/src/reccomenders/fvitali.js
@@ -6,19 +6,20 @@ import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disa
 import axios from 'axios'; // eslint-disable-line no-unused-vars
 import { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
 /*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
+import moment from "moment";
 
 class fvitali extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
+		state = {
 			error: null,
 			isLoaded: false,
 			items: [],
 			headers: null
 		};
-		this.getThumbnails = this.getThumbnails.bind(this);
-	}
 
+		ISO_8601parse(a) {
+			return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
+		}
+	
 	componentDidMount() {
 		axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', {
 			'params':{
@@ -26,13 +27,15 @@ class fvitali extends React.Component {
 			}
 		}).then(
 			response => {
-				//this.shuffleArray(response.data);
-				//this.getThumbnails(response.data);
+				//this.shuffleArray(response.data);			
 				console.info ('a',response.data);
-				this.setState({
-					isLoaded: true, 
-					items:response.data,
-				});
+				this.getThumbnailsNames(response.data.recommended);
+								console.info(response.data.recommended); 
+				// 				this.setState({
+				// 	isLoaded: true, 
+				// 	items:response.data.recommended,
+				// });
+
 			},
 			// Note: it's important to handle errors here
 			// instead of a catch() block so that we don't swallow
@@ -48,73 +51,51 @@ class fvitali extends React.Component {
 	}
 
 	// METODI
-	getThumbnails(videoItems) {
-		let idToLookFor = videoItems.map(item => item.videoID);
-		let finalChunk = (videoItems.length % 50) + 100;
-		axios
-			.all([
-				// chain 3 parallel get
+	getThumbnailsNames(reccomended) {
+		let idToLookFor = reccomended.map(item => item.videoID);
 				axios.get('https://www.googleapis.com/youtube/v3/videos', {
 					params: {
 						part: 'snippet',
-						id: idToLookFor.slice(0, 50).toString(),
+						id: idToLookFor.toString(),
 						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
-						fields: 'items(id,snippet/thumbnails/medium)'
-					}
-				}),
-				axios.get('https://www.googleapis.com/youtube/v3/videos', {
-					//chain multiple get into promises
-					params: {
-						part: 'snippet',
-						id: idToLookFor.slice(50, 100).toString(),
-						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
-						fields: 'items(id,snippet/thumbnails/medium)'
-					}
-				}),
-				axios.get('https://www.googleapis.com/youtube/v3/videos', {
-					//chain multiple get into promises
-					params: {
-						part: 'snippet',
-						id: idToLookFor.slice(100, finalChunk).toString(),
-						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
-						fields: 'items(id,snippet/thumbnails/medium)'
+						fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
 					}
 				})
-			])
+
 			.then(
-				axios.spread((res1, res2, res3) => {
-					let allres = [].concat(
-						res1.data.items,
-						res2.data.items,
-						res3.data.items
-					);
-					allres.map(resCurrentValue => {
-						Object.defineProperty(
-							videoItems.find(videoItem => {
+				res1 => {
+					res1.data.items.map(resCurrentValue => {
+						Object.defineProperties(
+							reccomended.find(videoItem => {
 								return videoItem.videoID === resCurrentValue.id;
 							}),
-							'thumbnail',
-							{ value: resCurrentValue.snippet.thumbnails.medium.url }
-						);
+							{
+							'thumbnail':
+							{ value: resCurrentValue.snippet.thumbnails.medium.url },
+							'name':
+							{value: resCurrentValue.snippet.title}
+						});
 					});
 					this.setState({
 						isLoaded: true,
-						items: videoItems
+						items: reccomended
 					});
 				})
-			);
 	}
 
-	shuffleArray(videoarray) {
+
+
+	/*shuffleArray(videoarray) {
 		for (let i = videoarray.length - 1; i > 0; i--) {
 			const j = Math.floor(Math.random() * (i + 1));
 			[videoarray[i], videoarray[j]] = [videoarray[j], videoarray[i]]; // eslint-disable-line no-param-reassign
 		}
 		// Durstenfeld shuffle.
 		// https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
-	}
+	}*/
 
 	render() {
+		const ISO_8601parse = this.ISO_8601parse;
 		const { error, isLoaded, items, headers } = this.state;
 		if (error) {
 			return (
@@ -133,8 +114,26 @@ class fvitali extends React.Component {
 		} else {
 			return (
 				<React.Fragment>
-					{items.reccomender}{items.site}{items.lastWatched}
-					{items.recommended.map(raccomandato=>(<li>{raccomandato.videoID.toString()}</li>))}
+					{items.map(item=>( <Col md="4">
+                            <Card>
+                                <Link
+                                    to={{
+                                        pathname: '/video/' + item.videoID,
+                                    }}
+                                >
+                                    <Card.Img
+                                        src={item.thumbnail}
+                                        alt={'Thumbnail of ' + item.name}
+                                    />
+                                    <Card.ImgOverlay>
+                                        <Card.Title className="bg-dark d-inline text-white">
+                                             {item.name}<br/>
+                                             {item.lastSelected}
+                                        </Card.Title>
+                                    </Card.ImgOverlay>
+                                </Link>
+                            </Card>
+                        </Col>))}
 
 				</React.Fragment>
 			);
@@ -142,5 +141,6 @@ class fvitali extends React.Component {
 	}
 }
 
-export default fvitali;
 
+
+export default fvitali;
\ No newline at end of file