diff --git a/js/src/app/_component/AboutUs.tsx b/js/src/app/_component/AboutUs.tsx
index a8c7af7ac..b499b0b2b 100644
--- a/js/src/app/_component/AboutUs.tsx
+++ b/js/src/app/_component/AboutUs.tsx
@@ -30,8 +30,8 @@ export default function AboutUs() {
   };
 
   return (
-    <>
-      <Flex direction={"row"} h={"92vh"} w={"98vw"} visibleFrom="lg">
+    <Box mx="-lg">
+      <Flex direction={"row"} h={"92vh"} w={"100%"} visibleFrom="lg">
         <Flex
           align={"center"}
           justify={"center"}
@@ -51,11 +51,7 @@ export default function AboutUs() {
             Level Up Your Coding with
           </Title>
           <Title order={3}>Patina's LeetCode Challenge!</Title>
-          <div
-            style={{
-              padding: "1rem",
-            }}
-          >
+          <Box p="xs">
             <Center>
               <Group gap="sm">
                 <Button variant="white" onClick={scrollToSection}>
@@ -66,7 +62,7 @@ export default function AboutUs() {
                 </Link>
               </Group>
             </Center>
-          </div>
+          </Box>
         </Flex>
         <Flex
           align={"center"}
@@ -81,8 +77,8 @@ export default function AboutUs() {
           </Box>
         </Flex>
       </Flex>
-      <Flex h={"80vh"} w={"100vw"} hiddenFrom="lg">
-        <Stack align={"center"} justify={"center"} h={"100%"} w={"100vw"}>
+      <Flex h={"80vh"} w={"100%"} hiddenFrom="lg">
+        <Stack align={"center"} justify={"center"} h={"100%"} w={"100%"}>
           <Badge
             variant={"gradient"}
             gradient={{ from: "green", to: "cyan", deg: 90 }}
@@ -91,15 +87,11 @@ export default function AboutUs() {
           >
             Celebrating CodeBloom's 1 Year Anniversary! 🎉
           </Badge>
-          <Title order={5} style={{ color: "#4cffb0", alignItems: "center" }}>
+          <Title order={5} style={{ color: "#4cffb0" }}>
             Level Up Your Coding with
           </Title>
           <Title order={5}>Patina's LeetCode Challenge!</Title>
-          <div
-            style={{
-              padding: "1rem",
-            }}
-          >
+          <Box p="1rem">
             <Center>
               <Group gap="sm">
                 <Button variant="white" onClick={scrollToSection}>
@@ -110,17 +102,19 @@ export default function AboutUs() {
                 </Link>
               </Group>
             </Center>
-          </div>
+          </Box>
         </Stack>
       </Flex>
       <Container hiddenFrom={"lg"}>
         <CurrentLeaderboardMetadata showClock syntaxStripSize={"lg"} />
         <MiniLeaderboardMobile />
       </Container>
-      <SchoolSection />
-      <div ref={targetSectionRef} style={{ padding: "2rem" }}>
+      <Box px="lg">
+        <SchoolSection />
+      </Box>
+      <Box p="2rem" ref={targetSectionRef}>
         <OurFeatures />
-      </div>
-    </>
+      </Box>
+    </Box>
   );
 }
diff --git a/js/src/app/dashboard/Dashboard.page.tsx b/js/src/app/dashboard/Dashboard.page.tsx
index f0a6b6c3b..6b092646d 100644
--- a/js/src/app/dashboard/Dashboard.page.tsx
+++ b/js/src/app/dashboard/Dashboard.page.tsx
@@ -8,7 +8,7 @@ import DocumentTitle from "@/components/ui/title/DocumentTitle";
 import Toast from "@/components/ui/toast/Toast";
 import ToastWithRedirect from "@/components/ui/toast/ToastWithRedirect";
 import { useAuthQuery } from "@/lib/api/queries/auth";
-import { Center, Flex, Loader, Title } from "@mantine/core";
+import { Center, Flex, Loader, Title, Box } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 
 export default function DashboardPage() {
@@ -52,38 +52,32 @@ export default function DashboardPage() {
       <DocumentDescription
         description={`CodeBloom - Refresh your latest submissions`}
       />
-      <Flex
-        p={"32px"}
-        direction={"column"}
-        gap={"lg"}
-        style={{
-          width: "98vw",
-          minHeight: "90vh",
-        }}
-      >
-        <Center>
-          <Title order={2}>Dashboard</Title>
-        </Center>
-        <Center>
-          {!data.user.leetcodeUsername ?
-            <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} />
+      <Box mx="-lg">
+        <Flex p={"32px"} direction={"column"} gap={"lg"} w="100%" mih="90vh">
+          <Center>
+            <Title order={2}>Dashboard</Title>
+          </Center>
+          <Center>
+            {!data.user.leetcodeUsername ?
+              <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>
         </Flex>
-      </Flex>
+      </Box>
     </>
   );
 }