diff --git a/inji-web/src/components/atoms/Card.js b/inji-web/src/components/atoms/Card.js
index 0ef22925..f70925db 100644
--- a/inji-web/src/components/atoms/Card.js
+++ b/inji-web/src/components/atoms/Card.js
@@ -15,7 +15,7 @@ export default function InteractiveCard({ id, title, imageURL, actionIcon, onCli
             sx={{
                 '&:hover': {boxShadow: 'md', borderColor: 'neutral.outlinedHoverBorder'},
                 cursor: clickable ? 'pointer' : 'auto',
-                background: '#FFFFFF 0% 0% no-repeat padding-box',
+                background: '#F0F4F8 0% 0% no-repeat padding-box',
                 boxShadow: '0px 3px 6px #18479329',
                 borderRadius: '6px',
                 opacity: 1,
diff --git a/inji-web/src/components/molecules/GridComponent.js b/inji-web/src/components/molecules/GridComponent.js
index 0e925b19..656626c0 100644
--- a/inji-web/src/components/molecules/GridComponent.js
+++ b/inji-web/src/components/molecules/GridComponent.js
@@ -20,7 +20,7 @@ export default function GridComponent({cards}) {
     <Box >
       <Grid
           container
-          spacing={{ xs: 2, md:1 }}
+          spacing={{ xs: 2, md:2 }}
           direction="row"
       >
           {cards.map((card, index) => (