diff --git a/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx b/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
index c9bfda4..f7f8736 100644
--- a/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
@@ -1,5 +1,5 @@
 import { Box, Button, Image, Text } from "@chakra-ui/react";
-import React from "react";
+import React, { useState } from "react";
 import parkeAvenue from "../../assets/parkeAvenue.png";
 import bewakoof from "../../assets/bewakoof.png";
 import hm from "../../assets/HM.png";
@@ -25,25 +25,7 @@ import {
   FaPlane,
   FaHeart,
 } from "react-icons/fa";
-
-const tabData = [
-  { label: "All", icon: FaTv, content: <Cards /> },
-  { label: "Electronics", icon: FaTv, content: "Content for Electronics" },
-  {
-    label: "Ecommerce",
-    icon: FaShoppingCart,
-    content: "Content for Ecommerce",
-  },
-  { label: "Lifestyle", icon: FaHeart, content: "Content for Lifestyle" },
-  {
-    label: "Food & Beverages",
-    icon: FaUtensils,
-    content: "Content for Food & Beverages",
-  },
-  { label: "Clothing", icon: FaTshirt, content: "Content for Clothing" },
-  { label: "Travel", icon: FaPlane, content: "Content for Travel" },
-  { label: "Lifestyle", icon: FaHeart, content: "Content for Lifestyle" },
-];
+import { useNavigate } from "react-router-dom";
 
 const brands = [
   {
@@ -81,6 +63,38 @@ const brands = [
 ];
 
 const BuyVoucher = () => {
+  const [selectedCard, setSelectedCard] = useState(null);
+  const navigate = useNavigate();
+
+  const handleSelectCard = (index) => {
+    setSelectedCard(index);
+  };
+
+  const handleProceed = () => {
+    if (selectedCard !== null) {
+      navigate("/buy-voucher-card"); // Proceed with the selected card
+    }
+  };
+
+  const tabData = [
+    { label: "All", icon: FaTv, content: <Cards handleSelectCard={handleSelectCard} handleProceed={handleProceed}  selectedCard={selectedCard} setSelectedCard={setSelectedCard} navigate={navigate} /> },
+    { label: "Electronics", icon: FaTv, content: "Content for Electronics" },
+    {
+      label: "Ecommerce",
+      icon: FaShoppingCart,
+      content: "Content for Ecommerce",
+    },
+    { label: "Lifestyle", icon: FaHeart, content: "Content for Lifestyle" },
+    {
+      label: "Food & Beverages",
+      icon: FaUtensils,
+      content: "Content for Food & Beverages",
+    },
+    { label: "Clothing", icon: FaTshirt, content: "Content for Clothing" },
+    { label: "Travel", icon: FaPlane, content: "Content for Travel" },
+    { label: "Lifestyle", icon: FaHeart, content: "Content for Lifestyle" },
+  ];
+
   return (
     <Box
       bgColor="#F3F3F9"
@@ -129,7 +143,16 @@ const BuyVoucher = () => {
           </TabPanels>
         </Tabs>
 
-        <Button bgColor="#6311CB" color="white" px="3rem" _hover={{bgColor:"#6311CB"}}>Proceed to add</Button>
+        <Button
+          bgColor="#6311CB"
+          color="white"
+          px="3rem"
+          _hover={{ bgColor: "#6311CB" }}
+          onClick={handleProceed}
+          mt={"3rem"}
+        >
+          Proceed to add
+        </Button>
       </Box>
     </Box>
   );
diff --git a/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllVouchers.jsx b/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllVouchers.jsx
index 45a8678..860abfd 100644
--- a/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllVouchers.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllVouchers.jsx
@@ -1,4 +1,4 @@
-import { Box, HStack, Text, VStack, Link } from "@chakra-ui/layout";
+import { Box, HStack, Text, VStack, Link , Grid} from "@chakra-ui/layout";
 import React, { useEffect, useRef, useState } from "react";
 import { OPACITY_ON_LOAD, SLIDE_IN_BOTTOM } from "../../../Layout/animations";
 import amazonVoucher from "../../../assets/amazonlogo.png";
@@ -107,154 +107,132 @@ const brandData = [
   },
 ];
 
-const MyVoucher = () => {
-  const [selectedCard, setSelectedCard] = useState(null); 
-  const navigate = useNavigate();
-
-  const handleSelectCard = (index) => {
-    setSelectedCard(index);
-  };
-
-  const handleProceed = () => {
-    if (selectedCard !== null) {
-      navigate("/buy-voucher-card"); // Proceed with the selected card
-    }
-  };
+const MyVoucher = ({handleSelectCard,handleProceed, selectedCard , setSelectedCard }) => {
+    const navigate = useNavigate();
 
   return (
-    <RadioGroup  onChange={handleSelectCard} value={selectedCard}>
-      <HStack
-        {...SLIDE_IN_BOTTOM}
-        mt={2}
-        gap={4}
-        flexWrap={"wrap"}
-        justifyContent={"center"}
-        w={"100%"}
-        h="100%"
-      >
-        {brandData?.map(
-          (
-            {
-              brandColor,
-              brandLogo,
-              cardWorth,
-              brandName,
-              caption,
-              dateTime,
-              brandColor1,
-              textColor,
-              capColor,
-            },
-            index
-          ) => {
-            const tiltRef = useRef(null);
-
-            useEffect(() => {
-              const node = tiltRef.current;
-              if (node) {
-                VanillaTilt.init(node, {
-                  max: 13,
-                  speed: 700,
-                  glare: true,
-                  scale: 1.05,
-                  "max-glare": 0.5,
-                  onEnter: () => {
-                    node.style.zIndex = 10; // Bring to top on hover
-                  },
-                  onLeave: () => {
-                    node.style.zIndex = 1; // Reset zIndex after hover
-                  },
-                });
+    <RadioGroup onChange={handleSelectCard} value={selectedCard}>
+    <Grid
+      {...SLIDE_IN_BOTTOM}
+      mt={2}
+      gap={4}
+      w="100%"
+      h="100%"
+    //   gridTemplateColumns="repeat(auto-fit, minmax(250px, 1fr))"
+    gridTemplateColumns="repeat(4, 1fr)"
+      justifyContent="center"
+    >
+      {brandData?.map(
+        (
+          {
+            brandColor,
+            brandLogo,
+            cardWorth,
+            brandName,
+            caption,
+            dateTime,
+            brandColor1,
+            textColor,
+            capColor,
+          },
+          index
+        ) => {
+          const tiltRef = useRef(null);
+  
+          useEffect(() => {
+            const node = tiltRef.current;
+            if (node) {
+              VanillaTilt.init(node, {
+                max: 13,
+                speed: 700,
+                glare: true,
+                scale: 1.05,
+                "max-glare": 0.5,
+                onEnter: () => {
+                  node.style.zIndex = 10; // Bring to top on hover
+                },
+                onLeave: () => {
+                  node.style.zIndex = 1; // Reset zIndex after hover
+                },
+              });
+            }
+            return () => {
+              if (node && node.vanillaTilt) {
+                node.vanillaTilt.destroy();
               }
-              return () => {
-                if (node && node.vanillaTilt) {
-                  node.vanillaTilt.destroy();
-                }
-              };
-            }, [tiltRef]);
-
-            return (
-              <Box
-                cursor={"grab"}
-                key={index}
-                ref={tiltRef}
-                overflow={"hidden"}
-                shadow={"md"}
-                w={{ base: "30%" }}
-                h={"100%"}
-                bg={`linear-gradient(179.86deg, ${brandColor} 0.12%, ${brandColor1} 231.77%)`}
-                rounded={10}
-                p={2}
+            };
+          }, [tiltRef]);
+  
+          return (
+            <Box
+              cursor="grab"
+              key={index}
+              ref={tiltRef}
+              overflow="hidden"
+              shadow="md"
+              w="100%"
+              h="100%"
+              bg={`linear-gradient(179.86deg, ${brandColor} 0.12%, ${brandColor1} 231.77%)`}
+              rounded={10}
+              p={2}
+            >
+              <HStack
+                pb={1}
+                justifyContent="space-between"
+                pt={3}
+                ps={3}
+                pe={3}
               >
-                <HStack
-                  pb={1}
-                  justifyContent={"space-between"}
-                  pt={3}
-                  ps={3}
-                  pe={3}
+                <Radio value={index} />
+                {/* <Image src={optifiiLogo} /> */}
+              </HStack>
+              <VStack
+                color={brandLogo === "hAndm" ? "#E2231A" : "#fff"}
+                gap={1}
+              >
+                <Image src={brandLogo} h="43px" />
+                <Text
+                  fontWeight={600}
+                  color={`${textColor}`}
+                  as="span"
+                  fontSize="sm"
                 >
-                  <Radio value={index} />
-                  {/* <Image src={optifiiLogo} /> */}
-                </HStack>
-                <VStack
-                  color={brandLogo === "hAndm" ? "#E2231A" : "#fff"}
-                  gap={1}
+                  30% cashback
+                </Text>
+                {/* <Text as={"span"} fontWeight={700} fontSize={"medium"}>
+                  $ {cardWorth}
+                </Text> */}
+                <Text
+                  align="center"
+                  as="span"
+                  fontWeight={600}
+                  fontSize="x-small"
+                  color={`${capColor}`}
                 >
-                  <Image src={brandLogo} h="43px" />
-                  <Text
-                    fontWeight={600}
-                    color={`${textColor}`}
-                    as={"span"}
-                    fontSize={"sm"}
-                  >
-                    30% cashback
+                  {caption}
+                </Text>
+                <Box
+                  display="flex"
+                  flexDirection="row"
+                  alignItems="center"
+                  w="100%"
+                  justifyContent="space-between"
+                >
+                  <Text color={`${textColor}`} fontSize="x-small">
+                    {brandName}
                   </Text>
-                  {/* <Text as={"span"} fontWeight={700} fontSize={"medium"}>
-                    $ {cardWorth}
-                  </Text> */}
-                  <Text
-                    align="center"
-                    as={"span"}
-                    fontWeight={600}
-                    fontSize={"x-small"}
-                    color={`${capColor}`}
-                  >
-                    {caption}
+                  <Text color={`${textColor}`} fontSize="x-small">
+                    {dateTime}
                   </Text>
-                  <Box
-                    display="flex"
-                    flexDirection="row"
-                    alignItems="center"
-                    w="100%"
-                    justifyContent="space-between"
-                  >
-                    <Text color={`${textColor}`}  fontSize={"x-small"}>
-                      {brandName}
-                    </Text>
-                    <Text color={`${textColor}`}  fontSize={"x-small"}>
-                      {dateTime}
-                    </Text>
-                  </Box>{" "}
-                  {/* Radio button for selecting the card */}
-                  {/* <Button
-                    bg={"#fff"}
-                    mt={2}
-                    px={5}
-                    py={1}
-                    border={"1px solid purple"}
-                    size={"xs"}
-                    onClick={handleProceed}
-                    isDisabled={selectedCard !== index} 
-                  >
-                    Buy Voucher
-                  </Button> */}
-                </VStack>
-              </Box>
-            );
-          }
-        )}
-      </HStack>
-    </RadioGroup>
+                </Box>
+              </VStack>
+            </Box>
+          );
+        }
+      )}
+    </Grid>
+  </RadioGroup>
+  
   );
 };