diff --git a/frontend/src/api/activity.ts b/frontend/src/api/activity.ts
new file mode 100644
index 000000000..bed383561
--- /dev/null
+++ b/frontend/src/api/activity.ts
@@ -0,0 +1,20 @@
+import { apiClient } from '../services/apiClient';
+
+export interface ActivityEvent {
+  id: string;
+  type: 'completed' | 'submitted' | 'posted' | 'review';
+  username: string;
+  avatar_url?: string | null;
+  detail: string;
+  timestamp: string;
+}
+
+interface ActivityResponse {
+  items: ActivityEvent[];
+}
+
+export async function listActivity(limit = 4): Promise<ActivityResponse> {
+  return apiClient<ActivityResponse>('/api/activity', {
+    params: { limit },
+  });
+}
diff --git a/frontend/src/components/home/ActivityFeed.tsx b/frontend/src/components/home/ActivityFeed.tsx
index 8b6b4b904..9c986191b 100644
--- a/frontend/src/components/home/ActivityFeed.tsx
+++ b/frontend/src/components/home/ActivityFeed.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { slideInRight } from '../../lib/animations';
 import { timeAgo } from '../../lib/utils';
+import { useActivity } from '../../hooks/useActivity';
 
 interface ActivityEvent {
   id: string;
@@ -76,7 +77,9 @@ function EventItem({ event }: { event: ActivityEvent }) {
 }
 
 export function ActivityFeed({ events }: { events?: ActivityEvent[] }) {
-  const displayEvents = events?.length ? events.slice(0, 4) : MOCK_EVENTS;
+  const { data, isError } = useActivity(4);
+  const remoteEvents = data?.items ?? [];
+  const displayEvents = events?.length ? events.slice(0, 4) : remoteEvents.length ? remoteEvents : MOCK_EVENTS;
   const [visibleEvents, setVisibleEvents] = useState<ActivityEvent[]>(displayEvents.slice(0, 4));
 
   useEffect(() => {
@@ -91,6 +94,9 @@ export function ActivityFeed({ events }: { events?: ActivityEvent[] }) {
           <span className="font-mono text-xs text-text-muted uppercase tracking-wider">Recent Activity</span>
         </div>
         <div className="space-y-1">
+          {isError && (
+            <p className="px-3 pb-1 text-xs text-text-muted">Using fallback activity feed while API is unavailable.</p>
+          )}
           <AnimatePresence mode="popLayout">
             {visibleEvents.map((event) => (
               <motion.div
diff --git a/frontend/src/hooks/useActivity.ts b/frontend/src/hooks/useActivity.ts
new file mode 100644
index 000000000..b73bff043
--- /dev/null
+++ b/frontend/src/hooks/useActivity.ts
@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import { listActivity } from '../api/activity';
+
+export function useActivity(limit = 4) {
+  return useQuery({
+    queryKey: ['activity', limit],
+    queryFn: () => listActivity(limit),
+    refetchInterval: 30_000,
+    staleTime: 15_000,
+  });
+}