diff --git a/frontend/src/components/cards/MiniCardComponent.js b/frontend/src/components/cards/MiniCardComponent.js
index ef40dc7c..2ca58e88 100644
--- a/frontend/src/components/cards/MiniCardComponent.js
+++ b/frontend/src/components/cards/MiniCardComponent.js
@@ -13,7 +13,7 @@ const useStyles = createUseStyles((theme) => ({
         maxWidth: 350,
         minWidth:210, // resizing the card min width
         maxHeight:150,
-        marginTop:50,
+        // marginTop:50,
         // padding: '8px 16px 8px 16px',
         '&:hover': {
             borderColor: theme.uniformStyle.color.tableHeaderColor ,
diff --git a/frontend/src/components/productGrid/ProductGridComponent.js b/frontend/src/components/productGrid/ProductGridComponent.js
index 1f82f0bc..72d0a202 100644
--- a/frontend/src/components/productGrid/ProductGridComponent.js
+++ b/frontend/src/components/productGrid/ProductGridComponent.js
@@ -79,14 +79,15 @@ function ProductGridComponent() {
 // Card component style properties
 const useStyles = createUseStyles({
     cardRow: {
-        marginTop: 30,
+        marginTop:-50,
         '@media (max-width: 768px)': {
-            marginTop: 0
+            // marginTop: 30
         }
     },
     miniCardContainer: {
          marginRight: 30,
          marginLeft:30,
+         marginTop:30,
         '@media (max-width: 768px)': {
             marginTop: 30,
             maxWidth: 'none',