diff --git a/app/action/[userId]/page.tsx b/app/action/[userId]/page.tsx
index 0e96607..9ad730a 100644
--- a/app/action/[userId]/page.tsx
+++ b/app/action/[userId]/page.tsx
@@ -159,6 +159,7 @@ function ContributeFlow({ contribution, onSuccess }: { contribution: MyContribut
     const [step, setStep] = useState<Step>('idle');
     const [amount, setAmount] = useState('');
     const [pin, setPin] = useState('');
+    const [isAnonymous, setIsAnonymous] = useState(false);
 
     const fixedAmount = Number(contribution.amountPerMember);
 
@@ -170,16 +171,16 @@ function ContributeFlow({ contribution, onSuccess }: { contribution: MyContribut
         }
         setStep('loading');
         try {
-            await contributeToGroup(contribution.groupId, contribution.id, payAmount, pin);
+            await contributeToGroup(contribution.groupId, contribution.id, payAmount, pin, isAnonymous);
             onSuccess(payAmount);
-            setStep('idle'); setPin(''); setAmount('');
+            setStep('idle'); setPin(''); setAmount(''); setIsAnonymous(false);
         } catch (err: any) {
             alert(err?.response?.data?.message || 'Contribution failed');
             setStep(contribution.type === 'fixed' ? 'enter_pin' : 'enter_amount');
         }
     };
 
-    const cancel = () => { setStep('idle'); setPin(''); setAmount(''); };
+    const cancel = () => { setStep('idle'); setPin(''); setAmount(''); setIsAnonymous(false); };
 
     if (step === 'idle') return (
         <Button size="sm" className="h-8 text-xs bg-[#00B512] hover:bg-[#009a0f] text-white"
@@ -204,16 +205,22 @@ function ContributeFlow({ contribution, onSuccess }: { contribution: MyContribut
     );
 
     if (step === 'enter_pin') return (
-        <div className="flex flex-col sm:flex-row sm:items-center gap-2 w-full">
-            <div className="flex items-center gap-2">
-                <div className="flex items-center gap-1 text-xs text-gray-500"><Lock size={11} /><span>PIN</span></div>
-                <Input type="password" inputMode="numeric" maxLength={4} placeholder="••••"
-                    value={pin} onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 4))}
-                    className="h-8 text-xs w-full sm:w-20 min-w-0 tracking-widest" autoFocus />
-            </div>
-            <div className="flex gap-2">
-                <Button size="sm" variant="outline" className="h-8 text-xs flex-1 sm:flex-none" onClick={cancel}>Cancel</Button>
-                <Button size="sm" className="h-8 text-xs flex-1 sm:flex-none bg-[#00B512] hover:bg-[#009a0f] text-white" onClick={handlePay}>Pay</Button>
+        <div className="flex flex-col gap-2 w-full">
+            <label className="flex items-center gap-1.5 text-[11px] text-gray-500 cursor-pointer select-none">
+                <input type="checkbox" checked={isAnonymous} onChange={(e) => setIsAnonymous(e.target.checked)} className="h-3 w-3" />
+                Contribute anonymously
+            </label>
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2 w-full">
+                <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-1 text-xs text-gray-500"><Lock size={11} /><span>PIN</span></div>
+                    <Input type="password" inputMode="numeric" maxLength={4} placeholder="••••"
+                        value={pin} onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 4))}
+                        className="h-8 text-xs w-full sm:w-20 min-w-0 tracking-widest" autoFocus />
+                </div>
+                <div className="flex gap-2">
+                    <Button size="sm" variant="outline" className="h-8 text-xs flex-1 sm:flex-none" onClick={cancel}>Cancel</Button>
+                    <Button size="sm" className="h-8 text-xs flex-1 sm:flex-none bg-[#00B512] hover:bg-[#009a0f] text-white" onClick={handlePay}>Pay</Button>
+                </div>
             </div>
         </div>
     );
