diff --git a/src/components/MenuBar.js b/src/components/MenuBar.js
index a62c91b..fbd9168 100644
--- a/src/components/MenuBar.js
+++ b/src/components/MenuBar.js
@@ -130,9 +130,11 @@ function MenuBar (props) {
 
     const history = useHistory();
     const handleGameJump = (gameName) => {
+        props.resetPagination();
         history.push(`/leaderboard?type=game&name=${gameName}`);
     }
     const handleAgentJump = (agentName) => {
+        props.resetPagination();
         history.push(`/leaderboard?type=agent&name=${agentName}`);
     }
 
diff --git a/src/view/LeaderBoard.js b/src/view/LeaderBoard.js
index 01650c0..eb40ab4 100644
--- a/src/view/LeaderBoard.js
+++ b/src/view/LeaderBoard.js
@@ -71,8 +71,6 @@ function LeaderBoard () {
     }
     console.log(requestUrl);
 
-    // todo: detect type change then reset page and page size
-
     useEffect(() => {
         async function fetchData() {
             const res = await axios.get(requestUrl);
@@ -92,7 +90,13 @@ function LeaderBoard () {
 
     return (
         <div>
-            <MenuBar gameList={gameList} modelList={modelList} reloadMenu={reloadMenu} setReloadMenu={setReloadMenu}/>
+            <MenuBar
+                gameList={gameList}
+                modelList={modelList}
+                reloadMenu={reloadMenu}
+                setReloadMenu={setReloadMenu}
+                resetPagination={() => {setPage(0); setRowsPerPage(initRowsPerPage);}}
+            />
             <div style={{marginLeft: '250px'}}>
                 <div style={{padding: 20}}>
                     <EnhancedTable