diff --git a/src/Components/Doughnut/DonutChart.jsx b/src/Components/Doughnut/DonutChart.jsx
index 3f4b80f..1ffa8b9 100644
--- a/src/Components/Doughnut/DonutChart.jsx
+++ b/src/Components/Doughnut/DonutChart.jsx
@@ -12,7 +12,7 @@ const DonutChart = ({ data, width = 300, height = 250 }) => {
       {
         label: 'My Dataset',
         data: data.values,
-        backgroundColor: [ '#3182ce', '#38A169', '#D69E2E', '#E53E3E' ],
+        backgroundColor: [ '#3182ce', '#004118', '#D69E2E', '#E53E3E' ],
         borderColor: ['#FFF'],
         borderWidth: 1,
       },
diff --git a/src/Components/Doughnut/LineChart.jsx b/src/Components/Doughnut/LineChart.jsx
new file mode 100644
index 0000000..50987d5
--- /dev/null
+++ b/src/Components/Doughnut/LineChart.jsx
@@ -0,0 +1,70 @@
+// LineChart.jsx
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, PointElement, LinearScale, CategoryScale } from 'chart.js';
+
+// Register the necessary components
+ChartJS.register( Title, Tooltip, Legend, LineElement, PointElement, LinearScale, CategoryScale );
+
+// Sample options for the chart
+const options = {
+    responsive: true,
+    plugins: {
+        legend: {
+            position: 'top',
+        },
+        tooltip: {
+            callbacks: {
+                label: function (context) {
+                    let label = context.dataset.label || '';
+                    if (label) {
+                        label += ': ';
+                    }
+                    if (context.parsed.y !== null) {
+                        label += `${context.parsed.y}`;
+                    }
+                    return label;
+                }
+            }
+        }
+    }
+};
+
+const Utils = {
+    numbers: ({ count, min, max }) => Array.from({ length: count }, () => Math.floor(Math.random() * (max - min + 1)) + min),
+    CHART_COLORS: {
+        red: 'rgba(255, 99, 132, 1)',
+        darkGreen: 'rgba(0, 65, 24, 1)'  // Added color related to #004118
+    },
+    transparentize: (color, opacity) => {
+        // Use regex to replace the alpha value
+        return color.replace(/(rgba\(\d+, \d+, \d+, )\d+(\))/, `$1${opacity}$2`);
+    }
+};
+
+
+const LineChart = ({ width = 300, height = 250 }) => {
+    const data = {
+        labels: ['Bahrain', 'Kuwait', 'Oman', 'Qatar', 'Saudi Arabia', 'UAE', 'India'],
+        datasets: [
+            {
+                label: 'Exchange rate',
+                data: [45.9087, 23.8798, 99.9809, 65.8987, 65.8987, 34.9898, 32.8987],
+                borderColor: Utils.CHART_COLORS.darkGreen,
+                backgroundColor: Utils.transparentize(Utils.CHART_COLORS.darkGreen, 0.5),
+                pointStyle: 'circle',
+                pointRadius: 10,
+                pointHoverRadius: 15
+            }
+        ]
+    };
+
+    console.log(data);
+
+
+    return (
+        <Line data={data} options={options} />
+    );
+};
+
+export default LineChart;
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 23c1927..3bebca4 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -387,7 +387,7 @@ const DashboardLayout = ({ isOnline }) => {
           // onMouseOver={() => setIsDrawerOpen(true)}
           // onMouseLeave={() => setIsDrawerOpen(false)}
           style={{
-            width: isDrawerOpen || openDrawerClick ? 232 : 74,
+            width: isDrawerOpen || openDrawerClick ? 255 : 74,
             transition: "width 0.3s ease-in-out", // Smooth transition for width change
             // overflow: "hidden",
             backgroundColor: "#0041180A",
@@ -631,7 +631,7 @@ const DashboardLayout = ({ isOnline }) => {
       <main
         className={`h-100   ${slideFromRight ? "pe-3" : "ps-3"} d-flex flex-column gap-0`}
         style={{
-          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 232 : 74}px)`,
+          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 255 : 74}px)`,
           transition: "width 0.3s ease-in-out",
 
         }}
diff --git a/src/Pages/Dashbaord.jsx b/src/Pages/Dashbaord.jsx
index d1cdddb..ea96586 100644
--- a/src/Pages/Dashbaord.jsx
+++ b/src/Pages/Dashbaord.jsx
@@ -1,31 +1,24 @@
-import { Box, HStack, Icon, Text, VStack } from '@chakra-ui/react'
+import { Box, HStack, Icon, Text } from '@chakra-ui/react'
 import React from 'react'
 import { HiOutlineChartSquareBar } from 'react-icons/hi'
 import { RiMoneyDollarBoxLine } from 'react-icons/ri'
 import { TbTransactionDollar } from 'react-icons/tb'
 import { VscSymbolClass } from 'react-icons/vsc'
-import { useGetSponserMasterQuery } from '../Services/sponser.service'
 import { TABLE_PAGINATION } from '../Constants/Paginations'
 import FullscreenLoaders from '../Components/Loaders/FullscreenLoaders'
 import { useGetIOprepopulateDataQuery, useGetIOsQuery } from '../Services/io.service'
 import { useGetInvestorsQuery } from '../Services/investor.details.service'
 import DonutChart from '../Components/Doughnut/DonutChart'
-import { BiDotsHorizontal } from 'react-icons/bi'
-import { CheckCircleIcon } from '@chakra-ui/icons'
 import { GoDotFill } from "react-icons/go";
 import { useNavigate } from 'react-router-dom'
+import LineChart from '../Components/Doughnut/LineChart'
+import { PiChartLineUpDuotone } from 'react-icons/pi'
 
 const Dashbaord = () => {
   const navigate = useNavigate()
-  const {data: sponsors,error,isLoading: isSponserLoading,} = useGetSponserMasterQuery({ page: TABLE_PAGINATION?.page, size: TABLE_PAGINATION?.size });  
   const { data, isLoading: isIoPreLoading } = useGetIOprepopulateDataQuery();
-  const { data:IO, isLoading: isIoLoading } = useGetIOsQuery({ page: TABLE_PAGINATION?.page, size: TABLE_PAGINATION?.size }); 
+  const { data: IO, isLoading: isIoLoading } = useGetIOsQuery({ page: TABLE_PAGINATION?.page, size: TABLE_PAGINATION?.size });
   const { data: investorDetails, isInvestorLoading } = useGetInvestorsQuery({ page: TABLE_PAGINATION?.page, size: TABLE_PAGINATION?.size });
-
-  console.log(IO?.data?.rows);
-
-
-
   const sortArrayByStatus = () => {
     const sortedArrays = {
       open: [],
@@ -33,12 +26,9 @@ const Dashbaord = () => {
       processing: [],
       draft: []
     };
-  
+
     IO?.data?.rows.forEach(item => {
       const status = item.ioStatus?.statusAdmin;
-      console.log(status);
-      
-  
       if (status === 'Open') {
         sortedArrays.open.push(item);
       } else if (status === 'Closed') {
@@ -49,87 +39,63 @@ const Dashbaord = () => {
         sortedArrays.draft.push(item);
       }
     });
-  
     return sortedArrays;
   };
-
   const statusData = sortArrayByStatus()
-  console.log(statusData);
-  
-  
-  
-
-
-
-
-
-
-
-
   const chartData = {
-    labels: [ 'Draft' ,'Open', 'Processing', 'Closed', ],
-    backgroundColor: [ '#3182ce', '#38A169', '#D69E2E', '#E53E3E' ],
-    values: [statusData?.draft?.length ,statusData?.open?.length, statusData?.processing?.length, statusData?.closed?.length]
+    labels: ['Draft', 'Open', 'Processing', 'Closed',],
+    backgroundColor: ['#3182ce', '#004118', '#D69E2E', '#E53E3E'],
+    values: [statusData?.draft?.length, statusData?.open?.length, statusData?.processing?.length, statusData?.closed?.length]
   };
-  
-  
+
   return (
-    isSponserLoading || isIoPreLoading || isIoLoading || isInvestorLoading ?<FullscreenLoaders/> :
-    <Box height={'100vh'} bg={'#fff'}  roundedTop={0}   mt={0}>
+    isIoPreLoading || isIoLoading || isInvestorLoading ? <FullscreenLoaders /> :
+    <Box height={'100vh'} bg={'#fff'} roundedTop={0} mt={0}>
       <Box display={'flex'} gap={6} w={'100%'} pt={3} pb={3} p={3} >
-
-
-      <Box border={"#fff solid 1px"} cursor={'pointer'} onClick={()=>navigate("/investor-details")} boxShadow={'lg'} color={"#fff"} p={4} rounded={'xl'} w={'25%'}  display={'flex'} bg={'#004118'} flexDirection={'column'} alignItems={'start'}  >
-          <Icon bg={'#fff'}  rounded={9} p={2} color={"#004118"} as={TbTransactionDollar} mb={6} boxSize={12} />
+        <Box position={'relative'} border={"#fff solid 1px"} cursor={'pointer'} onClick={() => navigate("/investor-details")} boxShadow={'lg'} color={"#fff"} p={4} rounded={'xl'} w={'25%'} display={'flex'} bg={'#004118'} flexDirection={'column'} alignItems={'start'}  >
+          <Icon bg={'#fff'} rounded={9} p={2} color={"#004118"} as={TbTransactionDollar} mb={6} boxSize={12} />
           <Text as={'span'} fontSize={'xs'}>Total Investors</Text>
           <Text as={'span'} fontSize={'36px'} fontWeight={700}>{investorDetails?.data?.totalItems}</Text>
+          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
         </Box>
-
-
-      <Box cursor={'pointer'} onClick={()=>navigate("/view-io")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'}  display={'flex'} flexDirection={'column'} alignItems={'start'} >
-          <Icon bg={'#004118'}  rounded={9} p={2} color={"#fff"} as={HiOutlineChartSquareBar}  mb={6} boxSize={12} />
+        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/view-io")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
+          <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={HiOutlineChartSquareBar} mb={6} boxSize={12} />
           <Text as={'span'} fontSize={'xs'}>Total IO</Text>
           <Text as={'span'} fontSize={'40px'} fontWeight={700}>{IO?.data?.totalItems}</Text>
+          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
         </Box>
-
-
-
-        <Box cursor={'pointer'} onClick={()=>navigate("/sponser")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'}  display={'flex'} flexDirection={'column'} alignItems={'start'} >
-          <Icon bg={'#004118'}  rounded={9} p={2} color={"#fff"} as={RiMoneyDollarBoxLine} mb={6} boxSize={12} />
+        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/sponser")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
+          <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={RiMoneyDollarBoxLine} mb={6} boxSize={12} />
           <Text as={'span'} fontSize={'xs'}>Total sponors</Text>
           <Text as={'span'} fontSize={'40px'} fontWeight={700}>{data?.data?.sponsor?.length}</Text>
+          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
         </Box>
-
-
-
-        <Box cursor={'pointer'} onClick={()=>navigate("/investment-type")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'}  display={'flex'} flexDirection={'column'} alignItems={'start'} >
-          <Icon bg={'#004118'}  rounded={9} p={2} color={"#fff"} as={VscSymbolClass} mb={6} boxSize={12} />
+        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investment-type")} boxShadow={'lg'} bg={'#fff'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
+          <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={VscSymbolClass} mb={6} boxSize={12} />
           <Text as={'span'} fontSize={'xs'}>Total Investment Type</Text>
           <Text as={'span'} fontSize={'40px'} fontWeight={700}>{data?.data?.investmentType?.length}</Text>
+          <Icon position={'absolute'} right={6} bottom={6} boxSize={12} as={PiChartLineUpDuotone} />
         </Box>
-
-
       </Box>
-
-<Box display={'flex'} pe={4}>
-      <Box w={'77%'} h={440}>
-
-      </Box>
-
-      <Box boxShadow={'lg'} bg={'#fff'} rounded={'xl'}  w={'23%'} display={'flex'} justifyContent={'space-between'} flexDirection={'column'} h={420} mt={1} p={4}>
-        <Text as={'span'} fontSize={'sm'}>IO Status</Text>
-        <Box h={'90%'}>
-        <DonutChart data={chartData} />
+      <Box display={'flex'} pe={4} >
+        <Box w={'77%'} p={4} pe={6} pt={1}  >
+          <Box position={'relative'} boxShadow={'lg'} rounded={'xl'} p={5}>
+            <Text position={'absolute'} top={3} left={6} as={'span'} fontSize={'sm'}>Exchange rate currency</Text>
+            <LineChart />
+          </Box>
+        </Box>
+        <Box boxShadow={'lg'} bg={'#fff'} rounded={'xl'} w={'23%'} display={'flex'} justifyContent={'space-between'} flexDirection={'column'} h={535} mt={1} p={4}>
+          <Text as={'span'} fontSize={'sm'}>IO Status</Text>
+          <Box display={'flex'} alignItems={'center'} h={'90%'} >
+            <DonutChart data={chartData} />
+          </Box>
+          <HStack mt={3}>
+            {chartData?.labels?.map((item, index) => <Text as={'span'} display={'flex'} gap={0.5} alignItems={'center'} fontSize={'xs'} fontWeight={600}><GoDotFill color={chartData?.backgroundColor[index]} fontSize={21} />{item}</Text>)}
+          </HStack>
         </Box>
-        <HStack mt={3}>
-        {
-          chartData?.labels?.map((item, index)=> <Text as={'span'} display={'flex'} gap={0.5} alignItems={'center'} fontSize={'xs'} fontWeight={600}><GoDotFill color={chartData?.backgroundColor[index]} fontSize={21} />{item}</Text>)
-        }</HStack>
       </Box>
-      </Box>
-
     </Box>
-  )
+    )
 }
 
 export default Dashbaord
\ No newline at end of file