diff --git a/apps/storefront/src/pages/accountSetting/AccountSetting.tsx b/apps/storefront/src/pages/accountSetting/AccountSetting.tsx
index c7fbf652..d5081a2c 100644
--- a/apps/storefront/src/pages/accountSetting/AccountSetting.tsx
+++ b/apps/storefront/src/pages/accountSetting/AccountSetting.tsx
@@ -154,6 +154,8 @@ const AccountSetting = () => {
 
   const [accountSettings, setAccountSettings] = useState<any>({})
 
+  const [isVisible, setIsVisible] = useState<boolean>(false)
+
   const companyId = role === 3 && isAgenting ? +salesRepCompanyId : +companyInfoId
 
   const isBCUser = !isB2BUser || (role === 3 && !isAgenting)
@@ -276,6 +278,7 @@ const AccountSetting = () => {
           B3SStorage.delete('isFinshUpdate')
         }
         setLoadding(false)
+        setIsVisible(true)
       }
     }
 
@@ -491,11 +494,12 @@ const AccountSetting = () => {
   return (
     <B3Sping
       isSpinning={isloadding}
+      background="rgb(254, 249, 245)"
     >
       <Box
         sx={{
           width: `${isMobile ? '100%' : '35%'}`,
-          minHeight: '300px',
+          minHeight: `${isMobile ? '800px' : '300px'}`,
         }}
       >
         <B3CustomForm
@@ -511,6 +515,7 @@ const AccountSetting = () => {
             mt: '28px',
             mb: `${isMobile ? '20px' : '0'}`,
             width: '100%',
+            visibility: `${isVisible ? 'visible' : 'hidden'}`,
           }}
           onClick={handleAddUserClick}
           variant="contained"
diff --git a/apps/storefront/src/pages/quickorder/Quickorder.tsx b/apps/storefront/src/pages/quickorder/Quickorder.tsx
index 473420ce..c9e20686 100644
--- a/apps/storefront/src/pages/quickorder/Quickorder.tsx
+++ b/apps/storefront/src/pages/quickorder/Quickorder.tsx
@@ -17,10 +17,6 @@ import {
   useMobile,
 } from '@/hooks'
 
-import {
-  B3Sping,
-} from '@/components/spin/B3Sping'
-
 import QuickorderTable from './components/QuickorderTable'
 import QuickOrderFooter from './components/QuickOrderFooter'
 import {
@@ -44,77 +40,72 @@ const Quickorder = () => {
   const [checkedArr, setCheckedArr] = useState<CustomFieldItems>([])
 
   return (
-    <B3Sping
-      isSpinning={isRequestLoading}
+    <Box
+      sx={{
+        width: '100%',
+      }}
     >
       <Box
         sx={{
-          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
         }}
       >
-        <Box
+        <Grid
           sx={{
-            display: 'flex',
-            justifyContent: 'center',
+            m: 0,
+            width: '100%',
           }}
+          container
+          spacing={2}
         >
           <Grid
+            item
+            xs={isMobile ? 12 : 8}
             sx={{
-              m: 0,
-              width: '100%',
+              backgroundColor: '#ffffff',
             }}
-            container
-            spacing={2}
           >
-
-            <Grid
-              item
-              xs={isMobile ? 12 : 8}
-              sx={{
-                backgroundColor: '#ffffff',
-              }}
-            >
-              <QuickorderTable
-                setCheckedArr={setCheckedArr}
-                setIsRequestLoading={setIsRequestLoading}
-              />
-            </Grid>
-
-            <Grid
-              item
-              xs={isMobile ? 12 : 4}
-              sx={{
-                pt: !isMobile ? '0px !important' : '16px',
-                pl: isMobile ? '0px !important' : '16px',
-              }}
-            >
-              {
-                role !== 2 && (
-                  <QuickOrderPad />
-                )
-              }
-            </Grid>
+            <QuickorderTable
+              setCheckedArr={setCheckedArr}
+              setIsRequestLoading={setIsRequestLoading}
+              isRequestLoading={isRequestLoading}
+            />
           </Grid>
-        </Box>
-        <Box
-          sx={{
-            position: 'fixed',
-            bottom: 0,
-            left: 0,
-            width: '100%',
-            zIndex: '999',
-          }}
-        >
-          <QuickOrderFooter
-            role={role}
-            checkedArr={checkedArr}
-            isAgenting={isAgenting}
-            setIsRequestLoading={setIsRequestLoading}
-            isB2BUser={isB2BUser}
-          />
-        </Box>
+          <Grid
+            item
+            xs={isMobile ? 12 : 4}
+            sx={{
+              pt: !isMobile ? '0px !important' : '16px',
+              pl: isMobile ? '0px !important' : '16px',
+            }}
+          >
+            {
+              role !== 2 && (
+                <QuickOrderPad />
+              )
+            }
+          </Grid>
+        </Grid>
+      </Box>
+      <Box
+        sx={{
+          position: 'fixed',
+          bottom: 0,
+          left: 0,
+          width: '100%',
+          zIndex: '999',
+        }}
+      >
+        <QuickOrderFooter
+          role={role}
+          checkedArr={checkedArr}
+          isAgenting={isAgenting}
+          setIsRequestLoading={setIsRequestLoading}
+          isB2BUser={isB2BUser}
+        />
       </Box>
-    </B3Sping>
+    </Box>
   )
 }
 
diff --git a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
index f339d2b8..62f63bdb 100644
--- a/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
+++ b/apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
@@ -55,6 +55,10 @@ import B3FilterMore from '../../../components/filter/B3FilterMore'
 
 import QuickOrderCard from './QuickOrderCard'
 
+import {
+  B3Sping,
+} from '@/components'
+
 interface ListItem {
   [key: string]: string
 }
@@ -107,6 +111,7 @@ const StyledImage = styled('img')(() => ({
 interface QuickorderTableProps {
   setIsRequestLoading: Dispatch<SetStateAction<boolean>>,
   setCheckedArr: (values: CustomFieldItems) => void,
+  isRequestLoading: boolean,
 }
 
 const StyledTextField = styled(TextField)(() => ({
@@ -119,6 +124,7 @@ const StyledTextField = styled(TextField)(() => ({
 const QuickorderTable = ({
   setIsRequestLoading,
   setCheckedArr,
+  isRequestLoading,
 }: QuickorderTableProps) => {
   const paginationTableRef = useRef<PaginationTableRefProps | null>(null)
 
@@ -363,131 +369,133 @@ const QuickorderTable = ({
   ]
 
   return (
-
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-      }}
+    <B3Sping
+      isSpinning={isRequestLoading}
     >
-      <Typography
-        sx={{
-          fontSize: '24px',
-          height: '50px',
-        }}
-      >
-        {`${total} products`}
-      </Typography>
       <Box
         sx={{
-          marginBottom: '5px',
           display: 'flex',
-          '& label': {
-            zIndex: 0,
-          },
+          flexDirection: 'column',
         }}
       >
+        <Typography
+          sx={{
+            fontSize: '24px',
+            height: '50px',
+          }}
+        >
+          {`${total} products`}
+        </Typography>
         <Box
           sx={{
-            width: isMobile ? '100%' : '40%',
-            mr: '20px',
+            marginBottom: '5px',
             display: 'flex',
-            justifyContent: isMobile ? 'space-between' : 'flex-start',
+            '& label': {
+              zIndex: 0,
+            },
           }}
         >
-          <B3FilterSearch
-            h="48px"
-            searchBGColor="rgba(0, 0, 0, 0.06)"
-            handleChange={(e) => {
-              handleSearchProduct(e)
+          <Box
+            sx={{
+              width: isMobile ? '100%' : '40%',
+              mr: '20px',
+              display: 'flex',
+              justifyContent: isMobile ? 'space-between' : 'flex-start',
             }}
-          />
+          >
+            <B3FilterSearch
+              h="48px"
+              searchBGColor="rgba(0, 0, 0, 0.06)"
+              handleChange={(e) => {
+                handleSearchProduct(e)
+              }}
+            />
+
+            {
+              isMobile && (
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
+                <B3FilterMore
+                  fiterMoreInfo={[]}
+                  startPicker={{
+                    isEnabled: true,
+                    label: 'From',
+                    defaultValue: search?.beginDateAt || '',
+                    pickerKey: 'start',
+                  }}
+                  endPicker={{
+                    isEnabled: true,
+                    label: 'To',
+                    defaultValue: search?.endDateAt || '',
+                    pickerKey: 'end',
+                  }}
+                  isShowMore
+                  onChange={handleFilterChange}
+                />
+              </Box>
+              )
+            }
+
+          </Box>
 
           {
-            isMobile && (
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
+            !isMobile && (
+            <B3FilterPicker
+              handleChange={handlePickerChange}
+              xs={{
+                mt: 0,
+                height: '50px',
               }}
-            >
-              <B3FilterMore
-                fiterMoreInfo={[]}
-                startPicker={{
-                  isEnabled: true,
-                  label: 'From',
-                  defaultValue: search?.beginDateAt || '',
-                  pickerKey: 'start',
-                }}
-                endPicker={{
-                  isEnabled: true,
-                  label: 'To',
-                  defaultValue: search?.endDateAt || '',
-                  pickerKey: 'end',
-                }}
-                isShowMore
-                onChange={handleFilterChange}
-              />
-            </Box>
+              startPicker={{
+                isEnabled: true,
+                label: 'From',
+                defaultValue: distanceDay(30),
+                pickerKey: 'start',
+              }}
+              endPicker={{
+                isEnabled: true,
+                label: 'To',
+                defaultValue: distanceDay(),
+                pickerKey: 'end',
+              }}
+            />
             )
           }
 
         </Box>
 
-        {
-          !isMobile && (
-          <B3FilterPicker
-            handleChange={handlePickerChange}
-            xs={{
-              mt: 0,
-              height: '50px',
-            }}
-            startPicker={{
-              isEnabled: true,
-              label: 'From',
-              defaultValue: distanceDay(30),
-              pickerKey: 'start',
-            }}
-            endPicker={{
-              isEnabled: true,
-              label: 'To',
-              defaultValue: distanceDay(),
-              pickerKey: 'end',
-            }}
-          />
-          )
-        }
+        <B3PaginationTable
+          ref={paginationTableRef}
+          columnItems={columnItems}
+          rowsPerPageOptions={[12, 24, 36]}
+          getRequestList={getList}
+          searchParams={search}
+          isCustomRender={false}
+          showCheckbox
+          disableCheckbox={false}
+          hover
+          labelRowsPerPage="Items per page:"
+          showBorder={false}
+          requestLoading={setIsRequestLoading}
+          getSelectCheckbox={getSelectCheckbox}
+          itemIsMobileSpacing={0}
+          noDataText="No products found"
+          renderItem={(row: ProductInfoProps, index?: number, checkBox?: () => ReactElement) => (
+            <QuickOrderCard
+              item={row}
+              checkBox={checkBox}
+              currencyToken={currencyToken}
+              handleUpdateProductQty={handleUpdateProductQty}
+            />
+          )}
+        />
 
       </Box>
-
-      <B3PaginationTable
-        ref={paginationTableRef}
-        columnItems={columnItems}
-        rowsPerPageOptions={[12, 24, 36]}
-        getRequestList={getList}
-        searchParams={search}
-        isCustomRender={false}
-        showCheckbox
-        disableCheckbox={false}
-        hover
-        labelRowsPerPage="Items per page:"
-        showBorder={false}
-        requestLoading={setIsRequestLoading}
-        getSelectCheckbox={getSelectCheckbox}
-        itemIsMobileSpacing={0}
-        noDataText="No products found"
-        renderItem={(row: ProductInfoProps, index?: number, checkBox?: () => ReactElement) => (
-          <QuickOrderCard
-            item={row}
-            checkBox={checkBox}
-            currencyToken={currencyToken}
-            handleUpdateProductQty={handleUpdateProductQty}
-          />
-        )}
-      />
-
-    </Box>
-
+    </B3Sping>
   )
 }