diff --git a/src/components/PutAwayScan/PutAwayModal.tsx b/src/components/PutAwayScan/PutAwayModal.tsx
index 11f89ad..650ef3b 100644
--- a/src/components/PutAwayScan/PutAwayModal.tsx
+++ b/src/components/PutAwayScan/PutAwayModal.tsx
@@ -10,6 +10,7 @@ import {
   TextField,
   Typography,
   Paper,
+  Divider,
 } from "@mui/material";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import ReactQrCodeScanner, {
@@ -25,7 +26,7 @@ import {
 import { StockInLine } from "@/app/api/po";
 import { WarehouseResult } from "@/app/api/warehouse";
 // import { QrCodeInfo } from "@/app/api/qrcde";
-import { Check, QrCode } from "@mui/icons-material";
+import { Check, QrCode, ErrorOutline, CheckCircle } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import { useSearchParams } from "next/navigation";
 import { useQrCodeScannerContext } from "../QrCodeScannerProvider/QrCodeScannerProvider";
@@ -110,6 +111,11 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
   });
   const errors = formProps.formState.errors;
 
+  useEffect(() => {
+    if (itemDetail) {
+      startScanner();
+    }
+  }, [itemDetail])
 
   const closeHandler = useCallback<NonNullable<ModalProps["onClose"]>>(
     (...args) => {
@@ -130,6 +136,12 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
     [],
   );
 
+  const startScanner = () => {
+    // setIsOpenScanner(true);
+    scanner.startScan();
+    console.log("%c Scanning started ", "color:cyan");
+  };
+
   const openScanner = () => {
     setIsOpenScanner(true);
     scanner.startScan();
@@ -138,7 +150,7 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
 
   useEffect(() => {
     if (warehouseId > 0) {  // Scanned Warehouse
-      if (isOpenScanner) {
+      if (scanner.isScanning) {
         setIsOpenScanner(false);
         setVerified(true);
         scanner.stopScan();
@@ -288,38 +300,109 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
                     <Typography variant="h4">
                       處理上架
                     </Typography>
-
                     <Grid item xs={12}>
                       <StockInForm itemDetail={itemDetail} disabled={true} putawayMode={true}/>
                     </Grid>
-                    <Paper sx={{ padding: 2, width: "100%" }}>
-                      <Grid container spacing={2}>
-                        <Grid item xs={3}>
-                          <TextField
-                            type="number" // TODO fix the "e" input
-                            label={t("putQty")}
-                            fullWidth
-                            defaultValue={itemDetail.demandQty}
-                            onChange={(e) => {
-                              const value = e.target.value;
-                              validateQty(Number(value));
-                              setPutQty(Number(value));
-                            }}
-                            // onBlur={(e) => {
-                            //   const value = e.target.value;
-                            //   setPutQty(Number(value));
-                            //   validateQty(Number(value));
-                            // }}
-                            // disabled={true}
-                            // {...register("acceptedQty", {
-                            //   required: "acceptedQty required!",
-                            // })}
-                            error={qtyError !== ""}
-                            helperText={qtyError}
-                          />
+                    <Paper sx={{ 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"}}/>
+                                  <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: 'black' }} noWrap>
+                                    掃瞄完成
+                                  </Typography>
+                                </>
+                              ) : (
+                                <>
+                                  <ErrorOutline sx={{color:"red", fontSize: "35px"}}/>
+                                  <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>
+                                {`${warehouseId > 0 ? warehouse.find((w) => w.id == warehouseId)?.name
+                                  :  warehouse.find((w) => w.id == 3)?.name}`}
+                              </Typography>
+                            </Grid>
+
+                          </Box>
                         </Grid>
                         <Grid item xs={3}>
-                          <Button
+                          <Box sx={{ height: '100%', p: 2, textAlign: 'center' }}>
+                            <TextField
+                              type="number" // TODO fix the "e" input
+                              label={t("putQty")}
+                              fullWidth
+                              sx={{fontSize: "25px", height: "100%"}}
+                              defaultValue={itemDetail.demandQty}
+                              onChange={(e) => {
+                                const value = e.target.value;
+                                validateQty(Number(value));
+                                setPutQty(Number(value));
+                              }}
+                              // 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: 2,
+                              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 />}
+                              color="primary"
+                              // sx={{ mx: 3, minWidth: "120px", height: "120px",
+                              //   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={formProps.handleSubmit()}
+                              disabled={!verified}
+                            >
+                              {t("confirm putaway")}
+                            </Button>
+                          </Box>
+                          {/* <Button
                             id="scanWarehouse"
                             variant="contained"
                             startIcon={<QrCode />}
@@ -335,49 +418,8 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
                             onClick={openScanner}>
 
                             {t("scan warehouse")}
-                          </Button>
-                        </Grid>
-                        <Grid item xs={3}>
-                          <TextField
-                            key={warehouseId}
-                            label={t("warehouse")}
-                            fullWidth
-                            disabled={true}
-                            value={
-                              warehouseId > 0 ? warehouse.find((w) => w.id == warehouseId)?.name
-                                :  warehouse.find((w) => w.id == 3)?.name
-                                // :  warehouse.find((w) => w.id == itemDetail.defaultWarehouseId)?.name  //TODO fix empty
-                            }
-                            // {...register("acceptedQty", {
-                            //   required: "acceptedQty required!",
-                            // })}
-                            error={!verified}
-                            helperText={verified ? "掃碼完成" : "等待掃碼"}
-                          />
-                        </Grid>
-                        {/* <Stack direction="row" justifyContent="flex-end" sx={{ mt: 1 }}> */}
-                        <Grid item xs={3}>
-                          <Button
-                            id="putawaySubmit"
-                            type="submit"
-                            variant="contained"
-                            startIcon={<Check />}
-                            color="primary"
-                            // sx={{ mx: 3, minWidth: "120px", height: "120px",
-                            //   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={formProps.handleSubmit()}
-                            disabled={!verified}
-                          >
-                            {t("confirm putaway")}
-                          </Button>
+                          </Button> */}
                         </Grid>
-                        
                       </Grid>
                     </Paper>
                   </Stack>