diff --git a/src/components/accounts/Account.tsx b/src/components/accounts/Account.tsx
index fee10b2..be312fb 100644
--- a/src/components/accounts/Account.tsx
+++ b/src/components/accounts/Account.tsx
@@ -110,6 +110,12 @@ const Account = () => {
             // Add more cards here if needed
         ];
     };
+
+    const [activeAccountId, setActiveAccountId] = useState<string | null>(
+        JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
+    );
+
+    console.log("activeAccountId Trans.",activeAccountId)
     // const { accountId } = useParams<{ accountId: string }>();
     const [transactions, setTransactions] = useState<Transaction[]>([]);
     const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
@@ -121,25 +127,52 @@ const Account = () => {
 
     const [isModalOpen, setIsModalOpen] = useState(false);
 
-    const getUserDetails = async () => {
-        try {
-            let res = await api.get('/api/user/details')
-            let accountIDData = res?.data?.account?.id
-            setAccountID(accountIDData)
-        } catch (error) {
-            console.log(error)
-        }
-    }
+    // const getUserDetails = async () => {
+    //     try {
+    //         let res = await api.get('/api/user/details')
+    //         let accountIDData = res?.data?.account?.id
+    //         setAccountID(accountIDData)
+    //     } catch (error) {
+    //         console.log(error)
+    //     }
+    // }
 
-    useEffect(() => {
-        getUserDetails()
-    }, [])
+    // useEffect(() => {
+    //     getUserDetails()
+    // }, [])
+
+    // Listen for sessionStorage changes
+        useEffect(() => {
+            const handleStorageChange = (e: StorageEvent) => {
+                if (e.key === 'activeAccountId') {
+                    const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
+                    setActiveAccountId(newActiveAccountId);
+                }
+            };
+    
+            // Listen for storage events (works for changes from other tabs)
+            window.addEventListener('storage', handleStorageChange);
+    
+            // Custom event listener for same-tab changes
+            const handleCustomStorageChange = (e: CustomEvent) => {
+                if (e.detail.key === 'activeAccountId') {
+                    setActiveAccountId(e.detail.newValue);
+                }
+            };
+    
+            window.addEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
+    
+            return () => {
+                window.removeEventListener('storage', handleStorageChange);
+                window.removeEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
+            };
+        }, []);
 
 
     const getDashboardData = async () => {
         setIsLoading(true)
         const payload = {
-            account: accountID
+            account: activeAccountId
         };
 
         try {
@@ -154,50 +187,51 @@ const Account = () => {
         }
     };
 
-    useEffect(() => {
-        if (accountID) {
-            getDashboardData()
-            fetchTransactions();
-        }
-    }, [accountID]);
-
-    const handleOpenModal = () => {
-        setIsModalOpen(true);
-    };
-
     const fetchTransactions = async () => {
         console.log("fetchTransactions")
         try {
-            const response = await api(`/api/accounts/${accountID}/transactions`);
+            const response = await api(`/api/accounts/${activeAccountId}/transactions`);
             setTransactions(response.data || []);
         } catch (error) {
             console.error("Error fetching transactions:", error);
         }
     };
 
+    useEffect(() => {
+        if (activeAccountId) {
+            getDashboardData()
+            fetchTransactions();
+        }
+    }, [activeAccountId]);
+
+    const handleOpenModal = () => {
+        setIsModalOpen(true);
+    };
+
+
     // useEffect(() => {
     //     if (accountID) fetchTransactions();
     // }, [accountID]);
 
-    const getAccountDetails = async () => {
-        try {
-            let res = await api.get('/api/user/accounts')
-            let items = res?.data
-            setAccountsData(items)
-        } catch (error) {
-            console.log(error)
-        }
-    }
+    // const getAccountDetails = async () => {
+    //     try {
+    //         let res = await api.get('/api/user/accounts')
+    //         let items = res?.data
+    //         setAccountsData(items)
+    //     } catch (error) {
+    //         console.log(error)
+    //     }
+    // }
 
-    useEffect(() => {
-        getAccountDetails()
-    }, [])
+    // useEffect(() => {
+    //     getAccountDetails()
+    // }, [])
 
 
     const navigate = useNavigate();
 
     const handleTransactionClick = (id: number) => {
-        navigate(`/accounts/${accountID}/transactions/${id}`);
+        navigate(`/accounts/${activeAccountId}/transactions/${id}`);
     };
 
     const handleInvite = async (data: { i_accountName: number; email: string; role: string }) => {
@@ -235,7 +269,7 @@ const Account = () => {
     return (
         <>
             <Cards type="transactions" onOpenModal={handleOpenModal} cards={cards}
-                isLoading={isLoading}/>
+                isLoading={isLoading} />
             {transactions.length > 0 && (
                 <div className="overflow-x-auto py-2">
                     <table className="min-w-full text-sm border border-gray-200 rounded bg-white shadow-sm">
diff --git a/src/components/accounts/AccountNav.tsx b/src/components/accounts/AccountNav.tsx
index 9e6ac4f..ccfc83b 100644
--- a/src/components/accounts/AccountNav.tsx
+++ b/src/components/accounts/AccountNav.tsx
@@ -1,21 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-// import { useSelector } from 'react-redux';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { FaSignOutAlt, FaUser, FaBuilding, FaChevronDown, FaCheck } from "react-icons/fa";
 import api from '../../config/api';
-// import { FaUser, FaSignOutAlt, FaBuilding, FaChevronDown, FaCheck } from 'react-icons/fa';
-
-// import { RootState } from '../../store/store';
-// import { UserState } from '../../store/slices/userSlice';
-
-
 
 interface AccountNavProps {
   accountName?: string | null;
   transactionName?: string | null;
 }
 
-// Define the shape of state object
 interface Account {
   id: number;
   isDefault: boolean;
@@ -23,32 +15,45 @@ interface Account {
 }
 
 interface UserData {
-  id: string;
-  firstName: string;
-  lastName: string;
+  id: number;
+  name: string;
   email: string;
   language: string;
   account: Account;
 }
 
 interface AccountDataArray {
-  accountId: number, accountName: string, role: string, status: boolean
+  userId: number,
+  userEmail: string,
+  name: string,
+  accountId: number;
+  accountName: string;
+  role: string;
+  status: string;
 }
 
+// Helper function to dispatch custom storage event
+const dispatchSessionStorageChange = (key: string, newValue: any) => {
+  window.dispatchEvent(new CustomEvent('sessionStorageChange', {
+    detail: { key, newValue }
+  }));
+};
+
 const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transactionName = null }) => {
-  // const user: UserState = useSelector((state: RootState) => state.user);
+  const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
+  const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}');
+  console.log("activeAccountId", activeAccountId);
 
   const [open, setOpen] = useState(false);
   const [accountsOpen, setAccountsOpen] = useState(false);
   const [loadingAccounts, setLoadingAccounts] = useState(false);
   const [accounts, setAccounts] = useState<AccountDataArray[]>([]);
-  const [hasModalBeenClosed, setHasModalBeenClosed] = useState(false); // Track if modal was closed
-  const dropdownRef = useRef(null);
+  const [hasModalBeenClosed, setHasModalBeenClosed] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   const [user, setUser] = useState<UserData>({
-    id: "",
-    firstName: "",
-    lastName: "",
+    id: 0,
+    name: "",
     email: "",
     language: "",
     account: {
@@ -58,13 +63,17 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
     },
   });
 
+  console.log("user", user)
   const getAccountDetails = async () => {
     try {
-      let res = await api.get('/api/user/accounts')
-      let items = res?.data
-      console.log('items', items)
-      // Extract only the fields you want
+      let res = await api.get('/api/user/accounts');
+      let items = res?.data;
+      console.log('items', items);
+
       const cleanedData: AccountDataArray[] = items.map((item: any) => ({
+        userId: item.userId,
+        userEmail: item.userEmail,
+        name: item.name,
         accountId: item.accountId,
         accountName: item.accountName,
         role: item.role,
@@ -73,89 +82,137 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
 
       setAccounts(cleanedData);
     } catch (error) {
-      console.log(error)
+      console.log(error);
     }
-  }
-
+  };
 
   const handleAccountsClick = async () => {
     setAccountsOpen(!accountsOpen);
-    
+
     if (!accountsOpen) {
       setLoadingAccounts(true);
-      
-      // Fetch API if:
-      // 1. No accounts data exists (first time), OR
-      // 2. Modal was previously closed (need fresh data)
+
       if (accounts.length === 0 || hasModalBeenClosed) {
         await getAccountDetails();
-        setHasModalBeenClosed(false); // Reset the flag after fetching
+        setHasModalBeenClosed(false);
       }
-      
+
       setLoadingAccounts(false);
     }
   };
 
-  const handleAccountSwitch = (account) => {
-    setUser(prev => ({
-      ...prev,
-      account: { name: account.name, id: account.id }
-    }));
+  const handleAccountSwitch = (account: any) => {
+    console.log("handleAccountSwitch", account);
 
-    // Update accounts active status
-    setAccounts(prevAccounts =>
-      prevAccounts.map(acc => ({
-        ...acc,
-        isActive: acc.id === account.id
-      }))
-    );
+    // Update sessionStorage
+    sessionStorage.setItem('activeAccountId', JSON.stringify(account.accountId));
+
+    // Dispatch custom event
+    dispatchSessionStorageChange('activeAccountId', account.accountId);
+
+    // Update user state
+
+    setUser({
+      id: account.userId,
+      name: account.name,
+      email: account.userEmail,
+      language: "", // set it if available
+      account: {
+        id: account.accountId,
+        isDefault: false, // update as needed
+        name: account.accountName,
+      },
+    });
+
+    sessionStorage.setItem('userDetails', JSON.stringify({
+      id: account.userId,
+      name: account.name,
+      email: account.userEmail,
+      language: "", // set it if available
+      account: {
+        id: account.accountId,
+        isDefault: false, // update as needed
+        name: account.accountName,
+      },
+    }));
 
     setAccountsOpen(false);
     setOpen(false);
   };
 
-  const navigate = useNavigate()
+
+  const navigate = useNavigate();
 
   const getUserDetails = async () => {
     try {
-      let res = await api.get(`/api/user/details`)
-      console.log("getuser", res)
-      setUser(res?.data)
+      let res = await api.get(`/api/user/details`);
+      console.log("getuser", res);
+      const item = res?.data;
+      if (item) {
+        const userData = {
+          id: item?.id,
+          name : item?.firstName + " " + item?.lastName ,
+          email: item?.email,
+          language: "",
+          account: {
+            id: item?.account.id,
+            isDefault: false,
+            name: item?.account.name,
+          },
+        };
+
+        console.log("userData",userData)
+
+        setUser(userData); 
+        sessionStorage.setItem('userDetails', JSON.stringify(userData));
+        sessionStorage.setItem('activeAccountId', JSON.stringify(userData.account.id));
+  
+        // Dispatch event for initial load
+        dispatchSessionStorageChange('activeAccountId', userData.account.id);
+  
+        console.log("Data is saved in sessionStorage");
+      }
+
+
     } catch (error) {
       console.error("Error fetching user details:", error);
     }
-  }
+  };
 
   useEffect(() => {
-    getUserDetails()
-  }, [])
-
+    if (!activeAccountId) {
+      getUserDetails();
+    } else {
+      setUser(userDetails);
+    }
+  }, []);
 
   const location = useLocation();
 
-  const pathnames = location.pathname
+  const rawPathnames = location.pathname
     .split("/")
-    .filter((x) => x && isNaN(Number(x))); // remove numeric IDs
+    .filter((x) => x && isNaN(Number(x)));
+
+  // Special case: if first segment is 's' and next is 'settings', remove 's'
+  const pathnames =
+    rawPathnames[0] === "s" && rawPathnames[1] === "settings"
+      ? rawPathnames.slice(1)
+      : rawPathnames;
 
   const labelMap: Record<string, string> = {
     accounts: "Accounts",
     transactions: "Transactions",
     templates: "Templates"
-    // Add more routes here if needed
   };
 
-  // const [open, setOpen] = useState(false);
-  // const dropdownRef = useRef<HTMLDivElement>(null);
-
-  // Close dropdown when clicked outside
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
         if (open) {
-          setHasModalBeenClosed(true); // Mark modal as closed when clicking outside
+          setHasModalBeenClosed(true);
         }
         setOpen(false);
-        setAccountsOpen(false); // Also close accounts dropdown
+        setAccountsOpen(false);
       }
     }
 
@@ -165,24 +222,24 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
 
   const handleLogout = async () => {
     try {
-      let res = await api.post('/api/auth/logout')
+      let res = await api.post('/api/auth/logout');
       if (res.status === 200) {
+        sessionStorage.clear();
         setOpen(false);
-        navigate("/login")
+        navigate("/login");
       }
     } catch (error) {
-      console.log(error)
+      console.log(error);
     }
   };
 
-  // Handle main dropdown toggle
   const handleMainDropdownToggle = () => {
     if (open) {
-      setHasModalBeenClosed(true); // Mark as closed when manually closing
+      setHasModalBeenClosed(true);
     }
     setOpen(!open);
     if (!open) {
-      setAccountsOpen(false); // Close accounts dropdown when opening main dropdown
+      setAccountsOpen(false);
     }
   };
 
@@ -191,7 +248,6 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
       .replace(/[-_]/g, " ")
       .replace(/\b\w/g, (char) => char.toUpperCase());
 
-
   const ShimmerRow = () => (
     <div className="animate-pulse px-4 py-3 border-b border-gray-100 last:border-b-0">
       <div className="flex items-center space-x-3">
@@ -205,7 +261,6 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
     </div>
   );
 
-
   return (
     <header className="w-full px-6 py-2 flex justify-between items-center bg-white border-b rounded-sm border-gray-200">
       <nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
@@ -237,46 +292,40 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
       </nav>
 
       <div className="flex items-center space-x-2">
-
-        {/* User Dropdown */}
         <div className="relative" ref={dropdownRef}>
-          {/* Avatar Button */}
           <button
-            className="flex items-center space-x-2 p-1 cursor-pointer rounded-lg  transition-colors"
+            className="flex items-center space-x-2 p-1 cursor-pointer rounded-lg transition-colors"
             onClick={handleMainDropdownToggle}
             aria-expanded={open}
             aria-haspopup="true"
           >
             <div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
               {user ? (
-                <span
-                  className="w-full h-full object-cover p-1.5 font-bold"
-                >{(user?.firstName + " " + user?.lastName).split(' ').map((item) => item.slice(0, 1)).join("").toUpperCase()}</span>
+                <span className="w-full h-full object-cover p-1.5 font-bold">
+                  {(user?.name?.slice(0, 2)).toUpperCase()}
+                </span>
               ) : (
                 <FaUser className="text-lg" />
               )}
             </div>
           </button>
 
-          {/* Enhanced Dropdown */}
           {open && (
             <div className="absolute right-0 mt-2 w-72 top-8 rounded-xl shadow-xl bg-white border border-gray-200 z-50 overflow-hidden">
-              {/* User Info Section */}
               <div className="px-4 py-4 bg-gradient-to-r from-blue-50 to-purple-50 border-b border-gray-100">
                 <div className="flex items-center space-x-3">
                   <div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold shadow-md">
-                    {(user) ? (
-                      <span
-                        className="w-full h-full object-cover px-3 text-xl py-2.5 font-bold"
-                      >
-                        {(user?.firstName + " " + user?.lastName).split(' ').map((item) => item.slice(0, 1)).join("").toUpperCase()}</span>
+                    {user ? (
+                      <span className="w-full h-full object-cover px-3 text-xl py-2.5 font-bold">
+                        {(user?.name?.slice(0, 2)).toUpperCase()}
+                      </span>
                     ) : (
                       <FaUser className="text-lg" />
                     )}
                   </div>
                   <div className="flex-1 min-w-0">
-                    <div className="font-semibold text-gray-900 truncate">{user.firstName + ' ' + user.lastName || '-'}</div>
-                    <div className="text-sm text-gray-600 truncate">{user.email || '-'}</div>
+                    <div className="font-semibold text-gray-900 truncate">{user?.name || '-'}</div>
+                    <div className="text-sm text-gray-600 truncate">{user?.email || '-'}</div>
                     <div className="text-xs text-gray-500 mt-1">
                       Account #{user?.account?.name || '-'}
                     </div>
@@ -284,7 +333,6 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
                 </div>
               </div>
 
-              {/* Account List Section */}
               <div className="border-b border-gray-100">
                 <button
                   onClick={handleAccountsClick}
@@ -297,7 +345,6 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
                   <FaChevronDown className={`text-gray-400 transition-transform ${accountsOpen ? 'rotate-180' : ''}`} />
                 </button>
 
-                {/* Accounts Dropdown */}
                 {accountsOpen && (
                   <div className="bg-gray-50 max-h-64 overflow-y-auto">
                     {loadingAccounts ? (
@@ -307,42 +354,43 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
                       </div>
                     ) : (
                       <div className="divide-y divide-gray-200">
-                        {accounts.length > 0 ? (accounts?.map((account) => (
-                          <button
-                            key={account.accountId}
-                            // onClick={() => handleAccountSwitch(account)}
-                            className="w-full px-4 py-3 hover:bg-white transition-colors cursor-pointer text-left"
-                          >
-                            <div className="flex items-center justify-between">
-                              <div className="flex items-center space-x-3">
-                                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 flex items-center justify-center text-white font-semibold text-xs">
-                                  {account.accountName.slice(0, 2).toUpperCase()}
-                                </div>
-                                <div className="flex-1 min-w-0">
-                                  <div className="flex items-center space-x-2">
-                                    <span className="font-medium text-gray-900 text-sm">{account.accountName}</span>
-                                    {account.status && (
-                                      <FaCheck className="text-green-500 text-xs" />
-                                    )}
+                        {accounts?.length > 0 ? (
+                          accounts?.map((account) => (
+                            <button
+                              key={account.accountId}
+                              onClick={() => handleAccountSwitch(account)}
+                              className={`w-full px-4 py-3 hover:bg-white transition-colors cursor-pointer text-left`}
+                            >
+                              <div className={`flex items-center justify-between`}>
+                                <div className="flex items-center space-x-3">
+                                  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 flex items-center justify-center text-white font-semibold text-xs">
+                                    {/* {account.accountName.slice(0, 2).toUpperCase()} */}
                                   </div>
-                                  <div className="text-xs text-gray-600 truncate">{account.company}</div>
+                                  <div className="flex-1 min-w-0">
+                                    <div className="flex items-center space-x-2">
+                                      <span className="font-medium text-gray-900 text-sm">{account.accountName}</span>
+                                      {account.accountId === activeAccountId && (
+                                        <FaCheck className="text-green-600 text-xs" />
+                                      )}
+                                    </div>
+                                  </div>
+                                </div>
+                                <div className="text-xs text-gray-500 bg-gray-200 px-2 py-1 rounded">
+                                  {account.role}
                                 </div>
                               </div>
-                              <div className="text-xs text-gray-500 bg-gray-200 px-2 py-1 rounded">
-                                {account.role}
-                              </div>
-                            </div>
-                          </button>
-                        ))) : <span className='text-gray-400 font-medium text-[12px] flex justify-center p-3'>No Account...</span>}
-                        
+                            </button>
+                          ))
+                        ) : (
+                          <span className='text-gray-400 font-medium text-[12px] flex justify-center p-3'>No Account...</span>
+                        )}
                       </div>
                     )}
                   </div>
                 )}
               </div>
 
-              {/* Logout Section */}
-              <div className="border-t border-gray-100 ">
+              <div className="border-t border-gray-100">
                 <button
                   onClick={handleLogout}
                   className="w-full flex items-center px-4 py-3 text-sm text-red-600 hover:bg-red-50 transition-colors cursor-pointer"
diff --git a/src/components/dashboard/SideBar.tsx b/src/components/dashboard/SideBar.tsx
index b06c077..8c7b7a6 100644
--- a/src/components/dashboard/SideBar.tsx
+++ b/src/components/dashboard/SideBar.tsx
@@ -42,6 +42,7 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
                     headers: { "ngrok-skip-browser-warning": "69420" }
                 }
             );
+            sessionStorage.clear();
             // Redirect to login or refresh the page after logout
             window.location.href = '/login';
         } catch (err) {
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index b772ece..db94bf1 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -61,8 +61,8 @@ const Home = () => {
                 trend: 'up'
             },
             {
-                title: 'Waiting for Others',
-                count: data.waitingForOthers || 0,
+                title: 'Draft',
+                count: data.draft || 0,
                 icon: <FaClock size={18} className="text-stone-600" />,
                 gradient: 'bg-gradient-to-br from-blue-50 to-blue-100',
                 shadowColor: 'shadow-blue-200/50',
@@ -70,69 +70,27 @@ const Home = () => {
                 textColor: 'text-blue-700',
                 trend: 'down'
             },
-            // {
-            //     title: 'declined',
-            //     count: data.declined || 0,
-            //     icon: <FaClock size={18} className="text-purple-600" />,
-            //     gradient: 'bg-gradient-to-br from-purple-50 to-purple-100',
-            //     shadowColor: 'shadow-purple-200/50',
-            //     iconBg: 'bg-purple-100 border-purple-200',
-            //     textColor: 'text-purple-700',
-            //     trend: 'down'
-            // },
-            // {
-            //     title: 'cancelled',
-            //     count: data.cancelled || 0,
-            //     icon: <FaClock size={18} className="text-green-600" />,
-            //     gradient: 'bg-gradient-to-br from-green-50 to-green-100',
-            //     shadowColor: 'shadow-green-200/50',
-            //     iconBg: 'bg-green-100 border-green-200',
-            //     textColor: 'text-green-700',
-            //     trend: 'down'
-            // },
-            // {
-            //     title: 'draft',
-            //     count: data.draft || 0,
-            //     icon: <FaClock size={18} className="text-stone-600" />,
-            //     gradient: 'bg-gradient-to-br from-stone-50 to-stone-100',
-            //     shadowColor: 'shadow-stone-200/50',
-            //     iconBg: 'bg-stone-100 border-stone-200',
-            //     textColor: 'text-stone-700',
-            //     trend: 'down'
-            // }
-            // Add more cards here if needed
         ];
     };
 
+    const [activeAccountId, setActiveAccountId] = useState<string | null>(
+        JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
+    );
     const [dashboardData, setDashboardData] = useState<any>(null);
-    const [fromDate, setFromDate] = useState<string>(''); // ISO string
-    const [toDate, setToDate] = useState<string>('');     // ISO string
+    const [fromDate, setFromDate] = useState<string>('');
+    const [toDate, setToDate] = useState<string>('');
     const [cards, setCards] = useState<CardData[]>([]);
-    const [accountID, setAccountID] = useState<number>()
     const [isLoading, setIsLoading] = useState<boolean>(false);
 
-    console.log("cards", cards)
+    console.log("activeAccountId", activeAccountId);
+    console.log("cards", cards);
 
-    const getUserDetails = async () => {
-        try {
-            let res = await api.get('/api/user/details')
-            let accountIDData = res?.data?.account?.id
-            setAccountID(accountIDData)
-        } catch (error) {
-            console.log(error)
-        }
-    }
-
-    useEffect(() => {
-        getUserDetails()
-    }, [])
-
-    const getDashboardData = async (from: string, to: string) => {
-        setIsLoading(true)
+    const getDashboardData = async () => {
+        if (!activeAccountId) return;
+        
+        setIsLoading(true);
         const payload = {
-            fromDate: from, // already ISO string
-            toDate: to,
-            account : accountID 
+            account: activeAccountId
         };
 
         try {
@@ -143,8 +101,8 @@ const Home = () => {
             setCards(cardDataArray);
         } catch (error) {
             console.error("Error fetching dashboard data:", error);
-        }finally{
-            setIsLoading(false)
+        } finally {
+            setIsLoading(false);
         }
     };
 
@@ -155,16 +113,41 @@ const Home = () => {
         setToDate(isoTo);
     }, []);
 
+    // Listen for sessionStorage changes
     useEffect(() => {
-        if (fromDate && toDate && accountID) {
-            getDashboardData(fromDate, toDate);
+        const handleStorageChange = (e: StorageEvent) => {
+            if (e.key === 'activeAccountId') {
+                const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
+                setActiveAccountId(newActiveAccountId);
+            }
+        };
+
+        // Listen for storage events (works for changes from other tabs)
+        window.addEventListener('storage', handleStorageChange);
+
+        // Custom event listener for same-tab changes
+        const handleCustomStorageChange = (e: CustomEvent) => {
+            if (e.detail.key === 'activeAccountId') {
+                setActiveAccountId(e.detail.newValue);
+            }
+        };
+
+        window.addEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
+
+        return () => {
+            window.removeEventListener('storage', handleStorageChange);
+            window.removeEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
+        };
+    }, []);
+
+    // Re-fetch dashboard data when activeAccountId changes
+    useEffect(() => {
+        if (activeAccountId) {
+            getDashboardData();
         }
-    }, [fromDate, toDate , accountID]);
+    }, [activeAccountId]);
 
-    
-
-
-    // Set default range on mount (last 7 days)
+    // Set default date range on mount (last 7 days)
     useEffect(() => {
         const now = new Date();
         const from = new Date();
@@ -190,4 +173,4 @@ const Home = () => {
     );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx
index 99d6f4d..d1a42e0 100644
--- a/src/components/process/processStepTwo/DocumentContainer.tsx
+++ b/src/components/process/processStepTwo/DocumentContainer.tsx
@@ -277,10 +277,10 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
         tagsData = groupByRecipientId(tagsData);
         sendTagsToRecipients(tagsData, accountId, transactionId);
 
-        // (async () => {
-        //     const res = await api.put(`/api/accounts/${accountId}/transactions/${transactionId}`, {status: "SENT"})
-        //     console.log(res, "Check123")
-        // })()
+        (async () => {
+            const res = await api.put(`/api/accounts/${accountId}/transactions/${transactionId}`, {status: "SENT"})
+            console.log(res, "Check123")
+        })()
     }, [isSend])
     // Save Tags - END
 
diff --git a/src/components/setting/Setting.tsx b/src/components/setting/Setting.tsx
index abc4e3a..000d1d0 100644
--- a/src/components/setting/Setting.tsx
+++ b/src/components/setting/Setting.tsx
@@ -43,7 +43,9 @@ interface AccountOption {
 
 const Setting = () => {
   const { page1 } = useParams<{ page1: string }>();
+  console.log("page1" , page1)
   const location = useLocation();
+  console.log("location",location)
   const navigate = useNavigate();
 
   // Refs for subsections within each main tab
@@ -337,8 +339,8 @@ const Setting = () => {
 
   return (
     <>
-      <SettingNav />
-      {/* <AccountNav/> */}
+      {/* <SettingNav /> */}
+      <AccountNav/>
       <div className="bg-[#f9fafa] h-[calc(90vh-20px)] flex flex-col mt-2">
         {/* Main Navigation Tabs */}
         <div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-8 pt-5">