update

src/pages/Home.jsx

@@ -155,8 +155,9 @@ const toast = useToast()
 
   return (
     <Box 
+      
       minH={"100vh"}
-      bg={colorMode === "light" ? "#fff" : "none"}
+      bg={colorMode === "light" ? "#f5f5f7" : "none"}
       backgroundImage={{base:colorMode !== "light" ? `url(${bannerImageMobile})` : "none",md:colorMode !== "light" ? `url(${bannerImage})` : "none"}}
       backgroundSize="contain"
       backgroundRepeat="no-repeat">
@@ -288,12 +289,11 @@ const toast = useToast()
         <AmountCard />
         <Container maxW="6xl" p={{base: "2rem 1rem",md:"4rem 1rem"}}>
           <Box
-
-boxShadow={
-  colorMode === "light"
-    ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"
-    : "none"
-}
+            boxShadow={
+              colorMode === "light"
+                ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"
+                : "none"
+            }
             p={{base :1,md : 5}}
             rounded={10}
             bg={colorMode === "light" ? "#DEDBEB47" : "#232127"}

src/pages/MainNet.jsx

@@ -122,6 +122,7 @@ const MainNet = () => {
     <FullScreenLoaader />
   ) : (
     <Box
+      bg={colorMode === "light" ? "#f5f5f7" : "none"}
       minH={"100vh"}
       {...OPACITY_ON_LOAD}
       p={"6rem 0 4rem 0"}

src/pages/SubnetId.jsx

@@ -114,6 +114,7 @@ const SubnetId = () => {
   }));
   return (
     <Box
+    bg={colorMode === "light" ? "#f5f5f7" : "none"}
       p={"6rem 0 4rem 0"}
       backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
       position={"relative"}

src/pages/Transaction/TransactionDetails.jsx

@@ -130,6 +130,7 @@ const TransactionDetails = () => {
   return (
     <>
       <Box
+        bg={colorMode === "light" ? "#f5f5f7" : "none"}
         backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
         backgroundSize="cover"
         backgroundRepeat="no-repeat"