diff --git a/frontend/src/App.css b/frontend/src/App.css
index 5790987..00354c4 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -4,6 +4,10 @@ badge-success {hard}
 badge-warning {ex}
 badge-danger {exex}*/
 
+.link{
+	color:#66e;
+}
+
 .highest{
 	z-index:1000001;
 }
@@ -15,6 +19,7 @@ badge-danger {exex}*/
 	font-size:12px;
 }
 
+
 .display-tooltipside{
 	position:absolute;
 	z-index:1000000;
@@ -81,6 +86,10 @@ table th {
     z-index: 100000;
 }
 
+.background-songs{
+	background-color:#eef;
+}
+
 .background-list-1{
 	background-color:#cee;
 }
@@ -98,12 +107,20 @@ table th {
 	background-color:rgba(160,160,255,0.5);
 }
 
+.tinytext{
+	font-size:10px;
+	/*z-index:-10000;*/
+	color:#666;
+	font-style:italic;
+	/*background-color:rgba(240,240,255,0.8);*/
+}
+
 .tinytime{
 	font-size:10px;
 	position:absolute;
 	bottom:0px;
 	right:7px;
-	z-index:-10000;
+	/*z-index:-10000;*/
 	color:#666;
 	font-style:italic;
 	/*background-color:rgba(240,240,255,0.8);*/
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 83081a8..ffd8c89 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -331,7 +331,7 @@ function Play(p) {
 	function GetDateDisplay() {
 		var date = new Date(p.play.date);
 		var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
-		return <>{months[date.getMonth()]+" "+date.getDate()+" "+date.getFullYear()+"   "+date.getHours()+":"+((date.getMinutes()<10)?"0"+date.getMinutes():date.getMinutes())}<span className="tinytime">{GetDateDiff()}</span></>
+		return <>{months[date.getMonth()]+" "+date.getDate()+" "+date.getFullYear()+"   "+date.getHours()+":"+((date.getMinutes()<10)?"0"+date.getMinutes():date.getMinutes())}<span className="tinytime infront">{GetDateDiff()}</span></>
 	}
 	if (p.mini) {
 		return (
@@ -423,33 +423,131 @@ function Play(p) {
 	}
 }
 
+function LoadMore(p) {
+	var [offset,setOffset] = useState(p.params.limit)
+	var [params,setParams] = useState(p.params)
+	var [loading,setLoading] = useState(false)
+	var [visible,setVisible] = useState(false)
+	var [update,setUpdate] = useState(false)
+	
+	useEffect(()=>{
+		axios.get(p.url+constructParams(params))
+		.then((data)=>{
+			if (data.data.length>0) {
+				setVisible(true)
+			}
+		})
+	},[update])
+	
+	function constructParams(params) {
+		var st = Object.keys(params).reduce((str,key)=>{
+			if (str==="") {
+				return str+="?"+key+"="+params[key]
+			} else {
+				return str+="&"+key+"="+params[key]
+			}
+		},"")
+		return st
+	}
+	if (!visible){
+		return (<></>)
+	}
+	else
+	if (p.listItem) {
+		return (
+			<li className="list-group-item list-group-item-action homelink" onClick={()=>{
+			setLoading(true)
+			axios.get(p.url+constructParams(params))
+			.then((data)=>{
+				if (data.data.length>0) {
+					var newVals = [...p.value]
+					data.data.forEach((val)=>{
+						newVals.push(val)
+					})
+					p.setValue(newVals)
+					//console.log(newVals)
+					var obj = {...params}
+					obj.offset+=offset
+					setParams(obj)
+					setLoading(false)
+					if (data.data.length<p.params.limit) {
+						setVisible(false)
+					}
+				} else {
+					setVisible(false)
+					setLoading(false)
+				}
+			})
+		}
+		}>
+				<div className="row text-center">
+			<div className="col-12">
+			{(!loading)?<h6 className="link"><i>- Load More -</i></h6>:<div className="spinner-grow text-primary" role="status"><span className="sr-only">Loading...</span></div>
+			}
+			</div>
+		</div>
+			</li>
+		)
+	} else 
+	return (
+		<div className="row text-center homelink" onClick={()=>{
+			setLoading(true)
+			axios.get(p.url+constructParams(params))
+			.then((data)=>{
+				if (!data.data) {
+					setVisible(false)
+				} else
+				if (data.data.length>0) {
+					var newVals = [...p.value]
+					data.data.forEach((val)=>{
+						newVals.push(val)
+					})
+					p.setValue(newVals)
+					//console.log(newVals)
+					var obj = {...params}
+					obj.offset+=offset
+					setParams(obj)
+					setLoading(false)
+					if (data.data.length<p.params.limit) {
+						setVisible(false)
+					}
+				} else {
+					setVisible(false)
+					setLoading(false)
+				}
+			})
+		}
+		}>
+			<div className="col-12">
+			{(!loading)?<h6 className="link"><i>- Load More -</i></h6>:<div className="spinner-grow text-primary" role="status"><span className="sr-only">Loading...</span></div>
+			}
+			</div>
+		</div>
+	)
+}
+
 function BestPlaysPanel(p) {
 	var [bestPlays,setBestPlays] = useState([])
+	var [update,setUpdate] = useState(false)
 	
 	useEffect(()=>{
 		axios.get("http://www.projectdivar.com/bestplays/"+p.username+"?fails=false&limit=5&offset=0")
 		.then((data)=>{setBestPlays(data.data);})
-	})
+	},[update])
 	
-	return (
-	<>
-	<div className="d-none d-md-block row">
-		<div className="col-md-12 mt-3 mb-3">
-			<ul className="list-group list-group-flush overflow-auto border border-danger rounded-lg" style={{height:"320px"}}>
-			{bestPlays.map((play,i)=>{return <li key={play.id} className={"list-group-item list-group-item-action "+(i%2==0?"background-list-1":"background-list-2")}>
-					<Play index={i} play={play} song={p.songs[play.songid]}/>
-				</li>})}
-			</ul>
-		</div>
-	</div>
-	<div className="d-block d-sm-block d-md-none row ml-3 mr-3">
-		<div className="col-md-12 mt-3 mb-3">
-			<ul className="list-group list-group-flush overflow-auto border border-danger rounded-lg" style={{height:"320px"}}>
+	var content=<div className="col-md-12 mt-3 mb-3">
+			<ul className="list-group list-group-flush border border-danger rounded-lg">
 			{bestPlays.map((play,i)=>{return <li key={play.id} className={"list-group-item list-group-item-action "+(i%2==0?"background-list-1":"background-list-2")}>
 					<Play index={i} play={play} song={p.songs[play.songid]}/>
 				</li>})}
+			<LoadMore listItem={true} url={"http://www.projectdivar.com/bestplays/"+p.username} params={{fails:false,limit:15,offset:5}} value={bestPlays} setValue={setBestPlays}/>
 			</ul>
 		</div>
+	
+	return (
+	<>
+	<div className="row ml-3 mr-3">
+		{content}
 	</div>
 	</>
 	);
@@ -530,13 +628,17 @@ function PlayData(p) {
 	
 	useEffect(()=>{
 		axios.get("http://projectdivar.com/plays/"+p.username+"/"+p.song.id)
-		.then((data)=>{setData(data.data)})
+		.then((data)=>{setData(data.data);})
 	},[update])
 	
 	return (
 	<>
-		<div className="overflow-auto text-center" style={{height:"160px",width:"90%"}}>
-			{data.map((play,i)=><Play key={i} play={play} mini={true} song={p.song}/>)}
+		<div className="text-center background-songs">
+			<h5>Individual Plays for {p.song.name} from {p.username}</h5>
+			<div className="border rounded">
+				{data.map((play,i)=><Play key={i} play={play} mini={true} song={p.song}/>)}
+				<LoadMore url={"http://www.projectdivar.com/plays/"+p.username+"/"+p.song.id} params={{limit:15,offset:5}} value={data} setValue={setData}/>
+			</div>
 		</div>
 	</>
 	)
@@ -548,7 +650,7 @@ function HoverSongName(p) {
 	var [toggle,setToggle] = useState(false)
 	return (
 		<>
-			<tr key={p.song.id} className="lighthover" onMouseOver={()=>{setName((p.song.romanized_name.length>0)?p.song.romanized_name:p.song.english_name)}} onMouseOut={()=>{setName(p.song.name)}}
+			<tr key={p.song.id} className="lighthover"
 			data-toggle="collapse" data-target={"#collapse"+p.song.id} aria-expanded="false" aria-controls="collapseExample" onClick={()=>{
 				if (!toggle) {
 					setExpand(<PlayData song={p.song} username={p.username}/>)
@@ -559,7 +661,7 @@ function HoverSongName(p) {
 			}
 			}>
 				<td>
-					{name}
+					{(toggle)?<>⯆</>:<>⯈</>} {name} <span className="tinytext">{(p.song.romanized_name.length>0)?<>{(p.song.romanized_name!==p.song.name)?<>{p.song.romanized_name}</>:<></>}</>:<>{(p.song.english_name!==p.song.name)?<>{p.song.english_name}</>:<></>}</>}</span>
 				</td>
 				<PlayDetail song={p.song}/>
 			</tr>
diff --git a/server/app.js b/server/app.js
index 21988c0..ac1f054 100644
--- a/server/app.js
+++ b/server/app.js
@@ -423,13 +423,15 @@ app.get('/ratings/:songname/:username',(req,res)=>{
 })
 
 app.get('/bestplays/:username',(req,res)=>{
-	var songId=-1,userId=-1,songPromises=[],plays=[];
+	var songId=-1,userId=-1,songPromises=[],plays=[],limit=5,offset=0;
+	if (req.query.limit) {limit=req.query.limit}
+	if (req.query.offset) {offset=req.query.offset}
 	db.query('select id from users where username=$1 limit 1',[req.params.username])
-	.then((data)=>{if (data.rows.length>0){userId=data.rows[0].id;return db.query("select * from (select distinct on (songid) * from plays where userid=$1 "+((req.query.fails==="false")?"and score!=0":"")+" order by songid,score desc)t order by score desc;",[userId])}else{throw new Error("Cannot find user!")}})
+	.then((data)=>{if (data.rows.length>0){userId=data.rows[0].id;return db.query("select * from (select distinct on (songid) * from plays where userid=$1 "+((req.query.fails==="false")?"and score!=0":"")+" order by songid,score desc)t order by score desc limit $2 offset $3",[userId,Number(limit),Number(offset)])}else{throw new Error("Cannot find user!")}})
 	.then((data)=>{
 		res.status(200).json(data.rows)
 	})
-	.catch((err)=>{res.status(500).json(err.message+JSON.stringify(req.body))})
+	.catch((err)=>{res.status(500).json(err.message)})
 })
 
 app.get('/bestplay/:username/:songname/:difficulty',(req,res)=>{
@@ -465,7 +467,10 @@ app.get('/userdata/:username',(req,res)=>{
 })
 
 app.get('/plays/:username/:songid',(req,res)=>{
-	db.query("select plays.* from plays join users on users.id=plays.userid where users.username=$1 and plays.songid=$2 order by score desc,date desc limit 100",[req.params.username,req.params.songid])
+	var limit=5,offset=0;
+	if (req.query.limit) {limit=req.query.limit}
+	if (req.query.offset) {offset=req.query.offset}
+	db.query("select plays.* from plays join users on users.id=plays.userid where users.username=$1 and plays.songid=$2 order by score desc,percent desc,date desc limit $3 offset $4",[req.params.username,req.params.songid,Number(limit),Number(offset)])
 	.then((data)=>{
 		res.status(200).json(data.rows)
 	})