diff --git a/src/assets/style/styles.css b/src/assets/style/styles.css
index 20a98d1..a7e69c8 100644
--- a/src/assets/style/styles.css
+++ b/src/assets/style/styles.css
@@ -29,4 +29,21 @@ input[type=number] {
 } */
 /* main{
     padding-top: 43px;
-} */
\ No newline at end of file
+} */
+
+img
+{
+  -webkit-transition: all 0.2s
+}
+/*Filter styles*/
+.saturate {-webkit-filter: saturate(3);}
+.grayscale {-webkit-filter: grayscale(100%)  brightness(1.5);}
+.contrast {-webkit-filter: contrast(10%);}
+.brightness {-webkit-filter: brightness(1.2);}
+.blur {-webkit-filter: blur(3px);}
+.invert {-webkit-filter: invert(100%);}
+.sepia {-webkit-filter: sepia(100%);}
+.huerotate {-webkit-filter: hue-rotate(180deg);}
+.rss.opacity {-webkit-filter: opacity(50%);}
+
+img:hover{-webkit-filter:none;}
\ No newline at end of file
diff --git a/src/pages/Payment/index.js b/src/pages/Payment/index.js
index 73d2079..2e88455 100644
--- a/src/pages/Payment/index.js
+++ b/src/pages/Payment/index.js
@@ -69,13 +69,13 @@ const Index = () => {
         setTotalAmount(location.state?.amount ?? 2000)
         getAvailablePayment()
         getTransactionId()
-        
+
     }, []);
 
-    useEffect(()=>{
-        if(appIds!=[] && appIds.length>0)
+    useEffect(() => {
+        if (appIds != [] && appIds.length > 0)
             getAppList();
-    },[appIds]);
+    }, [appIds]);
 
     // const handleClose = () => {
     //     // handleReset()
