diff --git a/src/lib/chessCom.ts b/src/lib/chessCom.ts
index d73ece0..e0b578f 100644
--- a/src/lib/chessCom.ts
+++ b/src/lib/chessCom.ts
@@ -19,7 +19,7 @@ export const getUserRecentGames = async (
 
   const games: ChessComGame[] = data?.games ?? [];
 
-  if (games.length < 20) {
+  if (games.length < 50) {
     const previousMonth = month === 1 ? 12 : month - 1;
     const previousPaddedMonth = getPaddedMonth(previousMonth);
     const yearToFetch = previousMonth === 12 ? year - 1 : year;
@@ -33,9 +33,9 @@ export const getUserRecentGames = async (
     games.push(...(dataPreviousMonth?.games ?? []));
   }
 
-  games.sort((a, b) => {
+  const gamesToReturn = games.slice(0, 50).sort((a, b) => {
     return b.end_time - a.end_time;
   });
 
-  return games;
+  return gamesToReturn;
 };
diff --git a/src/sections/loadGame/chessComInput.tsx b/src/sections/loadGame/chessComInput.tsx
index 622fa56..39f6a51 100644
--- a/src/sections/loadGame/chessComInput.tsx
+++ b/src/sections/loadGame/chessComInput.tsx
@@ -47,7 +47,7 @@ export default function ChessComInput({ pgn, setPgn }: Props) {
 
   return (
     <>
-      <FormControl sx={{ m: 1, width: 300 }}>
+      <FormControl sx={{ m: 1, width: 600 }}>
         <TextField
           label="Enter your Chess.com username..."
           variant="outlined"
@@ -56,38 +56,40 @@ export default function ChessComInput({ pgn, setPgn }: Props) {
         />
       </FormControl>
 
-      <Grid
-        container
-        item
-        xs={12}
-        gap={2}
-        justifyContent="center"
-        alignContent="center"
-      >
-        {games.map((game) => (
-          <ListItemButton
-            onClick={() => setPgn(game.pgn)}
-            selected={pgn === game.pgn}
-            style={{ width: 350, maxWidth: 350 }}
-            key={game.uuid}
-          >
-            <ListItemText
-              primary={`${capitalize(game.white.username) || "White"} (${
-                game.white.rating || "?"
-              }) vs ${capitalize(game.black.username) || "Black"} (${
-                game.black.rating || "?"
-              })`}
-              secondary={`${capitalize(game.time_class)} played at ${new Date(
-                game.end_time * 1000
-              )
-                .toLocaleString()
-                .slice(0, -3)}`}
-              primaryTypographyProps={{ noWrap: true }}
-              secondaryTypographyProps={{ noWrap: true }}
-            />
-          </ListItemButton>
-        ))}
-      </Grid>
+      {games.length > 0 && (
+        <Grid
+          container
+          item
+          xs={12}
+          gap={2}
+          justifyContent="center"
+          alignContent="center"
+        >
+          {games.map((game) => (
+            <ListItemButton
+              onClick={() => setPgn(game.pgn)}
+              selected={pgn === game.pgn}
+              style={{ width: 350, maxWidth: 350 }}
+              key={game.uuid}
+            >
+              <ListItemText
+                primary={`${capitalize(game.white.username) || "White"} (${
+                  game.white.rating || "?"
+                }) vs ${capitalize(game.black.username) || "Black"} (${
+                  game.black.rating || "?"
+                })`}
+                secondary={`${capitalize(game.time_class)} played at ${new Date(
+                  game.end_time * 1000
+                )
+                  .toLocaleString()
+                  .slice(0, -3)}`}
+                primaryTypographyProps={{ noWrap: true }}
+                secondaryTypographyProps={{ noWrap: true }}
+              />
+            </ListItemButton>
+          ))}
+        </Grid>
+      )}
     </>
   );
 }