diff --git a/src/data/index.ts b/src/data/index.ts
new file mode 100644
index 0000000..85eae14
--- /dev/null
+++ b/src/data/index.ts
@@ -0,0 +1,82 @@
+export const dataSource = [
+  {
+    productMeta: {
+      title: 'Maserati Aventador',
+      desc: 'Id repellendus tempore facere eos unde praesentium hic aspernatur dolores.',
+      imageUrl:
+        'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+      price: '340.28',
+    },
+    id: 'e3b2ebd',
+  },
+  {
+    productMeta: {
+      title: 'Dodge Expedition',
+      desc: 'Et et laborum eveniet nam voluptatum consequatur architecto.',
+      imageUrl:
+        'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+      price: '202.18',
+    },
+    id: '23f99f0',
+  },
+  {
+    productMeta: {
+      title: 'Hyundai Accord',
+      desc: 'Ut iure repellat illo.',
+      imageUrl:
+        'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+      price: '863.65',
+    },
+    id: '1afd20e',
+  },
+  {
+    productMeta: {
+      title: 'Dodge Challenger',
+      desc: 'Inventore reprehenderit animi suscipit explicabo maxime omnis perspiciatis ut.',
+      imageUrl:
+        'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+      price: '512.95',
+    },
+    id: 'de3b830',
+  },
+  {
+    productMeta: {
+      title: 'Volvo Fiesta',
+      desc: 'Optio quae labore sint.',
+      imageUrl:
+        'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+      price: '874.02',
+    },
+    id: '23b7226',
+  },
+  {
+    productMeta: {
+      title: 'Cadillac Challenger',
+      desc: 'Nihil vel praesentium reiciendis praesentium quo.',
+      imageUrl:
+        'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+      price: '611.85',
+    },
+    id: 'efbeaab',
+  },
+  {
+    productMeta: {
+      title: 'Toyota Mustang',
+      desc: 'Aliquam quo et earum commodi porro commodi dolores voluptatem recusandae.',
+      imageUrl:
+        'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+      price: '779.00',
+    },
+    id: '629e50f',
+  },
+  {
+    productMeta: {
+      title: 'Porsche Roadster',
+      desc: 'Perspiciatis dolores dolorum unde aut ullam eveniet repellendus.',
+      imageUrl:
+        'https://images.pexels.com/photos/1148955/pexels-photo-1148955.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+      price: '486.57',
+    },
+    id: '4c0af1e',
+  },
+];
diff --git a/src/scenes/Dashboard/fragments/Banner.tsx b/src/scenes/Dashboard/fragments/Banner.tsx
new file mode 100644
index 0000000..abe0ed4
--- /dev/null
+++ b/src/scenes/Dashboard/fragments/Banner.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Box, Button, Typography, useTheme } from '@mui/material';
+
+import '../dashboard.styles.css';
+
+const Banner = () => {
+  const theme = useTheme();
+  const classes = {
+    bannerContainer: {
+      height: '1007.93px',
+      background: "url('/assets/heroImage.png')",
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      opacity: '0.85',
+      position: 'relative',
+      zIndex: 1,
+    },
+    bannerAdv: {
+      letterSpacing: '3px',
+      fontWeight: '600',
+      fontSize: '16px',
+      '&.MuiTypography-subtitle1': {},
+    },
+    bannerTitle: {
+      color: '#B88E2F',
+      fontSize: '52px',
+      fontStyle: 'normal',
+      fontWeight: '700',
+      lineHeight: '65px',
+      '&.MuiTypography-h6': {},
+    },
+    bannerDesc: {
+      width: '546px',
+      fontSize: '18px',
+      fontWeight: '500',
+      lineHeight: '24px',
+      letterSpacing: '1.2px',
+      m: '1rem 0',
+      '&.MuiTypography-body1': {},
+    },
+    button: {
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.primary.main,
+      p: '1.7rem 4rem',
+      width: '190px',
+      height: '24px',
+      textAlign: 'center',
+      borderRadius: 'none',
+      '&:hover': {
+        backgroundColor: theme.palette.secondary[400],
+        color: theme.palette.primary.main,
+      },
+    },
+  };
+  return (
+    <Box component='main' sx={classes.bannerContainer}>
+      <Box
+        display='flex'
+        flexDirection='column'
+        gap='1.5rem'
+        className='banner-box'
+        sx={{ backgroundColor: theme.palette.secondary[100] }}
+      >
+        <Box width='559px'>
+          <Typography variant='subtitle1' sx={classes.bannerAdv}>
+            New Arrival
+          </Typography>
+          <Typography variant='h6' sx={classes.bannerTitle}>
+            Discover Our New Collection
+          </Typography>
+          <Typography variant='body1' className='banner-main__desc' sx={classes.bannerDesc}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec
+            ullamcorper mattis.
+          </Typography>
+        </Box>
+
+        <Button variant='contained' size='small' sx={classes.button}>
+          Buy Now
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default Banner;
diff --git a/src/scenes/Dashboard/fragments/FeaturedProducts.tsx b/src/scenes/Dashboard/fragments/FeaturedProducts.tsx
new file mode 100644
index 0000000..cf807c7
--- /dev/null
+++ b/src/scenes/Dashboard/fragments/FeaturedProducts.tsx
@@ -0,0 +1,126 @@
+import {
+  Box,
+  Card,
+  CardMedia,
+  CardContent,
+  Typography,
+  CardActions,
+  Button,
+  Container,
+  useTheme,
+  Hidden,
+  Fade,
+  Backdrop,
+} from '@mui/material';
+import { dataSource } from '../../../data';
+import { useState } from 'react';
+
+const FeaturedProducts = () => {
+  const theme = useTheme();
+  const [hoveredCard, setHoveredCard] = useState<string | null>(null);
+
+  const handleCardHover = (cardId: string) => {
+    setHoveredCard(cardId);
+  };
+
+  const handleCardLeave = () => {
+    setHoveredCard(null);
+  };
+
+  const classes = {
+    card: {
+      maxWidth: '285px',
+      maxHeight: '446px',
+      gap: '1rem',
+      m: '1rem 0.5rem',
+      borderRadius: 'none',
+    },
+    cardMedia: {
+      width: '285px',
+      height: '301px',
+      flexShrink: '0',
+    },
+    cardContent: {
+      width: '285px',
+      height: '145px',
+      flexShrink: '0',
+      backgroundColor: 'var(--color-light-bg, #F4F5F7)',
+    },
+    title: {
+      fontSize: '40px',
+      fontStyle: 'normal',
+      fontWeight: '700',
+      lineHeight: '120%',
+      m: '1.5rem',
+    },
+    button: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.secondary.main,
+      width: '202px',
+      height: '48px',
+      textAlign: 'center',
+      border: `1px solid ${theme.palette.secondary[200]}`,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.secondary.main[600],
+      },
+    },
+  };
+
+  return (
+    <Box m='3.5rem 2.5rem'>
+      <Typography variant='h4' textAlign='center' sx={classes.title}>
+        Our Products
+      </Typography>
+      <Box display='flex' flexWrap='wrap' justifyContent='flex-start' gap='42px'>
+        {dataSource.map((item) => (
+          <Box
+            key={item.id}
+            position='relative'
+            onMouseEnter={() => handleCardHover(item.id)}
+            onMouseLeave={handleCardLeave}
+          >
+            <Card sx={classes.card} elevation={0}>
+              <CardMedia
+                component='img'
+                alt='green iguana'
+                image={item?.productMeta?.imageUrl}
+                sx={classes.cardMedia}
+              />
+              <CardContent sx={classes.cardContent}>
+                <Typography gutterBottom variant='h5' component='div'>
+                  {item?.productMeta?.title}
+                </Typography>
+                <Typography variant='body2' color='text.secondary'>
+                  {item?.productMeta?.desc}
+                </Typography>
+              </CardContent>
+            </Card>
+            <Fade in={hoveredCard === item.id}>
+              <Button
+                variant='contained'
+                size='small'
+                sx={{
+                  ...classes.button,
+                  position: 'absolute',
+                  top: '50%',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)',
+                }}
+              >
+                Add to cart
+              </Button>
+            </Fade>
+          </Box>
+        ))}
+      </Box>
+      <Box display='flex' justifyContent='center' m='2.5rem 0'>
+        <Button variant='contained' size='small' sx={classes.button}>
+          Show more
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default FeaturedProducts;
diff --git a/src/scenes/Dashboard/index.tsx b/src/scenes/Dashboard/index.tsx
index d9301c9..58a8ca4 100644
--- a/src/scenes/Dashboard/index.tsx
+++ b/src/scenes/Dashboard/index.tsx
@@ -1,85 +1,13 @@
-import React from 'react';
-import { Box, Button, Typography, useTheme } from '@mui/material';
-
+import Banner from './fragments/Banner';
+import FeaturedProducts from './fragments/FeaturedProducts';
 import './dashboard.styles.css';
 
 const Dashboard = () => {
-  const theme = useTheme();
-  const classes = {
-    bannerContainer: {
-      height: '1007.93px',
-      background: "url('/assets/heroImage.png')",
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-      opacity: '0.85',
-      position: 'relative',
-      zIndex: 1,
-    },
-    bannerAdv: {
-      letterSpacing: '3px',
-      fontWeight: '600',
-      fontSize: '16px',
-      '&.MuiTypography-subtitle1': {},
-    },
-    bannerTitle: {
-      color: '#B88E2F',
-      fontSize: '52px',
-      fontStyle: 'normal',
-      fontWeight: '700',
-      lineHeight: '65px',
-      '&.MuiTypography-h6': {},
-    },
-    bannerDesc: {
-      width: '546px',
-      fontSize: '18px',
-      fontWeight: '500',
-      lineHeight: '24px',
-      letterSpacing: '1.2px',
-      m: '1rem 0',
-      '&.MuiTypography-body1': {},
-    },
-    button: {
-      backgroundColor: theme.palette.secondary.main,
-      color: theme.palette.primary.main,
-      p: '1.7rem 4rem',
-      width: '190px',
-      height: '24px',
-      textAlign: 'center',
-      borderRadius: 'none',
-      '&:hover': {
-        backgroundColor: theme.palette.secondary[400],
-        color: theme.palette.primary.main,
-      },
-    },
-  };
   return (
-    <Box component='main' sx={classes.bannerContainer}>
-      <Box
-        display='flex'
-        flexDirection='column'
-        gap='1.5rem'
-        className='banner-box'
-        sx={{ backgroundColor: theme.palette.secondary[100] }}
-      >
-        <Box width='559px'>
-          <Typography variant='subtitle1' sx={classes.bannerAdv}>
-            New Arrival
-          </Typography>
-          <Typography variant='h6' sx={classes.bannerTitle}>
-            Discover Our New Collection
-          </Typography>
-          <Typography variant='body1' className='banner-main__desc' sx={classes.bannerDesc}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec
-            ullamcorper mattis.
-          </Typography>
-        </Box>
-
-        <Button variant='contained' size='small' sx={classes.button}>
-          Buy Now
-        </Button>
-      </Box>
-    </Box>
+    <>
+      <Banner />
+      <FeaturedProducts />
+    </>
   );
 };
 
diff --git a/src/styles/global.css b/src/styles/global.css
index 059c7bb..ec81dd6 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -9,8 +9,9 @@
 }
 
 :root {
-  --primary: '#B88E2F';
-  --font-color: '#333';
+  --primary: #b88e2f;
+  --font-color: #333;
+  --color-light-bg: #f4f5f7;
 }
 
 html,