@@ -346,16 +346,16 @@ const Index = () => {
     }
 
     useEffect(() => {
-        if(availableMethods.length > 0 && Object.keys(transactionData).length > 0){
+        if (availableMethods.length > 0 && Object.keys(transactionData).length > 0) {
             setOnReady(true)
         }
-    }, [transactionData,availableMethods]);
+    }, [transactionData, availableMethods]);
 
     const getAppList = () => {
         HttpUtils.post({
             url: UrlUtils.PAYMENT_APP_LIST,
-            params:{
-                appIds:appIds
+            params: {
+                appIds: appIds
             },
             onSuccess: (responseData) => {
                 setItemList(responseData)
@@ -363,14 +363,18 @@ const Index = () => {
         });
     }
 
-    const selectedPaymentMethodHandle = (method) => () =>{
+    const selectedPaymentMethodHandle = (method) => () => {
         setSelectedPaymentMethod(method);
     };
-    
-    const confirmPaymentHandle = () => () =>{
-        setConfirmPayment(true);    
+
+    const confirmPaymentHandle = () => () => {
+        setConfirmPayment(true);
     };
 
+    const getMethodImgClass = (method) => {
+        return selectedPaymentMethod == method || selectedPaymentMethod == "" ? "" : "grayscale";
+    }
+
     return (
         <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
             <Grid item xs={12} width="100%">
@@ -381,9 +385,9 @@ const Index = () => {
                 </div>
             </Grid>
             {/*row 1*/}
-            <Grid item xs={12} md={12}  width="100%">
+            <Grid item xs={12} md={12} width="100%">
                 <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
-                    <Grid item xs={12} md={5}  style={{ height: '100%' }}>
+                    <Grid item xs={12} md={5} style={{ height: '100%' }}>
                         <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
                             <DataGrid
                                 recordList={itemList}
@@ -400,7 +404,7 @@ const Index = () => {
                                             交易參考號: {transactionData.transactionid}
                                         </Typography>
 
-                                        <Typography variant="h5" sx={{  textAlign: "left" }}>
+                                        <Typography variant="h5" sx={{ textAlign: "left" }}>
                                             支付金額: HK$ {FormatUtils.currencyFormat(totalAmount)}
                                         </Typography>
 
@@ -415,86 +419,87 @@ const Index = () => {
                                     </Grid>
                                     <Grid item xs={12} md={12}>
                                         <Grid container >
-                                        <Grid item>
-                                            <Typography variant="h5" sx={{  textAlign: "left" }}>
-                                            付款金額:
-                                            </Typography>
-                                        </Grid>
-                                        <Grid item>
-                                            <Typography variant="h5" sx={{  textAlign: "left" }}>
-                                            {"HK$ "+FormatUtils.currencyFormat(totalAmount)}
-                                            </Typography>
-                                        </Grid>
+                                            <Grid item>
+                                                <Typography variant="h5" sx={{ textAlign: "left" }}>
+                                                    付款金額:
+                                                </Typography>
+                                            </Grid>
+                                            <Grid item>
+                                                <Typography variant="h5" sx={{ textAlign: "left" }}>
+                                                    {"HK$ " + FormatUtils.currencyFormat(totalAmount)}
+                                                </Typography>
+                                            </Grid>
                                         </Grid>
                                     </Grid>
-                                    {availableMethods.length > 0?
+
+                                    {availableMethods.length > 0 ?
                                         !onReady ?
-                                        <LoadingComponent />:
+                                            <LoadingComponent /> :
                                             <Grid item xs={12} md={12}>
                                                 <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
                                                     <Grid item>
-                                                        <Typography variant="h5" sx={{  textAlign: "left" }}>
-                                                        請選擇付款方式:
+                                                        <Typography variant="h5" sx={{ textAlign: "left" }}>
+                                                            請選擇付款方式:
                                                         </Typography>
                                                     </Grid>
                                                     <Grid item>
                                                         <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={fpsStatus.active === "N"}>
-                                                        <img src={FpsIcon} width="80" height="80" alt="FPS"></img>
+                                                            <img className={getMethodImgClass("FPS")} src={FpsIcon} width="80" height="80" alt="FPS"></img>
                                                         </Button>
                                                     </Grid>
                                                     <Grid item>
                                                         <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={creditCardStatus.active === "N"}>
-                                                        <img src={VisaIcon} width="80" height="80" alt="Visa"></img>
+                                                            <img className={getMethodImgClass("Visa")} src={VisaIcon} width="80" height="80" alt="Visa"></img>
                                                         </Button>
                                                     </Grid>
                                                     <Grid item>
                                                         <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={creditCardStatus.active === "N"}>
-                                                        <img src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
+                                                            <img className={getMethodImgClass("Mastercard")} src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
                                                         </Button>
                                                     </Grid>
                                                     <Grid item>
                                                         <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={unionPayStatus.active === "N"}>
-                                                        <img src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
+                                                            <img className={getMethodImgClass("UnionPay")} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
                                                         </Button>
                                                     </Grid>
                                                     <Grid item>
                                                         <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={unionPayStatus.active === "N"}>
-                                                        <img src={JcbIcon} width="80" height="80" alt="JCB"></img>
+                                                            <img className={getMethodImgClass("JCB")} src={JcbIcon} width="80" height="80" alt="JCB"></img>
                                                         </Button>
                                                     </Grid>
                                                     <Grid item>
                                                         <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={ppsStatus.active === "N"}>
-                                                        <img src={PpsIcon} width="80" height="80" alt="PPS"></img>
+                                                            <img className={getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img>
                                                         </Button>
                                                     </Grid>
                                                 </Grid>
-                                                {selectedPaymentMethod !=""?
+                                                {selectedPaymentMethod != "" ?
                                                     <Grid item xs={12} md={12}>
                                                         <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                                             <Grid item>
-                                                                <Typography variant="h5" sx={{  textAlign: "left" }}>
-                                                                已選擇付款方式:
+                                                                <Typography variant="h5" sx={{ textAlign: "left" }}>
+                                                                    已選擇付款方式:
                                                                 </Typography>
                                                             </Grid>
                                                             <Grid item>
-                                                                <Typography variant="h5" sx={{  textAlign: "left" }}>
+                                                                <Typography variant="h5" sx={{ textAlign: "left" }}>
                                                                     {selectedPaymentMethod}
                                                                 </Typography>
                                                             </Grid>
                                                         </Grid>
                                                     </Grid>
-                                                : null}
+                                                    : null}
                                                 <Button variant="contained" size="large" color="success" onClick={confirmPaymentHandle()} disabled={selectedPaymentMethod === ""}>
                                                     確認
                                                 </Button>
-                                            </Grid>:
-                                            <Grid container direction="row" justifyContent="center" alignItems="center">
-                                                <Typography sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
+                                            </Grid> :
+                                        <Grid container direction="row" justifyContent="center" alignItems="center">
+                                            <Typography sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
                                                 付款功能現在不可用。
-                                                </Typography>
-                                            </Grid>
+                                            </Typography>
+                                        </Grid>
                                     }
-                                   
+
                                 </center>
                             </Grid>
                             {/* <MultiPaymentWindow open={open}