diff --git a/package-lock.json b/package-lock.json
index 7fd1e3c..bb6330e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,10 +18,12 @@
         "axios": "^1.7.2",
         "bootstrap": "5.3.3",
         "chart.js": "^4.4.3",
+        "dayjs": "^1.11.13",
         "dotenv": "^16.4.5",
         "framer-motion": "^11.5.5",
         "js-cookie": "^3.0.5",
         "libphonenumber-js": "^1.11.8",
+        "multiselect-react-dropdown": "^2.0.25",
         "react": "^18.2.0",
         "react-apexcharts": "^1.4.1",
         "react-beautiful-dnd": "^13.1.1",
@@ -36,6 +38,7 @@
         "redux-persist": "^6.0.0",
         "redux-persist-transform-encrypt": "^5.1.1",
         "uuid": "^10.0.0",
+        "vanilla-tilt": "^1.8.1",
         "xlsx": "^0.18.5",
         "yup": "^1.4.0"
       },
@@ -3196,6 +3199,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4839,6 +4847,14 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/multiselect-react-dropdown": {
+      "version": "2.0.25",
+      "resolved": "https://registry.npmjs.org/multiselect-react-dropdown/-/multiselect-react-dropdown-2.0.25.tgz",
+      "integrity": "sha512-z8kUSyBNOuV7vn4Dk35snzXWtIfTdSEEXhgDdLMvOmR+xJFx35vc1voUlSuOvrk3khb+hXC219Qs9szOvNm25Q==",
+      "peerDependencies": {
+        "react": "^16.7.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -6330,6 +6346,11 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vanilla-tilt": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
+      "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw=="
+    },
     "node_modules/vite": {
       "version": "5.4.8",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
diff --git a/package.json b/package.json
index 8577bf4..a1783f8 100644
--- a/package.json
+++ b/package.json
@@ -20,10 +20,12 @@
     "axios": "^1.7.2",
     "bootstrap": "5.3.3",
     "chart.js": "^4.4.3",
+    "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
     "framer-motion": "^11.5.5",
     "js-cookie": "^3.0.5",
     "libphonenumber-js": "^1.11.8",
+    "multiselect-react-dropdown": "^2.0.25",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
     "react-beautiful-dnd": "^13.1.1",
@@ -38,6 +40,7 @@
     "redux-persist": "^6.0.0",
     "redux-persist-transform-encrypt": "^5.1.1",
     "uuid": "^10.0.0",
+    "vanilla-tilt": "^1.8.1",
     "xlsx": "^0.18.5",
     "yup": "^1.4.0"
   },
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 9bfc221..8c24fae 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -17,9 +17,9 @@ import { SiBookstack } from "react-icons/si";
 import Food from "../assets/icons/Food.png";
 import Fuel from "../assets/icons/Fuel.png";
 import Gift from "../assets/icons/gift.png";
