diff --git a/client/src/components/HomePage/HomePage.js b/client/src/components/HomePage/HomePage.js
index 9b341c3f47..0d085c92e0 100644
--- a/client/src/components/HomePage/HomePage.js
+++ b/client/src/components/HomePage/HomePage.js
@@ -13,15 +13,36 @@ function HomePage() {
           justifyContent: "center",
         }}
       >
-        <Grid2 item xs={12} md={7} container spacing={2} direction="column">
-          <Grid2 item xs={12} md={5} container spacing={2} direction="column">
-            <Grid2 item sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
-              <QueueCard />
-            </Grid2>
+        <Grid2
+          item
+          xs={12}
+          md={7}
+          container
+          spacing={2}
+          direction="column"
+          sx={{
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Grid2
+            item
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "30vw",
+            }}
+          >
+            <QueueCard />
           </Grid2>
 
           <Grid2 item xs={12} md={7} container spacing={2}>
-            <Grid2 item size={{ xs: 12, s: 10, sm: 6, lg: 4 }} sx={{ display: "flex" }}>
+            <Grid2
+              item
+              size={{ xs: 12, s: 10, sm: 6, lg: 4 }}
+              sx={{ display: "flex" }}
+            >
               <BasicCard
                 title="View All Questions"
                 description="View all the questions you can attempt."
