diff --git a/src/components/PutAwayScan/PutAwayModal.tsx b/src/components/PutAwayScan/PutAwayModal.tsx
index 331fa2b..ed234c5 100644
--- a/src/components/PutAwayScan/PutAwayModal.tsx
+++ b/src/components/PutAwayScan/PutAwayModal.tsx
@@ -52,11 +52,15 @@ const style = {
   left: "50%",
   transform: "translate(-50%, -50%)",
   bgcolor: "background.paper",
-  pt: 5,
-  px: 5,
-  pb: 5,
-  // width: "auto",
-  width: { xs: "90%", sm: "90%", md: "90%" },
+  pt: { xs: 0.5, sm: 1, md: 1.5 },
+  px: { xs: 1, sm: 1.5, md: 2 },
+  pb: { xs: 0.5, sm: 1, md: 1.5 },
+  width: { xs: "95%", sm: "85%", md: "75%", lg: "70%" },
+  maxWidth: "900px",
+  maxHeight: { xs: "98vh", sm: "95vh", md: "90vh" },
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column",
 };
 
 const scannerStyle = {
@@ -65,11 +69,11 @@ const scannerStyle = {
   left: "50%",
   transform: "translate(-50%, -50%)",
   bgcolor: "background.paper",
-  pt: 5,
-  px: 5,
-  pb: 10,
-  // width: "auto",
-  width: { xs: "60%", sm: "60%", md: "60%" },
+  pt: { xs: 2, sm: 3, md: 4 },
+  px: { xs: 2, sm: 3, md: 4 },
+  pb: { xs: 6, sm: 7, md: 8 },
+  width: { xs: "85%", sm: "70%", md: "60%" },
+  maxWidth: "600px",
 };
 
 const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId, warehouseId, scanner, addPutAwayHistory }) => {
@@ -334,191 +338,249 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
           component="form"
           onSubmit={formProps.handleSubmit(onSubmit)}
         >
-          <Grid container xs={12}>
-            <Grid item xs={12}>
-              {itemDetail != undefined ? (
-                <>
-                  <Stack direction="column" justifyContent="flex-end" gap={1}>
-                    <Typography variant="h4">
-                      處理上架
-                    </Typography>
-                    <Grid item xs={12}>
-                      {itemDetail.jobOrderId ? (
-                        <FgStockInForm itemDetail={itemDetail} disabled={true} putawayMode={true}/>
-                      ) : (
-                        <StockInForm itemDetail={itemDetail} disabled={true} putawayMode={true}/>
-                      )}
-                    </Grid>
-                    <Paper sx={{ mt: 2, padding: 2, width: "100%", backgroundColor: verified ? '#bceb19' : '#FCD34D' }}>
-                      <Grid
-                        container
-                        spacing={2}
-                        direction="row"
-                        justifyContent="space-between"
-                        alignItems="strecth"
-                        sx={{ width: '100%' }}
-                      >
-                        <Grid item xs={5}>
-                          <Box sx={{
-                              mb: 2, p: 2, backgroundColor: verified ? '#bceb19' : '#FCD34D', borderRadius: 0,
-                              display: 'flex', flexDirection: 'row', gap: 1, flexWrap: 'wrap' }}
-                          >
-                            <Grid container>
-                              {verified? (
-                                <>
-                                  <CheckCircle sx={{color:"green", fontSize: "35px", mr: 1}}/>
-                                  <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: 'black' }} noWrap>
-                                    掃瞄完成
-                                  </Typography>
-                                </>
-                              ) : (
-                                <>
-                                  <ErrorOutline sx={{color:"red", fontSize: "35px", mr: 1}}/>
-                                  <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: 'black' }} noWrap>
-                                    請掃瞄倉庫二維碼
-                                  </Typography>
-                                </>
-                              )
-                              }
-                              <QrCode sx={{fontSize: "35px"}}/>
-                            </Grid>
-                            <Grid container>
-                              <Typography variant="h4" sx={{ fontWeight: 'bold', color: 'black' }} noWrap>
-                                {warehouseDisplay} <span style={{fontSize: "45px", color: "black"}}>{verified ? "" : `(建議)`}</span>
-                              </Typography>
-                            </Grid>
-
-                          </Box>
+          <Box sx={{ overflow: "hidden", flex: 1, display: "flex", flexDirection: "column" }}>
+            <Grid container xs={12}>
+              <Grid item xs={12}>
+                {itemDetail != undefined ? (
+                  <>
+                    <Stack direction="column" justifyContent="flex-end" gap={0.25} sx={{ mb: 0.5 }}>
+                      <Typography variant="h4" sx={{ fontSize: { xs: "0.95rem", sm: "1.1rem", md: "1.3rem" }, mb: 0.25, lineHeight: 1.2 }}>
+                        處理上架
+                      </Typography>
+                      <Box sx={{ "& .MuiFormControl-root": { mb: 0.5 }, "& .MuiTextField-root": { mb: 0.5 }, "& .MuiGrid-item": { mb: 0.25 } }}>
+                        <Grid item xs={12}>
+                          {itemDetail.jobOrderId ? (
+                            <FgStockInForm itemDetail={itemDetail} disabled={true} putawayMode={true}/>
+                          ) : (
+                            <StockInForm itemDetail={itemDetail} disabled={true} putawayMode={true}/>
+                          )}
                         </Grid>
-                        <Grid item xs={3}>
-                          <Box sx={{ height: '100%', p: 2, textAlign: 'center', display: "flex",
-                              flexDirection: "column", justifyContent: "center", }}>
-                            <TextField
-                              type="number"
-                              label={t("putQty")}
-                              fullWidth
-                              sx={{
-                                flex: 1,
-                                "& .MuiInputBase-input": {
-                                  padding: "20px 14px 5px",
-                                  fontSize: "50px",
-                                  fontWeight: "bold",
-                                },
-                                "& .MuiInputBase-root": {
-                                  height: "100%",
-                                  borderColor: "black",
-                                },
-                                "& .MuiInputLabel-root": {
-                                  fontSize: 30,
-                                  top: "-5px",
-                                  color: "black",
-                                },
-                                "& .MuiFormHelperText-root": {
-                                  fontSize: "20px",
-                                  marginTop: "8px",
-                                  lineHeight: "1.2",
-                                },
+                      </Box>
+                      <Paper sx={{ mt: 0.5, padding: { xs: 0.5, sm: 0.75, md: 1 }, width: "100%", backgroundColor: verified ? '#bceb19' : '#FCD34D' }}>
+                        <Grid
+                          container
+                          spacing={{ xs: 0.5, sm: 0.75, md: 1 }}
+                          direction="row"
+                          justifyContent="space-between"
+                          alignItems="stretch"
+                          sx={{ width: '100%' }}
+                        >
+                          <Grid item xs={12} sm={5}>
+                            <Box sx={{
+                                mb: { xs: 0.25, md: 0.5 }, 
+                                p: { xs: 0.5, sm: 0.75, md: 1 }, 
+                                backgroundColor: verified ? '#bceb19' : '#FCD34D', 
+                                borderRadius: 0,
+                                display: 'flex', 
+                                flexDirection: 'row', 
+                                gap: 0.25, 
+                                flexWrap: 'wrap' 
                               }}
-                              defaultValue={itemDetail?.demandQty!! - totalPutAwayQty}
-                              // defaultValue={itemDetail.demandQty}
-                              onChange={(e) => {
-                                const value = e.target.value;
-                                validateQty(Number(value));
-                                setPutQty(Number(value));
-                              }}
-                              onKeyDown={(e) => {
-                                // Prevent non-numeric characters
-                                if (["e", "E", "+", "-", "."].includes(e.key)) {
-                                  e.preventDefault();
+                            >
+                              <Grid container>
+                                {verified? (
+                                  <>
+                                    <CheckCircle sx={{
+                                      color:"green", 
+                                      fontSize: { xs: "16px", sm: "20px", md: "24px" }, 
+                                      mr: 0.25
+                                    }}/>
+                                    <Typography 
+                                      variant="h5" 
+                                      component="h2" 
+                                      sx={{ 
+                                        fontWeight: 'bold', 
+                                        color: 'black',
+                                        fontSize: { xs: "0.75rem", sm: "0.9rem", md: "1rem" },
+                                        lineHeight: 1.2
+                                      }} 
+                                      noWrap
+                                    >
+                                      掃瞄完成
+                                    </Typography>
+                                  </>
+                                ) : (
+                                  <>
+                                    <ErrorOutline sx={{
+                                      color:"red", 
+                                      fontSize: { xs: "16px", sm: "20px", md: "24px" }, 
+                                      mr: 0.25
+                                    }}/>
+                                    <Typography 
+                                      variant="h5" 
+                                      component="h2" 
+                                      sx={{ 
+                                        fontWeight: 'bold', 
+                                        color: 'black',
+                                        fontSize: { xs: "0.75rem", sm: "0.9rem", md: "1rem" },
+                                        lineHeight: 1.2
+                                      }} 
+                                      noWrap
+                                    >
+                                      請掃瞄倉庫二維碼
+                                    </Typography>
+                                  </>
+                                )
                                 }
-                              }}
-                              // onBlur={(e) => {
-                              //   const value = e.target.value;
-                              //   setPutQty(Number(value));
-                              //   validateQty(Number(value));
-                              // }}
-                              // disabled={true}
-                              // {...register("acceptedQty", {
-                              //   required: "acceptedQty required!",
-                              // })}
-                              error={qtyError !== ""}
-                              helperText={qtyError}
-                            />
-                          </Box>
-                        </Grid>
-                        <Grid item xs={4}>
-                        <Box
-                            sx={{
-                              p: 1,
-                              textAlign: 'center',
-                              height: '100%', // Ensure D stretches to full height
-                              display: 'flex',
-                              alignItems: 'center',
-                              justifyContent: 'center',
+                                <QrCode sx={{ fontSize: { xs: "16px", sm: "20px", md: "24px" } }}/>
+                              </Grid>
+                              <Grid container>
+                                <Typography 
+                                  variant="h4" 
+                                  sx={{ 
+                                    fontWeight: 'bold', 
+                                    color: 'black',
+                                    fontSize: { xs: "0.85rem", sm: "1rem", md: "1.25rem" },
+                                    lineHeight: 1.2
+                                  }} 
+                                  noWrap
+                                >
+                                  {warehouseDisplay} <Box component="span" sx={{ fontSize: { xs: "0.95rem", sm: "1.2rem", md: "1.5rem" }, color: "black" }}>{verified ? "" : `(建議)`}</Box>
+                                </Typography>
+                              </Grid>
+
+                            </Box>
+                          </Grid>
+                          <Grid item xs={12} sm={3}>
+                            <Box sx={{ 
+                              height: '100%', 
+                              p: { xs: 0.25, sm: 0.5, md: 0.75 }, 
+                              textAlign: 'center', 
+                              display: "flex",
+                              flexDirection: "column", 
+                              justifyContent: "center", 
                             }}>
-                            <Button
-                              id="putawaySubmit"
-                              type="submit"
+                              <TextField
+                                type="number"
+                                label={t("putQty")}
+                                fullWidth
+                                size="small"
+                                sx={{
+                                  flex: 1,
+                                  "& .MuiInputBase-input": {
+                                    padding: { xs: "6px 6px 1px", sm: "8px 8px 2px", md: "10px 10px 3px" },
+                                    fontSize: { xs: "16px", sm: "22px", md: "32px" },
+                                    fontWeight: "bold",
+                                    height: { xs: "32px", sm: "40px", md: "48px" },
+                                  },
+                                  "& .MuiInputBase-root": {
+                                    height: "100%",
+                                    borderColor: "black",
+                                  },
+                                  "& .MuiInputLabel-root": {
+                                    fontSize: { xs: "10px", sm: "12px", md: "18px" },
+                                    top: "-2px",
+                                    color: "black",
+                                  },
+                                  "& .MuiFormHelperText-root": {
+                                    fontSize: { xs: "9px", sm: "10px", md: "14px" },
+                                    marginTop: "2px",
+                                    lineHeight: "1.1",
+                                  },
+                                }}
+                                defaultValue={itemDetail?.demandQty!! - totalPutAwayQty}
+                                // defaultValue={itemDetail.demandQty}
+                                onChange={(e) => {
+                                  const value = e.target.value;
+                                  validateQty(Number(value));
+                                  setPutQty(Number(value));
+                                }}
+                                onKeyDown={(e) => {
+                                  // Prevent non-numeric characters
+                                  if (["e", "E", "+", "-", "."].includes(e.key)) {
+                                    e.preventDefault();
+                                  }
+                                }}
+                                // onBlur={(e) => {
+                                //   const value = e.target.value;
+                                //   setPutQty(Number(value));
+                                //   validateQty(Number(value));
+                                // }}
+                                // disabled={true}
+                                // {...register("acceptedQty", {
+                                //   required: "acceptedQty required!",
+                                // })}
+                                error={qtyError !== ""}
+                                helperText={qtyError}
+                              />
+                            </Box>
+                          </Grid>
+                          <Grid item xs={12} sm={4}>
+                          <Box
+                              sx={{
+                                p: { xs: 0.25, sm: 0.5, md: 0.75 },
+                                textAlign: 'center',
+                                height: '100%', // Ensure D stretches to full height
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                              }}>
+                              <Button
+                                id="putawaySubmit"
+                                type="submit"
+                                variant="contained"
+                                startIcon={<Check sx={{ fontSize: { xs: "14px", sm: "16px", md: "20px" } }} />}
+                                color="secondary"
+                                size="small"
+                                sx={{
+                                  height: "100%",
+                                  flex: "0 0 auto",
+                                  padding: { xs: "3px 6px", sm: "4px 8px", md: "6px 12px" },
+                                  fontSize: { xs: "9px", sm: "11px", md: "18px" },
+                                  whiteSpace: "nowrap",
+                                  textAlign: "center",
+                                  border: "1.5px solid", // Add outline
+                                  borderColor: "blue",
+                                  minHeight: { xs: "32px", sm: "36px", md: "40px" },
+                                  "&:hover": {
+                                    borderColor: "grey.200", // Slightly different color on hover
+                                    backgroundColor: "secondary.dark", // Darker background on hover
+                                  },
+                                  "&:disabled": {
+                                    borderColor: "grey.400", // Visible outline even when disabled
+                                    opacity: 0.7, // Slightly faded but still visible
+                                  },
+                                }}
+                                // onClick={formProps.handleSubmit()}
+                                disabled={!verified || qtyError != ""}
+                              >
+                                {t("confirm putaway")}
+                              </Button>
+                            </Box>
+                            {/* <Button
+                              id="scanWarehouse"
                               variant="contained"
-                              startIcon={<Check />}
-                              color="secondary"
+                              startIcon={<QrCode />}
+                              color="primary"
+                              // sx={{ mx: 3, minWidth : "120px", height: "80px",
+                              //   padding: "12px 12px", fontSize: "24px"}}
                               sx={{
-                                height: "100%",
                                 flex: "0 0 auto",
                                 padding: "8px 16px",
-                                fontSize: { xs: "20px", sm: "24px", md: "30px" },
+                                fontSize: { xs: "16px", sm: "20px", md: "24px" },
                                 whiteSpace: "nowrap",
-                                textAlign: "center",
-                                border: "3px solid", // Add outline
-                                borderColor: "blue",
-                                "&:hover": {
-                                  borderColor: "grey.200", // Slightly different color on hover
-                                  backgroundColor: "secondary.dark", // Darker background on hover
-                                },
-                                "&:disabled": {
-                                  borderColor: "grey.400", // Visible outline even when disabled
-                                  opacity: 0.7, // Slightly faded but still visible
-                                },
-                              }}
-                              // onClick={formProps.handleSubmit()}
-                              disabled={!verified || qtyError != ""}
-                            >
-                              {t("confirm putaway")}
-                            </Button>
-                          </Box>
-                          {/* <Button
-                            id="scanWarehouse"
-                            variant="contained"
-                            startIcon={<QrCode />}
-                            color="primary"
-                            // sx={{ mx: 3, minWidth : "120px", height: "80px",
-                            //   padding: "12px 12px", fontSize: "24px"}}
-                            sx={{
-                              flex: "0 0 auto",
-                              padding: "8px 16px",
-                              fontSize: { xs: "16px", sm: "20px", md: "24px" },
-                              whiteSpace: "nowrap",
-                              textAlign: "center",}}
-                            onClick={openScanner}>
+                                textAlign: "center",}}
+                              onClick={openScanner}>
 
-                            {t("scan warehouse")}
-                          </Button> */}
+                              {t("scan warehouse")}
+                            </Button> */}
+                          </Grid>
                         </Grid>
-                      </Grid>
-                    </Paper>
-                  </Stack>
-                </>
-              ) : (
-                // <ReactQrCodeScanner scannerConfig={scannerConfig} />
-                <>
-                  <Typography variant="h4">
-                    {t("scan loading")}
-                  </Typography>
-                  <LoadingComponent/>
-                </>
-              )}
+                      </Paper>
+                    </Stack>
+                  </>
+                ) : (
+                  // <ReactQrCodeScanner scannerConfig={scannerConfig} />
+                  <>
+                    <Typography variant="h4" sx={{ fontSize: { xs: "0.95rem", sm: "1.1rem", md: "1.3rem" } }}>
+                      {t("scan loading")}
+                    </Typography>
+                    <LoadingComponent/>
+                  </>
+                )}
+              </Grid>
             </Grid>
-          </Grid>
+          </Box>
           <Modal open={isOpenScanner} onClose={scannerCloseHandler}>
             <Box sx={scannerStyle}>
               <Typography variant="h4" sx={{
@@ -527,7 +589,9 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
                     justifyContent: 'center',
                     margin: 0,
                     alignItems: 'center',
-                    textAlign: 'center',}}
+                    textAlign: 'center',
+                    fontSize: { xs: "0.95rem", sm: "1.1rem", md: "1.3rem" }
+                  }}
                     >
                 {t("Please scan warehouse qr code")}
               </Typography>
@@ -541,4 +605,4 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
   );
 };
 
-export default PutAwayModal;
+export default PutAwayModal;
\ No newline at end of file