diff --git a/src/app/components/RecentPayee.tsx/RecentPayee.tsx b/src/app/components/RecentPayee.tsx/RecentPayee.tsx
index 2b63878..a707f59 100644
--- a/src/app/components/RecentPayee.tsx/RecentPayee.tsx
+++ b/src/app/components/RecentPayee.tsx/RecentPayee.tsx
@@ -12,15 +12,62 @@ import Link from 'next/link';
 import truncateEthAddress from 'truncate-eth-address';
 // components
 import { Avatar } from '@/app/components/ui/avatar';
+// alchemy
 import { AssetTransfersResponse } from 'alchemy-sdk';
+// hooks
 import useGetAddress from '@/app/hooks/useGetAddress';
+// card
 import { Card, CardContent, CardHeader } from '../ui/card';
 
+// redux
+import { useSelector } from 'react-redux';
+import { RootState } from '@/GlobalRedux/store';
+ import { Contact } from '@/app/types/types';
+
+  function Payee ({payee, contactsState} : {payee: string, payees: any, contactsState: Contact[]}) {
+    
+  // Find the contact in contactsState array with matching address
+  const matchedContact = contactsState.find((contact: Contact) => contact.address === payee);
+
+  // If a matching contact is found, use its name, otherwise use truncated payee address
+  const payeeName = matchedContact ? matchedContact.name : truncateEthAddress(payee);
+  
+    return (
+      <>
+        <div key={payee}>
+          <Link href={{ pathname: `/payee`, query: { payeeAddress: payee } }}>
+            <div className='space-y-8'>
+              <div className='flex w-full items-center '>
+                <Avatar className='h-9 w-9 bg-white'></Avatar>
+                <div className='ml-4 space-y-1'>
+                  <div className='text-sm font-medium leading-none'>
+                    {payeeName}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Link>
+        </div>
+      </>
+    );
+  }
+
 export default function RecentPayee(): JSX.Element {
+
+  // payees
   const [payees, setPayees] = useState<string[]>([]);
+  // users address
   const address: string | undefined = useGetAddress();
+
+    const contactsState = useSelector(
+      (state: RootState) => state.contacts.value
+    );
+
+  
+  // get recent transactions 
   useEffect(() => {
-    console.log('hi from recent payee');
+
+
     const fetchRecentTransactions = async () => {
       try {
         const recentTransactions = await useGetRecentTransactions(address);
@@ -43,6 +90,7 @@ export default function RecentPayee(): JSX.Element {
     fetchRecentTransactions();
   }, []);
 
+ 
   return (
     <>
       {payees.length > 0 ? (
@@ -50,23 +98,11 @@ export default function RecentPayee(): JSX.Element {
           <div className='text-sm font-medium leading-none'>
             Recent Transfers
           </div>
-          {payees.map((payee) => (
-            <div key={payee}>
-              <Link
-                href={{ pathname: `/payee`, query: { payeeAddress: payee } }}
-              >
-                <div className='space-y-8'>
-                  <div className='flex w-full items-center '>
-                    <Avatar className='h-9 w-9 bg-white'></Avatar>
-                    <div className='ml-4 space-y-1'>
-                      <div className='text-sm font-medium leading-none'>
-                        {truncateEthAddress(payee)}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </Link>
-            </div>
+          {payees.map((payee, i) => (
+            <Payee
+              payee={payee}
+              contactsState={contactsState}
+            />
           ))}
         </>
       ) : (