diff --git a/app/home/transfer/amount/page.tsx b/app/home/transfer/amount/page.tsx
index dec1d8c..bf28bff 100644
--- a/app/home/transfer/amount/page.tsx
+++ b/app/home/transfer/amount/page.tsx
@@ -19,6 +19,7 @@ import RecipientHeader from "@/components/transfer/RecipientHeader";
 import AmountInput from "@/components/transfer/AmountInput";
 import CategorySelector from "@/components/transfer/CategorySelector";
 import PinEntry from "@/components/transfer/PinEntry";
+import { PinSetupModal } from "@/components/PinSetupModal";
 import { Loader2 } from "lucide-react";
 import { isTokenExpired, getUserIdFromToken } from "@/utils/jwtUtils";
 
@@ -54,6 +55,8 @@ const AmountPage = () => {
 
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState("");
+    const [showPinSetup, setShowPinSetup] = useState(false);
+    const [hasPinSet, setHasPinSet] = useState<boolean | null>(null);
 
     // Load recipient from session storage
     useEffect(() => {
@@ -65,7 +68,25 @@ const AmountPage = () => {
         } else {
             router.push('/home/transfer');
         }
-    }, [router]);
+
+        // Check PIN status
+        const checkPin = async () => {
+            const token = getToken();
+            if (token) {
+                try {
+                    const response: any = await checkUserPinStatus();
+                    const pinStatus = response?.hasPinSet || false;
+                    setHasPinSet(pinStatus);
+                    if (!pinStatus) {
+                        setShowPinSetup(true);
+                    }
+                } catch (error) {
+                    console.error('Error checking PIN status:', error);
+                }
+            }
+        };
+        checkPin();
+    }, [router, getToken]);
 
     // Fetch balance and categories
     useEffect(() => {
@@ -266,6 +287,12 @@ const AmountPage = () => {
             <div className="lg:hidden">
                 <Navigation />
             </div>
+
+            <PinSetupModal
+                open={showPinSetup}
+                onOpenChange={setShowPinSetup}
+                onSuccess={() => setHasPinSet(true)}
+            />
         </div>
     );
 };
diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index f5e0952..dd96407 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import React, { useState } from "react"
+import { useRouter } from "next/navigation"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
@@ -8,7 +9,7 @@ import { Badge } from "@/components/ui/badge"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
 import { Textarea } from "@/components/ui/textarea"
-import { Bell, Users, UserPlus, Check, X, Clock, AlertCircle, Info, Loader2 } from "lucide-react"
+import { Bell, Users, UserPlus, Check, X, Clock, AlertCircle, Info, Loader2, MessageCircle, Image, Video, Music, File, DollarSign, UserMinus, UserCheck, UserX, ShieldCheck, ShieldAlert, Settings, Trash2 } from "lucide-react"
 import { toast } from "@/hooks/use-toast"
 import { useNotifications } from "@/context/NotificationContext"
 import { useAuthToken } from "@/hooks/use-auth-token"
@@ -34,11 +35,12 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
     const { notifications, unreadCount, markAsRead, removeContactRequestNotification } = useNotifications()
     const { getToken } = useAuthToken()
     const token = getToken()
+    const router = useRouter()
 
     const [respondToJoinRequest, { isLoading: isResponding }] = useRespondToJoinRequestEnhancedMutation()
     const [respondToContactRequest, { isLoading: isRespondingToContact }] = useRespondToInvitationEnhancedMutation()
     const [respondToContactByToken, { isLoading: isRespondingByToken }] = useRespondToInvitationByTokenMutation()
-    const [selectedTab, setSelectedTab] = useState<'all' | 'invitations' | 'requests' | 'contacts'>('all')
+    const [selectedTab, setSelectedTab] = useState<'all' | 'invitations' | 'requests' | 'contacts' | 'groups' | 'messages'>('all')
     const [processingRequestId, setProcessingRequestId] = useState<string | null>(null)
     const [rejectionReason, setRejectionReason] = useState<string>("")
     const [showRejectionInput, setShowRejectionInput] = useState<string | null>(null)
@@ -60,19 +62,111 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
 
     const getNotificationIcon = (type: string) => {
         switch (type) {
+            // Group notifications
+            case 'GROUP_INVITATION':
             case 'group_invitation':
                 return <Users className="h-4 w-4 text-blue-500" />
+            case 'GROUP_JOIN_REQUEST':
             case 'group_join_request':
                 return <UserPlus className="h-4 w-4 text-green-500" />
+            case 'GROUP_JOIN_APPROVED':
             case 'group_join_approved':
                 return <Check className="h-4 w-4 text-green-500" />
+            case 'GROUP_JOIN_REJECTED':
             case 'group_join_rejected':
                 return <X className="h-4 w-4 text-red-500" />
+            case 'GROUP_CREATED':
             case 'group_created':
                 return <Users className="h-4 w-4 text-purple-500" />
+            case 'GROUP_JOINED':
+            case 'group_joined':
+                return <UserCheck className="h-4 w-4 text-green-500" />
+            case 'GROUP_MEMBER_LEFT':
+            case 'group_member_left':
+                return <UserMinus className="h-4 w-4 text-orange-500" />
+            case 'MEMBER_REMOVED_FROM_GROUP':
+            case 'member_removed_from_group':
+                return <UserX className="h-4 w-4 text-red-500" />
+            case 'GROUP_DELETED':
+            case 'group_deleted':
+                return <Trash2 className="h-4 w-4 text-red-500" />
+            case 'GROUP_INVITATION_SENT':
+            case 'group_invitation_sent':
+                return <Users className="h-4 w-4 text-gray-500" />
+            case 'GROUP_INVITATION_ACCEPTED':
+            case 'group_invitation_accepted':
+                return <Check className="h-4 w-4 text-green-500" />
+            case 'GROUP_INVITATION_REJECTED':
+            case 'group_invitation_rejected':
+                return <X className="h-4 w-4 text-gray-500" />
+            case 'GROUP_MEMBER_ADDED':
+            case 'group_member_added':
+                return <UserPlus className="h-4 w-4 text-green-500" />
+            case 'GROUP_MEMBER_REMOVED':
+            case 'group_member_removed':
+                return <UserX className="h-4 w-4 text-red-500" />
+            case 'GROUP_MEMBER_ROLE_CHANGED':
+            case 'group_member_role_changed':
+                return <ShieldCheck className="h-4 w-4 text-blue-500" />
+            case 'GROUP_UPDATED':
+            case 'group_updated':
+                return <Settings className="h-4 w-4 text-blue-500" />
+                
+            // Contact notifications
             case 'CONTACT_REQUEST_RECEIVED':
             case 'contact_request':
                 return <UserPlus className="h-4 w-4 text-blue-500" />
+            case 'CONTACT_INVITATION_SENT':
+            case 'contact_invitation_sent':
+                return <UserPlus className="h-4 w-4 text-gray-500" />
+            case 'CONTACT_REQUEST_ACCEPTED':
+            case 'contact_request_accepted':
+                return <UserCheck className="h-4 w-4 text-green-500" />
+            case 'CONTACT_REQUEST_REJECTED':
+            case 'contact_request_rejected':
+                return <UserX className="h-4 w-4 text-gray-500" />
+            case 'CONTACT_ADDED':
+            case 'contact_added':
+                return <UserPlus className="h-4 w-4 text-green-500" />
+            case 'CONTACT_BLOCKED':
+            case 'contact_blocked':
+                return <ShieldAlert className="h-4 w-4 text-red-500" />
+            case 'CONTACT_UNBLOCKED':
+            case 'contact_unblocked':
+                return <ShieldCheck className="h-4 w-4 text-green-500" />
+            case 'CONTACT_REMOVED':
+            case 'contact_removed':
+                return <UserMinus className="h-4 w-4 text-orange-500" />
+                
+            // Chat notification icons
+            case 'CHAT_MESSAGE_TEXT':
+            case 'CHAT_MESSAGE_RECEIVED':
+            case 'chat_message_text':
+                return <MessageCircle className="h-4 w-4 text-blue-500" />
+            case 'CHAT_MESSAGE_IMAGE':
+            case 'chat_message_image':
+                return <Image className="h-4 w-4 text-green-500" />
+            case 'CHAT_MESSAGE_VIDEO':
+            case 'chat_message_video':
+                return <Video className="h-4 w-4 text-purple-500" />
+            case 'CHAT_MESSAGE_AUDIO':
+            case 'chat_message_audio':
+                return <Music className="h-4 w-4 text-orange-500" />
+            case 'CHAT_MESSAGE_FILE':
+            case 'chat_message_file':
+                return <File className="h-4 w-4 text-gray-500" />
+            case 'CHAT_MESSAGE_MONEY':
+            case 'chat_message_money':
+                return <DollarSign className="h-4 w-4 text-green-600" />
+            case 'CHAT_DM_CREATED':
+            case 'chat_dm_created':
+                return <MessageCircle className="h-4 w-4 text-blue-500" />
+            case 'CHAT_GROUP_CHAT_CREATED':
+            case 'chat_group_chat_created':
+                return <Users className="h-4 w-4 text-purple-500" />
+            case 'CHAT_USER_ADDED':
+            case 'chat_user_added':
+                return <UserPlus className="h-4 w-4 text-green-500" />
             default:
                 return <Bell className="h-4 w-4 text-gray-500" />
         }
@@ -190,16 +284,64 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
         if (!notification.isRead) {
             markAsRead(notification.id)
         }
+
+        // Handle navigation for chat notifications
+        if (notification.data?.chatId && (
+            notification.type.startsWith('CHAT_MESSAGE_') || 
+            notification.type.startsWith('chat_message_') ||
+            notification.type === 'CHAT_DM_CREATED' ||
+            notification.type === 'CHAT_GROUP_CHAT_CREATED' ||
+            notification.type === 'CHAT_USER_ADDED'
+        )) {
+            router.push(`/chat?chatId=${notification.data.chatId}`)
+            onClose()
+        } 
+        // Handle navigation for group notifications
+        else if (notification.data?.groupId && (
+            notification.type.startsWith('GROUP_') ||
+            notification.type.startsWith('group_')
+        )) {
+            router.push(`/groups/${notification.data.groupId}`)
+            onClose()
+        }
+        // Handle navigation for contact notifications
+        else if (notification.data?.contactId && (
+            notification.type.startsWith('CONTACT_') ||
+            notification.type.startsWith('contact_')
+        )) {
+            router.push(`/contacts`)
+            onClose()
+        }
+        else if (notification.data?.url) {
+            router.push(notification.data.url)
+            onClose()
+        }
     }
 
     const filterNotifications = (notifications: Notification[]) => {
         switch (selectedTab) {
             case 'invitations':
-                return notifications.filter(n => n.type === 'group_invitation')
+                return notifications.filter(n => n.type === 'group_invitation' || n.type === 'GROUP_INVITATION')
             case 'requests':
-                return notifications.filter(n => n.type === 'group_join_request')
+                return notifications.filter(n => n.type === 'group_join_request' || n.type === 'GROUP_JOIN_REQUEST')
             case 'contacts':
-                return notifications.filter(n => n.type === 'CONTACT_REQUEST_RECEIVED' || n.type === 'contact_request')
+                return notifications.filter(n => 
+                    n.type.toUpperCase().startsWith('CONTACT_') ||
+                    n.type.startsWith('contact_')
+                )
+            case 'groups':
+                return notifications.filter(n => 
+                    n.type.toUpperCase().startsWith('GROUP_') ||
+                    n.type.startsWith('group_')
+                )
+            case 'messages':
+                return notifications.filter(n => 
+                    n.type.startsWith('CHAT_MESSAGE_') || 
+                    n.type.startsWith('chat_message_') ||
+                    n.type === 'CHAT_DM_CREATED' ||
+                    n.type === 'CHAT_GROUP_CHAT_CREATED' ||
+                    n.type === 'CHAT_USER_ADDED'
+                )
             default:
                 return notifications
         }
@@ -211,13 +353,13 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
 
     return (
         <Dialog open={isOpen} onOpenChange={onClose}>
-            <DialogContent className="sm:max-w-2xl max-h-[80vh] flex flex-col bg-white dark:bg-darkBg-card border-gray-200 dark:border-darkBorder-light">
-                <DialogHeader>
-                    <DialogTitle className="flex items-center gap-2 text-gray-900 dark:text-white">
-                        <Bell className="h-5 w-5" />
+            <DialogContent className="w-[calc(100vw-2rem)] max-w-2xl h-[85vh] sm:h-auto sm:max-h-[85vh] flex flex-col bg-white dark:bg-darkBg-card border-gray-200 dark:border-darkBorder-light p-0 gap-0">
+                <DialogHeader className="px-4 sm:px-6 pt-4 sm:pt-6 pb-3 sm:pb-4 border-b border-gray-200 dark:border-darkBorder-light">
+                    <DialogTitle className="flex items-center gap-2 text-base sm:text-lg text-gray-900 dark:text-white">
+                        <Bell className="h-4 w-4 sm:h-5 sm:w-5" />
                         Notifications
                         {unreadCount > 0 && (
-                            <Badge variant="destructive" className="ml-2">
+                            <Badge variant="destructive" className="ml-2 text-xs px-1.5 py-0.5">
                                 {unreadCount}
                             </Badge>
                         )}
@@ -225,12 +367,12 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
                 </DialogHeader>
 
                 {/* Tabs */}
-                <div className="flex space-x-1 border-b border-gray-200 dark:border-darkBorder-light">
+                <div className="flex overflow-x-auto scrollbar-hide border-b border-gray-200 dark:border-darkBorder-light px-2 sm:px-4">
                     <Button
                         variant={selectedTab === 'all' ? 'default' : 'ghost'}
                         size="sm"
                         onClick={() => setSelectedTab('all')}
-                        className={`flex-1 ${selectedTab !== 'all' ? 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-darkBg-interactive' : ''}`}
+                        className={`flex-shrink-0 min-w-[60px] sm:flex-1 text-xs sm:text-sm px-2 sm:px-4 h-9 sm:h-10 ${selectedTab !== 'all' ? 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-darkBg-interactive' : ''}`}
                     >
                         All
                     </Button>
@@ -238,54 +380,73 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
                         variant={selectedTab === 'invitations' ? 'default' : 'ghost'}
                         size="sm"
                         onClick={() => setSelectedTab('invitations')}
-                        className={`flex-1 ${selectedTab !== 'invitations' ? 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-darkBg-interactive' : ''}`}
+                        className={`flex-shrink-0 min-w-[80px] sm:flex-1 text-xs sm:text-sm px-2 sm:px-4 h-9 sm:h-10 ${selectedTab !== 'invitations' ? 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-darkBg-interactive' : ''}`}
                     >
-                        Invitations
+                        <span className="hidden sm:inline">Invitations</span>
+                        <span className="sm:hidden">Invites</span>
                     </Button>
                     <Button
                         variant={selectedTab === 'requests' ? 'default' : 'ghost'}
                         size="sm"
                         onClick={() => setSelectedTab('requests')}
-                        className={`flex-1 ${selectedTab !== 'requests' ? 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-darkBg-interactive' : ''}`}
+                        className={`flex-shrink-0 min-w-[70px] sm:flex-1 text-xs sm:text-sm px-2 sm:px-4 h-9 sm:h-10 ${selectedTab !== 'requests' ? 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-darkBg-interactive' : ''}`}
                     >
-                        Join Requests
+                        <span className="hidden sm:inline">Join Requests</span>
+                        <span className="sm:hidden">Requests</span>
                         {pendingRequestsList.length > 0 && (
-                            <Badge variant="secondary" className="ml-1">
+                            <Badge variant="secondary" className="ml-1 text-xs px-1 py-0">
                                 {pendingRequestsList.length}
                             </Badge>
                         )}
                     </Button>
+                    <Button
+                        variant={selectedTab === 'groups' ? 'default' : 'ghost'}
+                        size="sm"
+                        onClick={() => setSelectedTab('groups')}
+                        className={`flex-shrink-0 min-w-[60px] sm:flex-1 text-xs sm:text-sm px-2 sm:px-4 h-9 sm:h-10 ${selectedTab !== 'groups' ? 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-darkBg-interactive' : ''}`}
+                    >
+                        Groups
+                    </Button>
                     <Button
                         variant={selectedTab === 'contacts' ? 'default' : 'ghost'}
                         size="sm"
                         onClick={() => setSelectedTab('contacts')}
-                        className={`flex-1 ${selectedTab !== 'contacts' ? 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-darkBg-interactive' : ''}`}
+                        className={`flex-shrink-0 min-w-[70px] sm:flex-1 text-xs sm:text-sm px-2 sm:px-4 h-9 sm:h-10 ${selectedTab !== 'contacts' ? 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-darkBg-interactive' : ''}`}
                     >
                         Contacts
                         {pendingContactRequestsList.length > 0 && (
-                            <Badge variant="secondary" className="ml-1">
+                            <Badge variant="secondary" className="ml-1 text-xs px-1 py-0">
                                 {pendingContactRequestsList.length}
                             </Badge>
                         )}
                     </Button>
+                    <Button
+                        variant={selectedTab === 'messages' ? 'default' : 'ghost'}
+                        size="sm"
+                        onClick={() => setSelectedTab('messages')}
+                        className={`flex-shrink-0 min-w-[70px] sm:flex-1 text-xs sm:text-sm px-2 sm:px-4 h-9 sm:h-10 ${selectedTab !== 'messages' ? 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-darkBg-interactive' : ''}`}
+                    >
+                        Messages
+                    </Button>
                 </div>
 
                 {/* Content */}
-                <ScrollArea className="flex-1 max-h-96">
-                    <div className="space-y-4 p-4">
+                <ScrollArea className="flex-1 max-h-[calc(85vh-180px)] sm:max-h-[400px]">
+                    <div className="space-y-3 sm:space-y-4 p-3 sm:p-4 md:p-6">
                         {/* Show pending contact requests in contacts tab */}
                         {selectedTab === 'contacts' && pendingContactRequestsList.length > 0 && (
-                            <div className="space-y-3">
-                                <div className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    <AlertCircle className="h-4 w-4" />
-                                    Pending Contact Requests
+                            <div className="space-y-2 sm:space-y-3">
+                                <div className="flex items-center gap-2 text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">
+                                    <AlertCircle className="h-3 w-3 sm:h-4 sm:w-4" />
+                                    <span className="hidden sm:inline">Pending Contact Requests</span>
+                                    <span className="sm:hidden">Contact Requests</span>
                                 </div>
                                 {pendingContactRequestsList.map((request: any) => (
                                     <div
                                         key={request.id}
-                                        className="flex items-start space-x-3 p-3 bg-blue-50 dark:bg-darkBg-interactive border border-blue-200 dark:border-darkBorder-light rounded-lg"
+                                        className="flex items-start space-x-2 sm:space-x-3 p-2 sm:p-3 bg-blue-50 dark:bg-darkBg-interactive border border-blue-200 dark:border-darkBorder-light rounded-lg"
                                     >
-                                        <Avatar className="h-10 w-10">
+                                        <Avatar className="h-8 w-8 sm:h-10 sm:w-10 flex-shrink-0">
                                             <AvatarImage
                                                 src={request.inviter?.avatar || "/placeholder.svg"}
                                                 alt={request.inviter?.firstName}
@@ -296,27 +457,27 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
                                             </AvatarFallback>
                                         </Avatar>
                                         <div className="flex-1 min-w-0">
-                                            <div className="flex items-center justify-between">
-                                                <p className="text-sm font-medium text-gray-900 dark:text-white">
+                                            <div className="flex items-start sm:items-center justify-between gap-1 sm:gap-2">
+                                                <p className="text-xs sm:text-sm font-medium text-gray-900 dark:text-white truncate">
                                                     {request.inviter?.firstName} {request.inviter?.lastName}
                                                 </p>
-                                                <p className="text-xs text-gray-500 dark:text-gray-400">
+                                                <p className="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">
                                                     {formatDistanceToNow(new Date(request.invitedAt), { addSuffix: true })}
                                                 </p>
                                             </div>
-                                            <p className="text-sm text-gray-600 dark:text-gray-300">
+                                            <p className="text-xs sm:text-sm text-gray-600 dark:text-gray-300 mt-0.5">
                                                 wants to add you as a contact
                                             </p>
-                                            <p className="text-xs text-gray-500 dark:text-gray-400">
+                                            <p className="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 truncate">
                                                 {request.inviter?.email}
                                             </p>
 
-                                            <div className="flex gap-2 mt-3">
+                                            <div className="flex gap-1.5 sm:gap-2 mt-2 sm:mt-3">
                                                 <Button
                                                     size="sm"
                                                     onClick={() => handleContactRequestResponse(request.id, 'accept')}
                                                     disabled={isRespondingToContact || processingRequestId === request.id}
-                                                    className="h-8"
+                                                    className="h-7 sm:h-8 text-xs px-2 sm:px-3"
                                                 >
                                                     {processingRequestId === request.id ? (
                                                         <Loader2 className="h-3 w-3 animate-spin" />
@@ -330,7 +491,7 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
                                                     variant="outline"
                                                     onClick={() => handleContactRequestResponse(request.id, 'decline')}
                                                     disabled={isRespondingToContact || processingRequestId === request.id}
-                                                    className="h-8 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-darkBg-card"
+                                                    className="h-7 sm:h-8 text-xs px-2 sm:px-3 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-darkBg-card"
                                                 >
                                                     {processingRequestId === request.id ? (
                                                         <Loader2 className="h-3 w-3 animate-spin" />
@@ -348,17 +509,18 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
 
                         {/* Show pending join requests in requests tab */}
                         {selectedTab === 'requests' && pendingRequestsList.length > 0 && (
-                            <div className="space-y-3">
-                                <div className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
-                                    <AlertCircle className="h-4 w-4" />
-                                    Pending Join Requests
+                            <div className="space-y-2 sm:space-y-3">
+                                <div className="flex items-center gap-2 text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300">
+                                    <AlertCircle className="h-3 w-3 sm:h-4 sm:w-4" />
+                                    <span className="hidden sm:inline">Pending Join Requests</span>
+                                    <span className="sm:hidden">Join Requests</span>
                                 </div>
                                 {pendingRequestsList.map((request: any) => (
                                     <div
                                         key={request.id}
-                                        className="flex items-start space-x-3 p-3 bg-yellow-50 dark:bg-darkBg-interactive border border-yellow-200 dark:border-darkBorder-light rounded-lg"
+                                        className="flex items-start space-x-2 sm:space-x-3 p-2 sm:p-3 bg-yellow-50 dark:bg-darkBg-interactive border border-yellow-200 dark:border-darkBorder-light rounded-lg"
                                     >
-                                        <Avatar className="h-10 w-10">
+                                        <Avatar className="h-8 w-8 sm:h-10 sm:w-10 flex-shrink-0">
                                             <AvatarImage
                                                 src={request.user?.avatar || "/placeholder.svg"}
                                                 alt={request.user?.firstName}
@@ -369,27 +531,27 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
                                             </AvatarFallback>
                                         </Avatar>
                                         <div className="flex-1 min-w-0">
-                                            <div className="flex items-center justify-between">
-                                                <p className="text-sm font-medium text-gray-900 dark:text-white">
+                                            <div className="flex items-start sm:items-center justify-between gap-1 sm:gap-2">
+                                                <p className="text-xs sm:text-sm font-medium text-gray-900 dark:text-white truncate">
                                                     {request.user?.firstName} {request.user?.lastName}
                                                 </p>
-                                                <p className="text-xs text-gray-500 dark:text-gray-400">
+                                                <p className="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">
                                                     {request.createdAt && !isNaN(new Date(request.createdAt).getTime())
                                                         ? formatDistanceToNow(new Date(request.createdAt), { addSuffix: true })
                                                         : 'Recently'}
                                                 </p>
                                             </div>
-                                            <p className="text-sm text-gray-600 dark:text-gray-300">
+                                            <p className="text-xs sm:text-sm text-gray-600 dark:text-gray-300 mt-0.5 truncate">
                                                 wants to join "{request.group?.name}"
                                             </p>
                                             {request.additionalInfo && (
-                                                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 italic">
+                                                <p className="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 mt-1 italic line-clamp-2">
                                                     "{request.additionalInfo}"
                                                 </p>
                                             )}
 
                                             {showRejectionInput === request.id ? (
-                                                <div className="mt-3 space-y-2">
+                                                <div className="mt-2 sm:mt-3 space-y-2">
                                                     <Textarea
                                                         placeholder="Reason for rejection (optional)"
                                                         value={rejectionReason}
@@ -397,12 +559,13 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
                                                         rows={2}
                                                         className="text-xs dark:bg-darkBg-card dark:border-darkBorder-light dark:text-white"
                                                     />
-                                                    <div className="flex gap-2">
+                                                    <div className="flex gap-1.5 sm:gap-2">
                                                         <Button
                                                             size="sm"
                                                             variant="destructive"
                                                             onClick={() => handleRespondToRequest(request.id, 'deny')}
                                                             disabled={isResponding || processingRequestId === request.id}
+                                                            className="h-7 sm:h-8 text-xs px-2 sm:px-3"
                                                         >
                                                             {processingRequestId === request.id ? (
                                                                 <Loader2 className="h-3 w-3 animate-spin" />
@@ -418,18 +581,19 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
                                                                 setShowRejectionInput(null)
                                                                 setRejectionReason("")
                                                             }}
-                                                            className="dark:text-gray-300 dark:border-gray-600 dark:hover:bg-darkBg-card\"
+                                                            className="h-7 sm:h-8 text-xs px-2 sm:px-3 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-darkBg-card"
                                                         >
                                                             Cancel
                                                         </Button>
                                                     </div>
                                                 </div>
                                             ) : (
-                                                <div className="flex gap-2 mt-3">
+                                                <div className="flex gap-1.5 sm:gap-2 mt-2 sm:mt-3">
                                                     <Button
                                                         size="sm"
                                                         onClick={() => handleRespondToRequest(request.id, 'approve')}
                                                         disabled={isResponding || processingRequestId === request.id}
+                                                        className="h-7 sm:h-8 text-xs px-2 sm:px-3"
                                                     >
                                                         {processingRequestId === request.id ? (
                                                             <Loader2 className="h-3 w-3 animate-spin" />
@@ -443,6 +607,7 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
                                                         variant="destructive"
                                                         onClick={() => setShowRejectionInput(request.id)}
                                                         disabled={isResponding}
+                                                        className="h-7 sm:h-8 text-xs px-2 sm:px-3"
                                                     >
                                                         <X className="h-3 w-3" />
                                                         Reject
@@ -460,54 +625,54 @@ const NotificationCenter: React.FC<NotificationCenterProps> = ({ isOpen, onClose
 
                         {/* Regular notifications */}
                         {filteredNotifications.length === 0 && pendingRequestsList.length === 0 ? (
-                            <div className="text-center py-8">
-                                <Bell className="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
-                                <p className="text-gray-500 dark:text-gray-400">No notifications yet</p>
+                            <div className="text-center py-8 sm:py-12">
+                                <Bell className="h-10 w-10 sm:h-12 sm:w-12 text-gray-300 dark:text-gray-600 mx-auto mb-3 sm:mb-4" />
+                                <p className="text-xs sm:text-sm text-gray-500 dark:text-gray-400">No notifications yet</p>
                             </div>
                         ) : (
                             filteredNotifications.map((notification) => (
                                 <div
                                     key={notification.id}
-                                    className={`flex items-start space-x-3 p-3 rounded-lg cursor-pointer transition-colors ${notification.isRead
+                                    className={`flex items-start space-x-2 sm:space-x-3 p-2 sm:p-3 rounded-lg cursor-pointer transition-colors ${notification.isRead
                                             ? 'bg-gray-50 dark:bg-darkBg-card'
                                             : 'bg-blue-50 dark:bg-darkBg-interactive border border-blue-200 dark:border-darkBorder-light'
                                         }`}
                                     onClick={() => handleNotificationClick(notification)}
                                 >
-                                    <div className="flex-shrink-0 mt-1">
+                                    <div className="flex-shrink-0 mt-0.5 sm:mt-1">
                                         {getNotificationIcon(notification.type)}
                                     </div>
                                     <div className="flex-1 min-w-0">
-                                        <div className="flex items-center justify-between">
-                                            <p className="text-sm font-medium text-gray-900 dark:text-white">
+                                        <div className="flex items-start sm:items-center justify-between gap-1 sm:gap-2">
+                                            <p className="text-xs sm:text-sm font-medium text-gray-900 dark:text-white line-clamp-2">
                                                 {notification.title}
                                             </p>
-                                            <div className="flex items-center gap-2">
-                                                <Badge variant={getNotificationVariant(notification.type)} className="text-xs">
+                                            <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+                                                <Badge variant={getNotificationVariant(notification.type)} className="text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 whitespace-nowrap hidden sm:inline-flex">
                                                     {notification.type.replace('_', ' ')}
                                                 </Badge>
                                                 {!notification.isRead && (
-                                                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                                                    <div className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-blue-500 rounded-full"></div>
                                                 )}
                                             </div>
                                         </div>
-                                        <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">
+                                        <p className="text-xs sm:text-sm text-gray-600 dark:text-gray-300 mt-0.5 sm:mt-1 line-clamp-2">
                                             {notification.message || notification.data?.message}
                                         </p>
-                                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                                        <p className="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 mt-0.5 sm:mt-1">
                                             {formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true })}
                                         </p>
 
                                         {/* Action buttons for actionable notifications */}
                                         {notification.data?.actions && notification.data.actions.length > 0 &&
                                             (notification.type === 'CONTACT_REQUEST_RECEIVED' || notification.type === 'contact_request') && (
-                                                <div className="flex gap-2 mt-2">
+                                                <div className="flex gap-1.5 sm:gap-2 mt-2">
                                                     {notification.data.actions.map((action: any, index: number) => (
                                                         <Button
                                                             key={index}
                                                             size="sm"
                                                             variant={action.type === 'accept' ? 'default' : 'outline'}
-                                                            className={`text-xs ${action.type !== 'accept' ? 'dark:text-gray-300 dark:border-gray-600 dark:hover:bg-darkBg-card' : ''}`}
+                                                            className={`h-7 sm:h-8 text-xs px-2 sm:px-3 ${action.type !== 'accept' ? 'dark:text-gray-300 dark:border-gray-600 dark:hover:bg-darkBg-card' : ''}`}
                                                             onClick={(e) => {
                                                                 e.stopPropagation()
                                                                 if (notification.data?.userId) {
diff --git a/context/NotificationContext.ts b/context/NotificationContext.ts
index 5369204..b3248ba 100644
--- a/context/NotificationContext.ts
+++ b/context/NotificationContext.ts
@@ -156,21 +156,28 @@ export const NotificationProvider: React.FC<NotificationProviderProps> = ({ chil
     const handleNotification = useCallback(
         (notification: any) => {
             const formattedNotification: Notification = {
-                id: notification.id,
+                id: notification.id || `notification-${Date.now()}`,
                 type: notification.type,
                 title: notification.title || notification.data?.title || 'Notification',
-                message: notification.data?.message,
+                message: notification.message || notification.data?.message || '',
                 data: notification.data,
                 isRead: notification.isRead || false,
                 createdAt: notification.createdAt || new Date().toISOString(),
                 updatedAt: notification.updatedAt || new Date().toISOString(),
             }
             addNotification(formattedNotification)
-            toast({
-                title: formattedNotification.title,
-                description: formattedNotification.data?.message,
-                duration: 5000,
-            })
+            
+            // Only show toast for certain notification types (not for every chat message)
+            const shouldShowToast = !formattedNotification.type.startsWith('CHAT_MESSAGE_') || 
+                                   formattedNotification.type === 'CHAT_MESSAGE_MONEY';
+            
+            if (shouldShowToast) {
+                toast({
+                    title: formattedNotification.title,
+                    description: formattedNotification.message || formattedNotification.data?.message,
+                    duration: 5000,
+                })
+            }
         },
         [addNotification],
     )
diff --git a/types/notification.types.ts b/types/notification.types.ts
index 2052a7d..f868841 100644
--- a/types/notification.types.ts
+++ b/types/notification.types.ts
@@ -6,8 +6,114 @@ export enum NotificationType {
   DOCUMENT = 'document',
   MONEY = 'money',
   CONTACT_REQUEST = 'contact_request',
-  GROUP_INVITATION = 'group_invitation',
   GROUP_DONATION = 'group_donation',
+
+  // Chat-specific notification types
+  CHAT_MESSAGE_TEXT = 'CHAT_MESSAGE_TEXT',
+  CHAT_MESSAGE_IMAGE = 'CHAT_MESSAGE_IMAGE',
+  CHAT_MESSAGE_VIDEO = 'CHAT_MESSAGE_VIDEO',
+  CHAT_MESSAGE_AUDIO = 'CHAT_MESSAGE_AUDIO',
+  CHAT_MESSAGE_FILE = 'CHAT_MESSAGE_FILE',
+  CHAT_MESSAGE_MONEY = 'CHAT_MESSAGE_MONEY',
+  CHAT_MESSAGE_RECEIVED = 'CHAT_MESSAGE_RECEIVED',
+  CHAT_MESSAGE_READ = 'CHAT_MESSAGE_READ',
+  CHAT_DM_CREATED = 'CHAT_DM_CREATED',
+  CHAT_GROUP_CHAT_CREATED = 'CHAT_GROUP_CHAT_CREATED',
+  CHAT_DELETED = 'CHAT_DELETED',
+  CHAT_USER_ADDED = 'CHAT_USER_ADDED',
+
+  // Group notifications
+  GROUP_CREATED = 'GROUP_CREATED',
+  GROUP_INVITATION = 'GROUP_INVITATION',
+  GROUP_JOINED = 'GROUP_JOINED',
+  GROUP_MESSAGE = 'GROUP_MESSAGE',
+  GROUP_JOIN_REQUEST = 'GROUP_JOIN_REQUEST',
+  GROUP_JOIN_APPROVED = 'GROUP_JOIN_APPROVED',
+  GROUP_JOIN_REJECTED = 'GROUP_JOIN_REJECTED',
+  GROUP_LINK_JOIN_REQUEST = 'GROUP_LINK_JOIN_REQUEST',
+  GROUP_MEMBER_LEFT = 'GROUP_MEMBER_LEFT',
+  MEMBER_REMOVED_FROM_GROUP = 'MEMBER_REMOVED_FROM_GROUP',
+  GROUP_DELETED = 'GROUP_DELETED',
+  GROUP_INVITATION_SENT = 'GROUP_INVITATION_SENT',
+  GROUP_INVITATION_ACCEPTED = 'GROUP_INVITATION_ACCEPTED',
+  GROUP_INVITATION_REJECTED = 'GROUP_INVITATION_REJECTED',
+  GROUP_MEMBER_ADDED = 'GROUP_MEMBER_ADDED',
+  GROUP_MEMBER_REMOVED = 'GROUP_MEMBER_REMOVED',
+  GROUP_MEMBER_ROLE_CHANGED = 'GROUP_MEMBER_ROLE_CHANGED',
+  GROUP_UPDATED = 'GROUP_UPDATED',
+
+  // Contact notifications
+  CONTACT_INVITATION_SENT = 'CONTACT_INVITATION_SENT',
+  CONTACT_REQUEST_RECEIVED = 'CONTACT_REQUEST_RECEIVED',
+  CONTACT_REQUEST_ACCEPTED = 'CONTACT_REQUEST_ACCEPTED',
+  CONTACT_REQUEST_REJECTED = 'CONTACT_REQUEST_REJECTED',
+  CONTACT_ADDED = 'CONTACT_ADDED',
+  CONTACT_BLOCKED = 'CONTACT_BLOCKED',
+  CONTACT_UNBLOCKED = 'CONTACT_UNBLOCKED',
+  CONTACT_REMOVED = 'CONTACT_REMOVED',
+
+  // Transaction notifications
+  PAYMENT_RECEIVED = 'PAYMENT_RECEIVED',
+  PAYMENT_SENT = 'PAYMENT_SENT',
+  PAYMENT_FAILED = 'PAYMENT_FAILED',
+  PAYMENT_PENDING = 'PAYMENT_PENDING',
+  TRANSACTION_COMPLETED = 'TRANSACTION_COMPLETED',
+  TRANSACTION_REFUNDED = 'TRANSACTION_REFUNDED',
+  TRANSACTION_DISPUTED = 'TRANSACTION_DISPUTED',
+  LARGE_TRANSACTION_ALERT = 'LARGE_TRANSACTION_ALERT',
+
+  // Wallet notifications
+  WALLET_CREATED = 'WALLET_CREATED',
+  WALLET_RESTRICTION_ADDED = 'WALLET_RESTRICTION_ADDED',
+  WALLET_RESTRICTION_REMOVED = 'WALLET_RESTRICTION_REMOVED',
+  LOW_BALANCE_WARNING = 'LOW_BALANCE_WARNING',
+
+  // Action notifications (Tickets, Services, etc.)
+  ACTION_CREATED = 'ACTION_CREATED',
+  ACTION_UPDATED = 'ACTION_UPDATED',
+  ACTION_DELETED = 'ACTION_DELETED',
+  ACTION_PURCHASED = 'ACTION_PURCHASED',
+  ACTION_SOLD = 'ACTION_SOLD',
+  ACTION_EXPIRED = 'ACTION_EXPIRED',
+  SUB_ACTION_CREATED = 'SUB_ACTION_CREATED',
+  SUB_ACTION_UPDATED = 'SUB_ACTION_UPDATED',
+
+  // Organization notifications
+  ORGANIZATION_CREATED = 'ORGANIZATION_CREATED',
+  ORGANIZATION_VERIFIED = 'ORGANIZATION_VERIFIED',
+  ORGANIZATION_UPDATED = 'ORGANIZATION_UPDATED',
+  ORGANIZATION_DELETED = 'ORGANIZATION_DELETED',
+  ORGANIZATION_SUSPENDED = 'ORGANIZATION_SUSPENDED',
+  ORGANIZATION_MEMBER_ADDED = 'ORGANIZATION_MEMBER_ADDED',
+  ORGANIZATION_MEMBER_REMOVED = 'ORGANIZATION_MEMBER_REMOVED',
+  ORGANIZATION_ROLE_CHANGED = 'ORGANIZATION_ROLE_CHANGED',
+
+  // User account notifications
+  ACCOUNT_VERIFIED = 'ACCOUNT_VERIFIED',
+  ACCOUNT_SUSPENDED = 'ACCOUNT_SUSPENDED',
+  PASSWORD_CHANGED = 'PASSWORD_CHANGED',
+  PROFILE_UPDATED = 'PROFILE_UPDATED',
+  PIN_SET = 'PIN_SET',
+  PIN_CHANGED = 'PIN_CHANGED',
+
+  // Admin notifications
+  ADMIN_USER_CREATED = 'ADMIN_USER_CREATED',
+  ADMIN_USER_UPDATED = 'ADMIN_USER_UPDATED',
+  ADMIN_USER_DELETED = 'ADMIN_USER_DELETED',
+  ADMIN_STATUS_CHANGED = 'ADMIN_STATUS_CHANGED',
+  ADMIN_ROLE_ASSIGNED = 'ADMIN_ROLE_ASSIGNED',
+  ADMIN_ROLE_REMOVED = 'ADMIN_ROLE_REMOVED',
+
+  // External account notifications
+  EXTERNAL_ACCOUNT_LINKED = 'EXTERNAL_ACCOUNT_LINKED',
+  EXTERNAL_ACCOUNT_UNLINKED = 'EXTERNAL_ACCOUNT_UNLINKED',
+  EXTERNAL_ACCOUNT_VERIFIED = 'EXTERNAL_ACCOUNT_VERIFIED',
+
+  // General notifications
+  WELCOME = 'WELCOME',
+  REMINDER = 'REMINDER',
+  SYSTEM_MAINTENANCE = 'SYSTEM_MAINTENANCE',
+  FEATURE_ANNOUNCEMENT = 'FEATURE_ANNOUNCEMENT',
 }
 
 export interface NotificationPayload {
@@ -37,13 +143,83 @@ export interface Notification {
   createdAt: string;
   updatedAt?: string;
   data?: {
+    // General data
     message?: string;
-    groupId?: string;
+    title?: string;
+    description?: string;
+    url?: string;
+    reason?: string;
+
+    // User-related data
     userId?: string;
     userName?: string;
     userEmail?: string;
-    url?: string;
-    title?: string;
+
+    // Group-related data
+    groupId?: string;
+    groupName?: string;
+    requestId?: string;
+
+    // Contact-specific data
+    contactId?: string;
+    contactName?: string;
+
+    // Chat-specific data
+    chatId?: string;
+    messageId?: string;
+    messageContent?: string;
+    messageType?: string;
+    senderId?: string;
+    senderName?: string;
+    chatName?: string;
+    isGroupChat?: boolean;
+    mediaUrl?: string;
+    thumbnailUrl?: string;
+
+    // Transaction-related data
+    transactionId?: string;
+    amount?: number;
+    currency?: string;
+    transactionType?: string;
+    fee?: number;
+
+    // Action-related data
+    actionId?: string;
+    actionName?: string;
+    actionType?: string;
+    actionSlug?: string;
+    subActionId?: string;
+    subActionName?: string;
+    purchaseId?: string;
+    ticketNumber?: string;
+    expiryDate?: string;
+
+    // Organization-related data
+    organizationId?: string;
+    organizationName?: string;
+    organizationType?: string;
+    ownerName?: string;
+
+    // Wallet-related data
+    walletId?: string;
+    balance?: number;
+    restrictionType?: string;
+    thresholdAmount?: number;
+
+    // External account data
+    externalAccountId?: string;
+    externalAccountType?: string;
+    externalAccountName?: string;
+
+    // Admin action data
+    adminId?: string;
+    adminName?: string;
+    roleId?: string;
+    roleName?: string;
+    previousStatus?: string;
+    newStatus?: string;
+
+    // Actions
     actions?: Array<{
       type: string;
       url: string;