diff --git a/src/components/LoginPage/LoginPage.tsx b/src/components/LoginPage/LoginPage.tsx
index 5eb7c30..7be50c8 100644
--- a/src/components/LoginPage/LoginPage.tsx
+++ b/src/components/LoginPage/LoginPage.tsx
@@ -8,19 +8,33 @@ import { Box } from "@mui/material";
 const LoginPage = () => {
   return (
     <Grid container height="100vh">
-      <Grid item sm sx={{ backgroundColor: "#c5e58b"}}>
-        <Box sx={{
-        backgroundImage: "url('logo/HomepageLogo.png')",
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "60% 40%",
-        width: "100%",
-        height: "100%",
-        backgroundPosition: "center",
-
-        }}>
-        </Box>
+      <Grid
+        item
+        xs={0}
+        sm={4}
+        md={5}
+        lg={6}
+        sx={{
+          display: { xs: "none", sm: "block" },
+          backgroundColor: "#c5e58b",
+          minHeight: { xs: 0, sm: "100vh" },
+        }}
+      >
+        <Box
+          sx={{
+            width: "100%",
+            height: "100%",
+            minHeight: { sm: "100vh" },
+            backgroundImage: "url('logo/HomepageLogo.png')",
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center",
+            backgroundSize: "contain",
+            maxWidth: 960,
+            margin: "0 auto",
+          }}
+        />
       </Grid>
-      <Grid item xs={12} sm={8} lg={5}>
+      <Grid item xs={12} sm={8} md={7} lg={6}>
         <Box
           sx={{
             width: "100%",