diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx
index e402b87..f9608c8 100644
--- a/src/Components/DataTable/DataTable.jsx
+++ b/src/Components/DataTable/DataTable.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import {
   Table,
   TableContainer,
@@ -13,8 +13,12 @@ import {
 } from "@chakra-ui/react";
 import EmptySearchList from "../EmptySearchList";
 import Pagination from "../Pagination";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
 
 const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage, totalPages }) => {
+  const { slideFromRight } = useContext(GlobalStateContext);
+
+
   const columnWidth = data && data[0] ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%` : "auto";
   return (
     <TableContainer overflowX={"hidden"} className="h-auto mb-3 w-100">
@@ -27,7 +31,7 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage, totalPages })
           <Thead   backgroundColor="gray.50">
             <Tr>
               {tableHeadRow.map((heading, index) => (
-                <Th key={index} p={3} w={"auto"} color={"#004118"}>
+                <Th textAlign={slideFromRight? 'right': 'left'} key={index} p={3} w={"auto"} color={"#004118"}>
                   {isLoading ? <Skeleton height="20px" /> : heading}
                   {/* {heading} */}
                 </Th>
@@ -39,7 +43,7 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage, totalPages })
               ? Array?.from({ length: 10 }).map((_, index) => (
                   <Tr key={index}>
                     {tableHeadRow.map((_, i) => (
-                      <Td
+                      <Td textAlign={slideFromRight? 'right': 'left'}
                         key={i}
                         style={{
                           whiteSpace: "nowrap",
@@ -56,7 +60,7 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage, totalPages })
               : data?.map((item, index) => (
                   <Tr key={index}>
                     {tableHeadRow.map((heading, i) => (
-                      <Td
+                      <Td textAlign={slideFromRight? 'right': 'left'}
                         color={"gray.600"}
                         key={i}
                         style={{
diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index d677587..5ee3073 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -11,6 +11,8 @@ import {
   PopoverTrigger,
   Portal,
   Text,
+  useColorMode,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import React from "react";
 import { Link } from "react-router-dom";
@@ -21,6 +23,11 @@ import profile from "../assets/proavatar.webp"
 
 const HeaderMain = ({ link, btnTitle, title, icon, logOutHandler, slideDirecttion }) => {
 
+  const { toggleColorMode } = useColorMode()
+
+  const bg = useColorModeValue('red.500', 'red.200')
+  const color = useColorModeValue('white', 'gray.800')
+
 
   return (
     <Box
@@ -32,6 +39,7 @@ const HeaderMain = ({ link, btnTitle, title, icon, logOutHandler, slideDirecttio
         fontWeight={"500"}
         color={"forestGreen.500"}
         className="fs-6 "
+        onClick={toggleColorMode}
       >
         {/* <icon /> */}
         {title}
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index ba86dc0..c43c916 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -11,6 +11,7 @@ const GlobalStateProvider = ({ children }) => {
   const [isAuthenticate, setIsAuthenticate] = useState(false);
   const [memberIfo, setMemberInfo] = useState();
   const [communityMembers, setCommityMembers] = useState();
+  const [slideFromRight, setSlideFormRight] = useState(false);
 
     const [sponser, setSponser] = useState([
       {
@@ -265,6 +266,8 @@ const GlobalStateProvider = ({ children }) => {
         setCommityMembers,
         sponser,
         setSponser,
+        slideFromRight,
+        setSlideFormRight
       }}
     >
       {children}
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 969e7ff..c730caf 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -71,8 +71,7 @@ const DashboardLayout = () => {
   const path = location.pathname;
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [openDrawerClick, setOpenDrawerClick] = useState(true);
-  const { setIsAuthenticate } = useContext(GlobalStateContext);
-  const [slideFromRight, setSlideFormRight] = useState(false);
+  const { setIsAuthenticate,slideFromRight,setSlideFormRight } = useContext(GlobalStateContext);
 
   const openDrawerOnClick = () => {
     setOpenDrawerClick(!openDrawerClick);
@@ -328,7 +327,7 @@ const DashboardLayout = () => {
           style={{
             width: isDrawerOpen || openDrawerClick ? 232 : 74,
             transition: "width 0.3s ease-in-out", // Smooth transition for width change
-            overflow: "hidden", // Hide overflow to prevent content overflow during transition
+            // overflow: "hidden",
             backgroundColor: "#0041180A",
             position: "relative",
             // backgroundColor: "#002F0F",
@@ -362,8 +361,8 @@ const DashboardLayout = () => {
           </div>
 
           <Box
-            className="ps-2 pb-5 scroll-bar pe-1"
-            style={{ height: "90%", overflowY: "scroll", overflowX: "hidden" }}
+            className="ps-2 scroll-bar pe-1"
+            style={{ height: "90%", overflowY: "scroll", overflowX: "hidden" ,paddingBottom:'5rem'}}
           >
             <Accordion m={0} allowToggle>
               {nav.map(({ title, type, Icon, submenu, path }, index) => {
@@ -529,9 +528,9 @@ const DashboardLayout = () => {
               width: 18,
               height: 26,
               position: "absolute",
-              right: 0,
+              right: -19,
               bottom: 28,
-              zIndex: 333,
+              zIndex: 99,
             }}
           >
             {isDrawerOpen || openDrawerClick ? (
@@ -580,7 +579,7 @@ const DashboardLayout = () => {
           style={{
             width: isDrawerOpen || openDrawerClick ? 232 : 74,
             transition: "width 0.3s ease-in-out", // Smooth transition for width change
-            overflow: "hidden", // Hide overflow to prevent content overflow during transition
+            // overflow: "hidden", 
             backgroundColor: "#0041180A",
             position: "relative",
             // backgroundColor: "#002F0F",
@@ -789,13 +788,13 @@ const DashboardLayout = () => {
               width: 18,
               height: 26,
               position: "absolute",
-              left: 0,
+              left: -18,
               bottom: 28,
-              zIndex: 333,
+              zIndex: 99,
             }}
           >
             {isDrawerOpen || openDrawerClick ? (
-              <ArrowRightIcon className="web-text-small " />
+              <ArrowRightIcon  className="web-text-small " />
             ) : (
               <ArrowLeftIcon className="web-text-small" />
             )}
diff --git a/src/Pages/Master/Sponser/Sponsers.jsx b/src/Pages/Master/Sponser/Sponsers.jsx
index cadd87f..472587e 100644
--- a/src/Pages/Master/Sponser/Sponsers.jsx
+++ b/src/Pages/Master/Sponser/Sponsers.jsx
@@ -28,7 +28,7 @@ import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
 const Sponser = () => {
-  const { sponser, setSponser } = useContext(GlobalStateContext);
+  const { sponser, setSponser,slideFromRight } = useContext(GlobalStateContext);
   const [searchTerm, setSearchTerm] = useState("");
   const [isLoading, setIsLoading] = useState(true);
   const [deleteAlert, setDeleteAlert] = useState(false);
@@ -79,7 +79,7 @@ const Sponser = () => {
 
   const extractedArray = filteredData?.map((item) => ({
     "Sponser name": (
-      <Text
+      <Text justifyContent={slideFromRight? 'right': 'left' }
         as={"span"}
         color={"gray.600"}
         className="d-flex align-items-center fw-bold web-text-small"
@@ -88,7 +88,7 @@ const Sponser = () => {
       </Text>
     ),
     Address: (
-      <Box w={350} isTruncated={true}>
+      <Box w={350} isTruncated={true} >
         <Text as={"span"} color={"teal.900"}>
           {item.sponserAddress}
         </Text>