diff --git a/cshare-app/src/components/ActivityFeed.jsx b/cshare-app/src/components/ActivityFeed.jsx
new file mode 100644
index 0000000..0da5895
--- /dev/null
+++ b/cshare-app/src/components/ActivityFeed.jsx
@@ -0,0 +1,71 @@
+import { EyeIcon, DownloadIcon, UploadIcon } from './Icons';
+import { formatActivityTime } from '../data/mockData';
+
+const EVENT_CONFIG = {
+  view: { icon: EyeIcon, color: 'var(--accent)', label: 'Viewed', bg: 'var(--accent-muted)' },
+  download: { icon: DownloadIcon, color: 'var(--success)', label: 'Downloaded', bg: 'var(--success-muted)' },
+  upload: { icon: UploadIcon, color: '#F5A623', label: 'Uploaded', bg: 'rgba(245, 166, 35, 0.12)' },
+};
+
+export function ActivityFeed({ activities }) {
+  if (!activities || activities.length === 0) return null;
+
+  return (
+    <div className="card" style={{
+      padding: '20px 24px',
+      animation: 'fadeInUp 0.4s 0.35s ease both',
+    }}>
+      <div style={{
+        fontSize: '0.6875rem', color: 'var(--text-muted)', textTransform: 'uppercase',
+        letterSpacing: '0.08em', fontFamily: 'var(--font-heading)', fontWeight: 600,
+        marginBottom: '16px',
+      }}>
+        Recent Activity
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {activities.slice(0, 6).map((event, i) => {
+          const cfg = EVENT_CONFIG[event.type] || EVENT_CONFIG.view;
+          const Icon = cfg.icon;
+          return (
+            <div
+              key={event.id}
+              style={{
+                display: 'flex', alignItems: 'center', gap: '12px',
+                padding: '10px 0',
+                borderBottom: i < Math.min(activities.length, 6) - 1 ? '1px solid var(--border-subtle)' : 'none',
+                animation: `fadeIn 0.3s ${0.05 * i}s ease both`,
+              }}
+            >
+              <div style={{
+                width: '28px', height: '28px', borderRadius: 'var(--radius-sm)',
+                background: cfg.bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                flexShrink: 0,
+              }}>
+                <Icon size={13} style={{ color: cfg.color }} />
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{
+                  fontSize: '0.8125rem', color: 'var(--text-secondary)',
+                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+                }}>
+                  <span style={{ color: cfg.color, fontWeight: 500 }}>{cfg.label}</span>
+                  {' — '}
+                  <span style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-heading)', fontWeight: 500 }}>
+                    {event.fileName}
+                  </span>
+                </div>
+              </div>
+              <span style={{
+                fontSize: '0.6875rem', color: 'var(--text-muted)', flexShrink: 0,
+                fontFamily: 'var(--font-body)',
+              }}>
+                {formatActivityTime(event.at)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}