@@ -30,7 +51,11 @@ function HomePage() {
               />
             </Grid2>
 
-            <Grid2 item size={{ xs: 12, s: 10, sm: 6, lg: 4 }} sx={{ display: "flex" }}>
+            <Grid2
+              item
+              size={{ xs: 12, s: 10, sm: 6, lg: 4 }}
+              sx={{ display: "flex" }}
+            >
               <BasicCard
                 title="Past Question Attempts"
                 description="View your previous question attempts and 
@@ -41,7 +66,11 @@ function HomePage() {
               />
             </Grid2>
 
-            <Grid2 item size={{ xs: 12, s: 10, sm: 6, lg: 4 }} sx={{ display: "flex" }}>
+            <Grid2
+              item
+              size={{ xs: 12, s: 10, sm: 6, lg: 4 }}
+              sx={{ display: "flex" }}
+            >
               <BasicCard
                 title="Previous Matches"
                 description="Enjoyed collaborating with someone? View 
diff --git a/client/src/components/HomePage/QueueCard.js b/client/src/components/HomePage/QueueCard.js
index 2873772689..fd5b0e8580 100644
--- a/client/src/components/HomePage/QueueCard.js
+++ b/client/src/components/HomePage/QueueCard.js
@@ -14,7 +14,6 @@ import {
   Typography,
   styled,
 } from "@mui/material";
-import Grid from '@mui/material/Grid2';
 import { toggleButtonGroupClasses } from "@mui/material/ToggleButtonGroup";
 import axios from "axios";
 import { useEffect, useState } from "react";
@@ -86,10 +85,14 @@ function QueueCard() {
   const getCategories = async () => {
     setLoading(true);
     try {
-      const response = await axios.get(`${SVC_ENDPOINTS.question}/questions/categories/unique`);
+      const response = await axios.get(
+        `${SVC_ENDPOINTS.question}/questions/categories/unique`
+      );
       if (response.status === 200) {
         console.log(response.data.map((x) => x.category));
-        setQuestionCategories(Array.from(response.data.map((x) => x.category)).sort());
+        setQuestionCategories(
+          Array.from(response.data.map((x) => x.category)).sort()
+        );
       }
     } catch (error) {
       console.log(error);
@@ -108,7 +111,9 @@ function QueueCard() {
 
     clearInterval(timer);
     const timerId = setInterval(() => {
-      setProgress((prevProgress) => (prevProgress <= 0 ? 0 : Math.max(0, prevProgress - 10 / 3)));
+      setProgress((prevProgress) =>
+        prevProgress <= 0 ? 0 : Math.max(0, prevProgress - 10 / 3)
+      );
     }, 1000);
     setTimer(timerId);
     const cookies = new Cookies();
@@ -167,78 +172,118 @@ function QueueCard() {
   }, [activeStep, questionCategories]);
 
   return (
-    <Grid
-        size={{ xs: 12, s: 10, sm: 8, md: 6, lg: 4 }}>
-      <Card
-        variant="outlined"
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          flex: "1 1 auto",
-          borderRadius: "16px",
-        }}
-      >
-        <CardContent>
-          <Stepper activeStep={activeStep}>
-            {steps.map((label) => (
-              <Step key={label}>
-                <StepLabel>{label}</StepLabel>
-              </Step>
-            ))}
-          </Stepper>
-        </CardContent>
-        <Divider />
-        <CardContent sx={{ flex: "1 1 auto" }}>
-          {activeStep === 0 && (
-            <Box
-              sx={{
-                display: "flex",
-                justifyContent: "center", // Centers horizontally
-                alignItems: "center", // Centers vertically
-                height: "100%", // Ensures full height for vertical centering
-              }}
+    <Card
+      variant="outlined"
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        flex: "1 1 auto",
+        borderRadius: "16px",
+        height: "40vh",
+        width: "100%",
+      }}
+    >
+      <CardContent>
+        <Stepper activeStep={activeStep}>
+          {steps.map((label) => (
+            <Step key={label}>
+              <StepLabel>{label}</StepLabel>
+            </Step>
+          ))}
+        </Stepper>
+      </CardContent>
+      <Divider />
+      <CardContent sx={{ flex: "1 1 auto", overflowY: "auto" }}>
+        {activeStep === 0 && (
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "center", // Centers horizontally
+              alignItems: "center", // Centers vertically
+              height: "100%", // Ensures full height for vertical centering
+            }}
+          >
+            <ToggleButtonGroup
+              value={difficulty}
+              onChange={handleDifficultyChange}
+              exclusive
             >
-              <ToggleButtonGroup value={difficulty} onChange={handleDifficultyChange} exclusive>
-                <ToggleButton value={DIFFICULTY.easy} aria-label={DIFFICULTY.easy}>
-                  Easy
-                </ToggleButton>
-                <ToggleButton value={DIFFICULTY.medium} aria-label={DIFFICULTY.medium}>
-                  Medium
-                </ToggleButton>
-                <ToggleButton value={DIFFICULTY.hard} aria-label={DIFFICULTY.hard}>
-                  Hard
-                </ToggleButton>
-              </ToggleButtonGroup>
-            </Box>
-          )}
-          {activeStep === 1 && (
-            <Box>
-              {loading ? (
-                <CircularProgress />
-              ) : (
-                <CustomToggleGroup value={topic} onChange={handleTopicChange} exclusive>
-                  {questionCategories.map((category, index) => {
-                    return (
-                      <ToggleButton key={`cat${index}`} value={category}>
-                        {category}
-                      </ToggleButton>
-                    );
-                  })}
-                </CustomToggleGroup>
-              )}
-            </Box>
-          )}
-          {activeStep === 2 && (
-            <Box
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "100%",
-              }}
-            >
-              {queueLoading && (
+              <ToggleButton
+                value={DIFFICULTY.easy}
+                aria-label={DIFFICULTY.easy}
+              >
+                Easy
+              </ToggleButton>
+              <ToggleButton
+                value={DIFFICULTY.medium}
+                aria-label={DIFFICULTY.medium}
+              >
+                Medium
+              </ToggleButton>
+              <ToggleButton
+                value={DIFFICULTY.hard}
+                aria-label={DIFFICULTY.hard}
+              >
+                Hard
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Box>
+        )}
+        {activeStep === 1 && (
+          <Box>
+            {loading ? (
+              <CircularProgress />
+            ) : (
+              <CustomToggleGroup
+                value={topic}
+                onChange={handleTopicChange}
+                exclusive
+              >
+                {questionCategories.map((category, index) => {
+                  return (
+                    <ToggleButton key={`cat${index}`} value={category}>
+                      {category}
+                    </ToggleButton>
+                  );
+                })}
+              </CustomToggleGroup>
+            )}
+          </Box>
+        )}
+        {activeStep === 2 && (
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+            }}
+          >
+            {queueLoading && (
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100%",
+                }}
+              >
+                <Typography variant="h4">Finding You A Match! :D</Typography>
+                <Divider />
+                <CircularWithValueLabel value={progress} />
+                <Divider />
+                <Button color="error" variant="contained" onClick={handleEnd}>
+                  Cancel
+                </Button>
+              </Box>
+            )}
+            {!queueLoading && queueState.status === "timeout" && (
+              <Typography variant="h4">No Match Found! D:</Typography>
+            )}
+            {queueLoading ||
+              (collaborationSocket.connected && (
                 <Box
                   sx={{
                     display: "flex",
@@ -248,61 +293,44 @@ function QueueCard() {
                     height: "100%",
                   }}
                 >
-                  <Typography variant="h4">Finding You A Match! :D</Typography>
-                  <Divider />
-                  <CircularWithValueLabel value={progress} />
-                  <Divider />
-                  <Button color="error" variant="contained" onClick={handleEnd}>
-                    Cancel
-                  </Button>
+                  <BlurredButton variant="contained">Start</BlurredButton>
+                  <p>Please end all ongoing session before matching again!</p>
                 </Box>
+              ))}
+            {!queueLoading &&
+              queueState.status === "timeout" &&
+              !collaborationSocket.connected && (
+                <Button variant="contained" onClick={handleStartQueue}>
+                  Retry
+                </Button>
               )}
-              {!queueLoading && queueState.status === "timeout" && (
-                <Typography variant="h4">No Match Found! D:</Typography>
-              )}
-              {queueLoading ||
-                (collaborationSocket.connected && (
-                  <Box
-                    sx={{
-                      display: "flex",
-                      flexDirection: "column",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      height: "100%",
-                    }}
-                  >
-                    <BlurredButton variant="contained">Start</BlurredButton>
-                    <p>Please end all ongoing session before matching again!</p>
-                  </Box>
-                ))}
-              {!queueLoading &&
-                queueState.status === "timeout" &&
-                !collaborationSocket.connected && (
+            {!queueLoading &&
+              queueState.status !== "timeout" &&
+              !collaborationSocket.connected && (
+                <div>
                   <Button variant="contained" onClick={handleStartQueue}>
-                    Retry
+                    Start
                   </Button>
-                )}
-              {!queueLoading &&
-                queueState.status !== "timeout" &&
-                !collaborationSocket.connected && (
-                  <div>
-                    <Button variant="contained" onClick={handleStartQueue}>
-                      Start
-                    </Button>
-                  </div>
-                )}
-            </Box>
-          )}
-          {error && <Typography color="error">{error}</Typography>}
-        </CardContent>
-        <CardActions sx={{ justifyContent: "space-between" }}>
-          <Button color="inherit" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
-            Back
-          </Button>
-          {activeStep < steps.length - 1 && <Button onClick={handleNext}>Next</Button>}
-        </CardActions>
-      </Card>
-    </Grid>
+                </div>
+              )}
+          </Box>
+        )}
+        {error && <Typography color="error">{error}</Typography>}
+      </CardContent>
+      <CardActions sx={{ justifyContent: "space-between" }}>
+        <Button
+          color="inherit"
+          disabled={activeStep === 0}
+          onClick={handleBack}
+          sx={{ mr: 1 }}
+        >
+          Back
+        </Button>
+        {activeStep < steps.length - 1 && (
+          <Button onClick={handleNext}>Next</Button>
+        )}
+      </CardActions>
+    </Card>
   );
 }
 
