diff --git a/src/pages/EventDetailPage.tsx b/src/pages/EventDetailPage.tsx
index 2a7dd5a..0cc0a32 100644
--- a/src/pages/EventDetailPage.tsx
+++ b/src/pages/EventDetailPage.tsx
@@ -129,9 +129,14 @@ export function EventDetailPage() {
   // Check if current user is the organizer
   const isOrganizer = event?.organizer_id === user?.id;
 
-  // Archived (completed) events are always treated as paid for payment tracking
-  const isArchived = event ? isEventCompleted(event.datetime, event.end_datetime) : false;
-  const effectiveIsPaid = isArchived || (event?.is_paid ?? true);
+  // Event is past its end time
+  const isEventPast = event ? isEventCompleted(event.datetime, event.end_datetime) : false;
+  // Event is fully archived only when past AND all participants have settled payment
+  const allPaid = paymentSummary.total > 0 && paymentSummary.pending === 0;
+  const isArchived = isEventPast && (!event?.is_paid || allPaid);
+  // Registration is closed for non-organizers on past events, or for everyone on archived events
+  const isRegistrationClosed = isArchived || (isEventPast && !isOrganizer);
+  const effectiveIsPaid = isEventPast || (event?.is_paid ?? true);
 
   // Check if event is at full capacity
   const isEventFull =
@@ -1011,7 +1016,7 @@ export function EventDetailPage() {
       >
         <Button
           onClick={() => {
-            if (isEventCompleted(event.datetime, event.end_datetime)) return;
+            if (isRegistrationClosed) return;
             if (isEventFull && !userRegistration) return;
             if (showRegistrationForm) {
               openSignupDrawer();
@@ -1021,14 +1026,9 @@ export function EventDetailPage() {
               handleDirectJoin();
             }
           }}
-          disabled={
-            isEventCompleted(event.datetime, event.end_datetime) ||
-            submitting ||
-            (isEventFull && !userRegistration)
-          }
+          disabled={isRegistrationClosed || submitting || (isEventFull && !userRegistration)}
           className={`w-full text-white shadow-lg drop-shadow-md ${
-            isEventCompleted(event.datetime, event.end_datetime) ||
-            (isEventFull && !userRegistration)
+            isRegistrationClosed || (isEventFull && !userRegistration)
               ? 'bg-muted-foreground'
               : userRegistration && !showRegistrationForm
                 ? 'bg-destructive hover:bg-destructive/90'
@@ -1036,7 +1036,7 @@ export function EventDetailPage() {
           }`}
           size="default"
         >
-          {isEventCompleted(event.datetime, event.end_datetime) ? (
+          {isRegistrationClosed ? (
             <>
               <UserX className="h-5 w-5 mr-2" />
               Registration Closed
diff --git a/src/pages/EventsPage.tsx b/src/pages/EventsPage.tsx
index 51fe531..d4fee35 100644
--- a/src/pages/EventsPage.tsx
+++ b/src/pages/EventsPage.tsx
@@ -46,38 +46,86 @@ export function EventsPage() {
   const [duplicatingEventId, setDuplicatingEventId] = useState<string | null>(null);
   const [paymentFilter, setPaymentFilter] = useState<PaymentFilter>('all');
   const [paymentSummaries, setPaymentSummaries] = useState<Map<string, PaymentSummary>>(new Map());
+  const unsettledJoinedIdsRef = useRef<Set<string>>(new Set());
   const isEventDuplicationEnabled = useFeatureFlag('event_duplication');
   const hasLoadedRef = useRef(false);
 
   const loadOrganizingEventsCallback = useCallback(async () => {
     if (!user) return [];
     const allEvents = await eventService.getEventsByOrganizer(user.id);
-    return allEvents.filter((event) => !isEventCompleted(event.datetime, event.end_datetime));
+    const activeEvents = allEvents.filter(
+      (event) => !isEventCompleted(event.datetime, event.end_datetime)
+    );
+    const pastEvents = allEvents.filter((event) =>
+      isEventCompleted(event.datetime, event.end_datetime)
+    );
+
+    // Past paid events with unpaid participants stay in Organizing
+    const pastPaidEventIds = pastEvents.filter((e) => e.is_paid).map((e) => e.id);
+    if (pastPaidEventIds.length > 0) {
+      const summaries = await participantService.getPaymentSummariesBatch(pastPaidEventIds);
+      const unsettledPastEvents = pastEvents.filter((event) => {
+        if (!event.is_paid) return false;
+        const summary = summaries.get(event.id);
+        return summary && summary.pending > 0;
+      });
+      return [...activeEvents, ...unsettledPastEvents];
+    }
+
+    return activeEvents;
   }, [user]);
 
   const loadJoinedEventsCallback = useCallback(async () => {
     if (!user) return [];
     const allEvents = await eventService.getEventsByParticipant(user.id);
-    return allEvents.filter((event) => !isEventCompleted(event.datetime, event.end_datetime));
+    const activeEvents = allEvents.filter(
+      (event) => !isEventCompleted(event.datetime, event.end_datetime)
+    );
+    const pastPaidEvents = allEvents.filter(
+      (event) => isEventCompleted(event.datetime, event.end_datetime) && event.is_paid
+    );
+
+    // Past paid events where the user hasn't paid stay in Joined
+    if (pastPaidEvents.length > 0) {
+      const myStatuses = await participantService.getMyPaymentStatusBatch(
+        user.id,
+        pastPaidEvents.map((e) => e.id)
+      );
+      const unsettledForMe = pastPaidEvents.filter((event) => {
+        const status = myStatuses.get(event.id);
+        return status === 'pending';
+      });
+      unsettledJoinedIdsRef.current = new Set(unsettledForMe.map((e) => e.id));
+      return [...activeEvents, ...unsettledForMe];
+    }
+
+    unsettledJoinedIdsRef.current = new Set();
+    return activeEvents;
   }, [user]);
 
   const loadArchivedEventsCallback = useCallback(async () => {
     if (!user) return [];
     const allEvents = await eventService.getEventsByOrganizer(user.id);
-    const archived = allEvents.filter((event) =>
+    const pastEvents = allEvents.filter((event) =>
       isEventCompleted(event.datetime, event.end_datetime)
     );
 
-    // Fetch payment summaries for archived events
-    if (archived.length > 0) {
-      const eventIds = archived.map((e) => e.id);
+    // Fetch payment summaries for past events
+    if (pastEvents.length > 0) {
+      const eventIds = pastEvents.map((e) => e.id);
       const summaries = await participantService.getPaymentSummariesBatch(eventIds);
       setPaymentSummaries(summaries);
-    } else {
-      setPaymentSummaries(new Map());
+
+      // Only archive events that are fully settled (or not paid events)
+      return pastEvents.filter((event) => {
+        if (!event.is_paid) return true;
+        const summary = summaries.get(event.id);
+        return !summary || summary.pending === 0;
+      });
     }
 
-    return archived;
+    setPaymentSummaries(new Map());
+    return pastEvents;
   }, [user]);
 
   useEffect(() => {
@@ -166,7 +214,8 @@ export function EventsPage() {
     isLoading: boolean,
     showDuplicate: boolean,
     emptyState?: { title: string; description: string; icon?: React.ReactNode },
-    showPaymentStatus?: boolean
+    showPaymentStatus?: boolean,
+    showUserUnpaid?: Set<string>
   ) => {
     if (isLoading) {
       return <EventListSkeleton count={3} />;
@@ -248,6 +297,12 @@ export function EventsPage() {
                         )}
                       </div>
                     )}
+                    {showUserUnpaid?.has(event.id) && (
+                      <div className="flex items-center gap-1 text-amber-600">
+                        <Clock className="h-3 w-3" />
+                        <span className="font-medium">Unpaid</span>
+                      </div>
+                    )}
                     <div className="flex items-center gap-1 text-muted-foreground">
                       <Users className="h-3 w-3" />
                       <span className="font-medium">{event.participant_count || 0}</span>
@@ -300,12 +355,19 @@ export function EventsPage() {
           </div>
         </div>
         <TabsContent value="joined" className="p-3 space-y-3 mt-0">
-          {renderEventList(joinedEvents, isLoadingJoined, false, {
-            title: 'Welcome to Roster!',
-            description:
-              'Join an event using a link from your organizer, or create your own with the button below.',
-            icon: <span>🎉</span>,
-          })}
+          {renderEventList(
+            joinedEvents,
+            isLoadingJoined,
+            false,
+            {
+              title: 'Welcome to Roster!',
+              description:
+                'Join an event using a link from your organizer, or create your own with the button below.',
+              icon: <span>🎉</span>,
+            },
+            false,
+            unsettledJoinedIdsRef.current
+          )}
           {(!joinedEvents || joinedEvents.length === 0) && !isLoadingJoined && (
             <Alert className="border-violet-500/30 bg-violet-500/10 [&>svg]:text-violet-500">
               <Lightbulb className="h-4 w-4 text-violet-500" />
diff --git a/src/pages/GroupDetailPage.tsx b/src/pages/GroupDetailPage.tsx
index 4be47a8..b8e606d 100644
--- a/src/pages/GroupDetailPage.tsx
+++ b/src/pages/GroupDetailPage.tsx
@@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { useAuth } from '@/hooks/useAuth';
-import { Calendar, Users, Plus, UsersRound, Share2, Edit, Copy } from 'lucide-react';
+import { Calendar, Users, Plus, UsersRound, Share2, Edit, Copy, Clock } from 'lucide-react';
 import { TopNav } from '@/components/TopNav';
 import {
   Select,
@@ -12,7 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { groupService, eventService, type Group } from '@/services';
+import { groupService, eventService, participantService, type Group } from '@/services';
 import { useFeatureFlag } from '@/hooks/useFeatureFlags';
 import { errorHandler } from '@/lib/errorHandler';
 import { useLoadingState } from '@/hooks/useLoadingState';
@@ -23,6 +23,7 @@ import { DuplicateEventDrawer } from '@/components/DuplicateEventDrawer';
 
 interface GroupEvent extends Tables<'events'> {
   participant_count?: number;
+  _unsettled?: boolean;
 }
 
 export function GroupDetailPage() {
@@ -39,6 +40,7 @@ export function GroupDetailPage() {
   const isEventDuplicationEnabled = useFeatureFlag('event_duplication');
   const loadingRef = useRef(false);
   const hasLoadedRef = useRef(false);
+  const isAdminRef = useRef(false);
   const {
     isLoading: eventsLoading,
     data: events,
@@ -61,6 +63,7 @@ export function GroupDetailPage() {
       // Check if current user is admin or owner
       if (user?.id) {
         const adminStatus = await groupService.isGroupAdmin(groupId, user.id);
+        isAdminRef.current = adminStatus;
         setIsAdmin(adminStatus);
       }
       return true;
@@ -74,10 +77,35 @@ export function GroupDetailPage() {
     }
   }, [groupId, navigate, user?.id]);
 
-  const loadEventsCallback = useCallback(async () => {
+  const loadEventsCallback = useCallback(async (): Promise<GroupEvent[]> => {
     if (!groupId) return [];
-    return await groupService.getGroupEvents(groupId);
-  }, [groupId]);
+    const allEvents: GroupEvent[] = await groupService.getGroupEvents(groupId);
+
+    // Mark past paid events with unsettled payments
+    const pastPaidEvents = allEvents.filter(
+      (e) => e.is_paid && isEventCompleted(e.datetime, e.end_datetime)
+    );
+    if (pastPaidEvents.length > 0) {
+      const pastPaidIds = pastPaidEvents.map((e) => e.id);
+
+      if (isAdminRef.current) {
+        // Admins: event is unsettled if any participant has pending payments
+        const summaries = await participantService.getPaymentSummariesBatch(pastPaidIds);
+        for (const event of pastPaidEvents) {
+          const summary = summaries.get(event.id);
+          event._unsettled = !!(summary && summary.pending > 0);
+        }
+      } else if (user?.id) {
+        // Non-admins: event is unsettled only if their own payment is pending
+        const myStatuses = await participantService.getMyPaymentStatusBatch(user.id, pastPaidIds);
+        for (const event of pastPaidEvents) {
+          event._unsettled = myStatuses.get(event.id) === 'pending';
+        }
+      }
+    }
+
+    return allEvents;
+  }, [groupId, user?.id]);
 
   const handleInvite = useCallback(async () => {
     if (!group) return;
@@ -276,34 +304,34 @@ export function GroupDetailPage() {
             </Select>
           </div>
 
-          {eventsLoading ? (
-            <EventListSkeleton count={3} />
-          ) : !events ||
-            events.filter((e) =>
+          {(() => {
+            if (eventsLoading) return <EventListSkeleton count={3} />;
+
+            const filteredEvents = (events || []).filter((e) =>
               eventFilter === 'active'
-                ? !isEventCompleted(e.datetime, e.end_datetime)
-                : isEventCompleted(e.datetime, e.end_datetime)
-            ).length === 0 ? (
-            <div className="p-6 text-center">
-              <Calendar className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
-              <h3 className="text-base font-medium mb-2">
-                {eventFilter === 'active' ? 'No Active Events' : 'No Archived Events'}
-              </h3>
-              <p className="text-xs text-muted-foreground">
-                {eventFilter === 'active'
-                  ? 'Create your first event for this group'
-                  : 'Completed events will appear here'}
-              </p>
-            </div>
-          ) : (
-            <div className="divide-y">
-              {events
-                .filter((e) =>
-                  eventFilter === 'active'
-                    ? !isEventCompleted(e.datetime, e.end_datetime)
-                    : isEventCompleted(e.datetime, e.end_datetime)
-                )
-                .map((event) => (
+                ? !isEventCompleted(e.datetime, e.end_datetime) || !!e._unsettled
+                : isEventCompleted(e.datetime, e.end_datetime) && !e._unsettled
+            );
+
+            if (filteredEvents.length === 0) {
+              return (
+                <div className="p-6 text-center">
+                  <Calendar className="h-12 w-12 mx-auto text-muted-foreground mb-3" />
+                  <h3 className="text-base font-medium mb-2">
+                    {eventFilter === 'active' ? 'No Active Events' : 'No Archived Events'}
+                  </h3>
+                  <p className="text-xs text-muted-foreground">
+                    {eventFilter === 'active'
+                      ? 'Create your first event for this group'
+                      : 'Completed events will appear here'}
+                  </p>
+                </div>
+              );
+            }
+
+            return (
+              <div className="divide-y">
+                {filteredEvents.map((event) => (
                   <div key={event.id} className="relative">
                     <button
                       onClick={() => navigate(`/signup/${event.id}`)}
@@ -323,6 +351,12 @@ export function GroupDetailPage() {
                             </div>
                           )}
                           <div className="flex items-center gap-3">
+                            {event._unsettled && !isAdmin && (
+                              <div className="flex items-center gap-1 text-amber-600">
+                                <Clock className="h-3 w-3" />
+                                <span className="font-medium">Unpaid</span>
+                              </div>
+                            )}
                             <div className="flex items-center gap-1">
                               <Users className="h-3 w-3" />
                               <span>{event.participant_count || 0} registered</span>
@@ -356,8 +390,9 @@ export function GroupDetailPage() {
                     )}
                   </div>
                 ))}
-            </div>
-          )}
+              </div>
+            );
+          })()}
         </div>
       </div>
 
diff --git a/src/pages/__tests__/EventDetailPage.test.tsx b/src/pages/__tests__/EventDetailPage.test.tsx
index 7d95a5d..cdd8aba 100644
--- a/src/pages/__tests__/EventDetailPage.test.tsx
+++ b/src/pages/__tests__/EventDetailPage.test.tsx
@@ -228,6 +228,206 @@ describe('EventDetailPage - Claim button visibility', () => {
   });
 });
 
+describe('EventDetailPage - Organizer on past events', () => {
+  const pastEvent = {
+    ...mockEvent,
+    datetime: '2024-01-01T10:00:00Z',
+    end_datetime: '2024-01-01T12:00:00Z',
+  };
+
+  const mockAuthReturn = {
+    user: { id: 'organizer-123' } as User,
+    session: null,
+    loading: false,
+    signIn: vi.fn(),
+    signUp: vi.fn(),
+    signInWithGoogle: vi.fn(),
+    signInWithGoogleIdToken: vi.fn(),
+    signOut: vi.fn(),
+    isAdmin: false,
+    isImpersonating: false,
+    impersonate: vi.fn(),
+    stopImpersonating: vi.fn(),
+    resetPasswordForEmail: vi.fn(),
+    updatePassword: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockLabelService.getLabelsByEventId.mockResolvedValue([]);
+    mockParticipantService.getPaymentSummary.mockResolvedValue({
+      total: 0,
+      paid: 0,
+      pending: 0,
+      waived: 0,
+    });
+    mockUseFeatureFlag.mockImplementation((flag: string) => {
+      if (flag === 'guest_registration') return true;
+      return false;
+    });
+  });
+
+  it('shows Claim button for organizer on a past paid event with pending payments', async () => {
+    const pastPaidEvent = { ...pastEvent, is_paid: true };
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventById.mockResolvedValue(pastPaidEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([
+      {
+        id: 'p-1',
+        name: 'Organizer',
+        user_id: 'organizer-123',
+        event_id: 'test-event-id',
+        payment_status: 'pending',
+      },
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummary.mockResolvedValue({
+      total: 1,
+      paid: 0,
+      pending: 1,
+      waived: 0,
+    });
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    expect(screen.getAllByRole('button', { name: /claim/i }).length).toBeGreaterThan(0);
+  });
+
+  it('hides Claim button for non-organizer on a past event', async () => {
+    mockUseAuth.mockReturnValue({
+      ...mockAuthReturn,
+      user: { id: 'user-456' } as User,
+    });
+    mockEventService.getEventById.mockResolvedValue(pastEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([]);
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByRole('button', { name: /claim/i })).not.toBeInTheDocument();
+  });
+
+  it('does not show Registration Closed for organizer on a past paid event with pending payments', async () => {
+    const pastPaidEvent = { ...pastEvent, is_paid: true };
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventById.mockResolvedValue(pastPaidEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([
+      {
+        id: 'p-1',
+        name: 'Player',
+        user_id: 'user-456',
+        event_id: 'test-event-id',
+        payment_status: 'pending',
+      },
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummary.mockResolvedValue({
+      total: 1,
+      paid: 0,
+      pending: 1,
+      waived: 0,
+    });
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByText('Registration Closed')).not.toBeInTheDocument();
+  });
+
+  it('shows Registration Closed for non-organizer on a past event', async () => {
+    mockUseAuth.mockReturnValue({
+      ...mockAuthReturn,
+      user: { id: 'user-456' } as User,
+    });
+    mockEventService.getEventById.mockResolvedValue(pastEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([]);
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Registration Closed')).toBeInTheDocument();
+  });
+
+  it('treats past paid event with unpaid participants as active for organizer', async () => {
+    const pastPaidEvent = { ...pastEvent, is_paid: true };
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventById.mockResolvedValue(pastPaidEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([
+      {
+        id: 'p-1',
+        name: 'Organizer',
+        user_id: 'organizer-123',
+        event_id: 'test-event-id',
+        payment_status: 'pending',
+      },
+      {
+        id: 'p-2',
+        name: 'Player',
+        user_id: 'user-456',
+        event_id: 'test-event-id',
+        payment_status: 'pending',
+      },
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummary.mockResolvedValue({
+      total: 2,
+      paid: 0,
+      pending: 2,
+      waived: 0,
+    });
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    // Event is not archived — claim buttons and join button should be active
+    expect(screen.getAllByRole('button', { name: /claim/i }).length).toBeGreaterThan(0);
+    expect(screen.queryByText('Registration Closed')).not.toBeInTheDocument();
+  });
+
+  it('treats past paid event with all paid participants as archived', async () => {
+    const pastPaidEvent = { ...pastEvent, is_paid: true };
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventById.mockResolvedValue(pastPaidEvent);
+    mockParticipantService.getParticipantsByEventId.mockResolvedValue([
+      {
+        id: 'p-1',
+        name: 'Organizer',
+        user_id: 'organizer-123',
+        event_id: 'test-event-id',
+        payment_status: 'paid',
+      },
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummary.mockResolvedValue({
+      total: 1,
+      paid: 1,
+      pending: 0,
+      waived: 0,
+    });
+
+    render(<EventDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+
+    // Event is archived — all paid, so Registration Closed for everyone
+    expect(screen.getByText('Registration Closed')).toBeInTheDocument();
+  });
+});
+
 describe('EventDetailPage - Cost breakdown recalculation', () => {
   const mockAuthReturn = {
     user: { id: 'organizer-123' } as User,
diff --git a/src/pages/__tests__/EventsPage.test.tsx b/src/pages/__tests__/EventsPage.test.tsx
new file mode 100644
index 0000000..d750ad6
--- /dev/null
+++ b/src/pages/__tests__/EventsPage.test.tsx
@@ -0,0 +1,294 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { User } from '@supabase/supabase-js';
+import { useAuth } from '@/hooks/useAuth';
+
+// Mock react-router-dom
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// Mock useAuth
+vi.mock('@/hooks/useAuth', () => ({
+  useAuth: vi.fn(() => ({
+    user: { id: 'organizer-123' },
+    loading: false,
+    isAdmin: false,
+    isImpersonating: false,
+    impersonate: vi.fn(),
+    stopImpersonating: vi.fn(),
+  })),
+  AuthProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+const mockUseAuth = vi.mocked(useAuth);
+
+// Mock useFeatureFlags
+vi.mock('@/hooks/useFeatureFlags', () => ({
+  useFeatureFlag: vi.fn(() => false),
+  FeatureFlagsProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+// Mock services
+vi.mock('@/services', () => ({
+  eventService: {
+    getEventsByOrganizer: vi.fn(),
+    getEventsByParticipant: vi.fn(),
+  },
+  participantService: {
+    getPaymentSummariesBatch: vi.fn(),
+    getMyPaymentStatusBatch: vi.fn(),
+  },
+  pushSubscriptionService: {
+    isSupported: vi.fn(() => false),
+    isConfigured: vi.fn(() => false),
+    isSubscribed: vi.fn(() => Promise.resolve(false)),
+    getSubscriptions: vi.fn(() => Promise.resolve([])),
+  },
+  notificationService: {
+    getNotifications: vi.fn(() => Promise.resolve([])),
+    getUnreadCount: vi.fn(() => Promise.resolve(0)),
+    subscribeToNotifications: vi.fn(() => vi.fn()),
+  },
+  notificationPreferenceService: {
+    getPreferences: vi.fn(() => Promise.resolve(null)),
+  },
+}));
+
+// Mock error handler
+vi.mock('@/lib/errorHandler', () => ({
+  logError: vi.fn(),
+  errorHandler: {
+    handle: vi.fn(),
+    success: vi.fn(),
+    info: vi.fn(),
+  },
+}));
+
+import { render } from '@/test/utils/test-utils';
+import { EventsPage } from '../EventsPage';
+import { eventService, participantService } from '@/services';
+
+const mockEventService = vi.mocked(eventService);
+const mockParticipantService = vi.mocked(participantService);
+
+const mockAuthReturn = {
+  user: { id: 'organizer-123' } as User,
+  session: null,
+  loading: false,
+  signIn: vi.fn(),
+  signUp: vi.fn(),
+  signInWithGoogle: vi.fn(),
+  signInWithGoogleIdToken: vi.fn(),
+  signOut: vi.fn(),
+  isAdmin: false,
+  isImpersonating: false,
+  impersonate: vi.fn(),
+  stopImpersonating: vi.fn(),
+  resetPasswordForEmail: vi.fn(),
+  updatePassword: vi.fn(),
+};
+
+const futureEvent = {
+  id: 'future-event',
+  name: 'Future Event',
+  datetime: '2027-06-01T10:00:00Z',
+  end_datetime: null,
+  organizer_id: 'organizer-123',
+  is_paid: false,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: null,
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2026-01-01T00:00:00Z',
+  participant_count: 3,
+};
+
+const pastPaidUnsettled = {
+  id: 'past-unsettled',
+  name: 'Past Unsettled Event',
+  datetime: '2024-01-01T10:00:00Z',
+  end_datetime: '2024-01-01T12:00:00Z',
+  organizer_id: 'organizer-123',
+  is_paid: true,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: null,
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2024-01-01T00:00:00Z',
+  participant_count: 4,
+};
+
+const pastPaidSettled = {
+  id: 'past-settled',
+  name: 'Past Settled Event',
+  datetime: '2024-02-01T10:00:00Z',
+  end_datetime: '2024-02-01T12:00:00Z',
+  organizer_id: 'organizer-123',
+  is_paid: true,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: null,
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2024-02-01T00:00:00Z',
+  participant_count: 2,
+};
+
+const pastFreeEvent = {
+  id: 'past-free',
+  name: 'Past Free Event',
+  datetime: '2024-03-01T10:00:00Z',
+  end_datetime: '2024-03-01T12:00:00Z',
+  organizer_id: 'organizer-123',
+  is_paid: false,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: null,
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2024-03-01T00:00:00Z',
+  participant_count: 5,
+};
+
+describe('EventsPage - Unsettled payment tab placement', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventsByParticipant.mockResolvedValue([]);
+  });
+
+  it('shows past paid event with unpaid participants in Organizing tab', async () => {
+    const allEvents = [futureEvent, pastPaidUnsettled, pastPaidSettled, pastFreeEvent];
+    mockEventService.getEventsByOrganizer.mockResolvedValue(allEvents as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([
+        ['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }],
+        ['past-settled', { total: 2, paid: 2, pending: 0, waived: 0 }],
+      ])
+    );
+
+    render(<EventsPage />);
+
+    // Click Organizing tab
+    const organizingTab = await screen.findByRole('tab', { name: /organizing/i });
+    await userEvent.click(organizingTab);
+
+    // Unsettled past event should be in Organizing
+    await waitFor(() => {
+      expect(screen.getByText('Past Unsettled Event')).toBeInTheDocument();
+    });
+    // Future event should also be in Organizing
+    expect(screen.getByText('Future Event')).toBeInTheDocument();
+  });
+
+  it('shows past paid event with all paid participants in Archive tab', async () => {
+    const allEvents = [futureEvent, pastPaidUnsettled, pastPaidSettled, pastFreeEvent];
+    mockEventService.getEventsByOrganizer.mockResolvedValue(allEvents as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([
+        ['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }],
+        ['past-settled', { total: 2, paid: 2, pending: 0, waived: 0 }],
+      ])
+    );
+
+    render(<EventsPage />);
+
+    // Click Archive tab
+    const archiveTab = await screen.findByRole('tab', { name: /archive/i });
+    await userEvent.click(archiveTab);
+
+    // Settled event should be in Archive
+    await waitFor(() => {
+      expect(screen.getByText('Past Settled Event')).toBeInTheDocument();
+    });
+    // Free past event should also be in Archive
+    expect(screen.getByText('Past Free Event')).toBeInTheDocument();
+    // Unsettled event should NOT be in Archive
+    expect(screen.queryByText('Past Unsettled Event')).not.toBeInTheDocument();
+  });
+
+  it('does not show unsettled past event in Archive tab', async () => {
+    const allEvents = [pastPaidUnsettled];
+    mockEventService.getEventsByOrganizer.mockResolvedValue(allEvents as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }]])
+    );
+
+    render(<EventsPage />);
+
+    const archiveTab = await screen.findByRole('tab', { name: /archive/i });
+    await userEvent.click(archiveTab);
+
+    await waitFor(() => {
+      expect(screen.getByText('No Archived Events')).toBeInTheDocument();
+    });
+  });
+});
+
+describe('EventsPage - Joined tab: participant payment-aware filtering', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockEventService.getEventsByOrganizer.mockResolvedValue([]);
+  });
+
+  it('shows past paid event in Joined tab when participant has pending payment', async () => {
+    mockEventService.getEventsByParticipant.mockResolvedValue([
+      futureEvent,
+      pastPaidUnsettled,
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getMyPaymentStatusBatch.mockResolvedValue(
+      new Map([['past-unsettled', 'pending']])
+    );
+
+    render(<EventsPage />);
+
+    // Joined tab is the default
+    await waitFor(() => {
+      expect(screen.getByText('Future Event')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Past Unsettled Event')).toBeInTheDocument();
+  });
+
+  it('hides past paid event from Joined tab when participant has paid', async () => {
+    mockEventService.getEventsByParticipant.mockResolvedValue([
+      futureEvent,
+      pastPaidSettled,
+    ] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getMyPaymentStatusBatch.mockResolvedValue(
+      new Map([['past-settled', 'paid']])
+    );
+
+    render(<EventsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Future Event')).toBeInTheDocument();
+    });
+    // Settled event should NOT appear in Joined
+    expect(screen.queryByText('Past Settled Event')).not.toBeInTheDocument();
+  });
+
+  it('hides past free event from Joined tab', async () => {
+    mockEventService.getEventsByParticipant.mockResolvedValue([futureEvent, pastFreeEvent] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+
+    render(<EventsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Future Event')).toBeInTheDocument();
+    });
+    // Past free event should NOT appear in Joined
+    expect(screen.queryByText('Past Free Event')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/pages/__tests__/GroupDetailPage.test.tsx b/src/pages/__tests__/GroupDetailPage.test.tsx
new file mode 100644
index 0000000..f709f62
--- /dev/null
+++ b/src/pages/__tests__/GroupDetailPage.test.tsx
@@ -0,0 +1,280 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import type { User } from '@supabase/supabase-js';
+import { useAuth } from '@/hooks/useAuth';
+
+// Mock react-router-dom
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+    useParams: () => ({ groupId: 'test-group-id' }),
+  };
+});
+
+// Mock useAuth
+vi.mock('@/hooks/useAuth', () => ({
+  useAuth: vi.fn(() => ({
+    user: { id: 'organizer-123' },
+    loading: false,
+    isAdmin: false,
+    isImpersonating: false,
+    impersonate: vi.fn(),
+    stopImpersonating: vi.fn(),
+  })),
+  AuthProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+const mockUseAuth = vi.mocked(useAuth);
+
+// Mock useFeatureFlags
+vi.mock('@/hooks/useFeatureFlags', () => ({
+  useFeatureFlag: vi.fn(() => false),
+  FeatureFlagsProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+// Mock services
+vi.mock('@/services', () => ({
+  groupService: {
+    getGroupById: vi.fn(),
+    getGroupParticipants: vi.fn(),
+    getGroupEvents: vi.fn(),
+    isGroupAdmin: vi.fn(),
+  },
+  eventService: {
+    duplicateEvent: vi.fn(),
+  },
+  participantService: {
+    getPaymentSummariesBatch: vi.fn(),
+    getMyPaymentStatusBatch: vi.fn(),
+  },
+  pushSubscriptionService: {
+    isSupported: vi.fn(() => false),
+    isConfigured: vi.fn(() => false),
+    isSubscribed: vi.fn(() => Promise.resolve(false)),
+    getSubscriptions: vi.fn(() => Promise.resolve([])),
+  },
+  notificationService: {
+    getNotifications: vi.fn(() => Promise.resolve([])),
+    getUnreadCount: vi.fn(() => Promise.resolve(0)),
+    subscribeToNotifications: vi.fn(() => vi.fn()),
+  },
+  notificationPreferenceService: {
+    getPreferences: vi.fn(() => Promise.resolve(null)),
+  },
+}));
+
+// Mock error handler
+vi.mock('@/lib/errorHandler', () => ({
+  logError: vi.fn(),
+  errorHandler: {
+    handle: vi.fn(),
+    success: vi.fn(),
+    info: vi.fn(),
+  },
+}));
+
+import { render } from '@/test/utils/test-utils';
+import { GroupDetailPage } from '../GroupDetailPage';
+import { groupService, participantService } from '@/services';
+
+const mockGroupService = vi.mocked(groupService);
+const mockParticipantService = vi.mocked(participantService);
+
+const mockAuthReturn = {
+  user: { id: 'organizer-123' } as User,
+  session: null,
+  loading: false,
+  signIn: vi.fn(),
+  signUp: vi.fn(),
+  signInWithGoogle: vi.fn(),
+  signInWithGoogleIdToken: vi.fn(),
+  signOut: vi.fn(),
+  isAdmin: false,
+  isImpersonating: false,
+  impersonate: vi.fn(),
+  stopImpersonating: vi.fn(),
+  resetPasswordForEmail: vi.fn(),
+  updatePassword: vi.fn(),
+};
+
+const mockGroup = {
+  id: 'test-group-id',
+  name: 'Test Group',
+  description: 'A test group',
+  owner_id: 'organizer-123',
+  created_at: '2026-01-01T00:00:00Z',
+  invite_code: 'abc123',
+};
+
+const futureEvent = {
+  id: 'future-event',
+  name: 'Future Group Event',
+  datetime: '2027-06-01T10:00:00Z',
+  end_datetime: null,
+  organizer_id: 'organizer-123',
+  is_paid: false,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: 'test-group-id',
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2026-01-01T00:00:00Z',
+  participant_count: 3,
+};
+
+const pastPaidUnsettled = {
+  id: 'past-unsettled',
+  name: 'Past Unsettled Group Event',
+  datetime: '2024-01-01T10:00:00Z',
+  end_datetime: '2024-01-01T12:00:00Z',
+  organizer_id: 'organizer-123',
+  is_paid: true,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: 'test-group-id',
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2024-01-01T00:00:00Z',
+  participant_count: 4,
+};
+
+const pastPaidSettled = {
+  id: 'past-settled',
+  name: 'Past Settled Group Event',
+  datetime: '2024-02-01T10:00:00Z',
+  end_datetime: '2024-02-01T12:00:00Z',
+  organizer_id: 'organizer-123',
+  is_paid: true,
+  max_participants: null,
+  is_private: false,
+  custom_fields: [],
+  group_id: 'test-group-id',
+  parent_event_id: null,
+  cost_breakdown: null,
+  created_at: '2024-02-01T00:00:00Z',
+  participant_count: 2,
+};
+
+describe('GroupDetailPage - Unsettled payment filter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockGroupService.getGroupById.mockResolvedValue(mockGroup as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockGroupService.getGroupParticipants.mockResolvedValue([]);
+    mockGroupService.isGroupAdmin.mockResolvedValue(true);
+  });
+
+  it('shows past paid event with unpaid participants in Active filter', async () => {
+    const allEvents = [futureEvent, pastPaidUnsettled, pastPaidSettled];
+    mockGroupService.getGroupEvents.mockResolvedValue(allEvents as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([
+        ['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }],
+        ['past-settled', { total: 2, paid: 2, pending: 0, waived: 0 }],
+      ])
+    );
+
+    render(<GroupDetailPage />);
+
+    // Wait for group to load first
+    await waitFor(() => {
+      expect(screen.getByText('Test Group')).toBeInTheDocument();
+    });
+
+    // Wait for events to load — getGroupEvents is called, data should render
+    await waitFor(() => {
+      expect(mockGroupService.getGroupEvents).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Past Unsettled Group Event')).toBeInTheDocument();
+    });
+    // Future event should also be in Active
+    expect(screen.getByText('Future Group Event')).toBeInTheDocument();
+    // Settled past event should NOT be in Active
+    expect(screen.queryByText('Past Settled Group Event')).not.toBeInTheDocument();
+  });
+
+  it('excludes settled past event from Active filter', async () => {
+    const allEvents = [futureEvent, pastPaidUnsettled, pastPaidSettled];
+    mockGroupService.getGroupEvents.mockResolvedValue(allEvents as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([
+        ['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }],
+        ['past-settled', { total: 2, paid: 2, pending: 0, waived: 0 }],
+      ])
+    );
+
+    render(<GroupDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Future Group Event')).toBeInTheDocument();
+    });
+
+    // Settled past event should NOT appear in Active view
+    expect(screen.queryByText('Past Settled Group Event')).not.toBeInTheDocument();
+    // Unsettled past event should appear in Active view
+    expect(screen.getByText('Past Unsettled Group Event')).toBeInTheDocument();
+  });
+
+  it('shows only the unsettled event in Active when all others are settled', async () => {
+    // Only unsettled event — should show in Active, not be empty
+    mockGroupService.getGroupEvents.mockResolvedValue([pastPaidUnsettled] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getPaymentSummariesBatch.mockResolvedValue(
+      new Map([['past-unsettled', { total: 4, paid: 1, pending: 3, waived: 0 }]])
+    );
+
+    render(<GroupDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Past Unsettled Group Event')).toBeInTheDocument();
+    });
+  });
+});
+
+describe('GroupDetailPage - Non-admin participant payment filtering', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseAuth.mockReturnValue(mockAuthReturn);
+    mockGroupService.getGroupById.mockResolvedValue(mockGroup as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockGroupService.getGroupParticipants.mockResolvedValue([]);
+    mockGroupService.isGroupAdmin.mockResolvedValue(false); // Non-admin
+  });
+
+  it('shows past paid event in Active when participant has pending payment', async () => {
+    mockGroupService.getGroupEvents.mockResolvedValue([futureEvent, pastPaidUnsettled] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getMyPaymentStatusBatch.mockResolvedValue(
+      new Map([['past-unsettled', 'pending']])
+    );
+
+    render(<GroupDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Group')).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Past Unsettled Group Event')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Future Group Event')).toBeInTheDocument();
+  });
+
+  it('hides past paid event from Active when participant has paid', async () => {
+    mockGroupService.getGroupEvents.mockResolvedValue([futureEvent, pastPaidSettled] as any); // eslint-disable-line @typescript-eslint/no-explicit-any
+    mockParticipantService.getMyPaymentStatusBatch.mockResolvedValue(
+      new Map([['past-settled', 'paid']])
+    );
+
+    render(<GroupDetailPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Future Group Event')).toBeInTheDocument();
+    });
+    // Settled event should NOT appear in Active for non-admin
+    expect(screen.queryByText('Past Settled Group Event')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/services/participantService.ts b/src/services/participantService.ts
index 2fc2873..be77a3b 100644
--- a/src/services/participantService.ts
+++ b/src/services/participantService.ts
@@ -762,6 +762,36 @@ export const participantService = {
     return summaryMap;
   },
 
+  /**
+   * Returns the current user's payment status for each of the given events.
+   * Only returns entries where the user is a participant.
+   * @param userId - UUID of the user
+   * @param eventIds - Array of event IDs to check
+   * @returns Map of event ID to payment_status
+   */
+  async getMyPaymentStatusBatch(
+    userId: string,
+    eventIds: string[]
+  ): Promise<Map<string, 'pending' | 'paid' | 'waived'>> {
+    if (eventIds.length === 0) return new Map();
+
+    const { data, error } = await supabase
+      .from('participants')
+      .select('event_id, payment_status')
+      .eq('user_id', userId)
+      .in('event_id', eventIds);
+
+    throwIfSupabaseError({ data, error });
+
+    const result = new Map<string, 'pending' | 'paid' | 'waived'>();
+    if (data) {
+      for (const p of data) {
+        result.set(p.event_id, (p.payment_status as 'pending' | 'paid' | 'waived') || 'pending');
+      }
+    }
+    return result;
+  },
+
   /**
    * Creates multiple participants in batch, typically for adding group members to an event.
    * Handles duplicates gracefully by tracking them separately.