diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx
index 6b092646d..545cccee9 100644
--- a/js/src/app/dashboard/Dashboard.page.tsx
+++ b/js/src/app/dashboard/Dashboard.page.tsx
@@ -46,6 +46,7 @@ export default function DashboardPage() {
       />
     );
   }
+
   return (
     <>
       <DocumentTitle title={`CodeBloom - Dashboard`} />
@@ -62,19 +63,48 @@ export default function DashboardPage() {
               <OnboardingLeetcodeUser />
             : <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>
-            <Flex direction={"column"} flex={1}>
-              <RecentSubmissions userId={data.user.id} />
-            </Flex>
+          <Flex
+            direction={smallPhone ? "row" : "column"}
+            gap={"md"}
+            align={smallPhone ? "flex-start" : "stretch"}
+          >
+            {smallPhone ?
+              <>
+                {
+                  <Flex direction={"column"}>
+                    <ProblemOfTheDay />
+                  </Flex>
+                }
+                {
+                  <Flex direction={"column"} flex={1}>
+                    <DashboardLeaderboard
+                      userId={data.user.id}
+                      userTags={data.user.tags}
+                    />
+                  </Flex>
+                }
+              </>
+            : <>
+                {
+                  <Flex direction={"column"} flex={1}>
+                    <DashboardLeaderboard
+                      userId={data.user.id}
+                      userTags={data.user.tags}
+                    />
+                  </Flex>
+                }
+                {
+                  <Flex direction={"column"}>
+                    <ProblemOfTheDay />
+                  </Flex>
+                }
+              </>
+            }
+            <div>
+              <Flex direction={"column"} flex={1}>
+                <RecentSubmissions userId={data.user.id} />
+              </Flex>
+            </div>
           </Flex>
         </Flex>
       </Box>
diff --git a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
index 83b8b6b78..5b640829a 100644
--- a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
+++ b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
@@ -8,7 +8,7 @@ export default function ProblemOfTheDay() {
   const { data, status } = useFetchPotdQuery();
 
   const renderStatusCard = (message: string) => (
-    <CodebloomCard miw={"31vw"} mih={"63vh"}>
+    <CodebloomCard miw={"31vw"} mih={{ base: "auto", md: "63vh" }}>
       <Flex
         direction={"row"}
         justify={"center"}
@@ -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
@@ -55,7 +55,7 @@ export default function ProblemOfTheDay() {
         align={"center"}
         justify={"center"}
         w={"100%"}
-        h={"100%"}
+        h={{ base: "auto", md: "100%" }}
       >
         <Title style={{ textAlign: "center" }} order={4}>
           {json.title}