diff --git a/client/src/components/Login/LoginWrapper.js b/client/src/components/Login/LoginWrapper.js
index 4d4b565be6..d27fe3b981 100644
--- a/client/src/components/Login/LoginWrapper.js
+++ b/client/src/components/Login/LoginWrapper.js
@@ -1,4 +1,4 @@
-import { Grid2, Box, styled, TextField } from "@mui/material";
+import { Grid2, Box, styled, TextField, Stack, Hidden } from "@mui/material";
 import { ReactComponent as Background } from "../../assets/background.svg";
 import { ReactComponent as Logo } from "../../assets/logo.svg";
 
@@ -13,7 +13,6 @@ export const LoginBox = styled(Box)({
   justifyContent: "space-evenly",
   minHeight: "580px",
   minWidth: "455px",
-  height: "100%",
   alignItems: "center",
   backgroundColor: "#E7E2E2",
   borderRadius: "10px",
@@ -21,19 +20,16 @@ export const LoginBox = styled(Box)({
 
 function LoginWrapper({ children }) {
   return (
-    <Grid2
-      container
-      spacing={3}
-      sx={{
-        padding: "35px",
-        justifyContent: "center",
-        height: "100vh",
-      }}
+    <Stack
+      direction={"row"}
+      height={"100vh"}
+      justifyContent={"center"}
+      alignItems={"center"}
     >
       <Grid2 item size={{ xs: 12, md: 6 }}>
         {children}
       </Grid2>
-      <Grid2 item size={{ xs: 12, md: 6 }} position={"relative"}>
+      <Grid2 item size={{ xs: 12, md: 6 }} position={"relative"} sx={{display: {sm: "none", md: "block"}}}>
         <Box zIndex={"1"} height={"100%"}>
           <Background />
         </Box>
@@ -50,7 +46,7 @@ function LoginWrapper({ children }) {
           <Logo />
         </Box>
       </Grid2>
-    </Grid2>
+    </Stack>
   );
 }