diff --git a/website/src/components/Dashboard/LeaderboardTable.tsx b/website/src/components/Dashboard/LeaderboardTable.tsx
index b6048f3f..52cf762b 100644
--- a/website/src/components/Dashboard/LeaderboardTable.tsx
+++ b/website/src/components/Dashboard/LeaderboardTable.tsx
@@ -1,17 +1,16 @@
-import { Box, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
 import NextLink from "next/link";
-import { get } from "src/lib/api";
-import useSWR from "swr";
+import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
+import { LeaderboardTimeFrame } from "src/types/Leaderboard";
 
 export function LeaderboardTable() {
   const backgroundColor = useColorModeValue("white", "gray.700");
   const accentColor = useColorModeValue("gray.200", "gray.900");
-  const { data: leaderboardEntries } = useSWR("/api/leaderboard", get);
   return (
     <main className="h-fit col-span-3">
       <div className="flex flex-col gap-4">
         <div className="flex items-end justify-between">
-          <Text className="text-2xl font-bold">Top 5 Contributors</Text>
+          <Text className="text-2xl font-bold">Top 5 Contributors Today</Text>
           <Link as={NextLink} href="/leaderboard" _hover={{ textDecoration: "none" }}>
             <Text color="blue.400" className="text-sm font-bold">
               View All -&gt;
@@ -25,30 +24,7 @@ export function LeaderboardTable() {
           borderRadius="xl"
           className="p-6 shadow-sm"
         >
-          <Stack divider={<StackDivider />} spacing="4">
-            <div className="grid grid-cols-4 items-center font-bold">
-              <p>Name</p>
-              <div className="col-start-4 flex justify-center">
-                <p>Score</p>
-              </div>
-            </div>
-            {leaderboardEntries?.map(({ display_name, score }, idx) => (
-              <div key={idx} className="grid grid-cols-4 items-center">
-                <div className="flex items-center gap-3">
-                  {/*
-                  <Image alt="Profile Picture" src={item.image} boxSize="7" borderRadius="full"></Image>
-                    */}
-                  <p>{display_name}</p>
-                  {/*
-                  <Badge colorScheme="purple">{item.streakCount}</Badge>
-                    */}
-                </div>
-                <Box bg={backgroundColor} className="col-start-4 flex justify-center">
-                  <p>{score}</p>
-                </Box>
-              </div>
-            ))}
-          </Stack>
+          <LeaderboardGridCell timeFrame={LeaderboardTimeFrame.day} />
         </Box>
       </div>
     </main>
diff --git a/website/src/pages/api/leaderboard.ts b/website/src/pages/api/leaderboard.ts
index 10a9a3a7..592f3da5 100644
--- a/website/src/pages/api/leaderboard.ts
+++ b/website/src/pages/api/leaderboard.ts
@@ -6,7 +6,7 @@ import { LeaderboardTimeFrame } from "src/types/Leaderboard";
  * Returns the set of valid labels that can be applied to messages.
  */
 const handler = withoutRole("banned", async (req, res) => {
-  const time_frame = req.query.time_frame as LeaderboardTimeFrame;
+  const time_frame = (req.query.time_frame as LeaderboardTimeFrame) || LeaderboardTimeFrame.day;
   const { leaderboard } = await oasstApiClient.fetch_leaderboard(time_frame);
   res.status(200).json(leaderboard);
 });