-import books from "../assets/icons/bookStack.png"
-import telecom from "../assets/icons/telecom.png"
-import gadget from "../assets/icons/gadget.png"
+import books from "../assets/icons/bookStack.png";
+import telecom from "../assets/icons/telecom.png";
+import gadget from "../assets/icons/gadget.png";
 const getRandomDate = (start, end) => {
   const date = new Date(
     start.getTime() + Math.random() * (end.getTime() - start.getTime())
@@ -293,6 +293,7 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
+
   const [reportsHistory, setReportsHistory] = useState([
     {
       id: 1,
@@ -1470,159 +1471,167 @@ const GlobalStateProvider = ({ children }) => {
   const [digital, setDigital] = useState([
     {
       id: 1,
-      "orderid": "#451245",
-      "laodStatus": "Fully Loaded",
-      "dateTime": "10 June 2024, 10am",
-      "totalvaluation": "₹ 70,000",
-      "activationStatus": "Active",
-      "CardDeliveryStatus": "Delivered",
-      "quantity": "500"
+      orderid: "#451245",
+      laodStatus: "Fully Loaded",
+      dateTime: "10 June 2024, 10am",
+      totalvaluation: "₹ 70,000",
+      activationStatus: "Active",
+      CardDeliveryStatus: "Delivered",
+      quantity: "500",
     },
     {
       id: 2,
-      "orderid": "#451245",
-      "laodStatus": "Fully Loaded",
-      "dateTime": "10 June 2024, 10am",
-      "totalvaluation": "₹ 70,000",
-      "activationStatus": "Active",
-      "CardDeliveryStatus": "Not Delivered",
-      "quantity": "500"
+      orderid: "#451245",
+      laodStatus: "Fully Loaded",
+      dateTime: "10 June 2024, 10am",
+      totalvaluation: "₹ 70,000",
+      activationStatus: "Active",
+      CardDeliveryStatus: "Not Delivered",
+      quantity: "500",
     },
     {
       id: 3,
-      "orderid": "#451245",
-      "laodStatus": "Fully Loaded",
-      "dateTime": "10 June 2024, 10am",
-      "totalvaluation": "₹ 70,000",
-      "activationStatus": "Activate",
-      "CardDeliveryStatus": "Delivered",
-      "quantity": "500"
+      orderid: "#451245",
+      laodStatus: "Fully Loaded",
+      dateTime: "10 June 2024, 10am",
+      totalvaluation: "₹ 70,000",
+      activationStatus: "Activate",
+      CardDeliveryStatus: "Delivered",
+      quantity: "500",
     },
     {
       id: 3,
-      "orderid": "#451245",
-      "laodStatus": "Fully Loaded",
-      "dateTime": "10 June 2024, 10am",
-      "totalvaluation": "₹ 70,000",
-      "activationStatus": "Partially Active",
-      "CardDeliveryStatus": "Partially Delivered",
-      "quantity": "500"
-
+      orderid: "#451245",
+      laodStatus: "Fully Loaded",
+      dateTime: "10 June 2024, 10am",
+      totalvaluation: "₹ 70,000",
+      activationStatus: "Partially Active",
+      CardDeliveryStatus: "Partially Delivered",
+      quantity: "500",
     },
     {
       id: 4,
-      "orderid": "#451245",
-      "laodStatus": "Fully Loaded",
-      "dateTime": "10 June 2024, 10am",
-      "totalvaluation": "₹ 70,000",
-      "activationStatus": "Active",
-      "CardDeliveryStatus": "Not Delivered",
-      "quantity": "500"
+      orderid: "#451245",
+      laodStatus: "Fully Loaded",
+      dateTime: "10 June 2024, 10am",
+      totalvaluation: "₹ 70,000",
+      activationStatus: "Active",
+      CardDeliveryStatus: "Not Delivered",
+      quantity: "500",
     },
     {
       id: 5,
-      "orderid": "#451245",
-      "laodStatus": "Fully Loaded",
-      "dateTime": "10 June 2024, 10am",
-      "totalvaluation": "₹ 70,000",
-      "activationStatus": "Partially Active",
-      "CardDeliveryStatus": "Not Delivered",
-      "quantity": "500"
+      orderid: "#451245",
+      laodStatus: "Fully Loaded",
+      dateTime: "10 June 2024, 10am",
+      totalvaluation: "₹ 70,000",
+      activationStatus: "Partially Active",
+      CardDeliveryStatus: "Not Delivered",
+      quantity: "500",
     },
     {
       id: 6,
-      "orderid": "#451245",
-      "laodStatus": "Fully Loaded",
-      "dateTime": "10 June 2024, 10am",
-      "totalvaluation": "₹ 70,000",
-      "activationStatus": "Active",
-      "CardDeliveryStatus": "Delivered",
-      "quantity": "500"
+      orderid: "#451245",
+      laodStatus: "Fully Loaded",
+      dateTime: "10 June 2024, 10am",
+      totalvaluation: "₹ 70,000",
+      activationStatus: "Active",
+      CardDeliveryStatus: "Delivered",
+      quantity: "500",
     },
     {
       id: 7,
-      "orderid": "#451245",
-      "laodStatus": "Fully Loaded",
-      "dateTime": "10 June 2024, 10am",
-      "totalvaluation": "₹ 70,000",
-      "activationStatus": "Activate",
-      "CardDeliveryStatus": "Delivered",
-      "quantity": "500"
+      orderid: "#451245",
+      laodStatus: "Fully Loaded",
+      dateTime: "10 June 2024, 10am",
+      totalvaluation: "₹ 70,000",
+      activationStatus: "Activate",
+      CardDeliveryStatus: "Delivered",
+      quantity: "500",
     },
     {
       id: 8,
-      "orderid": "#451245",
-      "laodStatus": "Fully Loaded",
-      "dateTime": "10 June 2024, 10am",
-      "totalvaluation": "₹ 70,000",
-      "activationStatus": "Activate",
-      "CardDeliveryStatus": "Delivered",
-      "quantity": "500"
+      orderid: "#451245",
+      laodStatus: "Fully Loaded",
+      dateTime: "10 June 2024, 10am",
+      totalvaluation: "₹ 70,000",
+      activationStatus: "Activate",
+      CardDeliveryStatus: "Delivered",
+      quantity: "500",
     },
-  ])
+  ]);
 
-  // supprt and ticket 
+  // supprt and ticket
 
   const [SupportAndTicket, setSupportAndTicket] = useState([
     {
       TicketID: 124589,
-      Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
+      Subject:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
       Status: "On hold",
       LastUpdate: "Jun 10, 2024",
       Support: "Reethik thota",
     },
     {
       TicketID: 124589,
-      Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
+      Subject:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
       Status: "On hold",
       LastUpdate: "Jun 10, 2024",
       Support: "Reethik thota",
     },
     {
       TicketID: 124589,
-      Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
+      Subject:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
       Status: "On hold",
       LastUpdate: "Jun 10, 2024",
       Support: "Reethik thota",
     },
     {
       TicketID: 124589,
-      Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
+      Subject:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
       Status: "On hold",
       LastUpdate: "Jun 10, 2024",
       Support: "Reethik thota",
     },
     {
       TicketID: 124589,
-      Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
+      Subject:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
       Status: "Inactive",
       LastUpdate: "Jun 10, 2024",
       Support: "Reethik thota",
     },
     {
       TicketID: 124589,
-      Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
+      Subject:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
       Status: "Inactive",
       LastUpdate: "Jun 10, 2024",
       Support: "Reethik thota",
     },
     {
       TicketID: 124589,
-      Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
+      Subject:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
       Status: "In progress",
       LastUpdate: "Jun 10, 2024",
       Support: "Reethik thota",
     },
     {
       TicketID: 124589,
-      Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
+      Subject:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
       Status: "In progress",
       LastUpdate: "Jun 10, 2024",
       Support: "Reethik thota",
     },
     {
       TicketID: 124589,
-      Subject: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
+      Subject:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.",
       Status: "In progress",
       LastUpdate: "Jun 10, 2024",
       Support: "Reethik thota",
@@ -1634,111 +1643,116 @@ const GlobalStateProvider = ({ children }) => {
       id: 1,
       ReportName: "Advance expense report 2024",
       ReportBy: {
-        profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+        profImage:
+          "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
         profName: "Raju",
       },
       ReportAmount: "₹ 50000",
       DateTime: "10 June, 2924 10 am",
       Approver: "Reethik thota",
       Disburser: "Manav sain",
-      Action: "View"
+      Action: "View",
     },
     {
       id: 2,
       ReportName: "Advance expense report 2024",
       ReportBy: {
-        profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+        profImage:
+          "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
         profName: "Raju",
       },
       ReportAmount: "₹ 50000",
       DateTime: "10 June, 2924 10 am",
       Approver: "Reethik thota",
       Disburser: "Manav sain",
-      Action: "View"
+      Action: "View",
     },
     {
       id: 3,
       ReportName: "Advance expense report 2024",
       ReportBy: {
-        profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+        profImage:
+          "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
         profName: "Raju",
       },
       ReportAmount: "₹ 50000",
       DateTime: "10 June, 2924 10 am",
       Approver: "Reethik thota",
       Disburser: "Manav sain",
-      Action: "View"
+      Action: "View",
     },
     {
       id: 4,
       ReportName: "Advance expense report 2024",
       ReportBy: {
-        profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+        profImage:
+          "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
         profName: "Raju",
       },
       ReportAmount: "₹ 50000",
       DateTime: "10 June, 2924 10 am",
       Approver: "Reethik thota",
       Disburser: "Manav sain",
-      Action: "View"
+      Action: "View",
     },
     {
       id: 5,
       ReportName: "Advance expense report 2024",
       ReportBy: {
-        profImage: "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
+        profImage:
+          "https://images.pexels.com/photos/771742/pexels-photo-771742.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
         profName: "Raju",
       },
       ReportAmount: "₹ 50000",
       DateTime: "10 June, 2924 10 am",
       Approver: "Reethik thota",
       Disburser: "Manav sain",
-      Action: "View"
+      Action: "View",
     },
-  ])
+  ]);
 
   const [AdvanceExpenseRequestView, setAdvanceExpenseRequestView] = useState([
     {
-      "DateTime": "10 June, 2924 10 am",
-      "Merchant": "Dine in",
-      "Category": "Food",
-      "Paymentmode": "Expense card",
-      "ReimburseAmount": "₹ 50000",
-      "Bills": "",
-      "Disburser": "Manav sain",
-      "Action": ""
+      DateTime: "10 June, 2924 10 am",
+      Merchant: "Dine in",
+      Category: "Food",
+      Paymentmode: "Expense card",
+      ReimburseAmount: "₹ 50000",
+      Bills: "",
+      Disburser: "Manav sain",
+      Action: "",
     },
     {
-      "DateTime": "10 June, 2924 10 am",
-      "Merchant": "Airtel postpaid",
-      "Category": "Telecom",
-      "Paymentmode": "Expense card",
-      "ReimburseAmount": "₹ 50000",
-      "Bills": "",
-      "Disburser": "Manav sain",
-      "Action": ""
+      DateTime: "10 June, 2924 10 am",
+      Merchant: "Airtel postpaid",
+      Category: "Telecom",
+      Paymentmode: "Expense card",
+      ReimburseAmount: "₹ 50000",
+      Bills: "",
+      Disburser: "Manav sain",
+      Action: "",
     },
     {
-      "DateTime": "10 June, 2924 10 am",
-      "Merchant": "Lorem ipsme",
-      "Category": "Fuel",
-      "Paymentmode": "Expense card",
-      "ReimburseAmount": "₹ 50000",
-      "Bills": "",
-      "Disburser": "Manav sain",
-      "Action": ""
+      DateTime: "10 June, 2924 10 am",
+      Merchant: "Lorem ipsme",
+      Category: "Fuel",
+      Paymentmode: "Expense card",
+      ReimburseAmount: "₹ 50000",
+      Bills: "",
+      Disburser: "Manav sain",
+      Action: "",
     },
     {
-      "DateTime": "10 June, 2924 10 am",
-      "Merchant": "Dine in",
-      "Category": "Food",
-      "Paymentmode": "Expense card",
-      "ReimburseAmount": "₹ 50000",
-      "Bills": "",
-      "Disburser": "Manav sain",
-      "Action": ""
+      DateTime: "10 June, 2924 10 am",
+      Merchant: "Dine in",
+      Category: "Food",
+      Paymentmode: "Expense card",
+      ReimburseAmount: "₹ 50000",
+      Bills: "",
+      Disburser: "Manav sain",
+      Action: "",
     },
-  ])
+  ]);
 
   const [ApplicationStatus, setApplicationStatus] = useState([
     {
@@ -1851,101 +1865,167 @@ const GlobalStateProvider = ({ children }) => {
     },
   ]);
 
-  const [walletProgram, setWalletProgram] = useState(
-    [
-      {
-        id: 1,
-        walletName: [{ name: "Food", icon: Food }],
-        WalletType: "Prefilled",
-        department: "sales",
-        status: "Active",
-        WalletAmount: "₹ 50,000",
-        CreatedOn: "Jan 12, 2022",
-        CreatedBy: "Jenny wilson"
-      },
-      {
-        id: 2,
-        walletName: [{ name: "Fuel", icon: Fuel }],
-        WalletType: "Prefilled",
-        department: "sales",
-        status: "Active",
-        WalletAmount: "₹ 50,000",
-        CreatedOn: "Jan 12, 2022",
-        CreatedBy: "Jenny wilson"
-      },
-      {
-        id: 3,
-        walletName: [{ name: "Gift", icon: Gift }],
-        WalletType: "Prefilled",
-        department: "sales",
-        status: "Active",
-        WalletAmount: "₹ 50,000",
-        CreatedOn: "Jan 12, 2022",
-        CreatedBy: "Jenny wilson"
-      },
-      {
-        id: 4,
-        walletName: [{ name: "Telecom", icon: telecom }],
-        WalletType: "Prefilled",
-        department: "sales",
-        status: "Saved as draft",
-        WalletAmount: "₹ 50,000",
-        CreatedOn: "Jan 12, 2022",
-        CreatedBy: "Jenny wilson"
-      },
-      {
-        id: 5,
-        walletName: [{ name: "Books & periodicals", icon: books }],
-        WalletType: "Prefilled",
-        department: "sales",
-        status: "Active",
-        WalletAmount: "₹ 50,000",
-        CreatedOn: "Jan 12, 2022",
-        CreatedBy: "Jenny wilson"
-      },
-      {
-        id: 6,
-        walletName: [{ name: "Learning & development", icon: books }],
-        WalletType: "Prefilled",
-        department: "sales",
-        status: "Active",
-        WalletAmount: "₹ 50,000",
-        CreatedOn: "Jan 12, 2022",
-        CreatedBy: "Jenny wilson"
-      },
-      {
-        id: 7,
-        walletName: [{ name: "Gadget & equipment", icon: gadget }],
-        WalletType: "Prefilled",
-        department: "sales",
-        status: "Active",
-        WalletAmount: "₹ 50,000",
-        CreatedOn: "Jan 12, 2022",
-        CreatedBy: "Jenny wilson"
-      },
-      {
-        id: 8,
-        walletName: [{ name: "Telecom", icon: telecom }],
-        WalletType: "Prefilled",
-        department: "sales",
-        status: "Pending",
-        WalletAmount: "₹ 50,000",
-        CreatedOn: "Jan 12, 2022",
-        CreatedBy: "Jenny wilson"
-      },
-      {
-        id: 9,
-        walletName: [{ name: "Food", icon: Food }],
-        WalletType: "Prefilled",
-        department: "sales",
-        status: "Pending",
-        WalletAmount: "₹ 50,000",
-        CreatedOn: "Jan 12, 2022",
-        CreatedBy: "Jenny wilson"
-      },
-    ]
+  const [walletProgram, setWalletProgram] = useState([
+    {
+      id: 1,
+      walletName: [{ name: "Food", icon: Food }],
+      WalletType: "Prefilled",
+      department: "sales",
+      status: "Active",
+      WalletAmount: "₹ 50,000",
+      CreatedOn: "Jan 12, 2022",
+      CreatedBy: "Jenny wilson",
+    },
+    {
+      id: 2,
+      walletName: [{ name: "Fuel", icon: Fuel }],
+      WalletType: "Prefilled",
+      department: "sales",
+      status: "Active",
+      WalletAmount: "₹ 50,000",
+      CreatedOn: "Jan 12, 2022",
+      CreatedBy: "Jenny wilson",
+    },
+    {
+      id: 3,
+      walletName: [{ name: "Gift", icon: Gift }],
+      WalletType: "Prefilled",
+      department: "sales",
+      status: "Active",
+      WalletAmount: "₹ 50,000",
+      CreatedOn: "Jan 12, 2022",
+      CreatedBy: "Jenny wilson",
+    },
+    {
+      id: 4,
+      walletName: [{ name: "Telecom", icon: telecom }],
+      WalletType: "Prefilled",
+      department: "sales",
+      status: "Saved as draft",
+      WalletAmount: "₹ 50,000",
+      CreatedOn: "Jan 12, 2022",
+      CreatedBy: "Jenny wilson",
+    },
+    {
+      id: 5,
+      walletName: [{ name: "Books & periodicals", icon: books }],
+      WalletType: "Prefilled",
+      department: "sales",
+      status: "Active",
+      WalletAmount: "₹ 50,000",
+      CreatedOn: "Jan 12, 2022",
+      CreatedBy: "Jenny wilson",
+    },
+    {
+      id: 6,
+      walletName: [{ name: "Learning & development", icon: books }],
+      WalletType: "Prefilled",
+      department: "sales",
+      status: "Active",
+      WalletAmount: "₹ 50,000",
+      CreatedOn: "Jan 12, 2022",
+      CreatedBy: "Jenny wilson",
+    },
+    {
+      id: 7,
+      walletName: [{ name: "Gadget & equipment", icon: gadget }],
+      WalletType: "Prefilled",
+      department: "sales",
+      status: "Active",
+      WalletAmount: "₹ 50,000",
+      CreatedOn: "Jan 12, 2022",
+      CreatedBy: "Jenny wilson",
+    },
+    {
+      id: 8,
+      walletName: [{ name: "Telecom", icon: telecom }],
+      WalletType: "Prefilled",
+      department: "sales",
+      status: "Pending",
+      WalletAmount: "₹ 50,000",
+      CreatedOn: "Jan 12, 2022",
+      CreatedBy: "Jenny wilson",
+    },
+    {
+      id: 9,
+      walletName: [{ name: "Food", icon: Food }],
+      WalletType: "Prefilled",
+      department: "sales",
+      status: "Pending",
+      WalletAmount: "₹ 50,000",
+      CreatedOn: "Jan 12, 2022",
+      CreatedBy: "Jenny wilson",
+    },
+  ]);
 
-  );
+  const [voucher, setVoucher] = useState([
+    {
+      id: 1,
+      DateTime: "Jan 12, 2022, 10 am",
+      EmployeesDepartment: "250 employees",
+      TotalAmount: "₹ 50,000",
+      OrderStatus: "Scheduled",
+    },
+    {
+      id: 2,
+      DateTime: "Jan 12, 2022, 10 am",
+      EmployeesDepartment: "250 employees",
+      TotalAmount: "₹ 50,000",
+      OrderStatus: "Scheduled",
+    },
+    {
+      id: 3,
+      DateTime: "Jan 12, 2022, 10 am",
+      EmployeesDepartment: "250 employees",
+      TotalAmount: "₹ 50,000",
+      OrderStatus: "Scheduled",
+    },
+    {
+      id: 4,
+      DateTime: "Jan 12, 2022, 10 am",
+      EmployeesDepartment: "250 employees",
+      TotalAmount: "₹ 50,000",
+      OrderStatus: "Scheduled",
+    },
+    {
+      id: 5,
+      DateTime: "Jan 12, 2022, 10 am",
+      EmployeesDepartment: "250 employees",
+      TotalAmount: "₹ 50,000",
+      OrderStatus: "Completed",
+    },
+    {
+      id: 6,
+      DateTime: "Jan 12, 2022, 10 am",
+      EmployeesDepartment: "250 employees",
+      TotalAmount: "₹ 50,000",
+      OrderStatus: "Completed",
+    },
+    {
+      id: 7,
+      DateTime: "Jan 12, 2022, 10 am",
+      EmployeesDepartment: "250 employees",
+      TotalAmount: "₹ 50,000",
+      OrderStatus: "Completed",
+    },
+    {
+      id: 8,
+      DateTime: "Jan 12, 2022, 10 am",
+      EmployeesDepartment: "250 employees",
+      TotalAmount: "₹ 50,000",
+      OrderStatus: "Completed",
+    },
+    {
+      id: 9,
+      DateTime: "Jan 12, 2022, 10 am",
+      EmployeesDepartment: "250 employees",
+      TotalAmount: "₹ 50,000",
+      OrderStatus: "Completed",
+    },
+  ]);
+
+
+  
 
   // Recent report
   const [recentReports, setRecentReports] = useState([
@@ -2086,6 +2166,7 @@ const GlobalStateProvider = ({ children }) => {
         setEmployeePermissions,
         reimbursementStatus,
         setReimbursementStatus,
+        voucher,
         advanceStatus,
         setAdvanceStatus,
         digital,
@@ -2099,10 +2180,9 @@ const GlobalStateProvider = ({ children }) => {
         walletProgram,
         SupportAndTicket,
         setSupportAndTicket,
-        recentReports,
-        setRecentReports,
-        recentTransaction,
-        setRecentTransaction,
+
+        recentReports, setRecentReports,
+        recentTransaction, setRecentTransaction
       }}
     >
       {children}
diff --git a/src/Pages/OptiFiiExpense/wallet/CreateWallet.jsx b/src/Pages/OptiFiiExpense/wallet/CreateWallet.jsx
index 4095fe3..9c8445a 100644
--- a/src/Pages/OptiFiiExpense/wallet/CreateWallet.jsx
+++ b/src/Pages/OptiFiiExpense/wallet/CreateWallet.jsx
@@ -1,32 +1,65 @@
-import React from "react";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
 import {
-  Box,
-  Step,
-  StepDescription,
-  StepIcon,
-  StepIndicator,
-  StepNumber,
-  StepSeparator,
-  StepStatus,
-  StepTitle,
   Stepper,
-  useSteps,
+  Step,
+  StepIndicator,
+  StepStatus,
+  StepIcon,
+  StepNumber,
+  Box,
+  StepTitle,
+  StepDescription,
+  StepSeparator,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Heading,
+  Text,
 } from "@chakra-ui/react";
+import WalletPolicy from "./WalletPolicy";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 
 const steps = [
-  { title: "Wallet policy", description: "Wallet policy" },
-  { title: "Approval policy", description: "Approval policy" },
-  { title: "Submission policy", description: "Submission policy" },
-  { title: "Define budget", description: "Define budget" },
+  { title: "Wallet policy", description: "Contact Info" },
+  { title: "Approval policy", description: "Date & Time" },
+  { title: "Submission policy", description: "Select Rooms" },
+  { title: "Define budget", description: "Select Rooms" },
 ];
 
-const CreateWallet = () => {
-  const { activeStep } = useSteps({
-    index: 1,
-    count: steps.length,
-  });
+function CreateWallet() {
+  const [activeStep, setActiveStep] = useState(0);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+  const [formData, setFormData] = useState({});
+
+  const nextStep = () => {
+    if (activeStep < steps.length - 1) {
+      setActiveStep(activeStep + 1);
+    }
+  };
+
+  const prevStep = () => {
+    if (activeStep > 0) {
+      setActiveStep(activeStep - 1);
+    }
+  };
+
+  const onSubmit = (data) => {
+    setFormData({ ...formData, ...data });
+    if (activeStep === steps.length - 1) {
+      console.log("Form Submitted:", formData);
+    } else {
+      nextStep();
+    }
+  };
+
   return (
-    <Box>
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
       <Stepper index={activeStep}>
         {steps.map((step, index) => (
           <Step key={index}>
@@ -34,22 +67,64 @@ const CreateWallet = () => {
               <StepStatus
                 complete={<StepIcon />}
                 incomplete={<StepNumber />}
-                active={<StepNumber 
-                />}
+                active={<StepNumber />}
               />
             </StepIndicator>
 
             <Box flexShrink="0">
               <StepTitle>{step.title}</StepTitle>
-              <StepDescription>{step.description}</StepDescription>
+              {/* <StepDescription>{step.description}</StepDescription> */}
             </Box>
 
             <StepSeparator />
           </Step>
         ))}
       </Stepper>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {activeStep === 0 && (
+          <Box mt={4}>
+            <Heading color="#383838" fontWeight="semibold" fontSize="large">
+              Create wallet policy
+            </Heading>
+
+            <WalletPolicy  register={register} />
+          </Box>
+        )}
+        {activeStep === 1 && (
+          <Box mt={4}>
+            {/* <FormControl isInvalid={errors.date}>
+              <FormLabel>Date & Time</FormLabel>
+              <Input
+                type="datetime-local"
+                {...register("date", { required: "This is required" })}
+              />
+            </FormControl> */}
+          </Box>
+        )}
+        {activeStep === 2 && (
+          <Box mt={4}>
+            {/* <FormControl isInvalid={errors.room}>
+              <FormLabel>Select Room</FormLabel>
+              <Input
+                {...register("room", { required: "This is required" })}
+                placeholder="Room Number"
+              />
+            </FormControl> */}
+          </Box>
+        )}
+
+        <Box mt={4}>
+          <Button onClick={prevStep} disabled={activeStep === 0} mr={4}>
+            Previous
+          </Button>
+          <Button type="submit">
+            {activeStep === steps.length - 1 ? "Submit" : "Next"}
+          </Button>
+        </Box>
+      </form>
     </Box>
   );
-};
+}
 
 export default CreateWallet;
diff --git a/src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx b/src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx
new file mode 100644
index 0000000..a3eed27
--- /dev/null
+++ b/src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx
@@ -0,0 +1,371 @@
+import {
+  Box,
+  FormControl,
+  FormLabel,
+  Input,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Select,
+  Tag,
+  TagCloseButton,
+  TagLabel,
+  Textarea,
+  Wrap,
+  WrapItem,
+  Button,
+  useToast,
+  Checkbox,
+  Stack,
+  CheckboxGroup,
+  Text,
+  RadioGroup,
+  Radio,
+} from "@chakra-ui/react";
+import { AddIcon, ChevronDownIcon } from "@chakra-ui/icons";
+import React, { useState } from "react";
+import dayjs from "dayjs";
+import { CiCircleInfo } from "react-icons/ci";
+
+const OutOfPoket = ({ register, formState }) => {
+  const [selectedDepartments, setSelectedDepartments] = useState([]);
+  const [selectedTimes, setSelectedTimes] = useState([]);
+  const [transaction, setTransaction] = useState([]);
+  const [transactionRule, setTransactionRule] = useState("none");
+  const [categories, setCategories] = useState(["Food", "Fuel"]);
+  const [selectedCategories, setSelectedCategories] = useState([]);
+  const [inputValue, setInputValue] = useState("");
+
+  const toast = useToast();
+
+  const transactionTags = ["Food", "Fuel"];
+
+  const departments = ["Finance", "HR", "Marketing", "Engineering"];
+  const options = [
+    {
+      label: "An hour from now",
+      value: dayjs().add(1, "hour").format("ddd, MMM D, h:mm A"),
+    },
+    {
+      label: "Tomorrow",
+      value: dayjs()
+        .add(1, "day")
+        .set("hour", 21)
+        .minute(0)
+        .format("ddd, MMM D, h:mm A"),
+    },
+    {
+      label: "Next week",
+      value: dayjs()
+        .add(7, "day")
+        .set("hour", 21)
+        .minute(0)
+        .format("ddd, MMM D, h:mm A"),
+    },
+  ];
+
+  const availableCategories = [
+    "Entertainment",
+    "Groceries",
+    "Fuel",
+    "Shopping",
+    "Food",
+    "Utilities",
+  ];
+
+  const handleCategoryRemove = (categoryToRemove) => {
+    setCategories(
+      categories.filter((category) => category !== categoryToRemove)
+    );
+  };
+
+  const handleCategoryAdd = (categoryToAdd) => {
+    if (!categories.includes(categoryToAdd)) {
+      setCategories([...categories, categoryToAdd]);
+    }
+  };
+
+  const addCategory = () => {
+    if (inputValue && !selectedCategories.includes(inputValue)) {
+      setSelectedCategories([...selectedCategories, inputValue]);
+      setInputValue("");
+    }
+  };
+
+  const removeCategory = (categoryToRemove) => {
+    setSelectedCategories(
+      selectedCategories.filter((category) => category !== categoryToRemove)
+    );
+  };
+
+  const handleSelect = (time) => {
+    if (!selectedTimes.includes(time)) {
+      setSelectedTimes([...selectedTimes, time]);
+    } else {
+      toast({
+        title: "Duplicate entry",
+        description: "This time has already been selected.",
+        status: "warning",
+        duration: 2000,
+        isClosable: true,
+      });
+    }
+  };
+
+  const handleRemoveTags = (time) => {
+    setSelectedTimes(selectedTimes.filter((t) => t !== time));
+  };
+
+  const handleSelectChangeTags = (event) => {
+    const value = event.target.value;
+    if (value && !transactionTags.includes(value)) {
+      setSelectedDepartments([...transactionTags, value]);
+    }
+  };
+
+  const handleRemove = (time) => {
+    setSelectedTimes(selectedTimes.filter((t) => t !== time));
+  };
+
+  const handleSelectChange = (event) => {
+    const value = event.target.value;
+    if (value && !selectedDepartments.includes(value)) {
+      setSelectedDepartments([...selectedDepartments, value]);
+    }
+  };
+
+  const handleRemoveTag = (department) => {
+    setSelectedDepartments(selectedDepartments.filter((d) => d !== department));
+  };
+
+  return (
+    <div>
+      <FormControl>
+        <Box
+          bgColor="#F6F0FF"
+          boxShadow="md"
+          display="flex"
+          flexDirection="column"
+          gap={3}
+          p={2}
+        >
+          <Box display="flex" flexDirection="column">
+            <FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
+              Wallet name
+            </FormLabel>
+            <Input
+              {...register("walletPolicy", { required: "This is required" })}
+            />
+          </Box>
+
+          <Box display="flex" flexDirection="column">
+            <FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
+              Description
+            </FormLabel>
+            <Textarea
+              {...register("description", { required: "This is required" })}
+            />
+          </Box>
+
+          <Box display="flex" flexDirection="column">
+            <FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
+              Department
+            </FormLabel>
+            <Select placeholder=" " onChange={handleSelectChange} value="">
+              {departments.map((department, index) => (
+                <option key={index} value={department}>
+                  {department}
+                </option>
+              ))}
+            </Select>
+
+            <Wrap mt={4}>
+              {selectedDepartments.map((department, index) => (
+                <WrapItem key={index}>
+                  <Tag
+                    size="md"
+                    borderRadius="full"
+                    variant="subtle"
+                    colorScheme="purple"
+                  >
+                    <TagLabel>{department}</TagLabel>
+                    <TagCloseButton
+                      onClick={() => handleRemoveTag(department)}
+                    />
+                  </Tag>
+                </WrapItem>
+              ))}
+            </Wrap>
+          </Box>
+
+          <Box>
+            <FormLabel color="#3F4754" fontWeight={700} fontSize="sm">
+              Set reminder
+            </FormLabel>
+            <Select
+              onChange={(e) => handleSelect(e.target.value)}
+              placeholder="  "
+            >
+              {options.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label} ({option.value})
+                </option>
+              ))}
+            </Select>
+
+            {/* Displaying selected times as tags */}
+            <Box mt={4}>
+              {selectedTimes.map((time, index) => (
+                <Tag
+                  key={index}
+                  size="lg"
+                  colorScheme="teal"
+                  borderRadius="full"
+                  m={1}
+                >
+                  <TagLabel>{time}</TagLabel>
+                  <TagCloseButton onClick={() => handleRemove(time)} />
+                </Tag>
+              ))}
+            </Box>
+          </Box>
+
+          <Stack>
+            <Text color="#3F4754" fontWeight={700} fontSize="sm">
+              Select wallet type
+            </Text>
+            <CheckboxGroup
+              colorScheme="purple"
+              defaultValue={["Prepaid", "Reimbursement"]}
+            >
+              <Stack spacing={[1, 5]} direction="column">
+                <Checkbox value="Prepaid">Prepaid</Checkbox>
+                <Checkbox value="Reimbursement">Reimbursement</Checkbox>
+              </Stack>
+            </CheckboxGroup>
+          </Stack>
+
+          <Stack>
+            <Text color="#3F4754" fontWeight={700} fontSize="sm">
+              Select transaction type
+            </Text>
+            <CheckboxGroup
+              colorScheme="purple"
+              defaultValue={[
+                "Ecommerce",
+                "POS",
+                "ATM",
+                "Contactless",
+                "Wallet transfer",
+              ]}
+            >
+              <Stack spacing={[1, 5]} direction="column">
+                <Checkbox value="Ecommerce">Ecommerce</Checkbox>
+                <Checkbox value="POS">POS</Checkbox>
+                <Checkbox value="ATM">ATM</Checkbox>
+                <Checkbox value="Contactless">Contactless</Checkbox>
+                <Checkbox value="Wallet transfer">Wallet transfer</Checkbox>
+              </Stack>
+            </CheckboxGroup>
+          </Stack>
+
+          {/* <Box
+            display="flex"
+            gap="4"
+            p="4"
+            borderWidth="1px"
+            borderRadius="md"
+            boxShadow="sm"
+          >
+
+            <Box display="flex" flexDirection="column" height="20px" gap={4}>
+              <Menu>
+                <MenuButton as={Button} rightIcon={<CiCircleInfo />}>
+                  Either of them
+                </MenuButton>
+                <MenuList>
+                  {availableCategories.map((category, index) => (
+                    <MenuItem
+                      key={index}
+                      onClick={() => handleCategoryAdd(category)}
+                    >
+                      {category}
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </Menu>
+            </Box>
+            <Box display="flex" gap="2" mb="2">
+                
+              {categories.map((category, index) => (
+                <Tag
+                  key={index}
+                  size="md"
+                  borderRadius="full"
+                  variant="solid"
+                  colorScheme="blue"
+                >
+                  <TagLabel>{category}</TagLabel>
+                  <TagCloseButton
+                    onClick={() => handleCategoryRemove(category)}
+                  />
+                </Tag>
+              ))}
+            </Box>
+          </Box> */}
+
+          <Box maxW="400px" mt={4}>
+            <Stack spacing={4}>
+              {/* Transaction Rule */}
+              <Box>
+                <Text mb={2}>Transaction rule</Text>
+                <Select placeholder="None of them" width="fit-content">
+                  {/* Add more options here as needed */}
+                </Select>
+              </Box>
+
+              {/* Merchant Category */}
+              <Box>
+                <Text mb={2}>Merchant category</Text>
+                <Box display="flex" alignItems="center">
+                  {/* Input for adding categories */}
+                  <Input
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    placeholder="Add category"
+                    width="auto"
+                    onKeyPress={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        addCategory();
+                      }
+                    }}
+                  />
+                  <Box display="flex" flexWrap="wrap" gap={2} mr={2}>
+                    {selectedCategories.map((category) => (
+                      <Tag
+                        size="lg"
+                        key={category}
+                        borderRadius="full"
+                        variant="solid"
+                        colorScheme="purple"
+                      >
+                        <TagLabel>{category}</TagLabel>
+                        <TagCloseButton
+                          onClick={() => removeCategory(category)}
+                        />
+                      </Tag>
+                    ))}
+                  </Box>
+                </Box>
+              </Box>
+            </Stack>
+          </Box>
+        </Box>
+      </FormControl>
+    </div>
+  );
+};
+
+export default OutOfPoket;
diff --git a/src/Pages/OptiFiiExpense/wallet/WalletPolicy.jsx b/src/Pages/OptiFiiExpense/wallet/WalletPolicy.jsx
new file mode 100644
index 0000000..1f4e29c
--- /dev/null
+++ b/src/Pages/OptiFiiExpense/wallet/WalletPolicy.jsx
@@ -0,0 +1,53 @@
+import { Box, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import OutOfPoket from "./OutOfPoket";
+const WalletPolicy = ({ register }) => {
+  const [selectedValue, setSelectedValue] = useState("1");
+
+  const renderContent = () => {
+    switch (selectedValue) {
+      case "1":
+        return <OutOfPoket register={register} />;
+      case "2":
+        return <Box>Add department content</Box>;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <RadioGroup onChange={setSelectedValue} value={selectedValue}>
+        <Stack spacing={4} direction="row">
+          <Box
+            p={1}
+            display="flex"
+            flexDirection="row"
+            borderRadius="5px"
+            bgColor="#F4F4F4"
+            border={selectedValue === "1" && "1px solid #3725EA"}
+          >
+            <Radio size="sm" colorScheme="blue" value="1">
+              Out of pocket/cash
+            </Radio>
+          </Box>
+          <Box
+            p={2}
+            display="flex"
+            flexDirection="row"
+            borderRadius="5px"
+            bgColor="#F4F4F4"
+            border={selectedValue === "2" && "1px solid #3725EA"}
+          >
+            <Radio size="sm" colorScheme="blue" value="2">
+              Mileage
+            </Radio>
+          </Box>
+        </Stack>
+      </RadioGroup>
+      <Box mt={4}>{renderContent()}</Box>
+    </>
+  );
+};
+
+export default WalletPolicy;
diff --git a/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx b/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx
new file mode 100644
index 0000000..43c812e
--- /dev/null
+++ b/src/Pages/OptiFiiGifsAndVouchers/BrandVoucher.jsx
@@ -0,0 +1,283 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  HStack,
+  Icon,
+  Image,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Radio,
+  Tag,
+  TagLabel,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import MiniHeader from "../../Components/MiniHeader";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import {
+  AddIcon,
+  CalendarIcon,
+  ChevronDownIcon,
+  EmailIcon,
+  SearchIcon,
+  ViewIcon,
+} from "@chakra-ui/icons";
+import {
+  MdFilterList,
+  MdNotificationsNone,
+  MdOutlineHeadsetMic,
+} from "react-icons/md";
+import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
+import { AiOutlineEdit } from "react-icons/ai";
+import { FaRegEye } from "react-icons/fa";
+import { PiReceipt } from "react-icons/pi";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { Link } from "react-router-dom";
+import backFund from "../../assets/backfund.svg";
+import PrimaryButton from "../../Components/Buttons/PrimaryButton";
+import { FaArrowUpFromBracket } from "react-icons/fa6";
+import SecondaryButton from "../../Components/Buttons/SecondaryButton";
+import { LuListFilter } from "react-icons/lu";
+import { BsFilterRight } from "react-icons/bs";
+import pdfIcon from "../../assets/pdfIcon.svg";
+import ExcelIcon from "../../assets/ExcelIcon.svg";
+import { AiOutlineShoppingCart } from "react-icons/ai";
+import VoucherImg from "../../assets/voucher.png";
+import { GrDownload } from "react-icons/gr";
+
+const BrandVoucher = () => {
+  const { voucher } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  useEffect(() => {
+    // Set isLoading to true
+    setIsLoading(true);
+
+    // Simulate a 3-second delay
+    const timer = setTimeout(() => {
+      setIsLoading(false); // Set isLoading to false after 3 seconds
+    }, 500);
+
+    // Cleanup the timer when the component unmounts or when the useEffect re-runs
+    return () => clearTimeout(timer);
+  }, []); // Empty dependency array means this effect runs once after the component mounts
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = [
+    "Sr. no",
+    "Date & time",
+    "Employees/department",
+    "Total amount",
+    "Order Status",
+    "Allotment history",
+  ];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+
+  const extractedArray = voucher.map((item, index) => ({
+    "Sr. no": (
+      <Checkbox colorScheme="purple">
+        <Text
+          as={"span"}
+          display={"flex"}
+          gap={2}
+          alignItems={"center"}
+          fontSize={"xs"}
+        >
+          {item?.id}
+        </Text>
+      </Checkbox>
+    ),
+    "Date & time": item?.DateTime,
+    "Employees/department": item?.EmployeesDepartment,
+    "Total amount": item?.TotalAmount,
+    // Grade: item?.Grade,
+    // Department: item?.Department,
+    // Role: item?.Role,
+    "Order Status": (
+      <Tag
+        my={1}
+        size={"sm"}
+        borderRadius="full"
+        bgColor={
+          item?.OrderStatus === "Scheduled"
+            ? "#F8F3FF"
+            : item?.OrderStatus === "#Completed"
+            ? "#00A43814"
+            : " "
+        }
+        color={
+          item?.OrderStatus === "Scheduled"
+            ? "#6311CB"
+            : item?.OrderStatus === "Completed"
+            ? "#00A438"
+            : ""
+        }
+        p={1}
+        px={3}
+      >
+        <TagLabel>● {item?.OrderStatus}</TagLabel>
+      </Tag>
+    ),
+    "Allotment history": (
+      <>
+        <Button
+          display="flex"
+          alignItems="center"
+          gap={2}
+          fontSize="x-small"
+          color="#3725EA"
+          bgColor="white"
+          _hover={{ bgColor: "white" }}
+        >
+          <GrDownload />
+          Download
+        </Button>
+      </>
+    ),
+  }));
+
+  return (
+    <Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
+      <Box
+        rounded={"xl"}
+        py={3}
+        // pb={0}
+        display={"flex"}
+        flexDirection={"column"}
+        bg={"#fff"}
+        shadow={"md"}
+        minH={"100%"}
+      >
+        <VStack mb={0} px={3} alignItems={"start"} gap={0}>
+          <Box
+            display={"flex"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            w={"100%"}
+          >
+            <InputGroup width={300} size="sm">
+              <InputLeftElement pointerEvents="none">
+                <SearchIcon color="gray.300" />
+              </InputLeftElement>
+              <Input
+                type="search"
+                placeholder="Type to search..."
+                rounded="md"
+                focusBorderColor="#3725EA"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </InputGroup>
+            <Box>
+              <Link to={"#"} style={{ marginRight: "8px" }}>
+                <SecondaryButton
+                  leftIcon={<Image me={2} src={VoucherImg} w={"17px"} />}
+                  title={"Voucher draft"}
+                />
+              </Link>
+
+              <Link
+                to={"/brand-voucher/buy-voucher"}
+                style={{ marginRight: "8px" }}
+              >
+                <PrimaryButton
+                  leftIcon={<AiOutlineShoppingCart />}
+                  title={"Buy vouchers"}
+                />
+              </Link>
+            </Box>
+          </Box>
+          <Divider />
+          <HStack w={"100%"} justifyContent={"space-between"} mb={4}>
+            <Box>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<BsFilterRight fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Sort
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Descending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+            </Box>
+            <Box>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<FaArrowUpFromBracket />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  colorScheme="gray"
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Export
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>
+                    <Image src={pdfIcon} me={2} /> Export as PDF
+                  </MenuItem>
+                  <MenuItem fontSize={"sm"}>
+                    <Image src={ExcelIcon} me={2} /> Export as Excel
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+              <Menu>
+                <MenuButton
+                  as={Button}
+                  leftIcon={<LuListFilter fontSize={"16px"} />}
+                  rightIcon={<ChevronDownIcon />}
+                  fontSize={"xs"}
+                  color={"gray.700"}
+                  variant="outline"
+                  size={"sm"}
+                  me={2}
+                >
+                  Filter
+                </MenuButton>
+                <MenuList>
+                  <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Descending</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
+                  <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
+                </MenuList>
+              </Menu>
+            </Box>
+          </HStack>
+        </VStack>
+        <NormalTable
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default BrandVoucher;
diff --git a/src/Pages/OptiFiiGifsAndVouchers/BuySingleVouchers.jsx b/src/Pages/OptiFiiGifsAndVouchers/BuySingleVouchers.jsx
new file mode 100644
index 0000000..e7c93c3
--- /dev/null
+++ b/src/Pages/OptiFiiGifsAndVouchers/BuySingleVouchers.jsx
@@ -0,0 +1,83 @@
+// import React, { useState } from "react";
+// import { Box, Image, Text, Grid, Button, Stack } from "@chakra-ui/react";
+// import { OPACITY_ON_LOAD } from "../../Layout/animations";
+// import temp1 from "../../assets/temp1.png";
+
+// const cards = [
+//   {
+//     id: 1,
+//     image: temp1,
+//     // title: "You Deserve a Treat",
+//     // description: "Thank you for everything!",
+//   },
+// ];
+
+// const BuySingleVouchers = () => {
+//   const [selectedCard, setSelectedCard] = useState(null);
+
+//   const handleCardSelect = (card) => {
+//     // setSelectedCard(card);
+//   };
+
+//   return (
+//     <Grid templateColumns="repeat(3, 1fr)" gap={6}>
+//       {cards.map((card) => (
+//         <Box
+//           bgImage={`url(${card.image})`}
+//           bgSize="cover"
+//           bgPosition="center"
+//           key={card.id}
+//           border="1px"
+//           borderColor="gray.200"
+//           borderRadius="md"
+//           overflow="hidden"
+//           cursor="pointer"
+//           onClick={() => handleCardSelect(card)}
+//         >
+//           {/* <Box p={4}>
+//             <Text fontWeight="bold">{card.title}</Text>
+//             <Text>{card.description}</Text>
+//           </Box> */}
+//         </Box>
+//       ))}
+//       <PreviewCard selectedCard={selectedCard} />
+//     </Grid>
+//   );
+// };
+
+// const PreviewCard = ({ selectedCard }) => {
+//   if (!selectedCard) {
+//     return <Text>Select a card to preview</Text>;
+//   }
+
+//   return (
+//     <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>
+//       <Image src={selectedCard.image} alt={selectedCard.title} />
+//       <Text fontWeight="bold">{selectedCard.title}</Text>
+//       <Text>{selectedCard.description}</Text>
+//     </Box>
+//   );
+// };
+
+// export default BuySingleVouchers;
+import React from 'react'
+
+const BuySingleVouchers = () => {
+  return (
+    <div>BuySingleVouchers</div>
+  )
+}
+
+export default BuySingleVouchers
\ No newline at end of file
diff --git a/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx b/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
new file mode 100644
index 0000000..9bb48d0
--- /dev/null
+++ b/src/Pages/OptiFiiGifsAndVouchers/BuyVoucher.jsx
@@ -0,0 +1,161 @@
+import { Box, Button, Image, Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import parkeAvenue from "../../assets/parkeAvenue.png";
+import bewakoof from "../../assets/bewakoof.png";
+import hm from "../../assets/HM.png";
+import nike from "../../assets/nike.png";
+import amazon from "../../assets/amazon.png";
+import myTrip from "../../assets/myTrip.png";
+import myGlam from "../../assets/myGlam.png";
+import Cards from "./Tabs/AllVouchers";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import {
+  Tabs,
+  TabList,
+  TabPanels,
+  Tab,
+  TabPanel,
+  Icon,
+} from "@chakra-ui/react";
+import {
+  FaTv,
+  FaShoppingCart,
+  FaUtensils,
+  FaTshirt,
+  FaPlane,
+  FaHeart,
+} from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+
+const brands = [
+  {
+    id: 1,
+    img: parkeAvenue,
+  },
+  {
+    id: 2,
+    img: bewakoof,
+  },
+  {
+    id: 3,
+    img: hm,
+  },
+  {
+    id: 3,
+    img: nike,
+  },
+  {
+    id: 4,
+    img: amazon,
+  },
+  {
+    id: 5,
+    img: myTrip,
+  },
+  {
+    id: 5,
+    img: myGlam,
+  },
+  {
+    id: 3,
+    img: nike,
+  },
+];
+
+const BuyVoucher = () => {
+  const [selectedCard, setSelectedCard] = useState(null);
+  const navigate = useNavigate();
+
+  const handleSelectCard = (index) => {
+    setSelectedCard(index);
+  };
+
+  const handleProceed = () => {
+    if (selectedCard !== null) {
+      navigate("/brand-voucher/preview"); 
+    }
+  };
+
+  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"
+      h="100%"
+      {...OPACITY_ON_LOAD}
+      p={4}
+      overflowX={"scroll"}
+    >
+      <Box p={4} bgColor="#FFFFFF" boxShadow="md" w="100%" mb={4}>
+        <Text color="#222222" fontWeight={600} fontSize="small">
+          Choose from popular brand
+        </Text>
+
+        <Box display="flex" gap={8} flexDirection="row" alignItems="center">
+          {brands.map((val) => {
+            return (
+              <>
+                <Image h="45px" src={val.img} />
+              </>
+            );
+          })}
+        </Box>
+      </Box>
+
+      <Box p={4} bgColor="#FFFFFF" boxShadow="md" w="100%" h="100%">
+        <Text color="#222222" fontSize="small" fontWeight={600}>
+          Shop by category
+        </Text>
+        <Tabs variant="soft-rounded" colorScheme="purple" align="start">
+          <TabList display="flex" flexDirection="row" gap={4}>
+            {tabData.map((tab, index) => (
+              <Tab fontSize="small" key={index}>
+                <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>
+
+        <Button
+          bgColor="#6311CB"
+          color="white"
+          px="3rem"
+          _hover={{ bgColor: "#6311CB" }}
+          onClick={handleProceed}
+          mt={"3rem"}
+        >
+          Proceed to add
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default BuyVoucher;
diff --git a/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx b/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx
new file mode 100644
index 0000000..9bdbae8
--- /dev/null
+++ b/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx
@@ -0,0 +1,126 @@
+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
+        bgColor="#F3F3F9"
+        h="100%"
+        {...OPACITY_ON_LOAD}
+        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="40%"
+          {...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}>
+                {selectedCard.title}
+              </Text>
+              <Text>{selectedCard.description}</Text>
+            </>
+          ) : (
+            <Text>No card selected</Text>
+          )}
+        </Box>
+      </Box>
+    );
+  };
+  
+  export default Preview;
+  
\ No newline at end of file
diff --git a/src/Pages/OptiFiiGifsAndVouchers/Previews.jsx b/src/Pages/OptiFiiGifsAndVouchers/Previews.jsx
new file mode 100644
index 0000000..e00497a
--- /dev/null
+++ b/src/Pages/OptiFiiGifsAndVouchers/Previews.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+const PreviewCard = ({ selectedCard }) => {
+  if (!selectedCard) {
+    return <Text>Select a card to preview</Text>;
+  }
+
+  return (
+    <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>
+      <Image src={selectedCard.image} alt={selectedCard.title} />
+      <Text fontWeight="bold">{selectedCard.title}</Text>
+      <Text>{selectedCard.description}</Text>
+    </Box>
+  );
+};
+
+export default Previews;
diff --git a/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllTemp.jsx b/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllTemp.jsx
new file mode 100644
index 0000000..264ea76
--- /dev/null
+++ b/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllTemp.jsx
@@ -0,0 +1,40 @@
+import React from "react";
+import temp1 from "../../../assets/temp1.png";
+import temp2 from "../../../assets/temp2.png";
+import { Box, Grid } from "@chakra-ui/react";
+
+const cards = [
+  {
+    id: 1,
+    image: temp1,
+  },
+  {
+    id: 2,
+    image: temp2,
+  },
+];
+
+const AllTemp = ({ selectedCard, handleCardSelect }) => {
+  return (
+    <Grid w="100%" templateColumns="repeat(2, 1fr)" gap={6}>
+      {cards.map((card) => (
+        <Box
+          key={card.id}
+          bgImage={`url(${card.image})`}
+          bgSize="cover"
+          bgPosition="center"
+          border="2px"
+          borderColor={selectedCard?.id === card.id ? "blue.500" : "gray.200"}
+          borderRadius="md"
+          overflow="hidden"
+          cursor="pointer"
+          onClick={() => handleCardSelect(card)}
+          height="200px" 
+          w="100%"
+        />
+      ))}
+    </Grid>
+  );
+};
+
+export default AllTemp;
diff --git a/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllVouchers.jsx b/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllVouchers.jsx
new file mode 100644
index 0000000..1c0c4e3
--- /dev/null
+++ b/src/Pages/OptiFiiGifsAndVouchers/Tabs/AllVouchers.jsx
@@ -0,0 +1,239 @@
+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";
+import hAndm from "../../../assets/hAndM.png";
+import bewakoof from "../../../assets/bewakoof.png";
+import myGlam from "../../../assets/myGlam.png";
+import { Image } from "@chakra-ui/image";
+import { Button } from "@chakra-ui/button";
+import VanillaTilt from "vanilla-tilt";
+import myTrip from "../../../assets/myTrip.png";
+import { useNavigate } from "react-router-dom";
+import { Radio, RadioGroup } from "@chakra-ui/react";
+import parkeAvenue from "../../../assets/parkAven.png";
+const brandData = [
+  {
+    brandLogo: amazonVoucher,
+    brandName: "Amazon",
+    brandColor: "#000000",
+    brandColor1: "#000000",
+    cardWorth: "30% cashback",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: hAndm,
+    brandName: "H&M",
+    brandColor: "#EC1515",
+    brandColor1: "#EC1515",
+    cardWorth: "30% cashback",
+    textColor: "#FFFFFF",
+    capColor: "#E6E6E6",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: myGlam,
+    brandName: "My Glam",
+    brandColor: "#EEEEEE",
+    brandColor1: "#888888",
+    cardWorth: "30% cashback",
+    textColor: "#000000",
+    capColor: "#737373",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: bewakoof,
+    brandName: "Amazon",
+    brandColor: "#FCC700",
+    brandColor1: "#E89600",
+    cardWorth: "30% cashback",
+    textColor: "#000000",
+    capColor: "#171717",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: myTrip,
+    brandName: "My Trip",
+    brandColor: "#EC1515",
+    brandColor1: "#EC1515",
+    cardWorth: "30% cashback",
+    textColor: "#FFFFFF",
+    capColor: "#E6E6E6",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: myGlam,
+    brandName: "My Glam",
+    brandColor: "#EEEEEE",
+    brandColor1: "#888888",
+    cardWorth: "30% cashback",
+    textColor: "#000000",
+    capColor: "#737373",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: bewakoof,
+    brandName: "Amazon",
+    brandColor: "#FCC700",
+    brandColor1: "#E89600",
+    cardWorth: "30% cashback",
+    textColor: "#000000",
+    capColor: "#171717",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+  {
+    brandLogo: parkeAvenue,
+    brandName: "Park Avenue",
+    brandColor: "#000000",
+    brandColor1: "#000000",
+    cardWorth: "30% cashback",
+    dateTime: "Aug 17 - 30",
+    caption: "lorem ipsum dolor sit amet dolor sit ",
+    patternColor: "",
+  },
+];
+
+const MyVoucher = ({handleSelectCard,handleProceed, selectedCard , setSelectedCard }) => {
+    const navigate = useNavigate();
+
+  return (
+    <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();
+              }
+            };
+          }, [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%)`}
+              borderRadius="5px"
+              p={1}
+            >
+              <HStack
+                pb={1}
+                justifyContent="space-between"
+                pt={1}
+                ps={1}
+                pe={2}
+              >
+                <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"
+                >
+                  30% cashback
+                </Text>
+                {/* <Text as={"span"} fontWeight={700} fontSize={"medium"}>
+                  $ {cardWorth}
+                </Text> */}
+                <Text
+                  align="center"
+                  as="span"
+                  fontWeight={600}
+                  fontSize="x-small"
+                  color={`${capColor}`}
+                >
+                  {caption}
+                </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>
+              </VStack>
+            </Box>
+          );
+        }
+      )}
+    </Grid>
+  </RadioGroup>
+  
+  );
+};
+
+export default MyVoucher;
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index b85e19b..f816b1a 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -28,6 +28,12 @@ import EmployeesView from "../Pages/ManageHumanResource/EmployeesView";
 import EmployeesViewRecentReports from "../Pages/ManageHumanResource/EmployeesViewRecentReports";
 import EmployeesViewRecentTransaction from "../Pages/ManageHumanResource/EmployeesViewRecentTransaction";
 import EmployeesViewRecentReportsView from "../Pages/ManageHumanResource/EmployeesViewRecentReportsView";
+import BrandVoucher from "../Pages/OptiFiiGifsAndVouchers/BrandVoucher";
+// import ReimbursementRequestView from "../Pages/OptiFiiExpense/ReimbursementRequestView";
+// import AdvanceExpenseRequestView from "../Pages/OptiFiiExpense/AdvanceExpenseRequestView";
+import BuyVoucher from "../Pages/OptiFiiGifsAndVouchers/BuyVoucher";
+import BuySingleVouchers from "../Pages/OptiFiiGifsAndVouchers/BuySingleVouchers";
+import Preview from "../Pages/OptiFiiGifsAndVouchers/Preview";
 export const RouteLink = [
   { path: "/", Component: Dashbaord },
   { path: "/expenses", Component: Expenses },
@@ -40,7 +46,10 @@ export const RouteLink = [
   { path: "/reimbursement-request", Component: ReimbursementRequest },
   { path: "/reimbursement-request-view", Component: ReimbursementRequestView },
   { path: "/advance-expense-request", Component: AdvanceExpenseRequest },
-  { path: "/advance-expense-request-view", Component: AdvanceExpenseRequestView },
+  {
+    path: "/advance-expense-request-view",
+    Component: AdvanceExpenseRequestView,
+  },
   { path: "/optiFii-benefit", Component: OptiFiiTaxBenefit },
   { path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers },
   { path: "/reports", Component: Report },
@@ -61,9 +70,16 @@ export const RouteLink = [
 
 
 
+  {
+    path: "/gift-card/digital-application-status",
+    Component: DigitalApplicationStatus,
+  },
+  { path: "/wallet-program/create-wallet", Component: CreateWallet },
 
   // =======================[ Gift Voucher ]==============
   { path: "/optifii-gifts-dashboard", Component: GiftDashboard },
-
-
+  { path: "/brand-voucher", Component: BrandVoucher },
+  { path: "/brand-voucher/buy-voucher", Component: BuyVoucher },
+  { path: "/brand-voucher/buy-voucher-card", Component: BuySingleVouchers },
+  { path: "/brand-voucher/preview", Component: Preview },
 ];
diff --git a/src/assets/.png b/src/assets/.png
new file mode 100644
index 0000000..a91c535
Binary files /dev/null and b/src/assets/.png differ
diff --git a/src/assets/HM.png b/src/assets/HM.png
new file mode 100644
index 0000000..426d909
Binary files /dev/null and b/src/assets/HM.png differ
diff --git a/src/assets/amazon.png b/src/assets/amazon.png
new file mode 100644
index 0000000..1a1a28c
Binary files /dev/null and b/src/assets/amazon.png differ
diff --git a/src/assets/amazonlogo.png b/src/assets/amazonlogo.png
new file mode 100644
index 0000000..fd85a8a
Binary files /dev/null and b/src/assets/amazonlogo.png differ
diff --git a/src/assets/bewakoof.png b/src/assets/bewakoof.png
new file mode 100644
index 0000000..50f3e26
Binary files /dev/null and b/src/assets/bewakoof.png differ
diff --git a/src/assets/hAndM.png b/src/assets/hAndM.png
new file mode 100644
index 0000000..cec98e7
Binary files /dev/null and b/src/assets/hAndM.png differ
diff --git a/src/assets/myGlam.png b/src/assets/myGlam.png
new file mode 100644
index 0000000..d1e3c65
Binary files /dev/null and b/src/assets/myGlam.png differ
diff --git a/src/assets/myTrip.png b/src/assets/myTrip.png
new file mode 100644
index 0000000..816fca1
Binary files /dev/null and b/src/assets/myTrip.png differ
diff --git a/src/assets/nike.png b/src/assets/nike.png
new file mode 100644
index 0000000..a91c535
Binary files /dev/null and b/src/assets/nike.png differ
diff --git a/src/assets/parkAven.png b/src/assets/parkAven.png
new file mode 100644
index 0000000..452ea95
Binary files /dev/null and b/src/assets/parkAven.png differ
diff --git a/src/assets/parkeAvenue.png b/src/assets/parkeAvenue.png
new file mode 100644
index 0000000..70649f8
Binary files /dev/null and b/src/assets/parkeAvenue.png differ
diff --git a/src/assets/temp1.png b/src/assets/temp1.png
new file mode 100644
index 0000000..6b54629
Binary files /dev/null and b/src/assets/temp1.png differ
diff --git a/src/assets/temp2.png b/src/assets/temp2.png
new file mode 100644
index 0000000..3665223
Binary files /dev/null and b/src/assets/temp2.png differ
diff --git a/src/assets/voucher.png b/src/assets/voucher.png
new file mode 100644
index 0000000..dd53c27
Binary files /dev/null and b/src/assets/voucher.png differ
diff --git a/src/styles/multiSlect.css b/src/styles/multiSlect.css
new file mode 100644
index 0000000..1f5df8d
--- /dev/null
+++ b/src/styles/multiSlect.css
@@ -0,0 +1,42 @@
+/* Overall multiselect container */
+.custom-multiselect .multiselect-container {
+    width: 300px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 5px;
+  }
+  
+  /* Search box style */
+  .custom-multiselect .searchBox {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 5px;
+  }
+  
+  /* Chips (selected items) */
+  .custom-multiselect .chips {
+    background-color: #007bff;
+    color: white;
+    border-radius: 5px;
+    padding: 5px;
+  }
+  
+  /* Option container (dropdown list) */
+  .custom-multiselect .optionContainer {
+    border: 1px solid #ccc;
+    border-radius: 10px;
+  }
+  
+  /* Individual option styling */
+  .custom-multiselect .option {
+    color: #007bff;
+    background-color: #f0f0f0;
+    padding: 10px;
+  }
+  
+  /* Customize the option when hovered */
+  .custom-multiselect .option:hover {
+    background-color: #d1e7ff;
+    cursor: pointer;
+  }
+  
\ No newline at end of file