diff --git a/src/App.css b/src/App.css
index 38caa2f..e2b0c51 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,19 +1,18 @@
 @import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 
 * {
   box-sizing: border-box;
   margin: 0;
-  padding: 0; 
+  padding: 0;
   /* font-family: "League Spartan", sans-serif !important; */
   /* font-family: "Poppins", sans-serif !important; */
   /* font-family: "Lato", sans-serif !important; */
 
-
   font-family: "Montserrat", sans-serif !important;
 }
 
@@ -27,8 +26,7 @@
   background: linear-gradient(
     to right,
     #7a45fb,
-    /* #764aaf67, */
-    #de41b5
+    /* #764aaf67, */ #de41b5
   ); /* Gradient background */
   -webkit-background-clip: text; /* Clip text to the background area */
   -webkit-text-fill-color: transparent; /* Fill text with the background color */
@@ -41,19 +39,23 @@
   /* background-color: black; */
   font-weight: 600 !important;
 }
-a.active{
+a.active {
   border-left: 2px solid #fff;
-  background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(55, 37, 234, 0.6) 0%,
+    rgba(94, 15, 205, 0.6) 100%
+  );
 }
 /* .chakra-accordion__item.css-1t7rcca:has(.active) {
   background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
   border-left: 2px solid #fff;
 } */
