diff --git a/package-lock.json b/package-lock.json
index f85cd87..888f23b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,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"
       },
@@ -6233,6 +6234,12 @@
         "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==",
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "5.2.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.9.tgz",
diff --git a/package.json b/package.json
index fc21f64..4c8b075 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,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/Components/MiniHeader.jsx b/src/Components/MiniHeader.jsx
index 459e2ba..738a192 100644
--- a/src/Components/MiniHeader.jsx
+++ b/src/Components/MiniHeader.jsx
@@ -7,10 +7,11 @@ const MiniHeader = ({ title, subTitle, backButton }) => {
   const navigate = useNavigate();
   const [firstPart, secondPart] = title && title?.split(/ (.+)/);
 
-  return (
+  return ( 
     <HStack gap={3} mb={4}>
       {backButton && (
         <Icon
+         boxShadow='md'
           cursor={"pointer"}
           onClick={() => navigate(-1)}
           as={ArrowBackIcon}
diff --git a/src/Pages/Benefit/Benefit.jsx b/src/Pages/Benefit/Benefit.jsx
new file mode 100644
index 0000000..dc60deb
--- /dev/null
+++ b/src/Pages/Benefit/Benefit.jsx
@@ -0,0 +1,16 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const Benefit = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"Reimbursement Report For June 2024"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+      />
+    </Box>
+  );
+};
+
+export default Benefit;
diff --git a/src/Pages/Expenses.jsx b/src/Pages/Expenses.jsx
deleted file mode 100644
index fff7957..0000000
--- a/src/Pages/Expenses.jsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Box, Button, HStack, Image, Text, VStack } from "@chakra-ui/react";
-import React from "react";
-import MiniHeader from "../Components/MiniHeader";
-import logo_card from "../assets/logo_card.svg";
-import TRANSCORP_LOGO from "../assets/TRANSCORP_LOGO.svg";
-import RuPay from '../assets/rupayImg.png'
-
-const Expenses = () => {
-  return (
-    <Box h={"100%"} p={6}>
-      <MiniHeader
-        title={"Manage Expenses"}
-        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
-      />
-
-      <HStack justifyContent={"start"} w={"100%"} h={"500px"} gap={4}>
-        <VStack
-          // bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
-          bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
-          alignItems={"start"}
-          justifyContent={"space-between"}
-          height={"100%"}
-          w={320}
-          rounded={"xl"}
-          p={4}
-          boxShadow={"md"}
-          position={"relative"}
-        >
-          <Box width={"100%"} display={"flex"} justifyContent={"space-between"}>
-            <Image w={28} src={logo_card} />
-            <Image w={28} src={TRANSCORP_LOGO} me={0.5} />
-          </Box>
-
-          <VStack
-            width={"100%"}
-            display={"flex"}
-            alignItems={"start"}
-            justifyContent={"space-between"}
-          >
-            <Text color={"#fff"}>1234 5678 1234 5678</Text>
-            <Button
-              size={"sm"}
-              rounded={"full"}
-              bg={"#ffffff30"}
-              fontSize={"sm"}
-              px={6}
-              border={"1px solid #fff"}
-              _hover={{ opacity: 0.8 }}
-              _active={{ opacity: 1 }}
-              color={"#fff"}
-            >
-              Tap to view details
-            </Button>
-          </VStack>
-
-          <Box width={"100%"} display={"flex"} justifyContent={"end"}>
-            {/* <Image w={32} src={logo_card} /> */}
-            <Image w={28} src={RuPay} me={0.5} />
-          </Box>
-
-          <Text 
-          position={"absolute"} 
-          top={28} 
-          right={-6}
-          transform="rotate(270deg)"
-          fontSize={'sm'}
-          color={"#9E9E9E"}
-
-          >
-            Valid in india
-          </Text>
-        </VStack>
-
-        <VStack bg={"pink"} height={"100%"} w={"50%"} rounded={"xl"}></VStack>
-
-        <VStack bg={"purple"} height={"100%"} w={"27%"} rounded={"xl"}></VStack>
-      </HStack>
-    </Box>
-  );
-};
-
-export default Expenses;
diff --git a/src/Pages/Expenses/Expenses.jsx b/src/Pages/Expenses/Expenses.jsx
new file mode 100644
index 0000000..b0e94f6
--- /dev/null
+++ b/src/Pages/Expenses/Expenses.jsx
@@ -0,0 +1,148 @@
+import { Box, Button, HStack, Image, Text, VStack } from "@chakra-ui/react";
+import React, { useEffect, useRef } from "react";
+// import MiniHeader from "../Components/MiniHeader";
+import logo_card from "../../assets/logo_card.svg";
+import TRANSCORP_LOGO from "../../assets/TRANSCORP_LOGO.svg";
+import RuPay from '../../assets/rupayImg.png'
+import MiniHeader from "../../Components/MiniHeader";
+import VanillaTilt from "vanilla-tilt";
+
+
+const InternalCard = ({title1, subTitle1, title2, subbTitle2}) =>{
+  return(
+  <VStack h={'50%'} gap={0} w={'100%'} rounded={'lg'} justifyContent={'space-evenly'} bg={'gray.50'}>
+  <VStack gap={0} alignItems={'start'} w={'100%'} p={2}>
+    <Text as={'span'} fontSize={'md'} fontWeight={600}>
+      {title1}
+    </Text>
+
+    <Text as={'span'} fontSize={'xs'} fontWeight={500} color={'gray.600'}>
+    {subTitle1}
+    </Text>
+
+  </VStack>
+
+
+  <VStack gap={0} alignItems={'start'} w={'100%'} p={2}>
+    <Text as={'span'} fontSize={'md'} fontWeight={600}>
+    {title2}
+    </Text>
+
+    <Text as={'span'} fontSize={'xs'} fontWeight={500} color={'gray.600'}>
+    {subbTitle2}
+    </Text>
+
+  </VStack>
+  </VStack>)
+}
+
+const Expenses = () => {
+  const tiltRef = useRef(null);
+
+  useEffect(() => {
+    const node = tiltRef.current;
+    if (node) {
+      VanillaTilt.init(node, {
+        max: 25,
+        speed: 400,
+        glare: true,
+        "max-glare": 0.5,
+      });
+    }
+    return () => {
+      if (node && node.vanillaTilt) {
+        node.vanillaTilt.destroy();
+      }
+    };
+  }, []);
+
+  return (
+    <Box h={"100%"} p={4}>
+      <MiniHeader
+        title={"Manage Expenses"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+      />
+
+      <HStack justifyContent={"start"} w={"100%"} h={"372px"} gap={4}>
+
+
+        <VStack
+          ref={tiltRef} // Attach tilt to this ref
+          // bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
+          bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
+          alignItems={"start"}
+          justifyContent={"space-between"}
+          height={"100%"}
+          w={240}
+          h={"372px"}
+          rounded={"xl"}
+          p={4}
+          boxShadow={"md"}
+          position={"relative"}
+        >
+          <Box width={"100%"} cursor={'grab'} display={"flex"} justifyContent={"space-between"}>
+            <Image w={20} src={logo_card} />
+            <Image w={24} src={TRANSCORP_LOGO} me={0.5} />
+          </Box>
+
+          <VStack
+            width={"100%"}
+            display={"flex"}
+            alignItems={"start"}
+            justifyContent={"space-between"}
+          >
+            <Text color={"#fff"} fontSize={"sm"}>1234 5678 1234 5678</Text>
+            <Button
+              size={"sm"}
+              rounded={"full"}
+              bg={"#ffffff30"}
+              fontSize={"sm"}
+              px={6}
+              border={"1px solid #fff"}
+              _hover={{ opacity: 0.8 }}
+              _active={{ opacity: 1 }}
+              color={"#fff"}
+              fontWeight={500}
+            >
+              Tap to view details
+            </Button>
+          </VStack>
+
+          <Box width={"100%"} display={"flex"} justifyContent={"end"}>
+            {/* <Image w={32} src={logo_card} /> */}
+            <Image w={24} src={RuPay} me={0.5} />
+          </Box>
+
+          <Text 
+          position={"absolute"} 
+          top={24} 
+          right={-6}
+          transform="rotate(270deg)"
+          fontSize={'xs'}
+          color={"#9E9E9E"}
+
+          >
+            Valid in india
+          </Text>
+        </VStack>
+
+
+        <VStack bg={"#fff"} boxShadow={'md'} height={"100%"} flexGrow={1} gap={4}  rounded={"xl"} p={4}>
+        <InternalCard title1={'$50,000'} subTitle1={'Available spend limit'} title2={"1234 5678 1234 5678"} subbTitle2={"Account Number"} />
+        <InternalCard title1={'Kartikey Gautam'} subTitle1={'Account name'} title2={"01/12"} subbTitle2={"Validity"} />
+
+        </VStack>
+        <VStack bg={"purple"} height={"100%"} w={"30%"} rounded={"xl"}>
+
+
+
+        </VStack>
+        
+      </HStack>
+    </Box>
+  );
+};
+
+export default Expenses;
+
+
diff --git a/src/Pages/Gifts/Gifts.jsx b/src/Pages/Gifts/Gifts.jsx
new file mode 100644
index 0000000..e303615
--- /dev/null
+++ b/src/Pages/Gifts/Gifts.jsx
@@ -0,0 +1,16 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const Gifts = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"Your Gift Cards"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+      />
+    </Box>
+  );
+};
+
+export default Gifts;
diff --git a/src/Pages/HelpAndSupport/HelpAndSupport.jsx b/src/Pages/HelpAndSupport/HelpAndSupport.jsx
new file mode 100644
index 0000000..88b46fe
--- /dev/null
+++ b/src/Pages/HelpAndSupport/HelpAndSupport.jsx
@@ -0,0 +1,16 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+import MiniHeader from "../../Components/MiniHeader";
+
+const HelpAndSupport = () => {
+  return (
+    <Box h={"100%"} p={6}>
+      <MiniHeader
+        title={"Contact Us"}
+        subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+      />
+    </Box>
+  );
+};
+
+export default HelpAndSupport;
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index 9313df9..e90bc41 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -4,6 +4,10 @@ import AddNewReport from "../Pages/Report/AddNewReport";
 // import ReportsHistory from "../Pages/Report/ReportsHistory";
 import Report from "../Pages/Report/Report";
 import Requests from "../Pages/Requests/Requests";
+import Expenses from "../Pages/Expenses/Expenses";
+import Benefit from "../Pages/Benefit/Benefit";
+import Gifts from "../Pages/Gifts/Gifts";
+import HelpAndSupport from "../Pages/HelpAndSupport/HelpAndSupport";
 
 export const RouteLink = [
 
@@ -13,4 +17,7 @@ export const RouteLink = [
   { path: "/reports/add-new-report", Component: AddNewReport },
   // { path: "/reports/reports-history", Component: ReportsHistory },
   { path: "/requests", Component: Requests },
+  { path: "/benefit", Component: Benefit },
+  { path: "/gifts", Component: Gifts },
+  { path: "/help-support", Component: HelpAndSupport },
 ];