diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx
index 0e4bbff..6b0b070 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,
@@ -15,23 +15,42 @@ import EmptySearchList from "../EmptySearchList";
 import Pagination from "../Pagination";
 import { useNavigate } from "react-router-dom";
 
-const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage, totalPages, viewActionId, 
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+
+const DataTable = ({
+  data,
+  isLoading,
+  tableHeadRow,
+  emptyMessage,
+  totalPages,
   setMouseEntered,
-  setMouseEnteredId, }) => {
-  const navigate = useNavigate()
-  const columnWidth = data && data[0] ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%` : "auto";
+  setMouseEnteredId,
+}) => {
+  const navigate = useNavigate();
+  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">
       {data?.length === 0 ? (
         <EmptySearchList message={emptyMessage} />
       ) : (
-        <Table   size="sm">
-        {/* <TableCaption><Pagination totalItems={totalPages} /></TableCaption> */}
-        <TableCaption>Tanami v1.0</TableCaption>
-          <Thead   backgroundColor="gray.50">
+        <Table size="sm">
+          {/* <TableCaption><Pagination totalItems={totalPages} /></TableCaption> */}
+          <TableCaption>Tanami v1.0</TableCaption>
+          <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>
@@ -44,6 +63,7 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage, totalPages, vi
                   <Tr key={index}>
                     {tableHeadRow.map((_, i) => (
                       <Td
+                        textAlign={slideFromRight ? "right" : "left"}
                         key={i}
                         style={{
                           whiteSpace: "nowrap",
@@ -58,46 +78,43 @@ const DataTable = ({ data, isLoading, tableHeadRow, emptyMessage, totalPages, vi
                   </Tr>
                 ))
               : data?.map((item, index) => (
-                  <Tr       
-                  // onMouseEnter={(e) => {
-                  //   e.currentTarget.style.backgroundColor = "transparent"; // Change the background color on hover
-                  //   e.currentTarget.style.transition = "0.1s";
-                  //   e.currentTarget.style.boxShadow =
-                  //     "rgba(0, 0, 0, 0.24) 0px 1px 8px";
-                  //   setMouseEntered(true);
-                  //   setMouseEnteredId(item.id);
-                  // }}
-                  // onMouseLeave={(e) => {
-                  //   e.currentTarget.style.backgroundColor = "transparent"; // Revert to default background color on hover out
-                  //   e.currentTarget.style.transition = "0.3s";
-                  //   e.currentTarget.style.boxShadow = "none";
-                  //   setMouseEntered(false);
-                  // }}
-                  transition={'0.5s all'}
-                  _hover={{
-                    bg:"green.50",
-                    cursor: "pointer",
-                  }} key={index}>
+                  <Tr
+                    // onMouseEnter={(e) => {
+                    //   e.currentTarget.style.backgroundColor = "transparent"; // Change the background color on hover
+                    //   e.currentTarget.style.transition = "0.1s";
+                    //   e.currentTarget.style.boxShadow =
+                    //     "rgba(0, 0, 0, 0.24) 0px 1px 8px";
+                    //   setMouseEntered(true);
+                    //   setMouseEnteredId(item.id);
+                    // }}
+                    // onMouseLeave={(e) => {
+                    //   e.currentTarget.style.backgroundColor = "transparent"; // Revert to default background color on hover out
+                    //   e.currentTarget.style.transition = "0.3s";
+                    //   e.currentTarget.style.boxShadow = "none";
+                    //   setMouseEntered(false);
+                    // }}
+                    transition={"0.5s all"}
+                    _hover={{
+                      bg: "green.50",
+                      cursor: "pointer",
+                    }}
+                    key={index}
+                  >
                     {tableHeadRow.map((heading, i) => (
                       <Td
-
-                      onClick={
-                        i === tableHeadRow.length - 1 || i === 0
-                          ? null
-                          : () => navigate(`edit-sponser/${item.id}`) // Define the onClick handler for other cells
-                      }
-                        // color={"gray.600"}
+                        textAlign={slideFromRight ? "right" : "left"}
+                        color={"gray.600"}
                         key={i}
                         style={{
                           whiteSpace: "nowrap",
                           textOverflow: "ellipsis",
                         }}
                         className="web-text-small"
-
-
-
-                  
-                        
+                        onClick={
+                          i === tableHeadRow.length - 1 || i === 0
+                            ? null
+                            : () => navigate(`edit-sponser/${item.id}`) // Define the onClick handler for other cells
+                        }
                       >
                         {item[heading]}
                       </Td>
diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index 705c331..1c040cf 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -12,6 +12,7 @@ const GlobalStateProvider = ({ children }) => {
   const [isAuthenticate, setIsAuthenticate] = useState(false);
   const [memberIfo, setMemberInfo] = useState();
   const [communityMembers, setCommityMembers] = useState();
+  const [slideFromRight, setSlideFormRight] = useState(false);
 
   const { colorMode, toggleColorMode } = useColorMode();
   const [sponser, setSponser] = useState([
@@ -270,6 +271,8 @@ const GlobalStateProvider = ({ children }) => {
         setSponser,
         colorMode,
         toggleColorMode,
+        slideFromRight,
+        setSlideFormRight
       }}
     >
       {children}
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index 4597cd8..f3fd563 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -74,8 +74,7 @@ const DashboardLayout = () => {
   const path = location.pathname;
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [openDrawerClick, setOpenDrawerClick] = useState(true);
-  const { setIsAuthenticate, colorMode, toggleColorMode } = useContext(GlobalStateContext);
-  const [slideFromRight, setSlideFormRight] = useState(false);
+  const { setIsAuthenticate, colorMode, toggleColorMode, setSlideFormRight, slideFromRight } = useContext(GlobalStateContext);
   const [isSplashVisible, setSplashVisible] = useState(true);
 
 
@@ -341,7 +340,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",
@@ -376,8 +375,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) => {
@@ -543,9 +542,9 @@ const DashboardLayout = () => {
               width: 18,
               height: 26,
               position: "absolute",
-              right: 0,
+              right: -19,
               bottom: 28,
-              zIndex: 333,
+              zIndex: 99,
             }}
           >
             {isDrawerOpen || openDrawerClick ? (
@@ -594,7 +593,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",
@@ -803,13 +802,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 2fd8e39..45f0b94 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);
@@ -85,7 +85,7 @@ const Sponser = () => {
   const extractedArray = filteredData?.map((item) => ({
     id: item?.id,
     "Sponser name": (
-      <Text
+      <Text justifyContent={slideFromRight? 'right': 'left' }
         as={"span"}
         color={"gray.600"}
         className="d-flex align-items-center fw-bold web-text-small"
@@ -94,7 +94,7 @@ const Sponser = () => {
       </Text>
     ),
     Address: (
-      <Box w={350} isTruncated={true}>
+      <Box w={350} isTruncated={true} >
         <Text as={"span"} color={"teal.900"}>
           {item.sponserAddress}
         </Text>