diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx
index 6b092646d..39afc8da3 100644
--- a/js/src/app/dashboard/Dashboard.page.tsx
+++ b/js/src/app/dashboard/Dashboard.page.tsx
@@ -63,15 +63,26 @@ export default function DashboardPage() {
             : <RefreshSubmissions schoolRegistered={schoolRegistered} />}
           </Center>
           <Flex direction={smallPhone ? "row" : "column"} gap={"md"}>
-            <Flex direction={"column"} flex={1}>
-              <ProblemOfTheDay />
-            </Flex>
-            <Flex direction={"column"} flex={1}>
-              <DashboardLeaderboard
-                userId={data.user.id}
-                userTags={data.user.tags}
-              />
-            </Flex>
+            {(() => {
+              const leaderboardCard = (
+                <Flex direction={"column"} flex={1}>
+                  <DashboardLeaderboard
+                    userId={data.user.id}
+                    userTags={data.user.tags}
+                  />
+                </Flex>
+              );
+              const problemOfTheDayCard = (
+                <Flex direction={"column"} flex={1}>
+                  <ProblemOfTheDay />
+                </Flex>
+              );
+              const orderedComponents =
+                smallPhone ?
+                  [problemOfTheDayCard, leaderboardCard]
+                : [leaderboardCard, problemOfTheDayCard];
+              return <>{orderedComponents}</>;
+            })()}
             <Flex direction={"column"} flex={1}>
               <RecentSubmissions userId={data.user.id} />
             </Flex>
diff --git a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
index 83b8b6b78..e68fea41c 100644
--- a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
+++ b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
@@ -40,7 +40,7 @@ export default function ProblemOfTheDay() {
   const json = data.payload;
 
   return (
-    <CodebloomCard miw={"31vw"} mih={"63vh"}>
+    <CodebloomCard miw="31vw" mih={{ base: "auto", md: "63vh" }}>
       <Center>
         <Title style={{ textAlign: "center" }} order={3}>
           Problem of the day