@@ -287,7 +294,7 @@ function ContributionCard({ contribution: initial, currentUserId }: { contributi
     const progress = goal > 0 ? Math.min((collected / goal) * 100, 100) : 0;
     const isActive = c.status === 'active';
     const hasPaid = !!c.myPayment;
-    const canContribute = isActive && !hasPaid;
+    const canContribute = isActive;
     const isDeadlinePast = c.deadline && new Date(c.deadline) < new Date();
 
     useEffect(() => {
@@ -1845,7 +1852,7 @@ const ActionsByAccountPage = () => {
                 {/* ── ROW 3: Public Campaigns ── */}
                 {!isViewingAnotherUser && (
                     <div>
-                        <div className="flex items-center gap-3 mb-3">
+                        <div className="flex flex-wrap items-center gap-3 mb-3">
                             <Globe2 size={16} className="text-[#00B512]" />
                             <span className="text-sm font-bold text-[#00313A] dark:text-white uppercase tracking-widest">My Campaigns</span>
                             <span className="text-xs text-gray-400 dark:text-gray-500">{visibleCampaigns.length}</span>
@@ -1854,7 +1861,7 @@ const ActionsByAccountPage = () => {
                                     {activeCampaigns.length} active
                                 </span>
                             )}
-                            <div className="ml-auto flex items-center gap-1.5">
+                            <div className="w-full sm:w-auto sm:ml-auto flex flex-wrap items-center gap-1.5">
                                 {(['all', 'active', 'closed'] as const).map((f) => (
                                     <button key={f} onClick={() => setCampaignsFilter(f)}
                                         className={`px-2.5 py-1 rounded-full text-[11px] font-semibold capitalize transition-colors ${
@@ -1867,7 +1874,7 @@ const ActionsByAccountPage = () => {
                                 <ScrollBtns s={campaignsScroll} />
                                 <button
                                     onClick={() => setCreateCampaignOpen(true)}
-                                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-[#00B512] hover:bg-[#009a0f] text-white transition-colors"
+                                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-[#00B512] hover:bg-[#009a0f] text-white transition-colors whitespace-nowrap"
                                 >
                                     <Plus size={12} />
                                     New Campaign
diff --git a/app/contacts/components/ContactDetailsPanel.tsx b/app/contacts/components/ContactDetailsPanel.tsx
index be03980..f209ca1 100644
--- a/app/contacts/components/ContactDetailsPanel.tsx
+++ b/app/contacts/components/ContactDetailsPanel.tsx
@@ -171,7 +171,7 @@ export function ContactDetailsPanel({ contact, isOpen, onClose }: ContactDetails
                                     className="absolute bottom-0 right-0 bg-white dark:bg-darkBg-card rounded-full p-1.5 shadow-sm border border-gray-100 dark:border-darkBorder-light hover:bg-gray-50 dark:hover:bg-darkBg-hover transition-colors"
                                     title={contact.isFavorite ? "Remove from favorites" : "Add to favorites"}
                                 >
-                                    <Star className={cn("h-4 w-4", contact.isFavorite ? "text-yellow-500 fill-yellow-500" : "text-gray-400")} />
+                                    <Star className={cn("h-4 w-4", contact.isFavorite ? "text-yellow-500 fill-yellow-500" : "text-gray-400 dark:text-gray-500")} />
                                 </button>
                             </div>
 
@@ -195,7 +195,7 @@ export function ContactDetailsPanel({ contact, isOpen, onClose }: ContactDetails
                                     className="h-5 w-5 p-0 rounded-full hover:bg-gray-100 dark:hover:bg-darkBg-hover"
                                     title="Manage tags"
                                 >
-                                    <Edit className="h-3 w-3 text-gray-400" />
+                                    <Edit className="h-3 w-3 text-gray-400 dark:text-gray-500" />
                                 </Button>
                             </div>
 
diff --git a/app/contacts/components/ContactsTable.tsx b/app/contacts/components/ContactsTable.tsx
index de1ced5..b574cb0 100644
--- a/app/contacts/components/ContactsTable.tsx
+++ b/app/contacts/components/ContactsTable.tsx
@@ -85,7 +85,7 @@ export function ContactsTable({ contacts, isLoading, onSelect }: ContactsTablePr
 
     if (isLoading) {
         return (
-            <div className="p-8 text-center text-gray-500">
+            <div className="p-8 text-center text-gray-500 dark:text-gray-400">
                 Loading contacts...
             </div>
         );
@@ -93,9 +93,9 @@ export function ContactsTable({ contacts, isLoading, onSelect }: ContactsTablePr
 
     if (contacts.length === 0) {
         return (
-            <div className="p-12 text-center text-gray-500">
+            <div className="p-12 text-center text-gray-500 dark:text-gray-400">
                 <div className="mb-4">
-                    <div className="h-12 w-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto text-gray-400">
+                    <div className="h-12 w-12 bg-gray-100 dark:bg-darkBg-interactive rounded-full flex items-center justify-center mx-auto text-gray-400 dark:text-gray-500">
                         <span className="text-xl">?</span>
                     </div>
                 </div>
diff --git a/app/contacts/components/PendingRequestsTable.tsx b/app/contacts/components/PendingRequestsTable.tsx
index f563e9c..fc69ad8 100644
--- a/app/contacts/components/PendingRequestsTable.tsx
+++ b/app/contacts/components/PendingRequestsTable.tsx
@@ -47,7 +47,7 @@ export function PendingRequestsTable({ requests, isLoading }: PendingRequestsTab
 
     if (isLoading) {
         return (
-            <div className="p-8 text-center text-gray-500">
+            <div className="p-8 text-center text-gray-500 dark:text-gray-400">
                 Loading sent requests...
             </div>
         );
@@ -55,9 +55,9 @@ export function PendingRequestsTable({ requests, isLoading }: PendingRequestsTab
 
     if (requests.length === 0) {
         return (
-            <div className="p-12 text-center text-gray-500">
+            <div className="p-12 text-center text-gray-500 dark:text-gray-400">
                 <div className="mb-4">
-                    <div className="h-12 w-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto text-gray-400">
+                    <div className="h-12 w-12 bg-gray-100 dark:bg-darkBg-interactive rounded-full flex items-center justify-center mx-auto text-gray-400 dark:text-gray-500">
                         <span className="text-xl">Inbox</span>
                     </div>
                 </div>
diff --git a/app/contacts/components/SentRequestsTable.tsx b/app/contacts/components/SentRequestsTable.tsx
index 37f302c..5690104 100644
--- a/app/contacts/components/SentRequestsTable.tsx
+++ b/app/contacts/components/SentRequestsTable.tsx
@@ -14,7 +14,7 @@ export function SentRequestsTable({ requests, isLoading }: SentRequestsTableProp
 
     if (isLoading) {
         return (
-            <div className="p-8 text-center text-gray-500">
+            <div className="p-8 text-center text-gray-500 dark:text-gray-400">
                 Loading pending requests...
             </div>
         );
@@ -22,9 +22,9 @@ export function SentRequestsTable({ requests, isLoading }: SentRequestsTableProp
 
     if (requests.length === 0) {
         return (
-            <div className="p-12 text-center text-gray-500">
+            <div className="p-12 text-center text-gray-500 dark:text-gray-400">
                 <div className="mb-4">
-                    <div className="h-12 w-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto text-gray-400">
+                    <div className="h-12 w-12 bg-gray-100 dark:bg-darkBg-interactive rounded-full flex items-center justify-center mx-auto text-gray-400 dark:text-gray-500">
                         <span className="text-xl">Outbox</span>
                     </div>
                 </div>
diff --git a/app/contacts/page.tsx b/app/contacts/page.tsx
index 76179f3..ce7e40d 100644
--- a/app/contacts/page.tsx
+++ b/app/contacts/page.tsx
@@ -262,7 +262,7 @@ function ContactsPageInner() {
                             </DropdownMenu>
                         </div>
 
-                        <div className="flex-1 overflow-y-auto space-y-8 pr-2">
+                        <div className="flex-1 overflow-y-auto space-y-8 pr-2 mobile-bottom-padding">
                             {(activeTab === 'normal' || activeTab === 'companies' || activeTab === 'persons') && (
                                 <>
                                     {/* Favorites Section */}
diff --git a/app/groups/page.tsx b/app/groups/page.tsx
index 386c8f5..a56d199 100644
--- a/app/groups/page.tsx
+++ b/app/groups/page.tsx
@@ -175,7 +175,7 @@ export default function GroupsPage() {
                         </div>
 
                         {/* Group list */}
-                        <div className="flex-1 overflow-y-auto pr-1">
+                        <div className="flex-1 overflow-y-auto pr-1 mobile-bottom-padding">
                             <div className="bg-white dark:bg-darkBg-card rounded-xl shadow-sm border border-gray-200 dark:border-darkBorder-light overflow-hidden">
                                 {filteredGroups.length === 0 ? (
                                     <div className="flex flex-col items-center justify-center py-16 px-6 text-center">
diff --git a/app/home/requests/page.tsx b/app/home/requests/page.tsx
index 6975a35..b5c8095 100644
--- a/app/home/requests/page.tsx
+++ b/app/home/requests/page.tsx
@@ -109,14 +109,14 @@ export default function RequestsPage() {
 
         return (
             <Card className="p-4 mb-3 hover:shadow-md transition-all border-gray-100 dark:border-darkBorder-light bg-white dark:bg-darkBg-card">
-                <div className="flex items-center justify-between gap-4">
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4">
                     <div className="flex items-center gap-3 flex-1 min-w-0">
-                        <UserAvatar 
+                        <UserAvatar
                             profileImage={(otherParty as any)?.profile?.profileImage || otherParty?.profile?.avatar}
                             firstName={otherParty?.firstName}
                             lastName={otherParty?.lastName}
                             userId={otherParty?.id}
-                            className="h-10 w-10 flex-shrink-0" 
+                            className="h-10 w-10 flex-shrink-0"
                         />
                         <div className="flex-1 min-w-0">
                             <div className="flex items-center gap-2">
@@ -136,9 +136,9 @@ export default function RequestsPage() {
                             </p>
                         </div>
                     </div>
-                    
-                    <div className="text-right flex flex-col items-end gap-2">
-                        <div className="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-1">
+
+                    <div className="flex flex-col items-stretch sm:items-end gap-2 sm:flex-shrink-0">
+                        <div className="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-1 whitespace-nowrap sm:self-end">
                             {type === 'received' ? (
                                 <ArrowDownLeft size={16} className="text-red-500" />
                             ) : (
@@ -146,21 +146,21 @@ export default function RequestsPage() {
                             )}
                             {request.amount.toLocaleString()} {request.currency}
                         </div>
-                        
+
                         {type === 'received' && isPending && (
                             <div className="flex items-center gap-2">
-                                <Button 
-                                    size="sm" 
+                                <Button
+                                    size="sm"
                                     variant="outline"
-                                    className="h-8"
+                                    className="h-8 flex-1 sm:flex-none"
                                     disabled={processingRequestId === request.id}
                                     onClick={() => handleDeclineRequest(request.id)}
                                 >
                                     Decline
                                 </Button>
-                                <Button 
-                                    size="sm" 
-                                    className={`${accent.solidDark} text-white h-8`}
+                                <Button
+                                    size="sm"
+                                    className={`${accent.solidDark} text-white h-8 flex-1 sm:flex-none`}
                                     onClick={() => router.push(`/home/transfer/amount?requestId=${request.id}`)}
                                 >
                                     Pay Now
diff --git a/app/welcome/[userId]/page.tsx b/app/welcome/[userId]/page.tsx
index c2223db..64fda67 100644
--- a/app/welcome/[userId]/page.tsx
+++ b/app/welcome/[userId]/page.tsx
@@ -1509,7 +1509,7 @@ const WelcomeProfilePage: React.FC = () => {
     <>
       {isHydrated && isLoggedIn && <Header />}
       <div className={`min-h-screen ${accent.bgPage}`}>
-        <div className="max-w-5xl mx-auto px-3 sm:px-4 py-4 sm:py-8 space-y-4 sm:space-y-5">
+        <div className="max-w-5xl mx-auto px-3 sm:px-4 py-4 sm:py-8 space-y-4 sm:space-y-5 mobile-bottom-padding">
 
           {/* Profile header card */}
           <div className={`rounded-2xl p-4 sm:p-6 md:p-8 ${accent.bgCard}`}>
diff --git a/components/Dashboard/TransactionList.tsx b/components/Dashboard/TransactionList.tsx
index 02db875..89a0cea 100644
--- a/components/Dashboard/TransactionList.tsx
+++ b/components/Dashboard/TransactionList.tsx
@@ -1,6 +1,6 @@
 import React, { Suspense, useEffect, useState } from 'react';
 import { Card } from '@/components/ui/card';
-import { Search, Download, RefreshCcw, MessageCircle } from 'lucide-react';
+import { Search, Download, RefreshCcw, MessageCircle, Users, Target } from 'lucide-react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from '@/components/ui/dialog';
 import { Transaction } from '@/types/dashboard';
 import { UserAvatar } from '@/components/UserAvatar';
@@ -18,6 +18,45 @@ interface TransactionListProps {
   toolbarInHeader?: boolean;
 }
 
+// Renders a person/org avatar as before, or a group/campaign icon badge when
+// the counterparty is a group or public-contribution wallet (which has no
+// user profile to show).
+const CounterpartyAvatar = ({
+  type,
+  name,
+  userId,
+  profileImage,
+}: {
+  type: 'user' | 'organization' | 'group' | 'campaign';
+  name: string;
+  userId?: string;
+  profileImage?: string;
+}) => {
+  if (type === 'group' || type === 'campaign') {
+    return (
+      <div className="h-10 w-10 shrink-0 rounded-full overflow-hidden bg-brand-green/10 dark:bg-brand-gold/10 flex items-center justify-center">
+        {profileImage ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={profileImage} alt={name} className="h-full w-full object-cover" />
+        ) : type === 'group' ? (
+          <Users size={18} className="text-brand-green dark:text-brand-gold" />
+        ) : (
+          <Target size={18} className="text-brand-green dark:text-brand-gold" />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <UserAvatar
+      userId={userId}
+      profileImage={profileImage}
+      firstName={name.split(' ')[0]}
+      lastName={name.split(' ')[1] || ''}
+    />
+  );
+};
+
 const TransactionListInner = ({ transactions: propTransactions, toolbarInHeader = false }: TransactionListProps) => {
   const { getToken } = useAuthToken();
   const router = useRouter();
@@ -151,30 +190,41 @@ const TransactionListInner = ({ transactions: propTransactions, toolbarInHeader
     const transactionFee = Number(transaction.fee) || 0;
     const amount = isOutgoing ? -(transactionAmount + transactionFee) : transactionAmount;
 
-    // Get the counterparty user info
-    let counterpartyName = 'Unknown User';
+    // Get the counterparty info — a counterparty can be a person, an
+    // organization, a group (in-chat contribution), or a campaign (public
+    // contribution) wallet, since money can move into any of those.
+    let counterpartyName = '';
     let counterpartyEmail = '';
     let counterpartyProfileImage: string | undefined = undefined;
+    let counterpartyType: 'user' | 'organization' | 'group' | 'campaign' = 'user';
 
-    if (isOutgoing && transaction.receiverWallet?.user) {
-      // Outgoing: show receiver info
-      const user = transaction.receiverWallet.user;
-      counterpartyName = `${user.firstName || ''} ${user.lastName || ''}`.trim();
-      counterpartyEmail = user.email || '';
-      counterpartyProfileImage = user.profile?.profileImage;
-    } else if (!isOutgoing && transaction.senderWallet?.user) {
-      // Incoming: show sender info
-      const user = transaction.senderWallet.user;
+    const counterpartyWallet = isOutgoing ? transaction.receiverWallet : transaction.senderWallet;
+
+    if (counterpartyWallet?.user) {
+      const user = counterpartyWallet.user;
       counterpartyName = `${user.firstName || ''} ${user.lastName || ''}`.trim();
       counterpartyEmail = user.email || '';
       counterpartyProfileImage = user.profile?.profileImage;
+      counterpartyType = 'user';
+    } else if (counterpartyWallet?.organization) {
+      counterpartyName = counterpartyWallet.organization.name || '';
+      counterpartyEmail = counterpartyWallet.organization.email || '';
+      counterpartyProfileImage = counterpartyWallet.organization.profile?.profileImage;
+      counterpartyType = 'organization';
+    } else if (counterpartyWallet?.group) {
+      counterpartyName = counterpartyWallet.group.name || '';
+      counterpartyProfileImage = counterpartyWallet.group.profilePictureUrl || undefined;
+      counterpartyType = 'group';
+    } else if (counterpartyWallet?.publicContribution) {
+      counterpartyName = counterpartyWallet.publicContribution.title || '';
+      counterpartyType = 'campaign';
     }
 
     if (!counterpartyName || counterpartyName === '') {
       counterpartyName = transaction.description || (isOutgoing ? 'Money Sent' : 'Money Received');
     }
 
-    return { amount, counterpartyName, counterpartyEmail, counterpartyProfileImage, isOutgoing };
+    return { amount, counterpartyName, counterpartyEmail, counterpartyProfileImage, counterpartyType, isOutgoing };
   };
 
   useEffect(() => {
@@ -384,7 +434,7 @@ const TransactionListInner = ({ transactions: propTransactions, toolbarInHeader
           </thead>
           <tbody>
             {filteredTransactions.map((transaction) => {
-              const { amount, counterpartyName, counterpartyEmail, counterpartyProfileImage, isOutgoing } = getTransactionDisplayInfo(transaction);
+              const { amount, counterpartyName, counterpartyEmail, counterpartyProfileImage, counterpartyType, isOutgoing } = getTransactionDisplayInfo(transaction);
               const isSelected = selectedTransactions.has(transaction.id);
               const sourceLabel = transaction.senderSubActionId ? 'Sub-Action Wallet' : 'Wallet';
               const destinationLabel = (transaction.resolvedReceiverWalletId || transaction.receiverWalletId) ? 'Wallet' : 'Account';
@@ -401,11 +451,11 @@ const TransactionListInner = ({ transactions: propTransactions, toolbarInHeader
                   <td className="py-4 px-4 text-sm font-medium text-gray-900 dark:text-gray-100">{transaction.referenceId}</td>
                   <td className="py-4 px-4">
                     <div className="flex items-center gap-3">
-                      <UserAvatar
+                      <CounterpartyAvatar
+                        type={counterpartyType}
+                        name={counterpartyName}
                         userId={(isOutgoing ? transaction.receiverWallet?.userId : transaction.senderWallet?.userId) ?? undefined}
                         profileImage={counterpartyProfileImage}
-                        firstName={counterpartyName.split(' ')[0]}
-                        lastName={counterpartyName.split(' ')[1] || ''}
                       />
                       <div className="flex flex-col">
                         <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{counterpartyName}</div>
@@ -481,7 +531,7 @@ const TransactionListInner = ({ transactions: propTransactions, toolbarInHeader
           <span className="text-sm text-gray-600 dark:text-gray-400">Select all</span>
         </div>
         {filteredTransactions.map((transaction) => {
-          const { amount, counterpartyName, counterpartyEmail, counterpartyProfileImage, isOutgoing } = getTransactionDisplayInfo(transaction);
+          const { amount, counterpartyName, counterpartyEmail, counterpartyProfileImage, counterpartyType, isOutgoing } = getTransactionDisplayInfo(transaction);
           const isSelected = selectedTransactions.has(transaction.id);
           return (
             <div key={transaction.id} className="border border-gray-200 dark:border-darkBorder-light rounded-lg p-4 bg-gray-50 dark:bg-darkBg-interactive">
@@ -493,12 +543,12 @@ const TransactionListInner = ({ transactions: propTransactions, toolbarInHeader
                     onChange={(e) => handleSelectTransaction(transaction.id, e.target.checked)}
                     className="w-4 h-4 shrink-0 rounded border-gray-300 dark:border-darkBorder-light dark:bg-darkBg-input"
                   />
-                    <UserAvatar
+                    <CounterpartyAvatar
+                      type={counterpartyType}
+                      name={counterpartyName}
                       userId={(isOutgoing ? transaction.receiverWallet?.userId : transaction.senderWallet?.userId) ?? undefined}
-                    profileImage={counterpartyProfileImage}
-                    firstName={counterpartyName.split(' ')[0]}
-                    lastName={counterpartyName.split(' ')[1] || ''}
-                  />
+                      profileImage={counterpartyProfileImage}
+                    />
                   <div className="min-w-0">
                     <div className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{counterpartyName}</div>
                     <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{counterpartyEmail}</div>
diff --git a/components/RecentActions.tsx b/components/RecentActions.tsx
index cac5973..bcf5a5f 100644
--- a/components/RecentActions.tsx
+++ b/components/RecentActions.tsx
@@ -1,11 +1,11 @@
 "use client"
 import React, { useEffect, useState } from 'react';
-import { Plus, Ticket, Target, ArrowRight, Users, BarChart3, ChevronDown } from 'lucide-react';
+import { Plus, Ticket, Target, ArrowRight, Users, BarChart3, ChevronDown, Globe2 } from 'lucide-react';
 import { useAuthToken } from '@/hooks/use-auth-token';
 import { useRouter } from 'next/navigation';
 import axios from 'axios';
 import baseUrl from '@/helpers/baseUrl';
-import { getMyGroupContributions } from '@/helpers/api';
+import { getMyGroupContributions, getMyPublicContributions } from '@/helpers/api';
 import { getCurrentUserInfo } from '@/utils/tokenUtils';
 import {
   DropdownMenu,
@@ -81,6 +81,15 @@ interface PendingContribution {
   myPayment?: { id: string; amount: number; createdAt: string } | null;
 }
 
+interface PublicCampaignSummary {
+  id: string;
+  title: string;
+  goalAmount?: number | null;
+  collectedAmount: number;
+  status: 'active' | 'completed' | 'closed' | 'expired';
+  currency: string;
+}
+
 interface RecentActionsProps {
   userId?: string;
 }
@@ -197,8 +206,56 @@ function VoteStandingRow({
   );
 }
 
+function CampaignRow({ c, onClick }: { c: PublicCampaignSummary; onClick: () => void }) {
+  const hasGoal = !!c.goalAmount && c.goalAmount > 0;
+  const progress = hasGoal ? Math.min((c.collectedAmount / c.goalAmount!) * 100, 100) : 0;
+
+  const statusBadge: Record<string, string> = {
+    active:    'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400',
+    completed: 'bg-blue-100  dark:bg-blue-900/30  text-blue-700  dark:text-blue-400',
+    expired:   'bg-red-100   dark:bg-red-900/30   text-red-700   dark:text-red-400',
+    closed:    'bg-gray-100  dark:bg-darkBg-interactive text-gray-500 dark:text-gray-400',
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      className="w-full flex items-center gap-3 p-3 rounded-xl bg-emerald-50 dark:bg-emerald-900/10 hover:bg-emerald-100 dark:hover:bg-emerald-900/20 border border-emerald-100 dark:border-emerald-800/30 hover:border-emerald-300 dark:hover:border-emerald-700 transition-all text-left group"
+    >
+      <div className="w-11 h-11 rounded-lg flex-shrink-0 bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
+        <Globe2 size={18} className="text-emerald-600 dark:text-emerald-400" />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-semibold text-gray-900 dark:text-white truncate">{c.title}</p>
+        {hasGoal ? (
+          <>
+            <div className="mt-1.5 h-1 w-full bg-gray-200 dark:bg-darkBg-main rounded-full overflow-hidden">
+              <div className="h-full bg-brand-green dark:bg-brand-gold rounded-full" style={{ width: `${progress}%` }} />
+            </div>
+            <p className="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+              {fmtRwf(c.collectedAmount, c.currency)} of {fmtRwf(c.goalAmount!, c.currency)}
+            </p>
+          </>
+        ) : (
+          <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+            {fmtRwf(c.collectedAmount, c.currency)} collected
+          </p>
+        )}
+      </div>
+
+      <div className="flex-shrink-0">
+        <span className={`text-[11px] font-semibold px-2 py-0.5 rounded-full ${statusBadge[c.status] ?? statusBadge.closed}`}>
+          {c.status.charAt(0).toUpperCase() + c.status.slice(1)}
+        </span>
+      </div>
+    </button>
+  );
+}
+
 function ContributionRow({ c, onClick }: { c: PendingContribution; onClick: () => void }) {
-  const progress = c.goalAmount > 0 ? Math.min((c.collectedAmount / c.goalAmount) * 100, 100) : 0;
+  const hasGoal = c.goalAmount > 0;
+  const progress = hasGoal ? Math.min((c.collectedAmount / c.goalAmount) * 100, 100) : 0;
   const isPaid = !!c.myPayment;
   const isActive = c.status === 'active';
 
@@ -226,9 +283,20 @@ function ContributionRow({ c, onClick }: { c: PendingContribution; onClick: () =
       <div className="flex-1 min-w-0">
         <p className="text-sm font-semibold text-gray-900 dark:text-white truncate">{c.title}</p>
         <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{c.groupName}</p>
-        <div className="mt-1.5 h-1 w-full bg-gray-200 dark:bg-darkBg-main rounded-full overflow-hidden">
-          <div className="h-full bg-brand-green dark:bg-brand-gold rounded-full" style={{ width: `${progress}%` }} />
-        </div>
+        {hasGoal ? (
+          <>
+            <div className="mt-1.5 h-1 w-full bg-gray-200 dark:bg-darkBg-main rounded-full overflow-hidden">
+              <div className="h-full bg-brand-green dark:bg-brand-gold rounded-full" style={{ width: `${progress}%` }} />
+            </div>
+            <p className="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+              {fmtRwf(c.collectedAmount, c.currency)} of {fmtRwf(c.goalAmount, c.currency)}
+            </p>
+          </>
+        ) : (
+          <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+            {fmtRwf(c.collectedAmount, c.currency)} collected
+          </p>
+        )}
       </div>
 
       {/* Right side */}
@@ -318,6 +386,7 @@ export const RecentActions = ({ userId }: RecentActionsProps) => {
   const [voteItems, setVoteItems]           = useState<RecentAction[]>([]);
   const [voteDataMap, setVoteDataMap]       = useState<Record<string, VoteData>>({});
   const [pendingContributions, setPending]  = useState<PendingContribution[]>([]);
+  const [campaigns, setCampaigns]           = useState<PublicCampaignSummary[]>([]);
   const [orgActions, setOrgActions]         = useState<RecentAction[]>([]);
   const [isOrganization, setIsOrganization] = useState(false);
   const [loading, setLoading]               = useState(true);
@@ -359,10 +428,11 @@ export const RecentActions = ({ userId }: RecentActionsProps) => {
           return;
         }
 
-        // Individual user: fetch QR objects + contributions in parallel
-        const [qrRes, contribRes] = await Promise.allSettled([
+        // Individual user: fetch QR objects + contributions + public campaigns in parallel
+        const [qrRes, contribRes, campaignsRes] = await Promise.allSettled([
           axios.get(`${baseUrl}/users/${userId}/qr-objects`, { headers }),
           getMyGroupContributions(),
+          getMyPublicContributions(),
         ]);
 
         if (qrRes.status === 'fulfilled') {
@@ -470,6 +540,18 @@ export const RecentActions = ({ userId }: RecentActionsProps) => {
             setPending(toShow);
           }
         }
+
+        // Public campaigns: active first, up to 2
+        if (campaignsRes.status === 'fulfilled') {
+          const all: any[] = campaignsRes.value?.data?.data || campaignsRes.value?.data || [];
+          if (Array.isArray(all)) {
+            const active = all.filter((c: any) => c.status === 'active');
+            const toShow = active.length > 0
+              ? active.slice(0, 2)
+              : all.filter((c: any) => c.status !== 'active').slice(0, 2);
+            setCampaigns(toShow);
+          }
+        }
       } catch {
         // silently fail — card shows empty state
       } finally {
@@ -486,7 +568,7 @@ export const RecentActions = ({ userId }: RecentActionsProps) => {
 
   const hasContent = isOrganization
     ? orgActions.length > 0
-    : tickets.length > 0 || voteItems.length > 0 || pendingContributions.length > 0;
+    : tickets.length > 0 || voteItems.length > 0 || pendingContributions.length > 0 || campaigns.length > 0;
 
   return (
     <div className="bg-white dark:bg-darkBg-card rounded-2xl shadow-md hover:shadow-lg transition-shadow duration-300 border border-gray-100 dark:border-darkBorder-light overflow-hidden">
@@ -632,6 +714,21 @@ export const RecentActions = ({ userId }: RecentActionsProps) => {
                 </div>
               </div>
             )}
+
+            {campaigns.length > 0 && (
+              <div>
+                <div className="flex items-center justify-between mb-2 px-1">
+                  <p className="text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+                    Campaigns
+                  </p>
+                </div>
+                <div className="space-y-2">
+                  {campaigns.map((c) => (
+                    <CampaignRow key={c.id} c={c} onClick={goToActions} />
+                  ))}
+                </div>
+              </div>
+            )}
           </>
         )}
 
diff --git a/components/chat/GroupDialogs.tsx b/components/chat/GroupDialogs.tsx
index 84d494e..d4964ad 100644
--- a/components/chat/GroupDialogs.tsx
+++ b/components/chat/GroupDialogs.tsx
@@ -54,19 +54,19 @@ export default function GroupDialogs({
                 <AlertDialogContent className="max-w-md">
                     <AlertDialogHeader>
                         <div className="flex items-center gap-3 mb-2">
-                            <div className="p-2 bg-orange-100 rounded-full">
-                                <LogOut size={20} className="text-orange-600" />
+                            <div className="p-2 bg-orange-100 dark:bg-orange-900/30 rounded-full">
+                                <LogOut size={20} className="text-orange-600 dark:text-orange-400" />
                             </div>
                             <AlertDialogTitle className="text-xl">Leave Group</AlertDialogTitle>
                         </div>
-                        <AlertDialogDescription className="text-gray-600 leading-relaxed">
-                            Are you sure you want to leave <span className="font-medium">"{getGroupName(leaveDialog.groupId)}"</span>? 
+                        <AlertDialogDescription className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                            Are you sure you want to leave <span className="font-medium">"{getGroupName(leaveDialog.groupId)}"</span>?
                             <br /><br />
                             You won't be able to see new messages unless someone adds you back to the group.
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter className="gap-3">
-                        <AlertDialogCancel className="border-gray-200 text-gray-600 hover:bg-gray-50">
+                        <AlertDialogCancel className="border-gray-200 dark:border-darkBorder-light text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-darkBg-interactive">
                             Cancel
                         </AlertDialogCancel>
                         <AlertDialogAction
@@ -99,19 +99,19 @@ export default function GroupDialogs({
                 <AlertDialogContent className="max-w-md">
                     <AlertDialogHeader>
                         <div className="flex items-center gap-3 mb-2">
-                            <div className="p-2 bg-red-100 rounded-full">
-                                <Trash2 size={20} className="text-red-600" />
+                            <div className="p-2 bg-red-100 dark:bg-red-900/30 rounded-full">
+                                <Trash2 size={20} className="text-red-600 dark:text-red-400" />
                             </div>
                             <AlertDialogTitle className="text-xl">Delete Group</AlertDialogTitle>
                         </div>
-                        <AlertDialogDescription className="text-gray-600 leading-relaxed">
+                        <AlertDialogDescription className="text-gray-600 dark:text-gray-400 leading-relaxed">
                             Are you sure you want to permanently delete <span className="font-medium">"{getGroupName(deleteDialog.groupId)}"</span>?
                             <br /><br />
-                            <span className="text-red-600 font-medium">This action cannot be undone.</span> All group data, messages, and member information will be permanently removed.
+                            <span className="text-red-600 dark:text-red-400 font-medium">This action cannot be undone.</span> All group data, messages, and member information will be permanently removed.
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter className="gap-3">
-                        <AlertDialogCancel className="border-gray-200 text-gray-600 hover:bg-gray-50">
+                        <AlertDialogCancel className="border-gray-200 dark:border-darkBorder-light text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-darkBg-interactive">
                             Cancel
                         </AlertDialogCancel>
                         <AlertDialogAction
diff --git a/components/chat/GroupMenu.tsx b/components/chat/GroupMenu.tsx
index ba23613..dd94b26 100644
--- a/components/chat/GroupMenu.tsx
+++ b/components/chat/GroupMenu.tsx
@@ -30,15 +30,15 @@ export default function GroupMenu({ group, isActiveMember, onManageAction }: Gro
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button 
-                    variant="ghost" 
-                    size="sm" 
-                    className="h-8 w-8 p-0 opacity-60 group-hover:opacity-100 transition-opacity hover:bg-gray-100"
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0 opacity-60 group-hover:opacity-100 transition-opacity hover:bg-gray-100 dark:hover:bg-darkBg-interactive"
                 >
                     <MoreVertical size={16} />
                 </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56 shadow-lg border-gray-200">
+            <DropdownMenuContent align="end" className="w-56 shadow-lg border-gray-200 dark:border-darkBorder-light">
                                 <DropdownMenuItem onClick={() => onManageAction("info", group)}>
                     <Info size={16} className="text-green-500" />
                     Group Info
@@ -48,7 +48,7 @@ export default function GroupMenu({ group, isActiveMember, onManageAction }: Gro
                     <>
                         <DropdownMenuItem 
                             onClick={() => onManageAction("invite", group)}
-                            className="flex items-center gap-3 py-2.5 cursor-pointer hover:bg-gray-50"
+                            className="flex items-center gap-3 py-2.5 cursor-pointer"
                         >
                             <UserPlus size={16} className="text-green-500" />
                             <span>Invite Members</span>
@@ -58,7 +58,7 @@ export default function GroupMenu({ group, isActiveMember, onManageAction }: Gro
                         
                         <DropdownMenuItem 
                             onClick={() => onManageAction("mute", group)}
-                            className="flex items-center gap-3 py-2.5 cursor-pointer hover:bg-gray-50"
+                            className="flex items-center gap-3 py-2.5 cursor-pointer"
                         >
                             <BellOff size={16} className="text-orange-500" />
                             <span>Mute Notifications</span>
@@ -66,7 +66,7 @@ export default function GroupMenu({ group, isActiveMember, onManageAction }: Gro
                         
                         <DropdownMenuItem 
                             onClick={() => onManageAction("unmute", group)}
-                            className="flex items-center gap-3 py-2.5 cursor-pointer hover:bg-gray-50"
+                            className="flex items-center gap-3 py-2.5 cursor-pointer"
                         >
                             <Bell size={16} className="text-green-500" />
                             <span>Unmute Notifications</span>
@@ -110,9 +110,9 @@ export default function GroupMenu({ group, isActiveMember, onManageAction }: Gro
                 {!isActiveMember && (
                     <DropdownMenuItem 
                         onClick={() => onManageAction("view", group)}
-                        className="flex items-center gap-3 py-2.5 cursor-pointer hover:bg-gray-50"
+                        className="flex items-center gap-3 py-2.5 cursor-pointer"
                     >
-                        <Eye size={16} className="text-gray-500" />
+                        <Eye size={16} className="text-gray-500 dark:text-gray-400" />
                         <span>View Group</span>
                     </DropdownMenuItem>
                 )}
diff --git a/components/chat/GroupsHeader.tsx b/components/chat/GroupsHeader.tsx
index 68714a5..aec53c7 100644
--- a/components/chat/GroupsHeader.tsx
+++ b/components/chat/GroupsHeader.tsx
@@ -45,7 +45,7 @@ export default function GroupsHeader({ groupsCount, searchTerm, onSearchChange }
             {/* Search and Filters */}
             <div className="flex flex-col sm:flex-row gap-4">
                 <div className="relative flex-1">
-                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={18} />
+                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" size={18} />
                     <Input
                         placeholder="Search groups by name or description..."
                         className="pl-10 h-11 border-gray-200 dark:border-darkBorder-light focus:border-brand-green dark:focus:border-brand-gold focus:ring-brand-green/20 dark:focus:ring-brand-gold/20"
@@ -56,7 +56,7 @@ export default function GroupsHeader({ groupsCount, searchTerm, onSearchChange }
 
                 <Button
                     variant="outline"
-                    className="border-gray-200 text-gray-600 hover:bg-gray-50 h-11 px-4"
+                    className="border-gray-200 dark:border-darkBorder-light text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-darkBg-interactive h-11 px-4"
                 >
                     <Filter size={18} className="mr-2" />
                     Filters
diff --git a/components/chat/add-member-modal.tsx b/components/chat/add-member-modal.tsx
index 6e171a9..a9ef23e 100644
--- a/components/chat/add-member-modal.tsx
+++ b/components/chat/add-member-modal.tsx
@@ -230,15 +230,15 @@ export default function AddMemberModal({
 
     return (
         <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-            <DialogContent className="sm:max-w-[550px] max-h-[85vh] overflow-hidden flex flex-col p-0">
-                <DialogHeader className="px-6 pt-6 pb-4 border-b">
-                    <DialogTitle className="flex items-center gap-2">
-                        <div className="bg-gray-100 p-2 rounded-full">
-                            <UserPlus size={20} className="text-gray-700" />
+            <DialogContent className="sm:max-w-[550px] max-h-[85vh] overflow-hidden flex flex-col p-0 dark:bg-darkBg-card dark:border-darkBorder-light">
+                <DialogHeader className="px-6 pt-6 pb-4 border-b dark:border-darkBorder-light">
+                    <DialogTitle className="flex items-center gap-2 text-gray-900 dark:text-white">
+                        <div className="bg-gray-100 dark:bg-darkBg-interactive p-2 rounded-full">
+                            <UserPlus size={20} className="text-gray-700 dark:text-gray-300" />
                         </div>
                         <div>
                             <div>Add Members</div>
-                            <div className="text-sm font-normal text-gray-500 mt-0.5">
+                            <div className="text-sm font-normal text-gray-500 dark:text-gray-400 mt-0.5">
                                 Invite people to "{groupName}"
                             </div>
                         </div>
@@ -246,12 +246,21 @@ export default function AddMemberModal({
                 </DialogHeader>
 
                 <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 overflow-hidden flex flex-col">
-                    <TabsList className="w-full grid grid-cols-2 mx-6 mt-4" style={{ width: 'calc(100% - 3rem)' }}>
-                        <TabsTrigger value="invite" className="flex items-center gap-2">
+                    <TabsList
+                        className="w-full grid grid-cols-2 mx-6 mt-4 bg-gray-100 dark:bg-darkBg-interactive border border-gray-200 dark:border-darkBorder-light"
+                        style={{ width: 'calc(100% - 3rem)' }}
+                    >
+                        <TabsTrigger
+                            value="invite"
+                            className="flex items-center gap-2 text-gray-600 dark:text-gray-300 data-[state=active]:bg-white dark:data-[state=active]:bg-darkBg-card data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"
+                        >
                             <Users size={14} />
                             From Contacts
                         </TabsTrigger>
-                        <TabsTrigger value="share" className="flex items-center gap-2">
+                        <TabsTrigger
+                            value="share"
+                            className="flex items-center gap-2 text-gray-600 dark:text-gray-300 data-[state=active]:bg-white dark:data-[state=active]:bg-darkBg-card data-[state=active]:text-gray-900 dark:data-[state=active]:text-white"
+                        >
                             <Share2 size={14} />
                             Share Link
                         </TabsTrigger>
@@ -262,10 +271,10 @@ export default function AddMemberModal({
                         <TabsContent value="invite" className="mt-4 space-y-4">
                             {/* Search Bar */}
                             <div className="relative">
-                                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={16} />
+                                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" size={16} />
                                 <Input
                                     placeholder="Search contacts..."
-                                    className="pl-10"
+                                    className="pl-10 dark:bg-darkBg-interactive dark:border-darkBorder-light dark:text-white"
                                     value={searchTerm}
                                     onChange={(e) => setSearchTerm(e.target.value)}
                                 />
@@ -273,16 +282,16 @@ export default function AddMemberModal({
 
                             {/* Selection Summary */}
                             {selectedContacts.length > 0 && (
-                                <div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
+                                <div className="p-3 bg-gray-50 dark:bg-darkBg-interactive rounded-lg border border-gray-200 dark:border-darkBorder-light">
                                     <div className="flex items-center justify-between">
-                                        <span className="text-sm font-medium text-gray-700">
+                                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                                             {selectedContacts.length} contact{selectedContacts.length > 1 ? "s" : ""} selected
                                         </span>
                                         <Button
                                             variant="ghost"
                                             size="sm"
                                             onClick={() => setSelectedContacts([])}
-                                            className="h-auto p-1 text-xs"
+                                            className="h-auto p-1 text-xs dark:text-gray-300 dark:hover:bg-darkBg-hover"
                                         >
                                             Clear
                                         </Button>
@@ -292,13 +301,13 @@ export default function AddMemberModal({
 
                             {/* Select All */}
                             {filteredContacts.length > 0 && (
-                                <div className="flex items-center gap-2 py-2 border-b">
+                                <div className="flex items-center gap-2 py-2 border-b dark:border-darkBorder-light">
                                     <Checkbox
                                         checked={selectedContacts.length === filteredContacts.length}
                                         onCheckedChange={handleSelectAll}
                                         id="select-all"
                                     />
-                                    <label htmlFor="select-all" className="text-sm font-medium cursor-pointer">
+                                    <label htmlFor="select-all" className="text-sm font-medium cursor-pointer text-gray-800 dark:text-gray-200">
                                         Select All ({filteredContacts.length})
                                     </label>
                                 </div>
@@ -308,11 +317,11 @@ export default function AddMemberModal({
                             <div className="space-y-2 max-h-[350px] overflow-y-auto">
                                 {isLoadingContacts ? (
                                     <div className="flex justify-center items-center py-12">
-                                        <Loader2 className="h-6 w-6 animate-spin text-gray-600" />
+                                        <Loader2 className="h-6 w-6 animate-spin text-gray-600 dark:text-gray-400" />
                                     </div>
                                 ) : filteredContacts.length === 0 ? (
-                                    <div className="text-center py-12 text-gray-500">
-                                        <Users size={48} className="mx-auto mb-4 text-gray-300" />
+                                    <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+                                        <Users size={48} className="mx-auto mb-4 text-gray-300 dark:text-gray-600" />
                                         <p className="font-medium">No contacts found</p>
                                         <p className="text-sm mt-1">
                                             {searchTerm ? "Try a different search term" : "Add contacts to invite them"}
@@ -326,7 +335,7 @@ export default function AddMemberModal({
                                         return (
                                             <div
                                                 key={contact.id}
-                                                className="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg cursor-pointer transition-colors"
+                                                className="flex items-center gap-3 p-3 hover:bg-gray-50 dark:hover:bg-darkBg-interactive rounded-lg cursor-pointer transition-colors"
                                                 onClick={() => toggleContact(otherUser.id)}
                                             >
                                                 <Checkbox
@@ -335,15 +344,15 @@ export default function AddMemberModal({
                                                 />
                                                 <Avatar className="h-10 w-10">
                                                     <AvatarImage src={(otherUser as any).avatar} alt={otherUser.firstName} />
-                                                    <AvatarFallback>
+                                                    <AvatarFallback className="dark:bg-darkBg-interactive dark:text-gray-200">
                                                         {getInitials(otherUser.firstName, otherUser.lastName)}
                                                     </AvatarFallback>
                                                 </Avatar>
                                                 <div className="flex-1 min-w-0">
-                                                    <p className="font-medium text-sm truncate">
+                                                    <p className="font-medium text-sm truncate text-gray-900 dark:text-white">
                                                         {otherUser.firstName} {otherUser.lastName}
                                                     </p>
-                                                    <p className="text-xs text-gray-500 truncate">
+                                                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
                                                         {otherUser.email}
                                                     </p>
                                                 </div>
@@ -355,11 +364,11 @@ export default function AddMemberModal({
 
                             {/* Action Buttons */}
                             {selectedContacts.length > 0 && (
-                                <div className="flex gap-2 pt-4 border-t">
+                                <div className="flex gap-2 pt-4 border-t dark:border-darkBorder-light">
                                     <Button
                                         variant="outline"
                                         onClick={onClose}
-                                        className="flex-1"
+                                        className="flex-1 dark:border-darkBorder-light dark:text-gray-300 dark:hover:bg-darkBg-interactive"
                                     >
                                         Cancel
                                     </Button>
@@ -390,13 +399,13 @@ export default function AddMemberModal({
                                 <>
                                     {/* QR Code Section */}
                                     {qrCode && (
-                                        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
-                                            <h4 className="font-semibold text-sm mb-3 flex items-center text-gray-700">
-                                                <QrCode size={16} className="mr-2 text-gray-600" />
+                                        <div className="bg-gray-50 dark:bg-darkBg-interactive border border-gray-200 dark:border-darkBorder-light rounded-lg p-4">
+                                            <h4 className="font-semibold text-sm mb-3 flex items-center text-gray-700 dark:text-gray-300">
+                                                <QrCode size={16} className="mr-2 text-gray-600 dark:text-gray-400" />
                                                 QR Code
                                             </h4>
                                             <div className="flex justify-center mb-3">
-                                                <div className="bg-white p-3 rounded-lg border border-gray-300 shadow-sm">
+                                                <div className="bg-white p-3 rounded-lg border border-gray-300 dark:border-darkBorder-light shadow-sm">
                                                     <img
                                                         src={qrCode}
                                                         alt="Group QR Code"
@@ -404,14 +413,14 @@ export default function AddMemberModal({
                                                     />
                                                 </div>
                                             </div>
-                                            <p className="text-xs text-gray-600 text-center mb-3">
+                                            <p className="text-xs text-gray-600 dark:text-gray-400 text-center mb-3">
                                                 Scan this QR code to join the group
                                             </p>
                                             <Button
                                                 onClick={handleDownloadQR}
                                                 variant="outline"
                                                 size="sm"
-                                                className="w-full"
+                                                className="w-full dark:border-darkBorder-light dark:text-gray-300 dark:hover:bg-darkBg-hover"
                                             >
                                                 <Download size={14} className="mr-2" />
                                                 Download QR Code
@@ -421,23 +430,23 @@ export default function AddMemberModal({
 
                                     {/* Access Link Section */}
                                     {accessLink && (
-                                        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
-                                            <h4 className="font-semibold text-sm mb-3 flex items-center text-gray-700">
-                                                <Link2 size={16} className="mr-2 text-gray-600" />
+                                        <div className="bg-gray-50 dark:bg-darkBg-interactive border border-gray-200 dark:border-darkBorder-light rounded-lg p-4">
+                                            <h4 className="font-semibold text-sm mb-3 flex items-center text-gray-700 dark:text-gray-300">
+                                                <Link2 size={16} className="mr-2 text-gray-600 dark:text-gray-400" />
                                                 Invite Link
                                             </h4>
-                                            <p className="text-xs text-gray-600 mb-3">
+                                            <p className="text-xs text-gray-600 dark:text-gray-400 mb-3">
                                                 Share this link with people you want to invite to the group
                                             </p>
                                             <div className="flex gap-2 mb-3">
-                                                <div className="flex-1 bg-white border border-gray-300 rounded px-3 py-2 text-sm truncate">
+                                                <div className="flex-1 bg-white dark:bg-darkBg-card border border-gray-300 dark:border-darkBorder-light rounded px-3 py-2 text-sm truncate text-gray-800 dark:text-gray-200">
                                                     {accessLink}
                                                 </div>
                                                 <Button
                                                     onClick={handleCopyLink}
                                                     variant="outline"
                                                     size="sm"
-                                                    className="shrink-0"
+                                                    className="shrink-0 dark:border-darkBorder-light dark:hover:bg-darkBg-hover"
                                                 >
                                                     {copiedLink ? (
                                                         <Check size={14} className="text-brand-green dark:text-brand-gold" />
@@ -459,8 +468,8 @@ export default function AddMemberModal({
                                     )}
                                 </>
                             ) : (
-                                <div className="text-center py-12 text-gray-500">
-                                    <Link2 size={48} className="mx-auto mb-4 text-gray-300" />
+                                <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+                                    <Link2 size={48} className="mx-auto mb-4 text-gray-300 dark:text-gray-600" />
                                     <p className="font-medium">No sharing options available</p>
                                     <p className="text-sm mt-1">
                                         Contact the group admin to enable sharing
diff --git a/components/chat/chat-header.tsx b/components/chat/chat-header.tsx
index c5f40c4..d25aff7 100644
--- a/components/chat/chat-header.tsx
+++ b/components/chat/chat-header.tsx
@@ -110,7 +110,7 @@ export default function ChatHeader({
       {/* Conversation Info */}
       <div className='flex items-center gap-3 flex-1 min-w-0'>
         <div className='relative'>
-          <Avatar className='h-10 w-10 border-2 border-gray-100'>
+          <Avatar className='h-10 w-10 border-2 border-gray-100 dark:border-darkBorder-light'>
             <AvatarImage
               src={conversation.avatar}
               alt={conversation.name || 'User'}
@@ -122,7 +122,7 @@ export default function ChatHeader({
           {!conversation.isGroup && conversation.isOnline && (
             <Circle
               size={10}
-              className='absolute -bottom-0.5 -right-0.5 fill-green-500 text-green-500 border-2 border-white rounded-full'
+              className='absolute -bottom-0.5 -right-0.5 fill-green-500 text-green-500 border-2 border-white dark:border-darkBg-card rounded-full'
             />
           )}
         </div>
@@ -162,7 +162,7 @@ export default function ChatHeader({
               variant='ghost'
               size='icon'
               onClick={onInviteToGroup}
-              className='h-9 w-9 hover:bg-gray-100 transition-colors'
+              className='h-9 w-9 hover:bg-gray-100 dark:hover:bg-darkBg-interactive transition-colors'
               aria-label='Add members'
             >
               <UserPlus size={16} />
@@ -175,7 +175,7 @@ export default function ChatHeader({
           variant='ghost'
           size='icon'
           onClick={onViewProfile}
-          className='h-9 w-9 hover:bg-gray-100 transition-colors'
+          className='h-9 w-9 hover:bg-gray-100 dark:hover:bg-darkBg-interactive transition-colors'
           aria-label='View profile'
         >
           <Info size={16} />
@@ -187,7 +187,7 @@ export default function ChatHeader({
             <Button
               variant='ghost'
               size='icon'
-              className='h-9 w-9 hover:bg-gray-100 transition-colors'
+              className='h-9 w-9 hover:bg-gray-100 dark:hover:bg-darkBg-interactive transition-colors'
               aria-label='More options'
             >
               <MoreVertical size={16} />
diff --git a/components/chat/conversation-list-layout.tsx b/components/chat/conversation-list-layout.tsx
index 34c2f7b..0846e3b 100644
--- a/components/chat/conversation-list-layout.tsx
+++ b/components/chat/conversation-list-layout.tsx
@@ -152,7 +152,7 @@ export default function ConversationListLayout({
       </div>
 
       {/* Content Area */}
-      <div className='flex-1 overflow-y-auto'>
+      <div className='flex-1 overflow-y-auto mobile-bottom-padding'>
         {activeFilter === 'groups' ? (
           // Groups-specific rendering
           groupsLoading ? (
diff --git a/components/chat/create-group-modal.tsx b/components/chat/create-group-modal.tsx
index 1d17d80..10df125 100644
--- a/components/chat/create-group-modal.tsx
+++ b/components/chat/create-group-modal.tsx
@@ -338,10 +338,10 @@ export default function CreateGroupModalUpdated({
                             ) : (
                                 <div className="flex flex-col items-center">
                                     <label htmlFor="group-image" className="cursor-pointer">
-                                        <div className="h-20 w-20 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition-colors">
-                                            <Upload size={24} className="text-gray-500" />
+                                        <div className="h-20 w-20 rounded-full bg-gray-100 dark:bg-darkBg-interactive flex items-center justify-center hover:bg-gray-200 dark:hover:bg-darkBg-hover transition-colors">
+                                            <Upload size={24} className="text-gray-500 dark:text-gray-400" />
                                         </div>
-                                        <span className="text-sm text-gray-500 mt-2 block text-center">Upload Picture</span>
+                                        <span className="text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center">Upload Picture</span>
                                     </label>
                                     <input
                                         id="group-image"
diff --git a/components/chat/enhanced-message-input.tsx b/components/chat/enhanced-message-input.tsx
index 263bf6d..e7c24d7 100644
--- a/components/chat/enhanced-message-input.tsx
+++ b/components/chat/enhanced-message-input.tsx
@@ -148,7 +148,7 @@ export default function EnhancedMessageInput({
     }, [])
 
     return (
-        <div className="bg-white p-3 sm:p-4 border-t border-gray-200 shadow-sm flex-shrink-0">
+        <div className="bg-white dark:bg-darkBg-card p-3 sm:p-4 border-t border-gray-200 dark:border-darkBorder-light shadow-sm flex-shrink-0">
             <div className="flex items-center gap-1 sm:gap-2">
                 {/* Attachments area */}
                 <div className="relative" ref={dropdownRef}>
@@ -157,10 +157,10 @@ export default function EnhancedMessageInput({
                         size="icon"
                         onClick={() => setShowOptions(!showOptions)}
                         disabled={disabled}
-                        className={`transition-all duration-300 h-8 w-8 sm:h-10 sm:w-10 ${showOptions ? "bg-gray-100" : ""}`}
+                        className={`transition-all duration-300 h-8 w-8 sm:h-10 sm:w-10 ${showOptions ? "bg-gray-100 dark:bg-darkBg-interactive" : ""}`}
                         aria-label="Attachments"
                     >
-                        <Paperclip size={16} className="sm:size-20 text-gray-500" />
+                        <Paperclip size={16} className="sm:size-20 text-gray-500 dark:text-gray-400" />
                     </Button>
 
                     <OptionsDropdown isOpen={showOptions} onOptionSelect={handleOptionSelect} />
@@ -170,11 +170,11 @@ export default function EnhancedMessageInput({
                     variant="ghost"
                     size="icon"
                     disabled={disabled}
-                    className="hover:bg-gray-100 transition-colors h-8 w-8 sm:h-10 sm:w-10"
+                    className="hover:bg-gray-100 dark:hover:bg-darkBg-interactive transition-colors h-8 w-8 sm:h-10 sm:w-10"
                     aria-label="Add image"
                     onClick={() => handleOptionSelect("gallery")}
                 >
-                    <ImageIcon size={16} className="sm:size-20 text-gray-500" />
+                    <ImageIcon size={16} className="sm:size-20 text-gray-500 dark:text-gray-400" />
                 </Button>
 
                 {/* Input Field */}
@@ -185,7 +185,7 @@ export default function EnhancedMessageInput({
                         onChange={handleInputChange}
                         onKeyDown={handleKeyDown}
                         disabled={disabled}
-                        className="rounded-full bg-gray-100 border-0 py-1.5 sm:py-2 px-3 sm:px-4 focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-opacity-50 transition-all pr-8 sm:pr-10 text-sm disabled:opacity-50"
+                        className="rounded-full bg-gray-100 dark:bg-darkBg-interactive dark:text-white border-0 py-1.5 sm:py-2 px-3 sm:px-4 focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-opacity-50 transition-all pr-8 sm:pr-10 text-sm disabled:opacity-50"
                     />
                     <Button
                         variant="ghost"
@@ -194,7 +194,7 @@ export default function EnhancedMessageInput({
                         className="absolute right-1 top-1/2 transform -translate-y-1/2 hover:bg-transparent border-0 h-6 w-6 sm:h-8 sm:w-8"
                         aria-label="Emoji"
                     >
-                        <Smile size={16} className="sm:size-18 text-gray-500" />
+                        <Smile size={16} className="sm:size-18 text-gray-500 dark:text-gray-400" />
                     </Button>
                 </div>
 
@@ -206,7 +206,7 @@ export default function EnhancedMessageInput({
                     className={`h-8 w-8 sm:h-10 sm:w-10 rounded-full transition-all duration-200 ${
                         messageText.trim() && !disabled
                             ? "bg-green-500 hover:bg-green-600 text-white shadow-md hover:shadow-lg"
-                            : "bg-gray-200 text-gray-400 cursor-not-allowed"
+                            : "bg-gray-200 dark:bg-darkBg-interactive text-gray-400 dark:text-gray-500 cursor-not-allowed"
                     }`}
                     aria-label="Send message"
                 >
@@ -216,7 +216,7 @@ export default function EnhancedMessageInput({
 
             {/* Typing indicator */}
             {isTyping && (
-                <div className="text-xs text-gray-500 mt-2 px-2">
+                <div className="text-xs text-gray-500 dark:text-gray-400 mt-2 px-2">
                     Typing...
                 </div>
             )}
diff --git a/components/chat/group-contribution-card.tsx b/components/chat/group-contribution-card.tsx
index 43372f4..2ca5bdd 100644
--- a/components/chat/group-contribution-card.tsx
+++ b/components/chat/group-contribution-card.tsx
@@ -18,6 +18,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Progress } from "@/components/ui/progress";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   contributeToGroup,
   getGroupContribution,
@@ -103,6 +104,7 @@ export function GroupContributionCard({ data, isMe, chatId }: Props) {
   const [step, setStep] = React.useState<Step>("idle");
   const [customAmount, setCustomAmount] = React.useState("");
   const [pin, setPin] = React.useState("");
+  const [isAnonymous, setIsAnonymous] = React.useState(false);
   const [newDeadline, setNewDeadline] = React.useState("");
   const [showEditModal, setShowEditModal] = React.useState(false);
   const [showContributors, setShowContributors] = React.useState(false);
@@ -236,7 +238,8 @@ export function GroupContributionCard({ data, isMe, chatId }: Props) {
         data.groupId,
         data.contributionId,
         amount,
-        pin
+        pin,
+        isAnonymous
       );
       toast({ description: "Contribution successful!" });
       setHasPaid(true);
@@ -247,6 +250,7 @@ export function GroupContributionCard({ data, isMe, chatId }: Props) {
       setStep("idle");
       setPin("");
       setCustomAmount("");
+      setIsAnonymous(false);
     } catch (err: any) {
       const msg =
         err?.response?.data?.message || "Contribution failed. Try again.";
@@ -261,6 +265,7 @@ export function GroupContributionCard({ data, isMe, chatId }: Props) {
     setStep("idle");
     setPin("");
     setCustomAmount("");
+    setIsAnonymous(false);
   };
 
   // ── admin: close campaign ────────────────────────────────────────────────
@@ -553,6 +558,13 @@ export function GroupContributionCard({ data, isMe, chatId }: Props) {
               className="h-8 text-sm tracking-widest"
               autoFocus
             />
+            <label className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none">
+              <Checkbox
+                checked={isAnonymous}
+                onCheckedChange={(checked) => setIsAnonymous(checked === true)}
+              />
+              Contribute anonymously
+            </label>
             <div className="flex gap-2">
               <Button
                 variant="outline"
diff --git a/components/chat/group-details-content.tsx b/components/chat/group-details-content.tsx
index 591a2fa..72b9a51 100644
--- a/components/chat/group-details-content.tsx
+++ b/components/chat/group-details-content.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 import { useToast } from "@/hooks/use-toast";
-import { useGetGroupByIdQuery, useGetGroupMembersQuery } from "@/states/groupSlice";
+import { useGetGroupByIdQuery, useGetGroupMembersQuery, useGetGroupJoinRequestsQuery } from "@/states/groupSlice";
 import { socketService } from "@/services/socketService";
 import GroupProgressBar from "./group-progress-bar";
 import DeadlineCounter from "./deadline-counter";
@@ -59,6 +59,18 @@ export default function GroupDetailsContent({
     const members = membersData?.data?.members || [];
     const isLoading = isLoadingGroup || isLoadingMembers;
 
+    const showJoinRequestsEntry =
+        !!onJoinRequests &&
+        !!group &&
+        (group.userRole === "owner" || group.userRole === "admin") &&
+        group.privacyType === "require_approval";
+
+    const { data: joinRequestsData } = useGetGroupJoinRequestsQuery(
+        { groupId: groupId!, token },
+        { skip: !groupId || !token || !showJoinRequestsEntry }
+    );
+    const pendingRequestsCount = joinRequestsData?.data?.requests?.length ?? 0;
+
     useEffect(() => {
         if (!groupId || !isActive) return;
 
@@ -352,22 +364,31 @@ export default function GroupDetailsContent({
                     {renderActions && renderActions(group)}
 
                     {/* Join requests — visible to owners/admins of require_approval groups */}
-                    {onJoinRequests &&
-                        (group.userRole === "owner" || group.userRole === "admin") &&
-                        group.privacyType === "require_approval" && (
-                            <button
-                                type="button"
-                                onClick={onJoinRequests}
-                                className="w-full flex items-center justify-between px-3 py-2.5 rounded-lg border border-gray-200 dark:border-darkBorder-light hover:bg-gray-50 dark:hover:bg-darkBg-interactive transition-colors text-sm text-gray-700 dark:text-gray-300"
-                            >
-                                <span className="flex items-center gap-2">
-                                    <ClipboardList size={15} className="text-brand-green dark:text-brand-gold" />
-                                    Join Requests
-                                </span>
-                                <span className="text-xs text-gray-400 dark:text-gray-500">Review →</span>
-                            </button>
-                        )
-                    }
+                    {showJoinRequestsEntry && (
+                        <button
+                            type="button"
+                            onClick={onJoinRequests}
+                            className={cn(
+                                "w-full flex items-center justify-between px-3 py-2.5 rounded-lg border transition-colors text-sm",
+                                pendingRequestsCount > 0
+                                    ? "border-brand-green/40 dark:border-brand-gold/40 bg-brand-green/5 dark:bg-brand-gold/5 text-gray-800 dark:text-gray-200"
+                                    : "border-gray-200 dark:border-darkBorder-light hover:bg-gray-50 dark:hover:bg-darkBg-interactive text-gray-700 dark:text-gray-300"
+                            )}
+                        >
+                            <span className="flex items-center gap-2">
+                                <ClipboardList size={15} className="text-brand-green dark:text-brand-gold" />
+                                Join Requests
+                                {pendingRequestsCount > 0 && (
+                                    <Badge className="bg-brand-green dark:bg-brand-gold text-white dark:text-darkBg-main text-[10px] h-5 min-w-5 px-1.5 rounded-full">
+                                        {pendingRequestsCount}
+                                    </Badge>
+                                )}
+                            </span>
+                            <span className="text-xs text-gray-400 dark:text-gray-500">
+                                {pendingRequestsCount > 0 ? "Review now →" : "Review →"}
+                            </span>
+                        </button>
+                    )}
 
                     <div className="text-xs text-gray-400 dark:text-gray-500 text-center space-y-0.5 pt-2 border-t border-gray-100 dark:border-darkBorder-light">
                         <p>
diff --git a/components/chat/group-join-requests-modal.tsx b/components/chat/group-join-requests-modal.tsx
index eb0aa4b..f7737e2 100644
--- a/components/chat/group-join-requests-modal.tsx
+++ b/components/chat/group-join-requests-modal.tsx
@@ -68,7 +68,7 @@ const GroupJoinRequestsModal: React.FC<GroupJoinRequestsModalProps> = ({
 
     return (
         <Dialog open={isOpen} onOpenChange={onClose}>
-            <DialogContent className="sm:max-w-lg max-h-[80vh] overflow-hidden flex flex-col">
+            <DialogContent className="sm:max-w-lg max-h-[80vh] overflow-hidden flex flex-col dark:bg-darkBg-card dark:border-darkBorder-light">
                 <DialogHeader>
                     <DialogTitle className="flex items-center gap-2 text-gray-900 dark:text-white text-xl font-semibold">
                         <Users size={20} className="text-brand-green dark:text-brand-gold" />
@@ -80,55 +80,55 @@ const GroupJoinRequestsModal: React.FC<GroupJoinRequestsModalProps> = ({
                 <div className="flex-1 overflow-y-auto py-4">
                     {isLoading ? (
                         <div className="text-center py-8">
-                            <Loader2 size={40} className="mx-auto mb-2 animate-spin text-gray-400" />
-                            <p className="text-gray-500">Loading join requests...</p>
+                            <Loader2 size={40} className="mx-auto mb-2 animate-spin text-gray-400 dark:text-gray-500" />
+                            <p className="text-gray-500 dark:text-gray-400">Loading join requests...</p>
                         </div>
                     ) : error ? (
                         <div className="text-center py-8">
-                            <AlertCircle size={40} className="mx-auto mb-2 text-red-400" />
-                            <p className="text-red-500 mb-2">Failed to load join requests</p>
-                            <Button onClick={() => refetch()} variant="outline" size="sm">
+                            <AlertCircle size={40} className="mx-auto mb-2 text-red-400 dark:text-red-400" />
+                            <p className="text-red-500 dark:text-red-400 mb-2">Failed to load join requests</p>
+                            <Button onClick={() => refetch()} variant="outline" size="sm" className="dark:border-darkBorder-light dark:text-gray-300 dark:hover:bg-darkBg-interactive">
                                 Retry
                             </Button>
                         </div>
                     ) : requests.length === 0 ? (
                         <div className="text-center py-8">
-                            <Users size={40} className="mx-auto mb-2 text-gray-400" />
-                            <p className="text-gray-500 mb-2">No pending join requests</p>
-                            <p className="text-sm text-gray-400">All clear for now!</p>
+                            <Users size={40} className="mx-auto mb-2 text-gray-400 dark:text-gray-500" />
+                            <p className="text-gray-500 dark:text-gray-400 mb-2">No pending join requests</p>
+                            <p className="text-sm text-gray-400 dark:text-gray-500">All clear for now!</p>
                         </div>
                     ) : (
                         <div className="space-y-3">
                             {requests.map((request) => (
                                 <div
                                     key={request.id}
-                                    className="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-lg"
+                                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 p-3 bg-white dark:bg-darkBg-interactive border border-gray-200 dark:border-darkBorder-light rounded-lg"
                                 >
-                                    <div className="flex items-center flex-1">
-                                        <Avatar className="h-10 w-10 mr-3">
+                                    <div className="flex items-center flex-1 min-w-0">
+                                        <Avatar className="h-10 w-10 mr-3 flex-shrink-0">
                                             <AvatarImage
                                                 src={request.userPicture || `/placeholder.svg?height=40&width=40`}
                                                 alt={request.userName}
                                             />
-                                            <AvatarFallback className="bg-gray-100 text-gray-600">
+                                            <AvatarFallback className="bg-gray-100 dark:bg-darkBg-card text-gray-600 dark:text-gray-300">
                                                 {request.userName?.charAt(0)?.toUpperCase()}
                                             </AvatarFallback>
                                         </Avatar>
-                                        <div className="flex-1">
-                                            <p className="font-medium text-gray-900">{request.userName}</p>
-                                            <p className="text-sm text-gray-500">{request.userEmail}</p>
-                                            <p className="text-xs text-gray-400">
+                                        <div className="flex-1 min-w-0">
+                                            <p className="font-medium text-gray-900 dark:text-white truncate">{request.userName}</p>
+                                            <p className="text-sm text-gray-500 dark:text-gray-400 truncate">{request.userEmail}</p>
+                                            <p className="text-xs text-gray-400 dark:text-gray-500">
                                                 Requested {new Date(request.requestedAt).toLocaleDateString()}
                                             </p>
                                         </div>
                                     </div>
-                                    <div className="flex gap-2 ml-4">
+                                    <div className="flex gap-2 w-full sm:w-auto sm:ml-4">
                                         <Button
                                             variant="outline"
                                             size="sm"
                                             onClick={() => handleRespond(request.id, "approve")}
                                             disabled={isResponding && processingRequestId === request.id}
-                                            className="bg-brand-green/10 dark:bg-brand-gold/10 text-brand-green dark:text-brand-gold hover:bg-brand-green/20 dark:hover:bg-brand-gold/20"
+                                            className="flex-1 sm:flex-none justify-center bg-brand-green/10 dark:bg-brand-gold/10 text-brand-green dark:text-brand-gold hover:bg-brand-green/20 dark:hover:bg-brand-gold/20"
                                         >
                                             {isResponding && processingRequestId === request.id ? (
                                                 <Loader2 size={16} className="mr-2 animate-spin" />
@@ -142,7 +142,7 @@ const GroupJoinRequestsModal: React.FC<GroupJoinRequestsModalProps> = ({
                                             size="sm"
                                             onClick={() => handleRespond(request.id, "reject")}
                                             disabled={isResponding && processingRequestId === request.id}
-                                            className="bg-gray-100 dark:bg-darkBg-interactive text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"
+                                            className="flex-1 sm:flex-none justify-center bg-gray-100 dark:bg-darkBg-card text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-darkBorder-light border-transparent dark:border-darkBorder-light"
                                         >
                                             {isResponding && processingRequestId === request.id ? (
                                                 <Loader2 size={16} className="mr-2 animate-spin" />
diff --git a/components/chat/invite-to-group-modal.tsx b/components/chat/invite-to-group-modal.tsx
index b6eff96..39ddbfa 100644
--- a/components/chat/invite-to-group-modal.tsx
+++ b/components/chat/invite-to-group-modal.tsx
@@ -173,7 +173,7 @@ export default function InviteToGroupModal({ isOpen, onClose, group, token }: In
                 <div className="flex-1 overflow-hidden flex flex-col py-4">
                     {/* Search Bar */}
                     <div className="relative mb-4">
-                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={16} />
+                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500" size={16} />
                         <Input
                             placeholder="Search contacts..."
                             className="pl-10"
@@ -208,8 +208,8 @@ export default function InviteToGroupModal({ isOpen, onClose, group, token }: In
                     <div className="flex-1 overflow-y-auto">
                         {isLoadingContacts ? (
                             <div className="text-center py-8">
-                                <Loader2 size={40} className="mx-auto mb-2 animate-spin text-gray-400" />
-                                <p className="text-gray-500">Loading contacts...</p>
+                                <Loader2 size={40} className="mx-auto mb-2 animate-spin text-gray-400 dark:text-gray-500" />
+                                <p className="text-gray-500 dark:text-gray-400">Loading contacts...</p>
                             </div>
                         ) : error ? (
                             <div className="text-center py-8">
@@ -224,18 +224,18 @@ export default function InviteToGroupModal({ isOpen, onClose, group, token }: In
                                 {/* Select All Option */}
                                 {filteredContacts.length > 1 && (
                                     <>
-                                        <div className="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
+                                        <div className="flex items-center p-3 hover:bg-gray-50 dark:hover:bg-darkBg-interactive rounded-lg cursor-pointer">
                                             <Checkbox
                                                 id="select-all"
                                                 checked={selectedContacts.length === filteredContacts.length}
                                                 onCheckedChange={handleSelectAll}
                                                 className="mr-3"
                                             />
-                                            <label htmlFor="select-all" className="cursor-pointer font-medium text-gray-700">
+                                            <label htmlFor="select-all" className="cursor-pointer font-medium text-gray-700 dark:text-gray-200">
                                                 Select All ({filteredContacts.length} contacts)
                                             </label>
                                         </div>
-                                        <div className="border-t border-gray-100 my-2" />
+                                        <div className="border-t border-gray-100 dark:border-darkBorder-light my-2" />
                                     </>
                                 )}
 
@@ -247,7 +247,7 @@ export default function InviteToGroupModal({ isOpen, onClose, group, token }: In
                                     return (
                                         <div
                                             key={contact.id}
-                                            className="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer transition-colors"
+                                            className="flex items-center p-3 hover:bg-gray-50 dark:hover:bg-darkBg-interactive rounded-lg cursor-pointer transition-colors"
                                             onClick={() => toggleContact(otherUser.id)}
                                         >
                                             <Checkbox
@@ -283,14 +283,14 @@ export default function InviteToGroupModal({ isOpen, onClose, group, token }: In
                             </div>
                         ) : searchTerm ? (
                             <div className="text-center py-8">
-                                <Search size={40} className="mx-auto mb-2 text-gray-400" />
-                                <p className="text-gray-500">No contacts found matching "{searchTerm}"</p>
+                                <Search size={40} className="mx-auto mb-2 text-gray-400 dark:text-gray-500" />
+                                <p className="text-gray-500 dark:text-gray-400">No contacts found matching "{searchTerm}"</p>
                             </div>
                         ) : (
                             <div className="text-center py-8">
-                                <Users size={40} className="mx-auto mb-2 text-gray-400" />
-                                <p className="text-gray-500 mb-2">No contacts available</p>
-                                <p className="text-sm text-gray-400">Add some contacts first to invite them to groups</p>
+                                <Users size={40} className="mx-auto mb-2 text-gray-400 dark:text-gray-500" />
+                                <p className="text-gray-500 dark:text-gray-400 mb-2">No contacts available</p>
+                                <p className="text-sm text-gray-400 dark:text-gray-500">Add some contacts first to invite them to groups</p>
                             </div>
                         )}
                     </div>
diff --git a/components/chat/media-upload-modal.tsx b/components/chat/media-upload-modal.tsx
index 980e5c2..1e0610c 100644
--- a/components/chat/media-upload-modal.tsx
+++ b/components/chat/media-upload-modal.tsx
@@ -87,22 +87,22 @@ export default function MediaUploadModal({
             case 'document':
                 return <FileText className="h-16 w-16 text-gray-600 dark:text-gray-400" />
             default:
-                return <FileText className="h-16 w-16 text-gray-400" />
+                return <FileText className="h-16 w-16 text-gray-400 dark:text-gray-500" />
         }
     }
 
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
-            <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 overflow-hidden">
+            <div className="bg-white dark:bg-darkBg-card rounded-lg shadow-xl w-full max-w-2xl mx-4 overflow-hidden">
                 {/* Header */}
-                <div className="flex items-center justify-between p-4 border-b">
-                    <h2 className="text-lg font-semibold">Upload Media</h2>
+                <div className="flex items-center justify-between p-4 border-b dark:border-darkBorder-light">
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Upload Media</h2>
                     <Button
                         variant="ghost"
                         size="icon"
                         onClick={handleClose}
                         disabled={uploading}
-                        className="h-8 w-8"
+                        className="h-8 w-8 dark:text-gray-300 dark:hover:bg-darkBg-interactive"
                     >
                         <X className="h-4 w-4" />
                     </Button>
@@ -116,17 +116,17 @@ export default function MediaUploadModal({
                             onClick={() => fileInputRef.current?.click()}
                         >
                             <div className="flex flex-col items-center gap-4">
-                                <div className="h-16 w-16 rounded-full bg-gray-100 flex items-center justify-center">
-                                    <ImageIcon className="h-8 w-8 text-gray-400" />
+                                <div className="h-16 w-16 rounded-full bg-gray-100 dark:bg-darkBg-interactive flex items-center justify-center">
+                                    <ImageIcon className="h-8 w-8 text-gray-400 dark:text-gray-500" />
                                 </div>
                                 <div>
-                                    <p className="text-lg font-medium text-gray-700">
+                                    <p className="text-lg font-medium text-gray-700 dark:text-gray-200">
                                         Click to upload media
                                     </p>
-                                    <p className="text-sm text-gray-500 mt-1">
+                                    <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                         Images, videos, audio, or documents
                                     </p>
-                                    <p className="text-xs text-gray-400 mt-2">
+                                    <p className="text-xs text-gray-400 dark:text-gray-500 mt-2">
                                         Max size: Images (10MB), Videos (100MB), Audio (20MB), Documents (50MB)
                                     </p>
                                 </div>
@@ -142,7 +142,7 @@ export default function MediaUploadModal({
                     ) : (
                         <div className="space-y-4">
                             {/* Preview */}
-                            <div className="relative bg-gray-50 rounded-lg overflow-hidden">
+                            <div className="relative bg-gray-50 dark:bg-darkBg-interactive rounded-lg overflow-hidden">
                                 {previewUrl && getFileType(selectedFile.type) === 'image' ? (
                                     <img
                                         src={previewUrl}
@@ -158,10 +158,10 @@ export default function MediaUploadModal({
                                 ) : (
                                     <div className="flex flex-col items-center justify-center p-12">
                                         {getFileIcon()}
-                                        <p className="mt-4 font-medium text-gray-700">
+                                        <p className="mt-4 font-medium text-gray-700 dark:text-gray-200">
                                             {selectedFile.name}
                                         </p>
-                                        <p className="text-sm text-gray-500">
+                                        <p className="text-sm text-gray-500 dark:text-gray-400">
                                             {formatFileSize(selectedFile.size)}
                                         </p>
                                     </div>
@@ -170,18 +170,18 @@ export default function MediaUploadModal({
                                 {/* Upload Progress */}
                                 {uploading && (
                                     <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
-                                        <div className="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
+                                        <div className="bg-white dark:bg-darkBg-card rounded-lg p-6 max-w-sm w-full mx-4">
                                             <div className="flex items-center gap-3 mb-3">
                                                 <Loader2 className="h-5 w-5 animate-spin text-brand-green dark:text-brand-gold" />
-                                                <span className="font-medium">Uploading...</span>
+                                                <span className="font-medium text-gray-900 dark:text-white">Uploading...</span>
                                             </div>
-                                            <div className="w-full bg-gray-200 rounded-full h-2">
+                                            <div className="w-full bg-gray-200 dark:bg-darkBg-interactive rounded-full h-2">
                                                 <div
                                                     className="bg-brand-green dark:bg-brand-gold h-2 rounded-full transition-all duration-300"
                                                     style={{ width: `${uploadProgress}%` }}
                                                 />
                                             </div>
-                                            <p className="text-sm text-gray-500 text-center mt-2">
+                                            <p className="text-sm text-gray-500 dark:text-gray-400 text-center mt-2">
                                                 {uploadProgress}%
                                             </p>
                                         </div>
@@ -191,21 +191,21 @@ export default function MediaUploadModal({
 
                             {/* Caption Input */}
                             <div>
-                                <label className="block text-sm font-medium text-gray-700 mb-2">
+                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                     Caption (optional)
                                 </label>
                                 <textarea
                                     value={caption}
                                     onChange={(e) => setCaption(e.target.value)}
                                     placeholder="Add a caption..."
-                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#00B512] resize-none"
+                                    className="w-full px-3 py-2 border border-gray-300 dark:border-darkBorder-light rounded-lg bg-white dark:bg-darkBg-interactive text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-[#00B512] resize-none"
                                     rows={3}
                                     disabled={uploading}
                                 />
                             </div>
 
                             {/* File Info */}
-                            <div className="flex items-center justify-between text-sm text-gray-600 bg-gray-50 p-3 rounded-lg">
+                            <div className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-darkBg-interactive p-3 rounded-lg">
                                 <span className="font-medium">{selectedFile.name}</span>
                                 <span>{formatFileSize(selectedFile.size)}</span>
                             </div>
@@ -231,7 +231,7 @@ export default function MediaUploadModal({
 
                 {/* Footer */}
                 {selectedFile && (
-                    <div className="flex items-center justify-end gap-3 p-4 border-t bg-gray-50">
+                    <div className="flex items-center justify-end gap-3 p-4 border-t dark:border-darkBorder-light bg-gray-50 dark:bg-darkBg-interactive">
                         <Button
                             variant="outline"
                             onClick={handleClose}
diff --git a/components/chat/options-dropdown.tsx b/components/chat/options-dropdown.tsx
index 943e00b..cba758f 100644
--- a/components/chat/options-dropdown.tsx
+++ b/components/chat/options-dropdown.tsx
@@ -46,17 +46,17 @@ export default function OptionsDropdown({ isOpen, onOptionSelect }: OptionsDropd
 
     return (
         <div className="absolute bottom-16 left-0 z-50 min-w-48">
-            <div className="bg-white rounded-lg shadow-lg border border-gray-100 overflow-hidden transform origin-bottom-left transition-all duration-200 ease-out animate-dropdown">
+            <div className="bg-white dark:bg-darkBg-card rounded-lg shadow-lg border border-gray-100 dark:border-darkBorder-light overflow-hidden transform origin-bottom-left transition-all duration-200 ease-out animate-dropdown">
                 {options.map((option, index) => (
                     <div
                         key={index}
-                        className="flex items-center p-3 hover:bg-gray-50 cursor-pointer transition-colors duration-150 ease-in-out"
+                        className="flex items-center p-3 hover:bg-gray-50 dark:hover:bg-darkBg-interactive cursor-pointer transition-colors duration-150 ease-in-out"
                         onClick={option.action}
                         role="button"
                         tabIndex={0}
                     >
                         <div className={`${option.color} mr-3 flex items-center justify-center`}>{option.icon}</div>
-                        <span className="text-sm font-medium text-gray-700">{option.label}</span>
+                        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{option.label}</span>
                     </div>
                 ))}
             </div>
diff --git a/components/chat/search-bar.tsx b/components/chat/search-bar.tsx
index 37e9507..f673588 100644
--- a/components/chat/search-bar.tsx
+++ b/components/chat/search-bar.tsx
@@ -16,13 +16,13 @@ export default function SearchBar({
 }: SearchBarProps) {
     return (
         <div className="relative">
-            <Search 
-                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" 
-                size={16} 
+            <Search
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500"
+                size={16}
             />
             <Input
                 placeholder={placeholder}
-                className="rounded-full bg-gray-100 border-0 py-1.5 sm:py-2 pl-9 sm:pl-10 text-sm w-full focus:bg-white focus:ring-2 focus:ring-blue-500 transition-all"
+                className="rounded-full bg-gray-100 dark:bg-darkBg-interactive dark:text-white border-0 py-1.5 sm:py-2 pl-9 sm:pl-10 text-sm w-full focus:bg-white dark:focus:bg-darkBg-interactive focus:ring-2 focus:ring-blue-500 transition-all"
                 value={searchTerm}
                 onChange={(e) => onSearchChange(e.target.value)}
             />
diff --git a/components/chat/start-chart-modal.tsx b/components/chat/start-chart-modal.tsx
index 8f8dd4f..7f5d436 100644
--- a/components/chat/start-chart-modal.tsx
+++ b/components/chat/start-chart-modal.tsx
@@ -73,8 +73,8 @@ export default function StartChatModal({ isOpen, onClose, onStartChat, existingC
             </DialogTitle>
           </DialogHeader>
           <div className='py-8 text-center'>
-            <AlertCircle size={40} className='mx-auto mb-2 text-gray-400' />
-            <p className='text-gray-500'>
+            <AlertCircle size={40} className='mx-auto mb-2 text-gray-400 dark:text-gray-500' />
+            <p className='text-gray-500 dark:text-gray-400'>
               Please log in to start new chats
             </p>
           </div>
@@ -105,7 +105,7 @@ export default function StartChatModal({ isOpen, onClose, onStartChat, existingC
           {/* Search Bar */}
           <div className='relative mb-4'>
             <Search
-              className='absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400'
+              className='absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500'
               size={16}
             />
             <Input
@@ -122,9 +122,9 @@ export default function StartChatModal({ isOpen, onClose, onStartChat, existingC
               <div className='text-center py-8'>
                 <Loader2
                   size={40}
-                  className='mx-auto mb-2 animate-spin text-gray-400'
+                  className='mx-auto mb-2 animate-spin text-gray-400 dark:text-gray-500'
                 />
-                <p className='text-gray-500'>Loading contacts...</p>
+                <p className='text-gray-500 dark:text-gray-400'>Loading contacts...</p>
               </div>
             ) : error ? (
               <div className='text-center py-8'>
@@ -142,7 +142,7 @@ export default function StartChatModal({ isOpen, onClose, onStartChat, existingC
                 {filteredContacts.map((contact: any) => (
                   <div
                     key={contact.id}
-                    className='flex items-center justify-between p-3 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group'
+                    className='flex items-center justify-between p-3 bg-white dark:bg-darkBg-interactive border border-gray-200 dark:border-darkBorder-light rounded-lg hover:bg-gray-50 dark:hover:bg-darkBg-hover transition-colors cursor-pointer group'
                     onClick={() => handleStartChat(contact)}
                   >
                     <div className='flex items-center flex-1'>
@@ -157,14 +157,14 @@ export default function StartChatModal({ isOpen, onClose, onStartChat, existingC
                         </AvatarFallback>
                       </Avatar>
                       <div className='flex-1'>
-                        <p className='font-medium text-gray-900'>
+                        <p className='font-medium text-gray-900 dark:text-white'>
                           {contact.otherUser.firstName}{' '}
                           {contact.otherUser.lastName}
                         </p>
-                        <p className='text-sm text-gray-500'>
+                        <p className='text-sm text-gray-500 dark:text-gray-400'>
                           {contact.otherUser.email}
                         </p>
-                        <p className='text-xs text-gray-400'>
+                        <p className='text-xs text-gray-400 dark:text-gray-500'>
                           Connected{' '}
                           {new Date(contact.createdAt).toLocaleDateString()}
                         </p>
@@ -187,25 +187,25 @@ export default function StartChatModal({ isOpen, onClose, onStartChat, existingC
               </div>
             ) : searchTerm ? (
               <div className='text-center py-8'>
-                <Search size={40} className='mx-auto mb-2 text-gray-400' />
-                <p className='text-gray-500'>
+                <Search size={40} className='mx-auto mb-2 text-gray-400 dark:text-gray-500' />
+                <p className='text-gray-500 dark:text-gray-400'>
                   No contacts found matching "{searchTerm}"
                 </p>
               </div>
             ) : availableContacts.length === 0 ? (
               <div className='text-center py-8'>
-                <Users size={40} className='mx-auto mb-2 text-gray-400' />
-                <p className='text-gray-500 mb-2'>
+                <Users size={40} className='mx-auto mb-2 text-gray-400 dark:text-gray-500' />
+                <p className='text-gray-500 dark:text-gray-400 mb-2'>
                   No available contacts to chat with
                 </p>
-                <p className='text-sm text-gray-400 mb-4'>
+                <p className='text-sm text-gray-400 dark:text-gray-500 mb-4'>
                   All your contacts already have active conversations
                 </p>
               </div>
             ) : (
               <div className='text-center py-8'>
-                <Users size={40} className='mx-auto mb-2 text-gray-400' />
-                <p className='text-gray-500'>No contacts available</p>
+                <Users size={40} className='mx-auto mb-2 text-gray-400 dark:text-gray-500' />
+                <p className='text-gray-500 dark:text-gray-400'>No contacts available</p>
               </div>
             )}
           </div>
diff --git a/components/contributions/CreatePublicContributionModal.tsx b/components/contributions/CreatePublicContributionModal.tsx
index 67cb3ce..d8c7578 100644
--- a/components/contributions/CreatePublicContributionModal.tsx
+++ b/components/contributions/CreatePublicContributionModal.tsx
@@ -33,6 +33,7 @@ export default function CreatePublicContributionModal({ isOpen, onClose, onCreat
   const [step, setStep] = useState<Step>("form");
   const [form, setForm] = useState<ContributionFormValues>(emptyForm);
   const [createGroup, setCreateGroup] = useState(false);
+  const [groupIsOpen, setGroupIsOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [shareLink, setShareLink] = useState("");
   const [contributionId, setContributionId] = useState("");
@@ -44,6 +45,7 @@ export default function CreatePublicContributionModal({ isOpen, onClose, onCreat
       setStep("form");
       setForm(emptyForm);
       setCreateGroup(false);
+      setGroupIsOpen(false);
       setShareLink("");
       setContributionId("");
       setCopied(false);
@@ -92,7 +94,7 @@ export default function CreatePublicContributionModal({ isOpen, onClose, onCreat
           await createCampaignGroup(contribution.id, {
             name: form.title.trim(),
             description: "",
-            isOpen: true,
+            isOpen: groupIsOpen,
           });
         } catch {
           toast({ variant: "destructive", description: "Campaign created but community group setup failed." });
@@ -192,6 +194,43 @@ export default function CreatePublicContributionModal({ isOpen, onClose, onCreat
                 />
               </div>
             </button>
+
+            {/* Join policy for the community group */}
+            {createGroup && (
+              <div className="border border-gray-200 dark:border-darkBorder-light rounded-xl p-4 space-y-2">
+                <p className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Who can join?</p>
+                <button
+                  type="button"
+                  onClick={() => setGroupIsOpen(true)}
+                  disabled={isSubmitting}
+                  className={`w-full flex items-start gap-2 text-left rounded-lg p-2.5 border ${
+                    groupIsOpen
+                      ? "border-brand-green dark:border-brand-gold bg-brand-green/5 dark:bg-brand-gold/5"
+                      : "border-gray-200 dark:border-darkBorder-light"
+                  }`}
+                >
+                  <div className="text-sm">
+                    <p className="font-medium text-gray-800 dark:text-gray-200">Anyone can join</p>
+                    <p className="text-xs text-gray-400 dark:text-gray-500">Contributors join instantly, no approval needed</p>
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setGroupIsOpen(false)}
+                  disabled={isSubmitting}
+                  className={`w-full flex items-start gap-2 text-left rounded-lg p-2.5 border ${
+                    !groupIsOpen
+                      ? "border-brand-green dark:border-brand-gold bg-brand-green/5 dark:bg-brand-gold/5"
+                      : "border-gray-200 dark:border-darkBorder-light"
+                  }`}
+                >
+                  <div className="text-sm">
+                    <p className="font-medium text-gray-800 dark:text-gray-200">Require approval</p>
+                    <p className="text-xs text-gray-400 dark:text-gray-500">You approve each join request before they can access the group</p>
+                  </div>
+                </button>
+              </div>
+            )}
           </div>
         )}
 
@@ -203,7 +242,7 @@ export default function CreatePublicContributionModal({ isOpen, onClose, onCreat
                 Shareable Link
               </p>
               <div className="flex items-center gap-2">
-                <div className="flex-1 bg-white dark:bg-darkBg-interactive border border-gray-200 dark:border-darkBorder-light rounded-lg px-3 py-2 text-xs text-gray-700 dark:text-gray-300 truncate font-mono">
+                <div className="min-w-0 flex-1 bg-white dark:bg-darkBg-interactive border border-gray-200 dark:border-darkBorder-light rounded-lg px-3 py-2 text-xs text-gray-700 dark:text-gray-300 truncate font-mono">
                   {shareLink}
                 </div>
                 <Button
diff --git a/components/contributions/EditContributionModal.tsx b/components/contributions/EditContributionModal.tsx
index fa78b2d..e3d2501 100644
--- a/components/contributions/EditContributionModal.tsx
+++ b/components/contributions/EditContributionModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import {
   Dialog,
   DialogContent,
@@ -12,7 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Pencil, Loader2, Users } from "lucide-react";
 import { toast } from "@/hooks/use-toast";
-import { updateGroupContribution, updatePublicContribution } from "@/helpers/api";
+import { updateGroupContribution, updatePublicContribution, getCampaignGroup, updateGroupPrivacy } from "@/helpers/api";
 import { ContributionFormFields, ContributionFormValues } from "./ContributionFormFields";
 
 interface AdminMember {
@@ -57,6 +57,24 @@ export function EditContributionModal({
   const [allowContributorJoin, setAllowContributorJoin] = useState(
     initial.allowContributorJoin ?? false
   );
+  const [linkedGroup, setLinkedGroup] = useState<{ id: string; isOpen: boolean } | null>(null);
+  const [groupIsOpen, setGroupIsOpen] = useState(true);
+
+  useEffect(() => {
+    if (isOpen && variant === "public" && hasLinkedGroup) {
+      getCampaignGroup(contributionId)
+        .then((res) => {
+          const group = res?.data?.data;
+          if (group?.id) {
+            setLinkedGroup({ id: group.id, isOpen: !!group.isOpen });
+            setGroupIsOpen(!!group.isOpen);
+          }
+        })
+        .catch(() => {
+          // non-fatal: fall back to no group-privacy control
+        });
+    }
+  }, [isOpen, variant, hasLinkedGroup, contributionId]);
   const [values, setValues] = useState<ContributionFormValues>(() => ({
     title: initial.title,
     note: initial.note ?? "",
@@ -121,6 +139,9 @@ export function EditContributionModal({
       } else {
         if (hasLinkedGroup) payload.allowContributorJoin = allowContributorJoin;
         await updatePublicContribution(contributionId, payload);
+        if (linkedGroup && groupIsOpen !== linkedGroup.isOpen) {
+          await updateGroupPrivacy(linkedGroup.id, groupIsOpen);
+        }
       }
 
       toast({ description: "Campaign updated successfully" });
@@ -189,6 +210,42 @@ export function EditContributionModal({
                   />
                 </div>
               </button>
+
+              {linkedGroup && (
+                <div className="mt-3 pt-3 border-t border-gray-200 dark:border-darkBorder-light space-y-2">
+                  <p className="text-xs font-medium text-gray-600 dark:text-gray-400">Who can join the group?</p>
+                  <button
+                    type="button"
+                    onClick={() => setGroupIsOpen(true)}
+                    disabled={isSubmitting}
+                    className={`w-full flex items-start gap-2 text-left rounded-lg p-2.5 border ${
+                      groupIsOpen
+                        ? "border-brand-green dark:border-brand-gold bg-brand-green/5 dark:bg-brand-gold/5"
+                        : "border-gray-200 dark:border-darkBorder-light"
+                    }`}
+                  >
+                    <div className="text-sm">
+                      <p className="font-medium text-gray-800 dark:text-gray-200">Anyone can join</p>
+                      <p className="text-xs text-gray-400 dark:text-gray-500">Contributors join instantly, no approval needed</p>
+                    </div>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setGroupIsOpen(false)}
+                    disabled={isSubmitting}
+                    className={`w-full flex items-start gap-2 text-left rounded-lg p-2.5 border ${
+                      !groupIsOpen
+                        ? "border-brand-green dark:border-brand-gold bg-brand-green/5 dark:bg-brand-gold/5"
+                        : "border-gray-200 dark:border-darkBorder-light"
+                    }`}
+                  >
+                    <div className="text-sm">
+                      <p className="font-medium text-gray-800 dark:text-gray-200">Require approval</p>
+                      <p className="text-xs text-gray-400 dark:text-gray-500">You approve each join request before they can access the group</p>
+                    </div>
+                  </button>
+                </div>
+              )}
             </div>
           )}
         </div>
diff --git a/components/contributions/PublicContributionCard.tsx b/components/contributions/PublicContributionCard.tsx
index 5806fc6..157cd7a 100644
--- a/components/contributions/PublicContributionCard.tsx
+++ b/components/contributions/PublicContributionCard.tsx
@@ -24,6 +24,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Progress } from "@/components/ui/progress";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   contributeToPublic,
   closePublicContribution,
@@ -56,6 +57,7 @@ export interface PublicContributionData {
   status: "active" | "completed" | "closed" | "expired";
   currency: string;
   isCreator?: boolean;
+  isContributor?: boolean;
   myPayment?: { amount: number } | null;
   payments?: Array<{ payerId: string; amount: number; payer?: { firstName: string; lastName: string } }>;
   creator?: { id: string; firstName: string; lastName: string };
@@ -106,6 +108,7 @@ export function PublicContributionCard({ data, onUpdated, isAuthenticated = true
   const [step, setStep] = React.useState<Step>("idle");
   const [customAmount, setCustomAmount] = React.useState("");
   const [pin, setPin] = React.useState("");
+  const [isAnonymous, setIsAnonymous] = React.useState(false);
   const [newDeadline, setNewDeadline] = React.useState("");
   const [showShare, setShowShare] = React.useState(false);
   const [copied, setCopied] = React.useState(false);
@@ -185,7 +188,7 @@ export function PublicContributionCard({ data, onUpdated, isAuthenticated = true
   const isCompleted = localStatus === "completed";
   const isClosed = localStatus === "closed" || localStatus === "expired";
   const isDeadlinePast = data.deadline && new Date(data.deadline) < new Date();
-  const canContribute = isActive && !hasPaid;
+  const canContribute = isActive;
 
   // ── status pill ───────────────────────────────────────────────────────────
   const StatusPill = () => {
@@ -238,7 +241,7 @@ export function PublicContributionCard({ data, onUpdated, isAuthenticated = true
     setStep("loading");
     try {
       const amount = getAmount();
-      const res = await contributeToPublic(data.id, amount, pin);
+      const res = await contributeToPublic(data.id, amount, pin, isAnonymous);
       const resData = res?.data?.data;
       const updated = resData?.contribution;
       toast({ description: "Contribution successful!" });
@@ -250,6 +253,7 @@ export function PublicContributionCard({ data, onUpdated, isAuthenticated = true
       }
       setPin("");
       setCustomAmount("");
+      setIsAnonymous(false);
       if (resData?.canJoinGroup && joinStatus === "none") {
         setStep("join_group_prompt");
       } else {
@@ -282,7 +286,7 @@ export function PublicContributionCard({ data, onUpdated, isAuthenticated = true
       const res = await createCampaignGroup(data.id, {
         name: data.title,
         description: "",
-        isOpen: true,
+        isOpen: false,
       });
       const group = res?.data?.data;
       setLinkedGroupId(group?.id ?? null);
@@ -345,6 +349,7 @@ export function PublicContributionCard({ data, onUpdated, isAuthenticated = true
     setStep("idle");
     setPin("");
     setCustomAmount("");
+    setIsAnonymous(false);
   };
 
   return (
@@ -395,7 +400,14 @@ export function PublicContributionCard({ data, onUpdated, isAuthenticated = true
               )}
             </div>
           </div>
-          <StatusPill />
+          <div className="flex flex-col items-end gap-1">
+            <StatusPill />
+            {!data.isCreator && (data.isContributor || hasPaid) && (
+              <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400">
+                You contributed
+              </span>
+            )}
+          </div>
         </div>
 
         {/* title + note */}
@@ -563,6 +575,13 @@ export function PublicContributionCard({ data, onUpdated, isAuthenticated = true
               className="h-9 text-sm tracking-widest"
               autoFocus
             />
+            <label className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none">
+              <Checkbox
+                checked={isAnonymous}
+                onCheckedChange={(checked) => setIsAnonymous(checked === true)}
+              />
+              Contribute anonymously
+            </label>
             <div className="flex gap-2">
               <Button variant="outline" size="sm" className="flex-1 h-8 text-xs" onClick={handleCancel}>
                 Cancel
diff --git a/components/contributions/PublicContributionPage.tsx b/components/contributions/PublicContributionPage.tsx
index f21edbe..1d5c2c6 100644
--- a/components/contributions/PublicContributionPage.tsx
+++ b/components/contributions/PublicContributionPage.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { getPublicContribution, getCampaignGroup, joinCampaignGroup } from "@/helpers/api";
 import { getValidToken } from "@/utils/tokenUtils";
 import { PublicContributionCard, PublicContributionData } from "./PublicContributionCard";
-import { Loader2, AlertCircle, LogIn, Users, Globe, Lock } from "lucide-react";
+import { Loader2, AlertCircle, LogIn, Users, Globe, Lock, Home } from "lucide-react";
 import { toast } from "@/hooks/use-toast";
 
 interface Props {
@@ -91,9 +91,20 @@ export default function PublicContributionPage({ contributionId }: Props) {
     }
   };
 
+  const HomeButton = () => (
+    <button
+      onClick={() => router.push("/")}
+      className="fixed top-4 left-4 z-10 inline-flex items-center gap-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 hover:text-brand-green dark:hover:text-brand-gold bg-white dark:bg-darkBg-card border border-gray-200 dark:border-darkBorder-light rounded-full px-3 py-1.5 shadow-sm transition-colors"
+    >
+      <Home size={14} />
+      Home
+    </button>
+  );
+
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-darkBg-main">
+        <HomeButton />
         <Loader2 className="h-8 w-8 animate-spin text-brand-green dark:text-brand-gold" />
       </div>
     );
@@ -102,6 +113,7 @@ export default function PublicContributionPage({ contributionId }: Props) {
   if (error || !data) {
     return (
       <div className="min-h-screen flex flex-col items-center justify-center gap-3 bg-gray-50 dark:bg-darkBg-main px-4">
+        <HomeButton />
         <AlertCircle className="h-10 w-10 text-red-400" />
         <p className="text-sm text-gray-600 dark:text-gray-400 text-center max-w-xs">
           {error ?? "This contribution campaign could not be found."}
@@ -112,9 +124,10 @@ export default function PublicContributionPage({ contributionId }: Props) {
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-darkBg-main flex flex-col items-center justify-start py-12 px-4">
+      <HomeButton />
       {/* branding strip */}
       <div className="mb-8 text-center">
-        <p className="text-2xl font-bold text-brand-green dark:text-brand-gold tracking-tight">que</p>
+        <p className="text-2xl font-bold text-brand-green dark:text-brand-gold tracking-tight">Qiew Code</p>
         <p className="text-xs text-gray-400 mt-0.5">Contribution Campaign</p>
       </div>
 
@@ -162,10 +175,12 @@ export default function PublicContributionPage({ contributionId }: Props) {
           </div>
 
           <div className="flex items-center gap-3 text-[11px] text-gray-500 dark:text-gray-400">
-            <span className="inline-flex items-center gap-1">
-              <Users size={11} />
-              {linkedGroup.memberCount} {linkedGroup.memberCount === 1 ? "member" : "members"}
-            </span>
+            {linkedGroup.isOpen && (
+              <span className="inline-flex items-center gap-1">
+                <Users size={11} />
+                {linkedGroup.memberCount} {linkedGroup.memberCount === 1 ? "member" : "members"}
+              </span>
+            )}
             <span className="inline-flex items-center gap-1">
               {linkedGroup.isOpen ? <Globe size={11} /> : <Lock size={11} />}
               {linkedGroup.isOpen ? "Open group" : "Invite only"}
@@ -204,7 +219,7 @@ export default function PublicContributionPage({ contributionId }: Props) {
       )}
 
       <p className="mt-8 text-xs text-gray-400 dark:text-gray-600 text-center">
-        Payments are secured by the Que platform.
+        Payments are secured by the Qiew Code platform.
       </p>
     </div>
   );
diff --git a/helpers/api.ts b/helpers/api.ts
index b293e33..2015c7d 100644
--- a/helpers/api.ts
+++ b/helpers/api.ts
@@ -436,8 +436,8 @@ export const getGroupContributions = (groupId: string) =>
 export const getGroupContribution = (groupId: string, contributionId: string) =>
   apiGet(`/groups/${groupId}/contributions/${contributionId}`);
 
-export const contributeToGroup = (groupId: string, contributionId: string, amount: number, pin: string) =>
-  axios.post(`${baseUrl}/groups/${groupId}/contributions/${contributionId}/pay`, { amount, pin }, { headers: getAuthHeaders() });
+export const contributeToGroup = (groupId: string, contributionId: string, amount: number, pin: string, isAnonymous?: boolean) =>
+  axios.post(`${baseUrl}/groups/${groupId}/contributions/${contributionId}/pay`, { amount, pin, isAnonymous }, { headers: getAuthHeaders() });
 
 export const updateGroupContribution = (
   groupId: string,
@@ -485,10 +485,10 @@ export const getPublicContribution = (contributionId: string) =>
 export const getMyPublicContributions = () =>
   apiGet("/public-contributions/");
 
-export const contributeToPublic = (contributionId: string, amount: number, pin: string) =>
+export const contributeToPublic = (contributionId: string, amount: number, pin: string, isAnonymous?: boolean) =>
   axios.post(
     `${baseUrl}/public-contributions/${contributionId}/pay`,
-    { amount, pin },
+    { amount, pin, isAnonymous },
     { headers: getAuthHeaders() }
   );
 
@@ -542,3 +542,10 @@ export const joinCampaignGroup = (contributionId: string) =>
 
 export const getContributionByGroup = (groupId: string) =>
   apiGet(`/public-contributions/by-group/${groupId}`);
+
+export const updateGroupPrivacy = (groupId: string, isOpen: boolean) =>
+  axios.put(
+    `${baseUrl}/groups/${groupId}`,
+    { privacyType: isOpen ? "public" : "require_approval" },
+    { headers: getAuthHeaders() }
+  );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0e23dee..4f68267 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,7 +2,7 @@ import type { Config } from 'tailwindcss'
 
 const config: Config = {
 	darkMode: ["class"],
-	content: ["./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "./src/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}"],
+	content: ["./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "./src/**/*.{js,ts,jsx,tsx,mdx}", "./hooks/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}"],
 	theme: {
 		container: {
 			center: true,
@@ -12,6 +12,9 @@ const config: Config = {
 			},
 		},
 		extend: {
+			borderColor: {
+				DEFAULT: "hsl(var(--border))",
+			},
 			colors: {
 				border: "hsl(var(--border))",
 				input: "hsl(var(--input))",
diff --git a/types/dashboard.ts b/types/dashboard.ts
index 5745b23..1f11737 100644
--- a/types/dashboard.ts
+++ b/types/dashboard.ts
@@ -41,6 +41,15 @@ export interface Transaction {
         profileImage: string;
       };
     } | null;
+    group?: {
+      id: string;
+      name: string;
+      profilePictureUrl?: string | null;
+    } | null;
+    publicContribution?: {
+      id: string;
+      title: string;
+    } | null;
   };
   receiverWallet: {
     id: string;
@@ -64,6 +73,15 @@ export interface Transaction {
         profileImage: string;
       };
     } | null;
+    group?: {
+      id: string;
+      name: string;
+      profilePictureUrl?: string | null;
+    } | null;
+    publicContribution?: {
+      id: string;
+      title: string;
+    } | null;
   };
   // Legacy fields for backward compatibility
   senderId?: string;