-.chakra-accordion__item .link:hover{
-  background:transparent !important;
+.chakra-accordion__item .link:hover {
+  background: transparent !important;
 }
-.chakra-accordion__item .active{
-  background:transparent !important;
+.chakra-accordion__item .active {
+  background: transparent !important;
   border: none;
 }
 .link {
@@ -126,7 +128,7 @@ a.active{
 }
 
 .primary-btn {
-  background-color: #210A33 !important;
+  background-color: #210a33 !important;
 }
 
 .team-slider .swiper-button-next:after {
@@ -180,7 +182,7 @@ a.active{
   animation-iteration-count: 1;
 }
 
-.table-scroll::-webkit-scrollbar{
+.table-scroll::-webkit-scrollbar {
   width: 2px !important;
   height: 10px !important;
 }
@@ -209,9 +211,6 @@ a.active{
   background: #0041189a;
 }
 
-
-
-
 #google_translate_element {
   /* display: none; Hide the default Google Translate dropdown */
 
@@ -234,10 +233,9 @@ a.active{
   color: transparent !important;
 }
 
-
 @keyframes text {
   0% {
-    color: #DE858E;
+    color: #de858e;
     /* margin-bottom: -40px; */
   }
   30% {
@@ -356,21 +354,17 @@ a.active{
   }
 }
 
-
-
-
-
 /* ========= [ switch BTN ============ */
 
-
-
-/* From Uiverse.io by Nawsome */ 
+/* From Uiverse.io by Nawsome */
 .switch {
   display: block;
   background-color: black;
   width: 85px;
   height: 115px;
-  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
+    inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c,
+    inset 0 0 2px 22px black;
   border-radius: 5px;
   padding: 20px;
   perspective: 700px;
@@ -407,13 +401,25 @@ a.active{
   height: 100%;
   position: relative;
   cursor: pointer;
-  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
+  background: linear-gradient(
+    #980000 0%,
+    #6f0000 30%,
+    #6f0000 70%,
+    #980000 100%
+  );
   background-repeat: no-repeat;
 }
 
 .switch .button::before {
   content: "";
-  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
+  background: linear-gradient(
+        rgba(255, 255, 255, 0.8) 10%,
+        rgba(255, 255, 255, 0.3) 30%,
+        #650000 75%,
+        #320000
+      )
+      50% 50%/97% 97%,
+    #b10000;
   background-repeat: no-repeat;
   width: 100%;
   height: 50px;
@@ -456,7 +462,15 @@ a.active{
   position: absolute;
   width: 100%;
   height: 100%;
-  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
+  background: linear-gradient(white, white) 50% 20%/5% 20%,
+    radial-gradient(
+        circle,
+        transparent 50%,
+        white 52%,
+        white 70%,
+        transparent 72%
+      )
+      50% 80%/33% 25%;
   background-repeat: no-repeat;
 }
 
@@ -466,7 +480,14 @@ a.active{
   position: absolute;
   width: 100%;
   height: 100%;
-  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
+  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%,
+    linear-gradient(
+        rgba(255, 255, 255, 0.5),
+        transparent 50%,
+        transparent 80%,
+        rgba(255, 255, 255, 0.5)
+      )
+      50% 50%/97% 97%;
   background-repeat: no-repeat;
 }
 
@@ -504,10 +525,14 @@ a.active{
   }
 }
 
-.react-tel-input .selected-flag:hover, .react-tel-input .selected-flag:focus {
+.react-tel-input .selected-flag:hover,
+.react-tel-input .selected-flag:focus {
   background-color: transparent !important;
 }
 .react-tel-input .selected-flag {
   background: transparent !important;
   padding: 0 0 0 16px !important;
 }
+
+
+/* Styling the scrollbar */
diff --git a/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx b/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx
index 3c0cbef..cbb1261 100644
--- a/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx
@@ -1,126 +1,192 @@
 import {
-    Box,
-    Icon,
-    Image,
-    Tab,
-    TabList,
-    TabPanel,
-    TabPanels,
-    Tabs,
-    Text,
-  } from "@chakra-ui/react";
-  import React, { useState } from "react";
-  import { OPACITY_ON_LOAD } from "../../Layout/animations";
-  import {
-    FaTv,
-    FaShoppingCart,
-    FaUtensils,
-    FaTshirt,
-    FaHeart,
-  } from "react-icons/fa";
-  import AllTemp from "./Tabs/AllTemp";
-  
-  const Preview = () => {
-    const [selectedCard, setSelectedCard] = useState(null);
-  
-    const handleCardSelect = (card) => {
-      setSelectedCard(card);
-    };
-  
-    const tabData = [
-      {
-        label: "All",
-        icon: FaTv,
-        content: (
-          <AllTemp
-            selectedCard={selectedCard}
-            handleCardSelect={handleCardSelect}
-          />
-        ),
-      },
-      { label: "Thank you", icon: FaTv, content: "Content for Electronics" },
-      {
-        label: "Best wishes",
-        icon: FaShoppingCart,
-        content: "Content for Ecommerce",
-      },
-      {
-        label: "Happy birthday",
-        icon: FaHeart,
-        content: "Content for Lifestyle",
-      },
-      {
-        label: "Congratulations",
-        icon: FaUtensils,
-        content: "Content for Food & Beverages",
-      },
-      { label: "Thank you", icon: FaTshirt, content: "Content for Clothing" },
-    ];
-  
-    return (
+  Box,
+  Button,
+  FormLabel,
+  Icon,
+  Image,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import {
+  FaTv,
+  FaShoppingCart,
+  FaUtensils,
+  FaTshirt,
+  FaHeart,
+} from "react-icons/fa";
+import AllTemp from "./Tabs/AllTemp";
+import amazon from "../../assets/amazonlogoF.png";
+
+const Preview = () => {
+  const [selectedCard, setSelectedCard] = useState(null);
+
+  const handleCardSelect = (card) => {
+    setSelectedCard(card);
+  };
+
+  const tabData = [
+    {
+      label: "All",
+      icon: FaTv,
+      content: (
+        <AllTemp
+          selectedCard={selectedCard}
+          handleCardSelect={handleCardSelect}
+        />
+      ),
+    },
+    { label: "Thank you", icon: FaTv, content: "Content for Electronics" },
+    {
+      label: "Best wishes",
+      icon: FaShoppingCart,
+      content: "Content for Ecommerce",
+    },
+    {
+      label: "Happy birthday",
+      icon: FaHeart,
+      content: "Content for Lifestyle",
+    },
+    {
+      label: "Congratulations",
+      icon: FaUtensils,
+      content: "Content for Food & Beverages",
+    },
+    { label: "Thank you", icon: FaTshirt, content: "Content for Clothing" },
+  ];
+
+  return (
+    <Box
+      bgColor="#F3F3F9"
+      h="100%"
+      {...OPACITY_ON_LOAD}
+      p={4}
+      overflowX={"scroll"}
+      display="flex"
+      justifyContent="space-between"
+      flexDirection="row"
+    >
+      <Box display="flex" w="60%" flexDirection="column">
+        <Text fontSize={"medium"} fontWeight={"semibold"}>
+          Select template
+        </Text>
+        <Text fontSize={"medium"} fontWeight={400}>
+          Category
+        </Text>
+        <Tabs
+          w="100%"
+          variant="soft-rounded"
+          colorScheme="purple"
+          align="start"
+        >
+          <TabList display="flex" flexDirection="row" gap={0}>
+            {tabData.map((tab, index) => (
+              <Tab fontSize="x-small" key={index} whiteSpace="nowrap">
+                <Icon as={tab.icon} mr={2} />
+                {tab.label}
+              </Tab>
+            ))}
+          </TabList>
+          <Box w="100%" border="0.5px solid #6311CB5E" mt="2" />
+          {/* Mapping through tabData to create tab panels */}
+          <TabPanels >
+            {tabData.map((tab, index) => (
+              <TabPanel h={"450px"} overflowY="scroll" key={index}>
+                <p>{tab.content}</p>
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </Box>
+
       <Box
         bgColor="#F3F3F9"
         h="100%"
+        w="40%"
         {...OPACITY_ON_LOAD}
+        overflowY={"scroll"}
+        border="1px"
+        borderColor="gray.200"
+        borderRadius="md"
         p={4}
-        overflowX={"scroll"}
-        display="flex"
-        justifyContent="space-between"
-        flexDirection="row"
       >
-        <Box display="flex" w="60%">
-          <Tabs w="90%" variant="soft-rounded" colorScheme="purple" align="start">
-            <TabList overflow="scroll" display="flex" flexDirection="row" gap={1}>
-              {tabData.map((tab, index) => (
-                <Tab fontSize="small" key={index} whiteSpace="nowrap">
-                  <Icon as={tab.icon} mr={2} />
-                  {tab.label}
-                </Tab>
-              ))}
-            </TabList>
-            <Box w="100%" border="0.5px solid #6311CB5E" mt="2" />
-            {/* Mapping through tabData to create tab panels */}
-            <TabPanels>
-              {tabData.map((tab, index) => (
-                <TabPanel key={index}>
-                  <p>{tab.content}</p>
-                </TabPanel>
-              ))}
-            </TabPanels>
-          </Tabs>
-        </Box>
-  
-        <Box
-          bgColor="#F3F3F9"
-          h="100%"
-          {...OPACITY_ON_LOAD}
-          overflowX={"scroll"}
-          border="1px"
-          borderColor="gray.200"
-          borderRadius="md"
-          p={4}
-        >
-          <Text fontWeight="bold" mb={4}>
-            Preview:
-          </Text>
-          {selectedCard ? (
-            <>
-              <Image
-                src={selectedCard.image}
-                alt={selectedCard.title}
-              />
-              <Text fontWeight="bold" mt={2}>
+        <Text fontWeight="bold" fontSize="medium">
+          Preview:
+        </Text>
+        {selectedCard ? (
+          <>
+            <Image h="201px" src={selectedCard.image} alt={selectedCard.title} />
+
+            <Box
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              mt={4}
+              gap={1}
+              w="100%"
+            >
+              <Box
+                display="flex"
+                flexDirection="column"
+                alignItems="flex-start"
+                mt={4}
+                gap={1}
+                w="100%"
+              >
+                <Text fontSize="small" color="#2D2D2D" fontWeight={600}>
+                  Hi Receiver,
+                </Text>
+                <Text fontSize="small" color="#2D2D2D" fontWeight={600}>
+                  You’ve got a Amazon pay E-Gift card
+                </Text>
+
+                <FormLabel color="#666666" fontWeight={400} fontSize={"small"}>
+                  Type your message
+                </FormLabel>
+                <Textarea />
+                <Box
+                  display="flex"
+                  flexDirection="row"
+                  justifyContent="space-between"
+                  w="100%"
+                >
+                  <Image h="31px" src={amazon} />
+                  <Box
+                    display="flex"
+                    flexDirection="column"
+                    alignItems="flex-end"
+                  >
+                    <Text fontSize="small" color="#3725EA" fontWeight={600}>
+                      ₹ 500
+                    </Text>
+                    <Text fontSize="small" color="#3725EA" fontWeight={600}>
+                      Validity: xxxxxx
+                    </Text>
+                  </Box>
+                </Box>
+              </Box>
+              <Button fontSize="small" bgColor="#6311CB" color="#fff" p={4} w="301px">
+                {" "}
+                Proceed to add
+              </Button>
+            </Box>
+            {/* <Text fontWeight="bold" mt={2}>
                 {selectedCard.title}
               </Text>
-              <Text>{selectedCard.description}</Text>
-            </>
-          ) : (
-            <Text>No card selected</Text>
-          )}
-        </Box>
+              <Text>{selectedCard.description}</Text> */}
+          </>
+        ) : (
+          <Text>No card selected</Text>
+        )}
       </Box>
-    );
-  };
-  
-  export default Preview;
-  
\ No newline at end of file
+    </Box>
+  );
+};
+
+export default Preview;
diff --git a/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllTemp.jsx b/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllTemp.jsx
index 264ea76..6a00b1b 100644
--- a/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllTemp.jsx
+++ b/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllTemp.jsx
@@ -1,6 +1,12 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
+import VanillaTilt from "vanilla-tilt";
 import temp1 from "../../../assets/temp1.png";
 import temp2 from "../../../assets/temp2.png";
+import temp3 from "../../../assets/temp3.png";
+import temp5 from "../../../assets/temp5.png";
+import temp6 from "../../../assets/temp6.png";
+import temp7 from "../../../assets/temp7.png";
+import temp8 from "../../../assets/temp8.png";
 import { Box, Grid } from "@chakra-ui/react";
 
 const cards = [
@@ -12,13 +18,65 @@ const cards = [
     id: 2,
     image: temp2,
   },
+  {
+    id: 3,
+    image: temp3,
+  },
+  {
+    id: 4, // Fix duplicate id
+    image: temp5,
+  },
+  {
+    id: 5, // Fix duplicate id
+    image: temp6,
+  },
+  {
+    id: 6, // Fix duplicate id
+    image: temp7,
+  },
+  {
+    id: 7, // Fix duplicate id
+    image: temp8,
+  },
 ];
 
 const AllTemp = ({ selectedCard, handleCardSelect }) => {
+  const tiltRefs = useRef([]);
+
+  useEffect(() => {
+    tiltRefs.current.forEach((node) => {
+      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
+          },
+        });
+      }
+    });
+
+    // Cleanup VanillaTilt instances
+    return () => {
+      tiltRefs.current.forEach((node) => {
+        if (node && node.vanillaTilt) {
+          node.vanillaTilt.destroy();
+        }
+      });
+    };
+  }, [tiltRefs]);
+
   return (
     <Grid w="100%" templateColumns="repeat(2, 1fr)" gap={6}>
-      {cards.map((card) => (
+      {cards.map((card, index) => (
         <Box
+          ref={(el) => (tiltRefs.current[index] = el)}
           key={card.id}
           bgImage={`url(${card.image})`}
           bgSize="cover"
@@ -29,7 +87,7 @@ const AllTemp = ({ selectedCard, handleCardSelect }) => {
           overflow="hidden"
           cursor="pointer"
           onClick={() => handleCardSelect(card)}
-          height="200px" 
+          height="200px"
           w="100%"
         />
       ))}
diff --git a/src/assets/amazonlogoF.png b/src/assets/amazonlogoF.png
new file mode 100644
index 0000000..1c8df9f
Binary files /dev/null and b/src/assets/amazonlogoF.png differ
diff --git a/src/assets/temp3.png b/src/assets/temp3.png
new file mode 100644
index 0000000..38aed10
Binary files /dev/null and b/src/assets/temp3.png differ
diff --git a/src/assets/temp5.png b/src/assets/temp5.png
new file mode 100644
index 0000000..66c8b15
Binary files /dev/null and b/src/assets/temp5.png differ
diff --git a/src/assets/temp6.png b/src/assets/temp6.png
new file mode 100644
index 0000000..369b243
Binary files /dev/null and b/src/assets/temp6.png differ
diff --git a/src/assets/temp7.png b/src/assets/temp7.png
new file mode 100644
index 0000000..d2cec05
Binary files /dev/null and b/src/assets/temp7.png differ
diff --git a/src/assets/temp8.png b/src/assets/temp8.png
new file mode 100644
index 0000000..557370d
Binary files /dev/null and b/src/assets/temp8.png differ
diff --git a/src/styles/ScrollBar.css b/src/styles/ScrollBar.css
new file mode 100644
index 0000000..00edb2c
--- /dev/null
+++ b/src/styles/ScrollBar.css
@@ -0,0 +1,22 @@
+::-webkit-scrollbar {
+    width: 12px;  
+    height: 3px; 
+  }
+  
+  /* Styling the scrollbar track */
+  ::-webkit-scrollbar-track {
+    background: #6311cb1a;
+    border-radius: 10px;
+  }
+  
+  /* Styling the scrollbar thumb */
+  ::-webkit-scrollbar-thumb {
+    background-color: #6311cb;
+    border-radius: 10px;
+    /* border: 3px solid #6311cb; */
+  }
+  
+  /* Hover effect on scrollbar thumb */
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #6311cb;
+  }
\ No newline at end of file