diff --git a/apps/admin/src/app/secure/candidates/[id]/page.tsx b/apps/admin/src/app/secure/candidates/[id]/page.tsx
new file mode 100644
index 000000000..8aaa1a586
--- /dev/null
+++ b/apps/admin/src/app/secure/candidates/[id]/page.tsx
@@ -0,0 +1,216 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useAuth } from '@clerk/nextjs';
+import { createAuthenticatedClient } from '@/lib/api-client';
+import { AdminPageHeader, AdminLoadingState, AdminErrorState, AdminDataTable, type Column } from '@/components/shared';
+
+type CandidateApp = {
+    id: string;
+    stage: string;
+    job_id: string;
+    job_title: string | null;
+    company_name: string | null;
+    created_at: string;
+};
+
+type CandidateDetail = {
+    id: string;
+    email: string | null;
+    full_name: string | null;
+    first_name?: string | null;
+    last_name?: string | null;
+    phone: string | null;
+    location: string | null;
+    current_title: string | null;
+    current_company: string | null;
+    bio: string | null;
+    linkedin_url: string | null;
+    github_url: string | null;
+    portfolio_url: string | null;
+    skills: string | null;
+    verification_status: string | null;
+    resume_status?: string | null;
+    desired_salary_min: number | null;
+    desired_salary_max: number | null;
+    marketplace_visibility: string | null;
+    user_id: string | null;
+    recruiter_id: string | null;
+    created_at: string;
+    updated_at: string | null;
+    applications: CandidateApp[];
+    recruiter_relationships: Array<{ id: string; recruiter_id: string; status: string; created_at: string }>;
+};
+
+const STAGE_BADGE: Record<string, string> = {
+    draft: 'badge-ghost', ai_review: 'badge-info', ai_reviewed: 'badge-info',
+    ai_failed: 'badge-error', submitted: 'badge-info', screen: 'badge-warning',
+    company_review: 'badge-accent', interview: 'badge-warning', offer: 'badge-primary',
+    hired: 'badge-success', rejected: 'badge-error', withdrawn: 'badge-ghost',
+};
+
+function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
+    return (
+        <div className="flex justify-between items-start py-2 border-b border-base-200 last:border-0">
+            <span className="text-sm text-base-content/50 font-medium w-40 flex-shrink-0">{label}</span>
+            <span className="text-sm text-right flex-1">{value ?? <span className="text-base-content/30">—</span>}</span>
+        </div>
+    );
+}
+
+function formatDate(iso?: string | null) {
+    if (!iso) return '—';
+    return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+function formatSalary(min: number | null, max: number | null) {
+    const fmt = (n: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(n);
+    if (min && max) return `${fmt(min)} – ${fmt(max)}`;
+    if (min) return `From ${fmt(min)}`;
+    if (max) return `Up to ${fmt(max)}`;
+    return null;
+}
+
+const APP_COLUMNS: Column<CandidateApp>[] = [
+    { key: 'job_title', label: 'Job', render: (a) => <span className="text-sm font-medium">{a.job_title ?? '—'}</span> },
+    { key: 'company_name', label: 'Company', render: (a) => <span className="text-sm text-base-content/70">{a.company_name ?? '—'}</span> },
+    { key: 'stage', label: 'Stage', render: (a) => <span className={`badge badge-sm capitalize ${STAGE_BADGE[a.stage] ?? 'badge-ghost'}`}>{a.stage.replace(/_/g, ' ')}</span> },
+    { key: 'created_at', label: 'Applied', render: (a) => <span className="text-sm text-base-content/60">{formatDate(a.created_at)}</span> },
+];
+
+export default function CandidateDetailPage() {
+    const { id } = useParams<{ id: string }>();
+    const router = useRouter();
+    const { getToken } = useAuth();
+    const [candidate, setCandidate] = useState<CandidateDetail | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchCandidate = useCallback(async () => {
+        try {
+            const token = await getToken();
+            if (!token) { setError('Not authenticated'); setLoading(false); return; }
+            const client = createAuthenticatedClient(token);
+            const res = await client.get<{ data: CandidateDetail }>(`/ats/admin/candidates/${id}`);
+            setCandidate((res as { data: CandidateDetail }).data);
+        } catch {
+            setError('Failed to load candidate');
+        } finally {
+            setLoading(false);
+        }
+    }, [id, getToken]);
+
+    useEffect(() => { void fetchCandidate(); }, [fetchCandidate]);
+
+    if (loading) return <div className="p-6"><AdminLoadingState /></div>;
+    if (error || !candidate) return <div className="p-6"><AdminErrorState message={error ?? 'Candidate not found'} /></div>;
+
+    const name = candidate.full_name
+        || [candidate.first_name, candidate.last_name].filter(Boolean).join(' ')
+        || 'Unknown Candidate';
+
+    const VERIF_BADGE: Record<string, string> = { verified: 'badge-success', unverified: 'badge-ghost', pending: 'badge-warning' };
+
+    return (
+        <div>
+            <button className="btn btn-ghost btn-sm gap-2 mb-3" onClick={() => router.push('/secure/candidates')}>
+                <i className="fa-duotone fa-regular fa-arrow-left" /> Back to Candidates
+            </button>
+
+            <AdminPageHeader
+                title={name}
+                subtitle={candidate.email ?? undefined}
+                actions={
+                    <span className={`badge badge-lg capitalize ${VERIF_BADGE[candidate.verification_status ?? ''] ?? 'badge-ghost'}`}>
+                        {candidate.verification_status ?? 'unknown'}
+                    </span>
+                }
+            />
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div className="lg:col-span-2 space-y-4">
+                    {/* Profile */}
+                    <div className="card bg-base-100 border border-base-200">
+                        <div className="card-body">
+                            <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-2">Profile</h3>
+                            <InfoRow label="Email" value={candidate.email} />
+                            <InfoRow label="Phone" value={candidate.phone} />
+                            <InfoRow label="Location" value={candidate.location} />
+                            <InfoRow label="Current Title" value={candidate.current_title} />
+                            <InfoRow label="Current Company" value={candidate.current_company} />
+                            <InfoRow label="Desired Salary" value={formatSalary(candidate.desired_salary_min, candidate.desired_salary_max)} />
+                            <InfoRow label="Skills" value={candidate.skills} />
+                            <InfoRow label="Joined" value={formatDate(candidate.created_at)} />
+                        </div>
+                    </div>
+
+                    {candidate.bio && (
+                        <div className="card bg-base-100 border border-base-200">
+                            <div className="card-body">
+                                <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-2">Bio</h3>
+                                <p className="text-sm text-base-content/80 whitespace-pre-wrap leading-relaxed">{candidate.bio}</p>
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Applications */}
+                    <div className="card bg-base-100 border border-base-200">
+                        <div className="card-body">
+                            <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-2">
+                                Applications ({candidate.applications.length})
+                            </h3>
+                        </div>
+                        <AdminDataTable
+                            columns={APP_COLUMNS}
+                            data={candidate.applications}
+                            loading={false}
+                            onRowClick={(app) => router.push(`/secure/applications/${app.id}`)}
+                            emptyTitle="No applications"
+                            emptyDescription="This candidate has no applications."
+                        />
+                    </div>
+                </div>
+
+                {/* Sidebar */}
+                <div className="space-y-4">
+                    <div className="card bg-base-100 border border-base-200">
+                        <div className="card-body">
+                            <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-3">Quick Info</h3>
+                            <div className="space-y-2">
+                                <div className="flex justify-between"><span className="text-sm text-base-content/60">Applications</span><span className="text-sm font-semibold">{candidate.applications.length}</span></div>
+                                <div className="flex justify-between"><span className="text-sm text-base-content/60">Recruiters</span><span className="text-sm font-semibold">{candidate.recruiter_relationships.length}</span></div>
+                                <div className="flex justify-between"><span className="text-sm text-base-content/60">Visibility</span><span className="text-sm capitalize">{candidate.marketplace_visibility ?? '—'}</span></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Links */}
+                    {(candidate.linkedin_url || candidate.github_url || candidate.portfolio_url) && (
+                        <div className="card bg-base-100 border border-base-200">
+                            <div className="card-body">
+                                <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-3">Links</h3>
+                                <div className="space-y-2">
+                                    {candidate.linkedin_url && <a href={candidate.linkedin_url} target="_blank" rel="noopener noreferrer" className="link link-primary text-sm block truncate">{candidate.linkedin_url}</a>}
+                                    {candidate.github_url && <a href={candidate.github_url} target="_blank" rel="noopener noreferrer" className="link link-primary text-sm block truncate">{candidate.github_url}</a>}
+                                    {candidate.portfolio_url && <a href={candidate.portfolio_url} target="_blank" rel="noopener noreferrer" className="link link-primary text-sm block truncate">{candidate.portfolio_url}</a>}
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="card bg-base-100 border border-base-200">
+                        <div className="card-body">
+                            <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-3">System</h3>
+                            <div className="space-y-2">
+                                <div><p className="text-xs text-base-content/40">Candidate ID</p><p className="font-mono text-xs text-base-content/60 break-all">{candidate.id}</p></div>
+                                {candidate.user_id && <div><p className="text-xs text-base-content/40">User ID</p><p className="font-mono text-xs text-base-content/60 break-all">{candidate.user_id}</p></div>}
+                                {candidate.recruiter_id && <div><p className="text-xs text-base-content/40">Source Recruiter ID</p><p className="font-mono text-xs text-base-content/60 break-all">{candidate.recruiter_id}</p></div>}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/admin/src/app/secure/candidates/components/candidate-table.tsx b/apps/admin/src/app/secure/candidates/components/candidate-table.tsx
index 90ac8f654..6a9710213 100644
--- a/apps/admin/src/app/secure/candidates/components/candidate-table.tsx
+++ b/apps/admin/src/app/secure/candidates/components/candidate-table.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
 import { AdminDataTable, AdminPageHeader, type Column } from '@/components/shared';
 import { useStandardList } from '@/hooks/use-standard-list';
 import { BuildSmartResumeButton } from './build-smart-resume-button';
@@ -87,6 +88,7 @@ const RESUME_OPTIONS = [
 ];
 
 export function CandidateTable() {
+    const router = useRouter();
     const {
         data,
         loading,
@@ -154,6 +156,7 @@ export function CandidateTable() {
                     sortField={sortBy}
                     sortDir={sortOrder}
                     onSort={handleSort}
+                    onRowClick={(c) => router.push(`/secure/candidates/${c.id}`)}
                     emptyTitle="No candidates found"
                     emptyDescription="No candidates match your search."
                 />
diff --git a/apps/admin/src/app/secure/placements/[id]/page.tsx b/apps/admin/src/app/secure/placements/[id]/page.tsx
new file mode 100644
index 000000000..e02c8c916
--- /dev/null
+++ b/apps/admin/src/app/secure/placements/[id]/page.tsx
@@ -0,0 +1,260 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useAuth } from '@clerk/nextjs';
+import { createAuthenticatedClient } from '@/lib/api-client';
+import { AdminPageHeader, AdminLoadingState, AdminErrorState } from '@/components/shared';
+
+type PlacementDetail = {
+    id: string;
+    job_id: string;
+    candidate_id: string;
+    company_id: string | null;
+    application_id: string | null;
+    state: string;
+    salary: number | null;
+    fee_percentage: number | null;
+    fee_amount: number | null;
+    placement_fee: number | null;
+    recruiter_share: number | null;
+    platform_share: number | null;
+    start_date: string | null;
+    end_date: string | null;
+    guarantee_days: number;
+    guarantee_expires_at: string | null;
+    failure_reason: string | null;
+    failed_at: string | null;
+    hired_at: string | null;
+    candidate_name: string | null;
+    candidate_email: string | null;
+    job_title: string | null;
+    company_name: string | null;
+    recruiter_name: string | null;
+    recruiter_email: string | null;
+    candidate_recruiter_id: string | null;
+    company_recruiter_id: string | null;
+    job_owner_recruiter_id: string | null;
+    created_at: string;
+    updated_at: string | null;
+    job: { id: string; title: string; status: string } | null;
+    candidate: { id: string; full_name: string | null; email: string | null; phone: string | null; location: string | null } | null;
+    company: { id: string; name: string; logo_url: string | null } | null;
+};
+
+const STATE_BADGE: Record<string, string> = {
+    hired: 'badge-info', active: 'badge-success', completed: 'badge-success',
+    failed: 'badge-error',
+};
+
+function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
+    return (
+        <div className="flex justify-between items-start py-2 border-b border-base-200 last:border-0">
+            <span className="text-sm text-base-content/50 font-medium w-40 flex-shrink-0">{label}</span>
+            <span className="text-sm text-right flex-1">{value ?? <span className="text-base-content/30">—</span>}</span>
+        </div>
+    );
+}
+
+function formatDate(iso?: string | null) {
+    if (!iso) return '—';
+    return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+function formatCurrency(amount?: number | null) {
+    if (amount == null) return '—';
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+}
+
+function daysUntil(iso?: string | null): string | null {
+    if (!iso) return null;
+    const diff = Math.ceil((new Date(iso).getTime() - Date.now()) / (1000 * 60 * 60 * 24));
+    if (diff < 0) return 'Expired';
+    if (diff === 0) return 'Today';
+    return `${diff} days`;
+}
+
+export default function PlacementDetailPage() {
+    const { id } = useParams<{ id: string }>();
+    const router = useRouter();
+    const { getToken } = useAuth();
+    const [placement, setPlacement] = useState<PlacementDetail | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchPlacement = useCallback(async () => {
+        try {
+            const token = await getToken();
+            if (!token) { setError('Not authenticated'); setLoading(false); return; }
+            const client = createAuthenticatedClient(token);
+            const res = await client.get<{ data: PlacementDetail }>(`/ats/admin/placements/${id}`);
+            setPlacement((res as { data: PlacementDetail }).data);
+        } catch {
+            setError('Failed to load placement');
+        } finally {
+            setLoading(false);
+        }
+    }, [id, getToken]);
+
+    useEffect(() => { void fetchPlacement(); }, [fetchPlacement]);
+
+    if (loading) return <div className="p-6"><AdminLoadingState /></div>;
+    if (error || !placement) return <div className="p-6"><AdminErrorState message={error ?? 'Placement not found'} /></div>;
+
+    const candidateName = placement.candidate?.full_name ?? placement.candidate_name ?? 'Unknown';
+    const guaranteeRemaining = daysUntil(placement.guarantee_expires_at);
+
+    return (
+        <div>
+            <button className="btn btn-ghost btn-sm gap-2 mb-3" onClick={() => router.push('/secure/placements')}>
+                <i className="fa-duotone fa-regular fa-arrow-left" /> Back to Placements
+            </button>
+
+            <AdminPageHeader
+                title={candidateName}
+                subtitle={`Placed at ${placement.company?.name ?? placement.company_name ?? 'Unknown Company'}`}
+                actions={
+                    <span className={`badge badge-lg capitalize ${STATE_BADGE[placement.state] ?? 'badge-ghost'}`}>
+                        {placement.state}
+                    </span>
+                }
+            />
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div className="lg:col-span-2 space-y-4">
+                    {/* Parties */}
+                    <div className="card bg-base-100 border border-base-200">
+                        <div className="card-body">
+                            <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-2">Parties</h3>
+                            <InfoRow label="Candidate" value={
+                                placement.candidate ? (
+                                    <Link href={`/secure/candidates/${placement.candidate.id}`} className="link link-primary text-sm">
+                                        {placement.candidate.full_name ?? placement.candidate_name}
+                                    </Link>
+                                ) : candidateName
+                            } />
+                            <InfoRow label="Email" value={placement.candidate?.email ?? placement.candidate_email} />
+                            <InfoRow label="Phone" value={placement.candidate?.phone} />
+                            <InfoRow label="Job" value={
+                                placement.job ? (
+                                    <Link href={`/secure/jobs/${placement.job.id}`} className="link link-primary text-sm">
+                                        {placement.job.title}
+                                    </Link>
+                                ) : placement.job_title
+                            } />
+                            <InfoRow label="Company" value={placement.company?.name ?? placement.company_name} />
+                            {placement.application_id && (
+                                <InfoRow label="Application" value={
+                                    <Link href={`/secure/applications/${placement.application_id}`} className="link link-primary font-mono text-xs">
+                                        {placement.application_id.slice(0, 8)}...
+                                    </Link>
+                                } />
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Financial */}
+                    <div className="card bg-base-100 border border-base-200">
+                        <div className="card-body">
+                            <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-2">Financial</h3>
+                            <InfoRow label="Salary" value={formatCurrency(placement.salary)} />
+                            <InfoRow label="Fee %" value={placement.fee_percentage != null ? `${placement.fee_percentage}%` : null} />
+                            <InfoRow label="Fee Amount" value={formatCurrency(placement.fee_amount)} />
+                            <InfoRow label="Placement Fee" value={formatCurrency(placement.placement_fee)} />
+                            <InfoRow label="Recruiter Share" value={formatCurrency(placement.recruiter_share)} />
+                            <InfoRow label="Platform Share" value={formatCurrency(placement.platform_share)} />
+                        </div>
+                    </div>
+
+                    {/* Recruiters */}
+                    {(placement.candidate_recruiter_id || placement.company_recruiter_id || placement.job_owner_recruiter_id) && (
+                        <div className="card bg-base-100 border border-base-200">
+                            <div className="card-body">
+                                <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-2">Recruiter Attribution</h3>
+                                {placement.recruiter_name && <InfoRow label="Recruiter" value={`${placement.recruiter_name} (${placement.recruiter_email ?? ''})`} />}
+                                {placement.candidate_recruiter_id && (
+                                    <InfoRow label="Candidate Recruiter" value={
+                                        <Link href={`/secure/recruiters/${placement.candidate_recruiter_id}`} className="link link-primary font-mono text-xs">
+                                            {placement.candidate_recruiter_id.slice(0, 8)}...
+                                        </Link>
+                                    } />
+                                )}
+                                {placement.company_recruiter_id && (
+                                    <InfoRow label="Company Recruiter" value={
+                                        <Link href={`/secure/recruiters/${placement.company_recruiter_id}`} className="link link-primary font-mono text-xs">
+                                            {placement.company_recruiter_id.slice(0, 8)}...
+                                        </Link>
+                                    } />
+                                )}
+                                {placement.job_owner_recruiter_id && (
+                                    <InfoRow label="Job Owner" value={
+                                        <Link href={`/secure/recruiters/${placement.job_owner_recruiter_id}`} className="link link-primary font-mono text-xs">
+                                            {placement.job_owner_recruiter_id.slice(0, 8)}...
+                                        </Link>
+                                    } />
+                                )}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Failure info */}
+                    {placement.failure_reason && (
+                        <div className="card bg-error/10 border border-error/20">
+                            <div className="card-body">
+                                <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-error mb-2">Failure</h3>
+                                <p className="text-sm text-error">{placement.failure_reason}</p>
+                                <p className="text-xs text-base-content/40 mt-1">Failed {formatDate(placement.failed_at)}</p>
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                {/* Sidebar */}
+                <div className="space-y-4">
+                    {/* Guarantee */}
+                    <div className="card bg-base-100 border border-base-200">
+                        <div className="card-body">
+                            <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-3">Guarantee Period</h3>
+                            <div className="space-y-2">
+                                <div className="flex justify-between"><span className="text-sm text-base-content/60">Days</span><span className="text-sm font-semibold">{placement.guarantee_days}</span></div>
+                                <div className="flex justify-between"><span className="text-sm text-base-content/60">Expires</span><span className="text-sm">{formatDate(placement.guarantee_expires_at)}</span></div>
+                                {guaranteeRemaining && (
+                                    <div className="flex justify-between">
+                                        <span className="text-sm text-base-content/60">Remaining</span>
+                                        <span className={`text-sm font-semibold ${guaranteeRemaining === 'Expired' ? 'text-error' : ''}`}>{guaranteeRemaining}</span>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Timeline */}
+                    <div className="card bg-base-100 border border-base-200">
+                        <div className="card-body">
+                            <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-3">Timeline</h3>
+                            <div className="space-y-2">
+                                <div className="flex justify-between"><span className="text-sm text-base-content/60">Hired</span><span className="text-sm">{formatDate(placement.hired_at)}</span></div>
+                                <div className="flex justify-between"><span className="text-sm text-base-content/60">Start Date</span><span className="text-sm">{formatDate(placement.start_date)}</span></div>
+                                <div className="flex justify-between"><span className="text-sm text-base-content/60">End Date</span><span className="text-sm">{formatDate(placement.end_date)}</span></div>
+                                <div className="flex justify-between"><span className="text-sm text-base-content/60">Created</span><span className="text-sm">{formatDate(placement.created_at)}</span></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* System */}
+                    <div className="card bg-base-100 border border-base-200">
+                        <div className="card-body">
+                            <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-base-content/50 mb-3">System</h3>
+                            <div className="space-y-2">
+                                <div><p className="text-xs text-base-content/40">Placement ID</p><p className="font-mono text-xs text-base-content/60 break-all">{placement.id}</p></div>
+                                <div><p className="text-xs text-base-content/40">Job ID</p><p className="font-mono text-xs text-base-content/60 break-all">{placement.job_id}</p></div>
+                                <div><p className="text-xs text-base-content/40">Candidate ID</p><p className="font-mono text-xs text-base-content/60 break-all">{placement.candidate_id}</p></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/admin/src/app/secure/placements/components/placement-table.tsx b/apps/admin/src/app/secure/placements/components/placement-table.tsx
index 02ceec4b1..cbe83ff13 100644
--- a/apps/admin/src/app/secure/placements/components/placement-table.tsx
+++ b/apps/admin/src/app/secure/placements/components/placement-table.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
 import { AdminDataTable, type Column } from '@/components/shared';
 
 type Placement = {
@@ -47,6 +48,7 @@ function formatFee(fee?: number) {
 }
 
 export function PlacementTable({ data, loading, sortField, sortDir, onSort }: PlacementTableProps) {
+    const router = useRouter();
     const columns: Column<Placement>[] = [
         {
             key: 'candidate_name',
@@ -105,6 +107,7 @@ export function PlacementTable({ data, loading, sortField, sortDir, onSort }: Pl
             sortField={sortField}
             sortDir={sortDir}
             onSort={onSort}
+            onRowClick={(item) => router.push(`/secure/placements/${item.id}`)}
             emptyTitle="No placements found"
             emptyDescription="No placements match the current filters."
         />
diff --git a/apps/candidate/src/app/(public)/companies/[slug]/company-profile-client.tsx b/apps/candidate/src/app/(public)/companies/[slug]/company-profile-client.tsx
new file mode 100644
index 000000000..651d31efc
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/[slug]/company-profile-client.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useScrollReveal, BaselTabBar } from "@splits-network/basel-ui";
+import { apiClient } from "@/lib/api-client";
+import type { PublicCompany, PublicCompanyProfile } from "../types";
+import HeroSection from "./hero-section";
+import { HeroStats } from "./hero-stats";
+import ContentTabs, { type TabKey } from "./content-tabs";
+import Sidebar from "./sidebar";
+
+const TABS: { key: TabKey; label: string; icon: string }[] = [
+    {
+        key: "about",
+        label: "About",
+        icon: "fa-duotone fa-regular fa-building",
+    },
+    {
+        key: "open-jobs",
+        label: "Open Jobs",
+        icon: "fa-duotone fa-regular fa-briefcase",
+    },
+    {
+        key: "culture",
+        label: "Culture & Perks",
+        icon: "fa-duotone fa-regular fa-heart",
+    },
+];
+
+interface CompanyProfileClientProps {
+    company: PublicCompany;
+}
+
+export default function CompanyProfileClient({
+    company,
+}: CompanyProfileClientProps) {
+    const [activeTab, setActiveTab] = useState<TabKey>("about");
+    const [profile, setProfile] = useState<PublicCompanyProfile | null>(null);
+    const pageRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        let cancelled = false;
+        apiClient
+            .get<{ data: PublicCompanyProfile }>(
+                `/public/companies/${company.slug}/profile`,
+            )
+            .then((res) => {
+                if (!cancelled && res.data) setProfile(res.data);
+            })
+            .catch(() => {});
+        return () => {
+            cancelled = true;
+        };
+    }, [company.slug]);
+
+    useScrollReveal(pageRef);
+
+    return (
+        <div ref={pageRef} className="min-h-screen bg-base-100">
+            <HeroSection company={company} />
+
+            <BaselTabBar
+                tabs={TABS.map((t) => ({
+                    label: t.label,
+                    value: t.key,
+                    icon: t.icon,
+                }))}
+                active={activeTab}
+                onChange={(v) => setActiveTab(v as TabKey)}
+                className="bg-base-100 border-b border-base-300 max-w-6xl mx-auto px-8"
+            />
+
+            <div className="max-w-6xl mx-auto px-8 py-12">
+                <div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
+                    <div className="lg:col-span-3">
+                        <ContentTabs
+                            company={company}
+                            profile={profile}
+                            activeTab={activeTab}
+                        />
+                    </div>
+                    <div className="lg:col-span-2">
+                        <Sidebar company={company} profile={profile} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/[slug]/content-tabs.tsx b/apps/candidate/src/app/(public)/companies/[slug]/content-tabs.tsx
new file mode 100644
index 000000000..0c56c04fd
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/[slug]/content-tabs.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { PublicCompany, PublicCompanyProfile } from "../types";
+import { AboutTab } from "./tabs/about-tab";
+import { OpenJobsTab } from "./tabs/open-jobs-tab";
+import { CultureTab } from "./tabs/culture-tab";
+
+export type TabKey = "about" | "open-jobs" | "culture";
+
+interface ContentTabsProps {
+    company: PublicCompany;
+    profile: PublicCompanyProfile | null;
+    activeTab: TabKey;
+}
+
+export default function ContentTabs({
+    company,
+    profile,
+    activeTab,
+}: ContentTabsProps) {
+    return (
+        <>
+            {activeTab === "about" && <AboutTab company={company} />}
+            {activeTab === "open-jobs" && (
+                <OpenJobsTab company={company} />
+            )}
+            {activeTab === "culture" && (
+                <CultureTab profile={profile} />
+            )}
+        </>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/[slug]/hero-section.tsx b/apps/candidate/src/app/(public)/companies/[slug]/hero-section.tsx
new file mode 100644
index 000000000..ab1382acc
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/[slug]/hero-section.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import type { PublicCompany } from "../types";
+import { companyLocation, companyInitials } from "../types";
+import { HeroStats } from "./hero-stats";
+
+interface HeroSectionProps {
+    company: PublicCompany;
+}
+
+function extractDomain(url: string): string {
+    try {
+        return new URL(url).hostname.replace("www.", "");
+    } catch {
+        return url;
+    }
+}
+
+export default function HeroSection({ company }: HeroSectionProps) {
+    const location = companyLocation(company);
+    const initials = companyInitials(company.name);
+
+    return (
+        <header className="relative bg-base-300 text-base-content border-l-4 border-l-primary">
+            <div
+                className="absolute top-0 right-0 w-2/5 h-full bg-primary/10"
+                style={{
+                    clipPath: "polygon(15% 0,100% 0,100% 100%,0% 100%)",
+                }}
+            />
+            <div className="relative px-8 pt-10 pb-0">
+                {/* Kicker row */}
+                <div className="flex items-center justify-between mb-8">
+                    <p className="scroll-reveal fade-up hero-kicker text-xs font-bold uppercase tracking-[0.22em] text-base-content/40">
+                        {company.industry || "Company"}
+                    </p>
+                    {company.stage && (
+                        <span className="scroll-reveal fade-up hero-kicker flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-secondary">
+                            <i className="fa-duotone fa-regular fa-chart-line text-sm" />
+                            {company.stage}
+                        </span>
+                    )}
+                </div>
+
+                {/* Logo + Identity */}
+                <div className="flex flex-col lg:flex-row lg:items-end gap-8">
+                    <div className="flex items-end gap-5 flex-1">
+                        <div className="scroll-reveal pop-in relative shrink-0">
+                            {company.logo_url ? (
+                                <img
+                                    src={company.logo_url}
+                                    alt={`${company.name} logo`}
+                                    className="w-20 h-20 lg:w-24 lg:h-24 object-contain bg-base-100"
+                                />
+                            ) : (
+                                <div className="w-20 h-20 lg:w-24 lg:h-24 bg-primary text-primary-content flex items-center justify-center text-2xl lg:text-3xl font-black tracking-tight select-none">
+                                    {initials}
+                                </div>
+                            )}
+                        </div>
+                        <div className="min-w-0 pb-1">
+                            <p className="text-xs font-bold uppercase tracking-[0.22em] text-primary mb-1">
+                                Company
+                            </p>
+                            <h1 className="scroll-reveal fade-up text-4xl lg:text-5xl font-black tracking-tight leading-none text-base-content mb-3">
+                                {company.name}
+                            </h1>
+                            <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-base-content/40">
+                                {location && (
+                                    <span className="scroll-reveal fade-up flex items-center gap-1.5">
+                                        <i className="fa-duotone fa-regular fa-location-dot text-xs" />
+                                        {location}
+                                    </span>
+                                )}
+                                {company.founded_year && (
+                                    <>
+                                        {location && (
+                                            <span className="text-base-content/20">
+                                                |
+                                            </span>
+                                        )}
+                                        <span className="scroll-reveal fade-up flex items-center gap-1.5">
+                                            <i className="fa-duotone fa-regular fa-calendar text-xs" />
+                                            Est. {company.founded_year}
+                                        </span>
+                                    </>
+                                )}
+                                {company.website && (
+                                    <>
+                                        <span className="text-base-content/20">
+                                            |
+                                        </span>
+                                        <span className="scroll-reveal fade-up flex items-center gap-1.5">
+                                            <i className="fa-duotone fa-regular fa-globe text-xs" />
+                                            {extractDomain(company.website)}
+                                        </span>
+                                    </>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* CTA buttons */}
+                    <div className="flex flex-wrap gap-2 pb-1 shrink-0">
+                        {company.website && (
+                            <a
+                                href={company.website}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="scroll-reveal fade-up btn btn-primary btn-sm font-bold uppercase tracking-wider"
+                            >
+                                <i className="fa-duotone fa-regular fa-arrow-up-right-from-square" />
+                                Website
+                            </a>
+                        )}
+                        {company.linkedin_url && (
+                            <a
+                                href={company.linkedin_url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="scroll-reveal fade-up btn btn-ghost btn-sm border-neutral-content/20 font-bold uppercase tracking-wider"
+                            >
+                                <i className="fa-brands fa-linkedin-in" />
+                                LinkedIn
+                            </a>
+                        )}
+                        <button className="scroll-reveal fade-up btn btn-ghost btn-sm border-neutral-content/20 font-bold uppercase tracking-wider">
+                            <i className="fa-duotone fa-regular fa-share-nodes" />
+                            Share
+                        </button>
+                    </div>
+                </div>
+
+                {/* Stats strip */}
+                <HeroStats company={company} />
+            </div>
+        </header>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/[slug]/hero-stats.tsx b/apps/candidate/src/app/(public)/companies/[slug]/hero-stats.tsx
new file mode 100644
index 000000000..c38e96a54
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/[slug]/hero-stats.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import type { PublicCompany } from "../types";
+
+const ICON_STYLES = [
+    "bg-primary text-primary-content",
+    "bg-secondary text-secondary-content",
+    "bg-accent text-accent-content",
+    "bg-warning text-warning-content",
+];
+
+interface HeroStatsProps {
+    company: PublicCompany;
+}
+
+export function HeroStats({ company }: HeroStatsProps) {
+    const stats = [
+        company.company_size
+            ? {
+                  label: "Company Size",
+                  value: company.company_size,
+                  icon: "fa-duotone fa-regular fa-users",
+              }
+            : null,
+        company.open_roles_count > 0
+            ? {
+                  label: "Open Roles",
+                  value: String(company.open_roles_count),
+                  icon: "fa-duotone fa-regular fa-briefcase",
+              }
+            : null,
+        company.founded_year
+            ? {
+                  label: "Founded",
+                  value: String(company.founded_year),
+                  icon: "fa-duotone fa-regular fa-calendar",
+              }
+            : null,
+        company.stage
+            ? {
+                  label: "Stage",
+                  value: company.stage,
+                  icon: "fa-duotone fa-regular fa-chart-line",
+              }
+            : null,
+    ].filter(Boolean) as { label: string; value: string; icon: string }[];
+
+    if (stats.length === 0) return null;
+
+    return (
+        <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-neutral-content/10 border-t border-neutral-content/10 mt-8">
+            {stats.map((stat, i) => {
+                const iconStyle = ICON_STYLES[i % ICON_STYLES.length];
+                return (
+                    <div
+                        key={stat.label}
+                        className="scroll-reveal fade-up stat-block flex items-center gap-3 px-4 py-4"
+                    >
+                        <div
+                            className={`w-10 h-10 flex items-center justify-center shrink-0 ${iconStyle}`}
+                        >
+                            <i className={`${stat.icon} text-base`} />
+                        </div>
+                        <div>
+                            <span className="text-xl font-black text-base-content leading-none block">
+                                {stat.value}
+                            </span>
+                            <span className="text-xs font-bold uppercase tracking-[0.16em] text-base-content/40 leading-none">
+                                {stat.label}
+                            </span>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/[slug]/page.tsx b/apps/candidate/src/app/(public)/companies/[slug]/page.tsx
new file mode 100644
index 000000000..caa41d13e
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/[slug]/page.tsx
@@ -0,0 +1,92 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { apiClient } from "@/lib/api-client";
+import { buildCanonical, CANDIDATE_BASE_URL } from "@/lib/seo";
+import CompanyProfileClient from "./company-profile-client";
+import type { PublicCompany } from "../types";
+
+interface Props {
+    params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+    const { slug } = await params;
+
+    try {
+        const response = await apiClient.get<{ data: PublicCompany }>(
+            `/public/companies/${slug}`,
+        );
+        const company = response.data;
+        const title = company.tagline
+            ? `${company.name} - ${company.tagline}`
+            : `${company.name} | Companies Hiring`;
+        const description =
+            company.description?.substring(0, 160) ||
+            `View ${company.name}'s company profile and open roles on Applicant Network.`;
+
+        return {
+            title,
+            description,
+            openGraph: {
+                title,
+                description,
+                url: `${CANDIDATE_BASE_URL}/companies/${slug}`,
+                ...(company.logo_url
+                    ? { images: [{ url: company.logo_url }] }
+                    : {}),
+            },
+            ...buildCanonical(`/companies/${slug}`),
+        };
+    } catch {
+        return { title: "Company Not Found" };
+    }
+}
+
+export default async function CompanyDetailPage({ params }: Props) {
+    const { slug } = await params;
+    let company: PublicCompany;
+
+    try {
+        const response = await apiClient.get<{ data: PublicCompany }>(
+            `/public/companies/${slug}`,
+        );
+        company = response.data;
+    } catch {
+        notFound();
+    }
+
+    const jsonLd = {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        name: company.name,
+        url:
+            company.website ||
+            `${CANDIDATE_BASE_URL}/companies/${slug}`,
+        description: company.description || undefined,
+        ...(company.logo_url ? { logo: company.logo_url } : {}),
+        ...(company.headquarters_location
+            ? {
+                  address: {
+                      "@type": "PostalAddress",
+                      addressLocality: company.headquarters_location,
+                  },
+              }
+            : {}),
+        ...(company.founded_year
+            ? { foundingDate: String(company.founded_year) }
+            : {}),
+        ...(company.linkedin_url
+            ? { sameAs: [company.linkedin_url] }
+            : {}),
+    };
+
+    return (
+        <>
+            <script
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+            />
+            <CompanyProfileClient company={company} />
+        </>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/[slug]/sidebar.tsx b/apps/candidate/src/app/(public)/companies/[slug]/sidebar.tsx
new file mode 100644
index 000000000..f73749b91
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/[slug]/sidebar.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import type { PublicCompany, PublicCompanyProfile } from "../types";
+
+interface SidebarProps {
+    company: PublicCompany;
+    profile: PublicCompanyProfile | null;
+}
+
+function extractDomain(url: string): string {
+    try {
+        return new URL(url).hostname.replace("www.", "");
+    } catch {
+        return url;
+    }
+}
+
+export default function Sidebar({ company, profile }: SidebarProps) {
+    const linkItems = [
+        company.website
+            ? {
+                  icon: "fa-duotone fa-regular fa-globe",
+                  label: "Website",
+                  value: extractDomain(company.website),
+                  href: company.website,
+              }
+            : null,
+        company.linkedin_url
+            ? {
+                  icon: "fa-brands fa-linkedin-in",
+                  label: "LinkedIn",
+                  value: "LinkedIn",
+                  href: company.linkedin_url,
+              }
+            : null,
+        company.glassdoor_url
+            ? {
+                  icon: "fa-duotone fa-regular fa-star",
+                  label: "Glassdoor",
+                  value: "Glassdoor",
+                  href: company.glassdoor_url,
+              }
+            : null,
+        company.twitter_url
+            ? {
+                  icon: "fa-brands fa-x-twitter",
+                  label: "Twitter/X",
+                  value: "Twitter/X",
+                  href: company.twitter_url,
+              }
+            : null,
+    ].filter(Boolean) as {
+        icon: string;
+        label: string;
+        value: string;
+        href: string;
+    }[];
+
+    const reputation = profile?.reputation;
+
+    return (
+        <aside className="space-y-6">
+            {/* Links card */}
+            {linkItems.length > 0 && (
+                <div className="scroll-reveal fade-up sidebar-card bg-base-200 border border-base-300 border-l-4 border-l-primary">
+                    <div className="px-6 py-4 border-b border-base-300">
+                        <p className="text-xs font-bold uppercase tracking-[0.22em] text-base-content/40">
+                            Links
+                        </p>
+                    </div>
+                    <div className="divide-y divide-base-300">
+                        {linkItems.map((item) => (
+                            <a
+                                key={item.label}
+                                href={item.href}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center gap-4 px-6 py-4 hover:bg-base-300/50 transition-colors"
+                            >
+                                <div className="w-8 h-8 bg-primary/10 flex items-center justify-center shrink-0">
+                                    <i
+                                        className={`${item.icon} text-primary text-xs`}
+                                    />
+                                </div>
+                                <div className="min-w-0">
+                                    <p className="text-xs font-bold uppercase tracking-[0.18em] text-base-content/30 mb-0.5">
+                                        {item.label}
+                                    </p>
+                                    <p className="text-sm font-semibold text-base-content truncate">
+                                        {item.value}
+                                    </p>
+                                </div>
+                                <i className="fa-duotone fa-regular fa-arrow-up-right-from-square text-xs text-base-content/20 ml-auto" />
+                            </a>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Quick Stats card */}
+            <div className="scroll-reveal fade-up sidebar-card bg-base-200 border border-base-300">
+                <div className="px-6 py-4 border-b border-base-300">
+                    <p className="text-xs font-bold uppercase tracking-[0.22em] text-base-content/40">
+                        Quick Stats
+                    </p>
+                </div>
+                <div className="divide-y divide-base-300">
+                    <div className="flex items-center justify-between px-6 py-4">
+                        <span className="text-sm text-base-content/50">
+                            Open Roles
+                        </span>
+                        <span className="text-sm font-black text-base-content">
+                            {company.open_roles_count}
+                        </span>
+                    </div>
+                    {company.company_size && (
+                        <div className="flex items-center justify-between px-6 py-4">
+                            <span className="text-sm text-base-content/50">
+                                Company Size
+                            </span>
+                            <span className="text-sm font-black text-base-content">
+                                {company.company_size}
+                            </span>
+                        </div>
+                    )}
+                    {reputation && (
+                        <div className="flex items-center justify-between px-6 py-4">
+                            <span className="text-sm text-base-content/50">
+                                Reputation
+                            </span>
+                            <span className="text-sm font-black text-base-content capitalize">
+                                {reputation.reputation_tier}
+                            </span>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Industry card */}
+            {company.industry && (
+                <div className="scroll-reveal fade-up sidebar-card bg-base-200 border border-base-300">
+                    <div className="px-6 py-4 border-b border-base-300">
+                        <p className="text-xs font-bold uppercase tracking-[0.22em] text-base-content/40">
+                            Industry
+                        </p>
+                    </div>
+                    <div className="flex items-center gap-3 px-6 py-4">
+                        <i className="fa-duotone fa-regular fa-industry text-xs text-accent" />
+                        <span className="text-sm text-base-content/60">
+                            {company.industry}
+                        </span>
+                    </div>
+                </div>
+            )}
+        </aside>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/[slug]/tabs/about-tab.tsx b/apps/candidate/src/app/(public)/companies/[slug]/tabs/about-tab.tsx
new file mode 100644
index 000000000..fd079990d
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/[slug]/tabs/about-tab.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import type { PublicCompany } from "../../types";
+
+interface AboutTabProps {
+    company: PublicCompany;
+}
+
+export function AboutTab({ company }: AboutTabProps) {
+    return (
+        <div className="space-y-10">
+            {/* Description */}
+            <div className="scroll-reveal fade-up profile-section border-l-4 border-l-primary pl-6">
+                <p className="text-xs font-bold uppercase tracking-[0.22em] text-base-content/30 mb-3">
+                    About {company.name}
+                </p>
+                {company.description ? (
+                    <p className="text-base text-base-content/70 leading-relaxed">
+                        {company.description}
+                    </p>
+                ) : (
+                    <p className="text-base text-base-content/40 italic">
+                        This company hasn&apos;t added a description yet.
+                    </p>
+                )}
+            </div>
+
+            {/* Tagline highlight */}
+            {company.tagline && (
+                <div className="scroll-reveal fade-up profile-section bg-primary/5 border border-primary/10 px-6 py-5">
+                    <i className="fa-duotone fa-regular fa-quote-left text-xl text-primary/30 mb-3 block" />
+                    <p className="text-lg font-bold text-base-content/80 italic leading-relaxed">
+                        &ldquo;{company.tagline}&rdquo;
+                    </p>
+                </div>
+            )}
+
+            {/* Company Details */}
+            <div className="scroll-reveal fade-up profile-section">
+                <p className="text-xs font-bold uppercase tracking-[0.22em] text-base-content/30 mb-4">
+                    Company Details
+                </p>
+                <div className="grid grid-cols-2 gap-4">
+                    {company.industry && (
+                        <div className="bg-base-200 border border-base-300 px-4 py-3">
+                            <p className="text-xs font-bold uppercase tracking-wider text-base-content/30 mb-1">
+                                Industry
+                            </p>
+                            <p className="text-sm font-semibold text-base-content/70">
+                                {company.industry}
+                            </p>
+                        </div>
+                    )}
+                    {company.company_size && (
+                        <div className="bg-base-200 border border-base-300 px-4 py-3">
+                            <p className="text-xs font-bold uppercase tracking-wider text-base-content/30 mb-1">
+                                Size
+                            </p>
+                            <p className="text-sm font-semibold text-base-content/70">
+                                {company.company_size}
+                            </p>
+                        </div>
+                    )}
+                    {company.stage && (
+                        <div className="bg-base-200 border border-base-300 px-4 py-3">
+                            <p className="text-xs font-bold uppercase tracking-wider text-base-content/30 mb-1">
+                                Stage
+                            </p>
+                            <p className="text-sm font-semibold text-base-content/70">
+                                {company.stage}
+                            </p>
+                        </div>
+                    )}
+                    {company.founded_year && (
+                        <div className="bg-base-200 border border-base-300 px-4 py-3">
+                            <p className="text-xs font-bold uppercase tracking-wider text-base-content/30 mb-1">
+                                Founded
+                            </p>
+                            <p className="text-sm font-semibold text-base-content/70">
+                                {company.founded_year}
+                            </p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/[slug]/tabs/culture-tab.tsx b/apps/candidate/src/app/(public)/companies/[slug]/tabs/culture-tab.tsx
new file mode 100644
index 000000000..b1e4b235e
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/[slug]/tabs/culture-tab.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import type { PublicCompanyProfile } from "../../types";
+import { BaselBadge } from "@splits-network/basel-ui";
+
+interface CultureTabProps {
+    profile: PublicCompanyProfile | null;
+}
+
+export function CultureTab({ profile }: CultureTabProps) {
+    const perks = profile?.perks || [];
+    const cultureTags = profile?.culture_tags || [];
+    const skills = profile?.skills || [];
+
+    const hasData = perks.length > 0 || cultureTags.length > 0 || skills.length > 0;
+
+    if (!hasData) {
+        return (
+            <div className="scroll-reveal fade-up profile-section text-center py-16">
+                <i className="fa-duotone fa-regular fa-heart text-4xl text-base-content/15 mb-4 block" />
+                <p className="text-lg font-black text-base-content/60 mb-2">
+                    Culture Info Coming Soon
+                </p>
+                <p className="text-sm text-base-content/40 max-w-sm mx-auto">
+                    This company hasn&apos;t added culture, perks, or skills
+                    information yet.
+                </p>
+            </div>
+        );
+    }
+
+    // Group perks by category
+    const perksByCategory = perks.reduce(
+        (acc, perk) => {
+            const cat = perk.category || "Other";
+            if (!acc[cat]) acc[cat] = [];
+            acc[cat].push(perk);
+            return acc;
+        },
+        {} as Record<string, typeof perks>,
+    );
+
+    // Group culture tags by category
+    const tagsByCategory = cultureTags.reduce(
+        (acc, tag) => {
+            const cat = tag.category || "Other";
+            if (!acc[cat]) acc[cat] = [];
+            acc[cat].push(tag);
+            return acc;
+        },
+        {} as Record<string, typeof cultureTags>,
+    );
+
+    return (
+        <div className="space-y-10">
+            {/* Culture Tags */}
+            {cultureTags.length > 0 && (
+                <div className="scroll-reveal fade-up profile-section">
+                    <p className="text-xs font-bold uppercase tracking-[0.22em] text-base-content/30 mb-4">
+                        Culture & Values
+                    </p>
+                    <div className="space-y-4">
+                        {Object.entries(tagsByCategory).map(
+                            ([category, tags]) => (
+                                <div key={category}>
+                                    <p className="text-xs font-semibold text-base-content/40 mb-2 capitalize">
+                                        {category}
+                                    </p>
+                                    <div className="flex flex-wrap gap-1.5">
+                                        {tags.map((tag) => (
+                                            <BaselBadge
+                                                key={tag.id}
+                                                color="primary"
+                                                variant="soft"
+                                                size="sm"
+                                            >
+                                                {tag.name}
+                                            </BaselBadge>
+                                        ))}
+                                    </div>
+                                </div>
+                            ),
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* Perks */}
+            {perks.length > 0 && (
+                <div className="scroll-reveal fade-up profile-section">
+                    <p className="text-xs font-bold uppercase tracking-[0.22em] text-base-content/30 mb-4">
+                        Perks & Benefits
+                    </p>
+                    <div className="space-y-4">
+                        {Object.entries(perksByCategory).map(
+                            ([category, categoryPerks]) => (
+                                <div key={category}>
+                                    <p className="text-xs font-semibold text-base-content/40 mb-2 capitalize">
+                                        {category}
+                                    </p>
+                                    <div className="flex flex-wrap gap-1.5">
+                                        {categoryPerks.map((perk) => (
+                                            <BaselBadge
+                                                key={perk.id}
+                                                color="secondary"
+                                                variant="soft"
+                                                size="sm"
+                                            >
+                                                {perk.name}
+                                            </BaselBadge>
+                                        ))}
+                                    </div>
+                                </div>
+                            ),
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* Tech Skills */}
+            {skills.length > 0 && (
+                <div className="scroll-reveal fade-up profile-section">
+                    <p className="text-xs font-bold uppercase tracking-[0.22em] text-base-content/30 mb-4">
+                        Tech Stack & Skills
+                    </p>
+                    <div className="flex flex-wrap gap-1.5">
+                        {skills.map((skill) => (
+                            <BaselBadge
+                                key={skill.id}
+                                color="accent"
+                                variant="soft"
+                                size="sm"
+                            >
+                                {skill.name}
+                            </BaselBadge>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/[slug]/tabs/open-jobs-tab.tsx b/apps/candidate/src/app/(public)/companies/[slug]/tabs/open-jobs-tab.tsx
new file mode 100644
index 000000000..64a5183e4
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/[slug]/tabs/open-jobs-tab.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { apiClient } from "@/lib/api-client";
+import type { PublicCompany } from "../../types";
+import type { Job } from "@/app/(public)/jobs/types";
+import type { StandardListResponse } from "@splits-network/shared-types";
+import { GridCard } from "@/app/(public)/jobs/components/grid/grid-card";
+
+interface OpenJobsTabProps {
+    company: PublicCompany;
+}
+
+export function OpenJobsTab({ company }: OpenJobsTabProps) {
+    const [jobs, setJobs] = useState<Job[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [total, setTotal] = useState(0);
+    const [page, setPage] = useState(1);
+    const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+    const limit = 20;
+
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        apiClient
+            .get<StandardListResponse<Job>>(
+                `/public/companies/${company.slug}/jobs`,
+                { params: { page, limit } },
+            )
+            .then((res) => {
+                if (!cancelled) {
+                    setJobs(res.data || []);
+                    setTotal(res.pagination?.total || 0);
+                }
+            })
+            .catch(() => {
+                if (!cancelled) setJobs([]);
+            })
+            .finally(() => {
+                if (!cancelled) setLoading(false);
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [company.slug, page]);
+
+    const totalPages = Math.ceil(total / limit);
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center py-16">
+                <span className="loading loading-spinner loading-md text-primary" />
+            </div>
+        );
+    }
+
+    if (jobs.length === 0) {
+        return (
+            <div className="scroll-reveal fade-up profile-section text-center py-16">
+                <i className="fa-duotone fa-regular fa-briefcase text-4xl text-base-content/15 mb-4 block" />
+                <p className="text-lg font-black text-base-content/60 mb-2">
+                    No Open Roles
+                </p>
+                <p className="text-sm text-base-content/40 max-w-sm mx-auto">
+                    {company.name} doesn&apos;t have any open positions right
+                    now. Check back soon.
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-4">
+            <p className="text-xs font-bold uppercase tracking-[0.22em] text-base-content/30 mb-4">
+                {total} Open Role{total !== 1 ? "s" : ""}
+            </p>
+
+            <div className="grid gap-4 grid-cols-1">
+                {jobs.map((job) => (
+                    <GridCard
+                        key={job.id}
+                        job={job}
+                        isSelected={selectedJobId === job.id}
+                        onSelect={() => setSelectedJobId(job.id)}
+                    />
+                ))}
+            </div>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+                <div className="flex items-center justify-center gap-2 pt-4">
+                    <button
+                        className="btn btn-ghost btn-sm"
+                        disabled={page <= 1}
+                        onClick={() => setPage((p) => p - 1)}
+                    >
+                        <i className="fa-duotone fa-regular fa-chevron-left text-xs" />
+                    </button>
+                    <span className="text-sm text-base-content/50">
+                        Page {page} of {totalPages}
+                    </span>
+                    <button
+                        className="btn btn-ghost btn-sm"
+                        disabled={page >= totalPages}
+                        onClick={() => setPage((p) => p + 1)}
+                    >
+                        <i className="fa-duotone fa-regular fa-chevron-right text-xs" />
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/companies-animator.tsx b/apps/candidate/src/app/(public)/companies/companies-animator.tsx
new file mode 100644
index 000000000..3e5723369
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/companies-animator.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { useRef, type ReactNode } from "react";
+import { useScrollReveal } from "@splits-network/basel-ui";
+
+export function CompaniesAnimator({ children }: { children: ReactNode }) {
+    const mainRef = useRef<HTMLElement>(null);
+    useScrollReveal(mainRef);
+
+    return (
+        <main ref={mainRef} className="hero-entrance">
+            {children}
+        </main>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/companies-client.tsx b/apps/candidate/src/app/(public)/companies/companies-client.tsx
new file mode 100644
index 000000000..908a9ddeb
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/companies-client.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { useMemo, useRef, Suspense } from "react";
+import type { StandardListResponse } from "@splits-network/shared-types";
+import { useStandardList } from "@/hooks/use-standard-list";
+import { PaginationControls } from "@/components/standard-lists/pagination-controls";
+import { LoadingState } from "@/components/standard-lists/loading-state";
+import { ErrorState } from "@/components/standard-lists/error-state";
+import { BaselEmptyState } from "@splits-network/basel-ui";
+import type { PublicCompany, PublicCompanyFilters } from "./types";
+import { CompaniesAnimator } from "./companies-animator";
+import { HeaderSection } from "./components/header-section";
+import { ControlsBar } from "./components/controls-bar";
+import { GridView } from "./components/grid/grid-view";
+
+interface CompaniesClientProps {
+    initialData?: PublicCompany[];
+    initialPagination?: StandardListResponse<PublicCompany>["pagination"];
+}
+
+function CompaniesClientInner({
+    initialData = [],
+    initialPagination,
+}: CompaniesClientProps) {
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    const {
+        data: companies,
+        loading,
+        error,
+        pagination,
+        searchInput,
+        setSearchInput,
+        page,
+        limit,
+        totalPages,
+        total,
+        goToPage,
+        setLimit,
+        refresh,
+    } = useStandardList<PublicCompany, PublicCompanyFilters>({
+        endpoint: "/public/companies",
+        requireAuth: false,
+        defaultLimit: 25,
+        defaultSortBy: "name",
+        defaultSortOrder: "asc",
+        syncToUrl: true,
+        initialData,
+        initialPagination,
+    });
+
+    const stats = useMemo(() => {
+        const hiring = companies.filter((c) => c.open_roles_count > 0).length;
+        const totalRoles = companies.reduce(
+            (sum, c) => sum + c.open_roles_count,
+            0,
+        );
+        return {
+            total: pagination?.total || companies.length,
+            hiring,
+            totalRoles,
+        };
+    }, [companies, pagination]);
+
+    return (
+        <CompaniesAnimator>
+            <HeaderSection
+                total={stats.total}
+                hiring={stats.hiring}
+                totalRoles={stats.totalRoles}
+            />
+
+            <ControlsBar
+                resultCount={companies.length}
+                totalCount={total}
+                loading={loading}
+                refresh={refresh}
+            />
+
+            <section
+                className="content-area"
+                style={{
+                    opacity: loading ? 0 : 1,
+                    transition: "opacity 0.4s ease",
+                }}
+            >
+                <div className="container mx-auto px-6 lg:px-12 py-8">
+                    {loading ? (
+                        <LoadingState />
+                    ) : error ? (
+                        <ErrorState message={error} onRetry={refresh} />
+                    ) : companies.length === 0 ? (
+                        <BaselEmptyState
+                            icon="fa-duotone fa-regular fa-buildings"
+                            title="No companies found"
+                            subtitle={
+                                searchInput
+                                    ? "Try adjusting your search"
+                                    : "Check back soon for new companies"
+                            }
+                            actions={
+                                searchInput
+                                    ? [
+                                          {
+                                              label: "Clear Search",
+                                              onClick: () =>
+                                                  setSearchInput(""),
+                                              style: "btn-primary",
+                                          },
+                                      ]
+                                    : []
+                            }
+                        />
+                    ) : (
+                        <div ref={contentRef}>
+                            <GridView companies={companies} />
+                        </div>
+                    )}
+
+                    {!loading && companies.length > 0 && totalPages > 1 && (
+                        <PaginationControls
+                            page={page}
+                            totalPages={totalPages}
+                            total={total}
+                            limit={limit}
+                            onPageChange={goToPage}
+                            onLimitChange={setLimit}
+                            loading={loading}
+                        />
+                    )}
+                </div>
+            </section>
+        </CompaniesAnimator>
+    );
+}
+
+export default function CompaniesClient(props: CompaniesClientProps) {
+    return (
+        <Suspense
+            fallback={
+                <div className="min-h-screen bg-base-100 flex items-center justify-center">
+                    <span className="loading loading-spinner loading-lg text-primary" />
+                </div>
+            }
+        >
+            <CompaniesClientInner {...props} />
+        </Suspense>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/components/controls-bar.tsx b/apps/candidate/src/app/(public)/companies/components/controls-bar.tsx
new file mode 100644
index 000000000..20e74c788
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/components/controls-bar.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import {
+    BaselControlsBarShell,
+    BaselResultsCount,
+    BaselRefreshButton,
+} from "@splits-network/basel-ui";
+
+interface ControlsBarProps {
+    resultCount: number;
+    totalCount: number;
+    loading: boolean;
+    refresh: () => void;
+}
+
+export function ControlsBar({
+    resultCount,
+    totalCount,
+    loading,
+    refresh,
+}: ControlsBarProps) {
+    return (
+        <BaselControlsBarShell
+            statusLeft={
+                <BaselResultsCount count={resultCount} total={totalCount} />
+            }
+            statusRight={
+                <BaselRefreshButton onClick={refresh} loading={loading} />
+            }
+        />
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/components/grid/grid-card.tsx b/apps/candidate/src/app/(public)/companies/components/grid/grid-card.tsx
new file mode 100644
index 000000000..3979e6ed0
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/components/grid/grid-card.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import Link from "next/link";
+import type { PublicCompany } from "../../types";
+import { companyLocation, companyInitials } from "../../types";
+import { BaselAvatar, BaselBadge } from "@splits-network/basel-ui";
+
+interface GridCardProps {
+    company: PublicCompany;
+}
+
+export function GridCard({ company }: GridCardProps) {
+    const location = companyLocation(company);
+    const initials = companyInitials(company.name);
+    const href = company.slug ? `/companies/${company.slug}` : "#";
+
+    const displayTagline =
+        company.tagline ||
+        (company.industry
+            ? `${company.industry} company`
+            : company.description?.slice(0, 120) || null);
+
+    const metaItems: {
+        icon: string;
+        color: string;
+        value: string;
+        muted: boolean;
+        tooltip: string;
+    }[] = [
+        {
+            icon: "fa-users",
+            color: "text-primary",
+            value: company.company_size || "\u2014",
+            muted: !company.company_size,
+            tooltip: "Company size",
+        },
+        {
+            icon: "fa-calendar",
+            color: "text-accent",
+            value: company.founded_year
+                ? `Est. ${company.founded_year}`
+                : "\u2014",
+            muted: !company.founded_year,
+            tooltip: "Founded",
+        },
+        {
+            icon: "fa-briefcase",
+            color: "text-secondary",
+            value: `${company.open_roles_count} open`,
+            muted: company.open_roles_count === 0,
+            tooltip: "Open roles",
+        },
+    ];
+
+    return (
+        <Link
+            href={href}
+            className="group bg-base-100 border border-base-300 border-l-4 border-l-primary w-full flex flex-col transition-colors hover:border-base-content/20"
+        >
+            {/* Header Band */}
+            <div className="bg-base-300 px-5 pt-4 pb-4">
+                <div className="flex items-start gap-3">
+                    <div className="shrink-0 mt-0.5">
+                        <BaselAvatar
+                            initials={initials}
+                            src={company.logo_url}
+                            alt={`${company.name} logo`}
+                            size="md"
+                        />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <p className="text-sm font-bold uppercase tracking-[0.15em] text-primary mb-0.5 truncate">
+                            {company.industry || "Company"}
+                        </p>
+                        <h3 className="text-lg font-black tracking-tight leading-tight text-base-content truncate group-hover:text-primary transition-colors">
+                            {company.name}
+                        </h3>
+                        <p
+                            className={`text-sm truncate mt-0.5 ${location ? "text-base-content/50" : "text-base-content/30"}`}
+                        >
+                            {location || "Location not specified"}
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Inline metadata */}
+            <div className="px-5 py-2.5 border-b border-base-300 text-sm flex flex-wrap items-center gap-x-3 gap-y-1">
+                {metaItems.map((item, i) => (
+                    <span
+                        key={i}
+                        className={`tooltip tooltip-bottom flex items-center gap-1 ${item.muted ? "text-base-content/30" : "text-base-content/50"}`}
+                        data-tip={item.tooltip}
+                    >
+                        <i
+                            className={`fa-duotone fa-regular ${item.icon} ${item.muted ? "text-base-content/20" : item.color} text-xs`}
+                        />
+                        <span className="truncate">{item.value}</span>
+                    </span>
+                ))}
+            </div>
+
+            {/* About snippet */}
+            <div className="px-5 py-3 border-b border-base-300">
+                {displayTagline ? (
+                    <p className="text-sm text-base-content/60 leading-relaxed line-clamp-2">
+                        {displayTagline}
+                    </p>
+                ) : (
+                    <p className="text-sm text-base-content/30">
+                        No description provided
+                    </p>
+                )}
+            </div>
+
+            {/* Badge row */}
+            <div className="px-5 py-3 flex-1">
+                <div className="flex flex-wrap gap-1.5">
+                    {company.stage && (
+                        <BaselBadge
+                            color="primary"
+                            variant="soft-outline"
+                            size="sm"
+                            icon="fa-chart-line"
+                        >
+                            {company.stage}
+                        </BaselBadge>
+                    )}
+                    {company.open_roles_count > 0 && (
+                        <BaselBadge
+                            color="secondary"
+                            variant="soft-outline"
+                            size="sm"
+                            icon="fa-briefcase"
+                        >
+                            {company.open_roles_count} Open Role
+                            {company.open_roles_count !== 1 ? "s" : ""}
+                        </BaselBadge>
+                    )}
+                    {company.industry && (
+                        <BaselBadge variant="soft" color="neutral" size="sm">
+                            {company.industry}
+                        </BaselBadge>
+                    )}
+                    {!company.stage &&
+                        company.open_roles_count === 0 &&
+                        !company.industry && (
+                            <span className="text-sm text-base-content/30">
+                                No details listed
+                            </span>
+                        )}
+                </div>
+            </div>
+
+            {/* Footer: CTA */}
+            <div className="px-5 py-3 border-t border-base-300">
+                <span className="text-sm font-semibold text-primary group-hover:text-primary/70 transition-colors flex items-center gap-1">
+                    View Open Roles
+                    <i className="fa-duotone fa-regular fa-arrow-right text-xs" />
+                </span>
+            </div>
+        </Link>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/components/grid/grid-view.tsx b/apps/candidate/src/app/(public)/companies/components/grid/grid-view.tsx
new file mode 100644
index 000000000..daf217b0c
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/components/grid/grid-view.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import type { PublicCompany } from "../../types";
+import { GridCard } from "./grid-card";
+
+interface GridViewProps {
+    companies: PublicCompany[];
+}
+
+export function GridView({ companies }: GridViewProps) {
+    return (
+        <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {companies.map((company) => (
+                <GridCard key={company.id} company={company} />
+            ))}
+        </div>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/components/header-section.tsx b/apps/candidate/src/app/(public)/companies/components/header-section.tsx
new file mode 100644
index 000000000..4067dfa2a
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/components/header-section.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+interface HeaderSectionProps {
+    total: number;
+    hiring: number;
+    totalRoles: number;
+}
+
+export function HeaderSection({
+    total,
+    hiring,
+    totalRoles,
+}: HeaderSectionProps) {
+    return (
+        <section className="relative bg-base-300 text-base-content py-16 lg:py-20">
+            <div className="container mx-auto px-6 lg:px-12">
+                <div className="max-w-4xl">
+                    {/* Kicker */}
+                    <p className="hero-kicker text-sm font-semibold uppercase tracking-[0.2em] text-secondary mb-6 scroll-reveal fade-up">
+                        <i className="fa-duotone fa-regular fa-buildings mr-2" />
+                        Companies
+                    </p>
+
+                    {/* Headline */}
+                    <h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-black leading-[0.92] tracking-tight mb-6">
+                        <span className="hero-headline-word inline-block scroll-reveal fade-up">
+                            Discover{" "}
+                        </span>
+                        <span className="hero-headline-word inline-block scroll-reveal fade-up text-primary">
+                            employers.
+                        </span>
+                    </h1>
+
+                    {/* Subtitle */}
+                    <p className="hero-subtitle text-lg text-base-content/60 leading-relaxed max-w-xl mb-10 scroll-reveal fade-up">
+                        Browse companies actively hiring through the Applicant
+                        Network. Explore culture, perks, and open roles.
+                    </p>
+
+                    {/* Stats */}
+                    <div className="header-stat-bar flex flex-wrap gap-8 mt-8 scroll-reveal fade-up">
+                        <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 bg-primary flex items-center justify-center">
+                                <i className="fa-duotone fa-regular fa-buildings text-primary-content" />
+                            </div>
+                            <div>
+                                <div className="text-2xl font-black">
+                                    {total}
+                                </div>
+                                <div className="text-xs uppercase tracking-wider opacity-60">
+                                    Companies
+                                </div>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 bg-accent flex items-center justify-center">
+                                <i className="fa-duotone fa-regular fa-briefcase text-accent-content" />
+                            </div>
+                            <div>
+                                <div className="text-2xl font-black">
+                                    {hiring}
+                                </div>
+                                <div className="text-xs uppercase tracking-wider opacity-60">
+                                    Actively Hiring
+                                </div>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 bg-secondary flex items-center justify-center">
+                                <i className="fa-duotone fa-regular fa-clipboard-list text-secondary-content" />
+                            </div>
+                            <div>
+                                <div className="text-2xl font-black">
+                                    {totalRoles}
+                                </div>
+                                <div className="text-xs uppercase tracking-wider opacity-60">
+                                    Open Roles
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Diagonal clip-path accent */}
+            <div
+                className="absolute top-0 right-0 bottom-0 w-1/3 bg-primary/5 hidden lg:block"
+                style={{
+                    clipPath: "polygon(20% 0, 100% 0, 100% 100%, 0% 100%)",
+                }}
+            />
+        </section>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/page.tsx b/apps/candidate/src/app/(public)/companies/page.tsx
new file mode 100644
index 000000000..06bea1aec
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/page.tsx
@@ -0,0 +1,62 @@
+import type { Metadata } from "next";
+import type { StandardListResponse } from "@splits-network/shared-types";
+import { Suspense } from "react";
+import { apiClient } from "@/lib/api-client";
+import { buildCanonical } from "@/lib/seo";
+import CompaniesClient from "./companies-client";
+import type { PublicCompany } from "./types";
+
+export const metadata: Metadata = {
+    title: "Companies Hiring | Applicant Network",
+    description:
+        "Browse companies actively hiring through the Applicant Network. Discover open roles, company culture, and perks.",
+    openGraph: {
+        title: "Companies Hiring | Applicant Network",
+        description:
+            "Browse companies actively hiring through the Applicant Network. Discover open roles, company culture, and perks.",
+        url: "https://applicant.network/companies",
+    },
+    ...buildCanonical("/companies"),
+};
+
+export const revalidate = 60;
+
+export default async function CompaniesPage() {
+    let initialData: PublicCompany[] | undefined;
+    let initialPagination:
+        | StandardListResponse<PublicCompany>["pagination"]
+        | undefined;
+
+    try {
+        const response = await apiClient.get<
+            StandardListResponse<PublicCompany>
+        >("/public/companies", {
+            params: { limit: 24, sort_by: "name", sort_order: "asc" },
+        });
+        initialData = response.data ?? [];
+        initialPagination = response.pagination;
+    } catch {
+        initialData = undefined;
+        initialPagination = undefined;
+    }
+
+    return (
+        <Suspense
+            fallback={
+                <div className="min-h-screen bg-base-100 flex items-center justify-center">
+                    <div className="text-center">
+                        <span className="loading loading-spinner loading-lg text-primary mb-4 block" />
+                        <span className="text-sm uppercase tracking-[0.2em] font-bold text-base-content/40">
+                            Loading companies...
+                        </span>
+                    </div>
+                </div>
+            }
+        >
+            <CompaniesClient
+                initialData={initialData}
+                initialPagination={initialPagination}
+            />
+        </Suspense>
+    );
+}
diff --git a/apps/candidate/src/app/(public)/companies/types.ts b/apps/candidate/src/app/(public)/companies/types.ts
new file mode 100644
index 000000000..959604e0a
--- /dev/null
+++ b/apps/candidate/src/app/(public)/companies/types.ts
@@ -0,0 +1,56 @@
+export interface PublicCompany {
+    id: string;
+    name: string;
+    slug: string;
+    tagline?: string | null;
+    description?: string | null;
+    logo_url?: string | null;
+    website?: string | null;
+    industry?: string | null;
+    company_size?: string | null;
+    headquarters_location?: string | null;
+    stage?: string | null;
+    founded_year?: number | null;
+    linkedin_url?: string | null;
+    glassdoor_url?: string | null;
+    twitter_url?: string | null;
+    open_roles_count: number;
+    created_at: string;
+}
+
+export interface PublicCompanyFilters {
+    industry?: string;
+    company_size?: string;
+    stage?: string;
+}
+
+export interface PublicCompanyProfile {
+    company: PublicCompany;
+    perks: { id: string; name: string; category: string }[];
+    culture_tags: { id: string; name: string; category: string }[];
+    skills: { id: string; name: string }[];
+    reputation: {
+        reputation_score: number;
+        reputation_tier: string;
+        total_hires: number;
+        total_placements: number;
+        hire_rate: number;
+        completion_rate: number;
+    } | null;
+}
+
+export function companyInitials(name: string): string {
+    const words = name.split(" ");
+    const first = words[0]?.[0]?.toUpperCase() || "";
+    const last =
+        words.length > 1
+            ? words[words.length - 1]?.[0]?.toUpperCase() || ""
+            : "";
+    return words.length > 1 ? first + last : first;
+}
+
+export function companyLocation(
+    company: Pick<PublicCompany, "headquarters_location">,
+): string | null {
+    return company.headquarters_location || null;
+}
diff --git a/apps/candidate/src/app/layout.tsx b/apps/candidate/src/app/layout.tsx
index 61f47aaf4..e6913fd3d 100644
--- a/apps/candidate/src/app/layout.tsx
+++ b/apps/candidate/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { auth } from "@clerk/nextjs/server";
 import Header from "@/components/navigation/header";
 import Footer from "@/components/navigation/footer";
 import { getHeaderNav, getFooterNav } from "@/lib/content";
+import { getPlatformStats } from "@/lib/platform-stats";
 import CookieConsent from "@/components/cookie-consent";
 import { ThemeScript, ThemeProvider } from "@splits-network/basel-ui";
 import { DevDebugPanel } from "@/components/dev-debug-panel";
@@ -139,10 +140,11 @@ export default async function RootLayout({
         },
     };
 
-    // Fetch CMS navigation data (ISR cached, 5 min)
-    const [headerNav, footerNav] = await Promise.all([
+    // Fetch CMS navigation data (ISR cached, 5 min) + platform stats (ISR cached, 1 hr)
+    const [headerNav, footerNav, platformStats] = await Promise.all([
         getHeaderNav(),
         getFooterNav(),
+        getPlatformStats(),
     ]);
 
     if (!publishableKey) {
@@ -198,7 +200,7 @@ export default async function RootLayout({
                                         <main className="flex-1">
                                             {children}
                                         </main>
-                                        <Footer footerNav={footerNav} />
+                                        <Footer footerNav={footerNav} platformStats={platformStats} />
                                     </CandidateChatSidebar>
                                     </SupportWidgetWrapper>
                                     <CookieConsent />
diff --git a/apps/candidate/src/components/landing/sections/metrics-section.tsx b/apps/candidate/src/components/landing/sections/metrics-section.tsx
deleted file mode 100644
index 7a048d3f0..000000000
--- a/apps/candidate/src/components/landing/sections/metrics-section.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client";
-
-import { useRef } from "react";
-import { useScrollReveal, useAnimatedCounter } from "@splits-network/basel-ui";
-
-const metrics = [
-    {
-        value: 10000,
-        suffix: "+",
-        label: "Active Job Listings",
-        description: "New roles added daily from top companies",
-        icon: "fa-duotone fa-regular fa-briefcase",
-        color: "primary",
-    },
-    {
-        value: 500,
-        suffix: "+",
-        label: "Companies Hiring",
-        description: "From startups to Fortune 500",
-        icon: "fa-duotone fa-regular fa-building",
-        color: "secondary",
-    },
-    {
-        value: 2000,
-        suffix: "+",
-        label: "Expert Recruiters",
-        description: "Specialized across every industry",
-        icon: "fa-duotone fa-regular fa-users",
-        color: "accent",
-    },
-    {
-        value: 95,
-        suffix: "%",
-        label: "Response Rate",
-        description: "Candidates hear back within 48 hours",
-        icon: "fa-duotone fa-regular fa-comments",
-        color: "success",
-    },
-];
-
-function MetricCard({ metric }: { metric: (typeof metrics)[number] }) {
-    const counterRef = useAnimatedCounter(metric.value, {
-        suffix: metric.suffix,
-    });
-
-    return (
-        <div className="scroll-reveal scale-in bg-base-100 rounded-2xl p-8 text-center shadow-sm">
-            <div
-                className={`scroll-reveal pop-in w-16 h-16 rounded-full bg-${metric.color}/10 flex items-center justify-center mx-auto mb-6`}
-            >
-                <i
-                    className={`${metric.icon} text-2xl text-${metric.color}`}
-                ></i>
-            </div>
-            <span
-                ref={counterRef}
-                className={`block text-4xl md:text-5xl font-bold text-${metric.color} mb-2`}
-            >
-                0{metric.suffix}
-            </span>
-            <div className="font-semibold text-lg mb-1">
-                {metric.label}
-            </div>
-            <div className="text-sm text-base-content/60">
-                {metric.description}
-            </div>
-        </div>
-    );
-}
-
-export function MetricsSection() {
-    const sectionRef = useRef<HTMLElement>(null);
-
-    useScrollReveal(sectionRef);
-
-    return (
-        <section
-            ref={sectionRef}
-            className="py-24 bg-base-200 overflow-hidden"
-        >
-            <div className="container mx-auto px-4">
-                <div className="scroll-reveal fade-up text-center mb-16 max-w-3xl mx-auto">
-                    <p className="text-sm uppercase tracking-wider text-secondary mb-3">
-                        By The Numbers
-                    </p>
-                    <h2 className="text-4xl md:text-5xl font-bold mb-6">
-                        A Growing Network
-                    </h2>
-                    <p className="text-lg text-base-content/70">
-                        Join thousands of candidates finding their next
-                        opportunity through expert recruiters
-                    </p>
-                </div>
-
-                <div className="stagger-children grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
-                    {metrics.map((metric, index) => (
-                        <MetricCard key={index} metric={metric} />
-                    ))}
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/apps/candidate/src/components/navigation/footer.tsx b/apps/candidate/src/components/navigation/footer.tsx
index 18cc095ae..462829864 100644
--- a/apps/candidate/src/components/navigation/footer.tsx
+++ b/apps/candidate/src/components/navigation/footer.tsx
@@ -10,6 +10,7 @@ import type {
     FooterTrustStat,
     FooterLinkItem,
 } from "@splits-network/shared-types";
+import type { PlatformStats } from "@/lib/platform-stats";
 
 // ─── Default Footer Data (fallback when CMS is unavailable) ─────────────────
 
@@ -95,26 +96,35 @@ const DEFAULT_LEGAL_LINKS: FooterLinkItem[] = [
     { label: "Cookie Policy", href: "/cookie-policy" },
 ];
 
-const DEFAULT_TRUST_STATS: FooterTrustStat[] = [
-    { value: "2,847", label: "Recruiters" },
-    { value: "518", label: "Companies" },
-    { value: "12,340", label: "Candidates" },
-    { value: "$42M+", label: "In Placements" },
-];
+function formatStatNumber(n: number): string {
+    return n.toLocaleString();
+}
+
+function buildTrustStats(stats: PlatformStats | null | undefined): FooterTrustStat[] {
+    if (!stats) return [];
+    return [
+        { value: formatStatNumber(stats.active_jobs), label: "Open Positions" },
+        { value: formatStatNumber(stats.total_recruiters), label: "Recruiters" },
+        { value: formatStatNumber(stats.active_companies), label: "Companies Hiring" },
+        { value: formatStatNumber(stats.cumulative_placements), label: "Placements Made" },
+    ];
+}
 
 // ─── Footer Component ───────────────────────────────────────────────────────
 
 export default function Footer({
     footerNav,
+    platformStats,
 }: {
     footerNav?: FooterNavConfig | null;
+    platformStats?: PlatformStats | null;
 }) {
     const [email, setEmail] = useState("");
     const [subscribed, setSubscribed] = useState(false);
 
     const sections = footerNav?.sections ?? DEFAULT_FOOTER_SECTIONS;
     const socialLinks = footerNav?.socialLinks ?? DEFAULT_SOCIAL_LINKS;
-    const trustStats = footerNav?.trustStats ?? DEFAULT_TRUST_STATS;
+    const trustStats = buildTrustStats(platformStats);
     const legalLinks = footerNav?.legalLinks ?? DEFAULT_LEGAL_LINKS;
 
     const handleSubscribe = (e: React.FormEvent) => {
@@ -277,18 +287,20 @@ export default function Footer({
                 </>
             }
             stats={
-                <>
-                    {trustStats.map((stat) => (
-                        <div key={stat.label} className="text-center">
-                            <div className="text-2xl font-black text-primary">
-                                {stat.value}
+                trustStats.length > 0 ? (
+                    <>
+                        {trustStats.map((stat) => (
+                            <div key={stat.label} className="text-center">
+                                <div className="text-2xl font-black text-primary">
+                                    {stat.value}
+                                </div>
+                                <div className="text-[10px] uppercase tracking-widest opacity-40 mt-1">
+                                    {stat.label}
+                                </div>
                             </div>
-                            <div className="text-[10px] uppercase tracking-widest opacity-40 mt-1">
-                                {stat.label}
-                            </div>
-                        </div>
-                    ))}
-                </>
+                        ))}
+                    </>
+                ) : undefined
             }
             bottomBar={
                 <div className="flex flex-col md:flex-row items-center justify-between gap-4">
diff --git a/apps/candidate/src/lib/platform-stats.ts b/apps/candidate/src/lib/platform-stats.ts
new file mode 100644
index 000000000..523bec7a0
--- /dev/null
+++ b/apps/candidate/src/lib/platform-stats.ts
@@ -0,0 +1,24 @@
+const API_BASE =
+    process.env.NEXT_PUBLIC_API_GATEWAY_URL || 'http://localhost:3000';
+
+export interface PlatformStats {
+    active_jobs: number;
+    total_recruiters: number;
+    active_companies: number;
+    cumulative_placements: number;
+    as_of: string | null;
+}
+
+export async function getPlatformStats(): Promise<PlatformStats | null> {
+    try {
+        const res = await fetch(
+            `${API_BASE}/api/v3/stats/views/platform-summary`,
+            { next: { revalidate: 3600 } }
+        );
+        if (!res.ok) return null;
+        const json: { data: PlatformStats } = await res.json();
+        return json.data;
+    } catch {
+        return null;
+    }
+}
diff --git a/docs/admin/candidates.md b/docs/admin/candidates.md
index a04ab342d..201a20f31 100644
--- a/docs/admin/candidates.md
+++ b/docs/admin/candidates.md
@@ -1,3 +1,5 @@
+**COMPLETED**
+
 # Candidates Management
 
 ## Current State
diff --git a/docs/admin/placements.md b/docs/admin/placements.md
index 3d02c736f..99cd2234b 100644
--- a/docs/admin/placements.md
+++ b/docs/admin/placements.md
@@ -1,3 +1,5 @@
+**COMPLETED**
+
 # Placements Management
 
 ## Current State
diff --git a/packages/shared-types/src/models.ts b/packages/shared-types/src/models.ts
index 268e63856..93e7a4db7 100644
--- a/packages/shared-types/src/models.ts
+++ b/packages/shared-types/src/models.ts
@@ -159,6 +159,7 @@ export interface Company {
     id: string;
     identity_organization_id?: string;
     name: string;
+    slug?: string;
     website?: string;
     industry?: string;
     company_size?: string;
@@ -171,6 +172,8 @@ export interface Company {
     linkedin_url?: string;
     twitter_url?: string;
     glassdoor_url?: string;
+    marketplace_visible?: boolean;
+    marketplace_approved_at?: string;
     created_at: Date;
     updated_at: Date;
 }
diff --git a/services/analytics-service/src/jobs/marketplace-health.ts b/services/analytics-service/src/jobs/marketplace-health.ts
index e1479c021..6b25587aa 100644
--- a/services/analytics-service/src/jobs/marketplace-health.ts
+++ b/services/analytics-service/src/jobs/marketplace-health.ts
@@ -31,6 +31,7 @@ export async function computeMarketplaceHealth(supabase: SupabaseClient): Promis
             jobMetrics,
             fraudMetrics,
             disputeMetrics,
+            cumulativeMetrics,
         ] = await Promise.all([
             getPlacementMetrics(supabase, metricDate),
             getApplicationMetrics(supabase, metricDate),
@@ -38,6 +39,7 @@ export async function computeMarketplaceHealth(supabase: SupabaseClient): Promis
             getJobMetrics(supabase, metricDate),
             getFraudMetrics(supabase, metricDate),
             getDisputeMetrics(supabase, metricDate),
+            getCumulativeMetrics(supabase),
         ]);
 
         // Calculate health metrics
@@ -58,6 +60,9 @@ export async function computeMarketplaceHealth(supabase: SupabaseClient): Promis
             avg_fee_per_placement: placementMetrics.total > 0
                 ? placementMetrics.totalFees / placementMetrics.total
                 : 0,
+            active_companies: cumulativeMetrics.activeCompanies,
+            total_recruiters: cumulativeMetrics.totalRecruiters,
+            cumulative_placements: cumulativeMetrics.cumulativePlacements,
             disputed_placements: disputeMetrics.disputed,
             fraud_signals: fraudMetrics.signals,
             recruiter_retention_rate: recruiterMetrics.retentionRate,
@@ -195,6 +200,30 @@ async function getDisputeMetrics(supabase: SupabaseClient, date: string): Promis
     return { disputed: count || 0 };
 }
 
+/**
+ * Get cumulative platform-wide totals (not date-scoped)
+ */
+async function getCumulativeMetrics(supabase: SupabaseClient): Promise<any> {
+    const [recruiters, companies, placements] = await Promise.all([
+        supabase
+            .from('recruiters')
+            .select('*', { count: 'exact', head: true }),
+        supabase
+            .from('companies')
+            .select('id', { count: 'exact', head: true })
+            .gt('id', '00000000-0000-0000-0000-000000000000'), // exclude placeholder rows
+        supabase
+            .from('placements')
+            .select('*', { count: 'exact', head: true }),
+    ]);
+
+    return {
+        totalRecruiters: recruiters.count || 0,
+        activeCompanies: companies.count || 0,
+        cumulativePlacements: placements.count || 0,
+    };
+}
+
 /**
  * Get next day for date range queries
  */
diff --git a/services/analytics-service/src/v3/routes.ts b/services/analytics-service/src/v3/routes.ts
index 578fda90f..4e30b7ba6 100644
--- a/services/analytics-service/src/v3/routes.ts
+++ b/services/analytics-service/src/v3/routes.ts
@@ -27,6 +27,6 @@ export function registerV3Routes(app: FastifyInstance, config: RegisterV3Config)
   registerActivityRoutes(app, config.supabase, config.activityService);
   registerChartRoutes(app, config.supabase, config.chartServiceV2);
   registerMarketplaceMetricRoutes(app, config.supabase);
-  registerStatsRoutes(app, config.statsServiceV2);
+  registerStatsRoutes(app, config.supabase, config.statsServiceV2);
   registerViewRoutes(app, config.supabase);
 }
diff --git a/services/analytics-service/src/v3/stats/repository.ts b/services/analytics-service/src/v3/stats/repository.ts
index f3ff83bba..80d8d31e8 100644
--- a/services/analytics-service/src/v3/stats/repository.ts
+++ b/services/analytics-service/src/v3/stats/repository.ts
@@ -5,11 +5,15 @@
  * The V2 repo has 900+ lines of parallel queries across source tables.
  */
 
+import { SupabaseClient } from '@supabase/supabase-js';
 import { StatsServiceV2 } from '../../v2/stats/service.js';
-import { StatsQueryParams } from './types.js';
+import { PlatformSummary, StatsQueryParams } from './types.js';
 
 export class StatsV3Repository {
-  constructor(private statsServiceV2: StatsServiceV2) {}
+  constructor(
+    private statsServiceV2: StatsServiceV2,
+    private supabase: SupabaseClient,
+  ) {}
 
   async getStats(clerkUserId: string, params: StatsQueryParams) {
     return this.statsServiceV2.getStats(clerkUserId, params);
@@ -22,4 +26,32 @@ export class StatsV3Repository {
   async getTopPerformers(clerkUserId: string) {
     return this.statsServiceV2.getTopPerformers(clerkUserId);
   }
+
+  async getPlatformSummary(): Promise<PlatformSummary> {
+    const { data, error } = await this.supabase
+      .schema('analytics')
+      .from('marketplace_health_daily')
+      .select('active_jobs, total_recruiters, active_companies, cumulative_placements, metric_date')
+      .order('metric_date', { ascending: false })
+      .limit(1)
+      .single();
+
+    if (error || !data) {
+      return {
+        active_jobs: 0,
+        total_recruiters: 0,
+        active_companies: 0,
+        cumulative_placements: 0,
+        as_of: null,
+      };
+    }
+
+    return {
+      active_jobs: data.active_jobs ?? 0,
+      total_recruiters: data.total_recruiters ?? 0,
+      active_companies: data.active_companies ?? 0,
+      cumulative_placements: data.cumulative_placements ?? 0,
+      as_of: data.metric_date,
+    };
+  }
 }
diff --git a/services/analytics-service/src/v3/stats/routes.ts b/services/analytics-service/src/v3/stats/routes.ts
index 07288e5c2..6a8ffb3ac 100644
--- a/services/analytics-service/src/v3/stats/routes.ts
+++ b/services/analytics-service/src/v3/stats/routes.ts
@@ -1,11 +1,13 @@
 /**
  * Stats V3 Routes
  *
- * GET stats (scope-based), platform-activity view, top-performers view.
+ * GET stats (scope-based), platform-activity view, top-performers view,
+ * platform-summary view (public).
  * Views registered before parameterized routes.
  */
 
 import { FastifyInstance } from 'fastify';
+import { SupabaseClient } from '@supabase/supabase-js';
 import { StatsServiceV2 } from '../../v2/stats/service.js';
 import { StatsV3Repository } from './repository.js';
 import { StatsV3Service } from './service.js';
@@ -13,11 +15,18 @@ import { StatsQueryParams, statsQuerySchema } from './types.js';
 
 export function registerStatsRoutes(
   app: FastifyInstance,
+  supabase: SupabaseClient,
   statsServiceV2: StatsServiceV2,
 ) {
-  const repository = new StatsV3Repository(statsServiceV2);
+  const repository = new StatsV3Repository(statsServiceV2, supabase);
   const service = new StatsV3Service(repository);
 
+  // GET /api/v3/stats/views/platform-summary — public, no auth
+  app.get('/api/v3/stats/views/platform-summary', async (_request, reply) => {
+    const data = await service.getPlatformSummary();
+    return reply.send({ data });
+  });
+
   // GET /api/v3/stats/views/platform-activity — admin only
   app.get('/api/v3/stats/views/platform-activity', async (request, reply) => {
     const clerkUserId = request.headers['x-clerk-user-id'] as string;
diff --git a/services/analytics-service/src/v3/stats/service.ts b/services/analytics-service/src/v3/stats/service.ts
index a793e3a37..c34c24365 100644
--- a/services/analytics-service/src/v3/stats/service.ts
+++ b/services/analytics-service/src/v3/stats/service.ts
@@ -7,7 +7,7 @@
  */
 
 import { StatsV3Repository } from './repository.js';
-import { StatsQueryParams } from './types.js';
+import { PlatformSummary, StatsQueryParams } from './types.js';
 
 export class StatsV3Service {
   constructor(private repository: StatsV3Repository) {}
@@ -23,4 +23,8 @@ export class StatsV3Service {
   async getTopPerformers(clerkUserId: string) {
     return this.repository.getTopPerformers(clerkUserId);
   }
+
+  async getPlatformSummary(): Promise<PlatformSummary> {
+    return this.repository.getPlatformSummary();
+  }
 }
diff --git a/services/analytics-service/src/v3/stats/types.ts b/services/analytics-service/src/v3/stats/types.ts
index 05d460650..7f1bf7544 100644
--- a/services/analytics-service/src/v3/stats/types.ts
+++ b/services/analytics-service/src/v3/stats/types.ts
@@ -13,6 +13,14 @@ export interface StatsQueryParams {
   range?: StatsRange;
 }
 
+export interface PlatformSummary {
+  active_jobs: number;
+  total_recruiters: number;
+  active_companies: number;
+  cumulative_placements: number;
+  as_of: string | null;
+}
+
 // --- JSON Schemas ---
 
 export const statsQuerySchema = {
diff --git a/services/api-gateway/src/routes/v3/analytics.ts b/services/api-gateway/src/routes/v3/analytics.ts
index 58452e6d3..74ad2a4b8 100644
--- a/services/api-gateway/src/routes/v3/analytics.ts
+++ b/services/api-gateway/src/routes/v3/analytics.ts
@@ -13,6 +13,7 @@ import { buildAuthHeaders } from '../../helpers/auth-headers.js';
 
 const analyticsV3Routes: V3RouteConfig[] = [
   // ── Stats Views ────────────────────────────────────────────────
+  { path: '/stats/views/platform-summary', method: 'GET', auth: 'none' },
   { path: '/stats/views/platform-activity', method: 'GET', auth: 'required' },
   { path: '/stats/views/top-performers', method: 'GET', auth: 'required' },
 
diff --git a/services/api-gateway/src/routes/v3/network.ts b/services/api-gateway/src/routes/v3/network.ts
index 9a55945aa..e383119d7 100644
--- a/services/api-gateway/src/routes/v3/network.ts
+++ b/services/api-gateway/src/routes/v3/network.ts
@@ -96,6 +96,12 @@ const networkV3Routes: V3RouteConfig[] = [
   { path: '/public/firms/:slug/profile', method: 'GET', auth: 'none' },
   { path: '/public/firms/:slug/members', method: 'GET', auth: 'none' },
 
+  // ── Public Companies ──────────────────────────────────────────
+  { path: '/public/companies', method: 'GET', auth: 'none' },
+  { path: '/public/companies/:slug', method: 'GET', auth: 'none' },
+  { path: '/public/companies/:slug/profile', method: 'GET', auth: 'none' },
+  { path: '/public/companies/:slug/jobs', method: 'GET', auth: 'none' },
+
   // ── Firm Invitations ────────────────────────────────────────────
   { path: '/firm-invitations/:token/preview', method: 'GET', auth: 'none' },
   { path: '/firm-invitations/:token/accept', method: 'POST', auth: 'required' },
diff --git a/services/ats-service/src/v3/admin/views/lists.repository.ts b/services/ats-service/src/v3/admin/views/lists.repository.ts
index 59d8ea90c..c4e3f8b7d 100644
--- a/services/ats-service/src/v3/admin/views/lists.repository.ts
+++ b/services/ats-service/src/v3/admin/views/lists.repository.ts
@@ -67,6 +67,60 @@ export class AdminListsRepository {
     return { data: data || [], pagination: buildPagination(count || 0, page, limit) };
   }
 
+  async getCandidateById(id: string): Promise<any> {
+    const { data: candidate, error } = await this.supabase
+      .from('candidates')
+      .select('*')
+      .eq('id', id)
+      .single();
+
+    if (error) throw error;
+
+    const [applications, recruiterRels] = await Promise.all([
+      this.supabase
+        .from('applications')
+        .select('id, stage, job_id, job_title, company_name, created_at')
+        .eq('candidate_id', id)
+        .order('created_at', { ascending: false })
+        .limit(20),
+      this.supabase
+        .from('recruiter_candidates')
+        .select('id, recruiter_id, status, candidate_name, created_at')
+        .eq('candidate_id', id)
+        .eq('status', 'active')
+        .limit(10),
+    ]);
+
+    return {
+      ...candidate,
+      applications: applications.data ?? [],
+      recruiter_relationships: recruiterRels.data ?? [],
+    };
+  }
+
+  async getPlacementById(id: string): Promise<any> {
+    const { data: placement, error } = await this.supabase
+      .from('placements')
+      .select('*, job:jobs(id, title, status), candidate:candidates(id, full_name, email, phone, location), company:companies(id, name, logo_url)')
+      .eq('id', id)
+      .single();
+
+    if (error) throw error;
+    return placement;
+  }
+
+  async updatePlacement(id: string, updates: Record<string, unknown>): Promise<any> {
+    const { data, error } = await this.supabase
+      .from('placements')
+      .update({ ...updates, updated_at: new Date().toISOString() })
+      .eq('id', id)
+      .select()
+      .single();
+
+    if (error) throw error;
+    return data;
+  }
+
   async listCandidates(params: AdminListParams) {
     const { page, limit, offset } = paginate(params);
     const sortBy = params.sort_by || 'created_at';
diff --git a/services/ats-service/src/v3/admin/views/lists.route.ts b/services/ats-service/src/v3/admin/views/lists.route.ts
index 65a53ef99..628419403 100644
--- a/services/ats-service/src/v3/admin/views/lists.route.ts
+++ b/services/ats-service/src/v3/admin/views/lists.route.ts
@@ -46,6 +46,15 @@ export function registerAdminListViews(app: FastifyInstance, supabase: SupabaseC
         return reply.send({ data });
     });
 
+    // GET /v3/admin/candidates/:id — detail with applications
+    app.get('/v3/admin/candidates/:id', {
+        schema: { params: idParamSchema },
+    }, async (request, reply) => {
+        const { id } = request.params as { id: string };
+        const data = await repository.getCandidateById(id);
+        return reply.send({ data });
+    });
+
     // GET /v3/admin/candidates — flat list with search
     app.get('/v3/admin/candidates', {
         schema: { querystring: adminListQuerySchema },
@@ -64,6 +73,25 @@ export function registerAdminListViews(app: FastifyInstance, supabase: SupabaseC
         return reply.send(result);
     });
 
+    // GET /v3/admin/placements/:id — detail with joins
+    app.get('/v3/admin/placements/:id', {
+        schema: { params: idParamSchema },
+    }, async (request, reply) => {
+        const { id } = request.params as { id: string };
+        const data = await repository.getPlacementById(id);
+        return reply.send({ data });
+    });
+
+    // PATCH /v3/admin/placements/:id — update placement fields
+    app.patch('/v3/admin/placements/:id', {
+        schema: { params: idParamSchema },
+    }, async (request, reply) => {
+        const { id } = request.params as { id: string };
+        const updates = request.body as Record<string, unknown>;
+        const data = await repository.updatePlacement(id, updates);
+        return reply.send({ data });
+    });
+
     // GET /v3/admin/placements — flat list with search + state filter
     app.get('/v3/admin/placements', {
         schema: { querystring: adminPlacementsQuerySchema },
diff --git a/services/network-service/src/v3/public-companies/repository.ts b/services/network-service/src/v3/public-companies/repository.ts
new file mode 100644
index 000000000..90d531cbb
--- /dev/null
+++ b/services/network-service/src/v3/public-companies/repository.ts
@@ -0,0 +1,149 @@
+/**
+ * Public Companies Repository
+ *
+ * Read-only queries for the public company directory.
+ * Only returns marketplace-visible, active companies.
+ */
+
+import { SupabaseClient } from '@supabase/supabase-js';
+import { PUBLIC_COMPANY_SELECT, PublicCompanyListParams, PublicCompanyJobsParams } from './types.js';
+
+const VISIBILITY_FILTERS = { marketplace_visible: true, status: 'active' } as const;
+
+export class PublicCompanyRepository {
+  constructor(private supabase: SupabaseClient) {}
+
+  async findPublicCompanies(params: PublicCompanyListParams): Promise<{ data: any[]; total: number }> {
+    const page = params.page || 1;
+    const limit = Math.min(params.limit || 24, 100);
+    const offset = (page - 1) * limit;
+
+    let query = this.supabase
+      .from('companies')
+      .select(PUBLIC_COMPANY_SELECT, { count: 'exact' })
+      .eq('marketplace_visible', true)
+      .eq('status', 'active');
+
+    if (params.search) {
+      query = query.or(`name.ilike.%${params.search}%,tagline.ilike.%${params.search}%,industry.ilike.%${params.search}%`);
+    }
+    if (params.industry) query = query.ilike('industry', `%${params.industry}%`);
+    if (params.company_size) query = query.eq('company_size', params.company_size);
+    if (params.stage) query = query.eq('stage', params.stage);
+
+    query = query.order(params.sort_by || 'name', { ascending: params.sort_order !== 'desc' });
+    query = query.range(offset, offset + limit - 1);
+
+    const { data, error, count } = await query;
+    if (error) throw error;
+
+    const companies = (data || []) as any[];
+
+    // Enrich with open job counts in a single batch query
+    if (companies.length > 0) {
+      const companyIds = companies.map(c => c.id);
+      const { data: jobCounts } = await this.supabase
+        .from('jobs')
+        .select('company_id')
+        .in('company_id', companyIds)
+        .eq('status', 'active');
+
+      const countMap = new Map<string, number>();
+      for (const j of jobCounts || []) {
+        countMap.set(j.company_id, (countMap.get(j.company_id) || 0) + 1);
+      }
+      for (const company of companies) {
+        company.open_roles_count = countMap.get(company.id) || 0;
+      }
+    }
+
+    return { data: companies, total: count || 0 };
+  }
+
+  async findPublicCompanyBySlug(slug: string): Promise<any | null> {
+    const { data, error } = await this.supabase
+      .from('companies')
+      .select(PUBLIC_COMPANY_SELECT)
+      .eq('slug', slug)
+      .eq('marketplace_visible', true)
+      .eq('status', 'active')
+      .maybeSingle();
+
+    if (error) throw error;
+    if (!data) return null;
+
+    // Enrich with open job count
+    const company = data as any;
+    const { count } = await this.supabase
+      .from('jobs')
+      .select('id', { count: 'exact', head: true })
+      .eq('company_id', company.id)
+      .eq('status', 'active');
+    company.open_roles_count = count || 0;
+
+    return company;
+  }
+
+  async findPublicCompanyPerks(companyId: string): Promise<any[]> {
+    const { data, error } = await this.supabase
+      .from('company_perks')
+      .select('perk:perks!inner(id, name, category)')
+      .eq('company_id', companyId);
+    if (error) throw error;
+    return (data || []).map((d: any) => d.perk);
+  }
+
+  async findPublicCompanyCultureTags(companyId: string): Promise<any[]> {
+    const { data, error } = await this.supabase
+      .from('company_culture_tags')
+      .select('culture_tag:culture_tags!inner(id, name, category)')
+      .eq('company_id', companyId);
+    if (error) throw error;
+    return (data || []).map((d: any) => d.culture_tag);
+  }
+
+  async findPublicCompanySkills(companyId: string): Promise<any[]> {
+    const { data, error } = await this.supabase
+      .from('company_skills')
+      .select('skill:skills!inner(id, name)')
+      .eq('company_id', companyId);
+    if (error) throw error;
+    return (data || []).map((d: any) => d.skill);
+  }
+
+  async findPublicCompanyReputation(companyId: string): Promise<any | null> {
+    const { data, error } = await this.supabase
+      .from('company_reputation')
+      .select('reputation_score, reputation_tier, total_hires, total_placements, hire_rate, completion_rate')
+      .eq('company_id', companyId)
+      .maybeSingle();
+    if (error) throw error;
+    return data;
+  }
+
+  async findPublicCompanyJobs(companyId: string, params: PublicCompanyJobsParams): Promise<{ data: any[]; total: number }> {
+    const page = params.page || 1;
+    const limit = Math.min(params.limit || 20, 100);
+    const offset = (page - 1) * limit;
+
+    const JOB_SELECT = [
+      'id', 'title', 'description', 'candidate_description', 'location',
+      'employment_type', 'job_level', 'salary_min', 'salary_max',
+      'show_salary_range', 'commute_types', 'status', 'created_at',
+      'source_firm_id',
+      'company:companies!inner(id, name, logo_url, headquarters_location, industry, description)',
+      'skills:job_skills(id, skill_id, is_required, skill:skills(id, name))',
+    ].join(', ');
+
+    const { data, error, count } = await this.supabase
+      .from('jobs')
+      .select(JOB_SELECT, { count: 'exact' })
+      .eq('company_id', companyId)
+      .eq('status', 'active')
+      .order('created_at', { ascending: false })
+      .range(offset, offset + limit - 1);
+
+    if (error) throw error;
+    return { data: data || [], total: count || 0 };
+  }
+}
diff --git a/services/network-service/src/v3/public-companies/routes.ts b/services/network-service/src/v3/public-companies/routes.ts
new file mode 100644
index 000000000..b395af1bb
--- /dev/null
+++ b/services/network-service/src/v3/public-companies/routes.ts
@@ -0,0 +1,53 @@
+/**
+ * Public Companies V3 Routes
+ *
+ * Unauthenticated endpoints for the public company directory.
+ */
+
+import { FastifyInstance } from 'fastify';
+import { SupabaseClient } from '@supabase/supabase-js';
+import { PublicCompanyRepository } from './repository.js';
+import { PublicCompanyService } from './service.js';
+import {
+  PublicCompanyListParams, PublicCompanyJobsParams,
+  listQuerySchema, jobsQuerySchema, slugParamSchema,
+} from './types.js';
+
+export function registerPublicCompanyRoutes(app: FastifyInstance, supabase: SupabaseClient) {
+  const repository = new PublicCompanyRepository(supabase);
+  const service = new PublicCompanyService(repository);
+
+  app.get('/api/v3/public/companies', {
+    schema: { querystring: listQuerySchema },
+  }, async (request, reply) => {
+    const params = request.query as PublicCompanyListParams;
+    const result = await service.getPublicCompanies(params);
+    return reply.send({ data: result.data, pagination: result.pagination });
+  });
+
+  app.get('/api/v3/public/companies/:slug', {
+    schema: { params: slugParamSchema },
+  }, async (request, reply) => {
+    const { slug } = request.params as { slug: string };
+    const data = await service.getPublicCompanyBySlug(slug);
+    return reply.send({ data });
+  });
+
+  app.get('/api/v3/public/companies/:slug/profile', {
+    schema: { params: slugParamSchema },
+  }, async (request, reply) => {
+    const { slug } = request.params as { slug: string };
+    const data = await service.getPublicCompanyProfile(slug);
+    if (!data) return reply.code(404).send({ error: { code: 'NOT_FOUND', message: 'Company not found' } });
+    return reply.send({ data });
+  });
+
+  app.get('/api/v3/public/companies/:slug/jobs', {
+    schema: { params: slugParamSchema, querystring: jobsQuerySchema },
+  }, async (request, reply) => {
+    const { slug } = request.params as { slug: string };
+    const params = request.query as PublicCompanyJobsParams;
+    const result = await service.getPublicCompanyJobs(slug, params);
+    return reply.send({ data: result.data, pagination: result.pagination });
+  });
+}
diff --git a/services/network-service/src/v3/public-companies/service.ts b/services/network-service/src/v3/public-companies/service.ts
new file mode 100644
index 000000000..0a805654d
--- /dev/null
+++ b/services/network-service/src/v3/public-companies/service.ts
@@ -0,0 +1,53 @@
+/**
+ * Public Companies Service
+ */
+
+import { PublicCompanyRepository } from './repository.js';
+import { PublicCompanyListParams, PublicCompanyJobsParams } from './types.js';
+
+export class PublicCompanyService {
+  constructor(private repository: PublicCompanyRepository) {}
+
+  async getPublicCompanies(params: PublicCompanyListParams) {
+    const { data, total } = await this.repository.findPublicCompanies(params);
+    const page = params.page || 1;
+    const limit = Math.min(params.limit || 24, 100);
+    return { data, pagination: { total, page, limit, total_pages: Math.ceil(total / limit) } };
+  }
+
+  async getPublicCompanyBySlug(slug: string) {
+    const company = await this.repository.findPublicCompanyBySlug(slug);
+    if (!company) throw Object.assign(new Error('Company not found'), { statusCode: 404 });
+    return company;
+  }
+
+  async getPublicCompanyProfile(slug: string) {
+    const company = await this.repository.findPublicCompanyBySlug(slug);
+    if (!company) return null;
+
+    const [perksResult, cultureResult, skillsResult, reputationResult] = await Promise.allSettled([
+      this.repository.findPublicCompanyPerks(company.id),
+      this.repository.findPublicCompanyCultureTags(company.id),
+      this.repository.findPublicCompanySkills(company.id),
+      this.repository.findPublicCompanyReputation(company.id),
+    ]);
+
+    return {
+      company,
+      perks: perksResult.status === 'fulfilled' ? perksResult.value : [],
+      culture_tags: cultureResult.status === 'fulfilled' ? cultureResult.value : [],
+      skills: skillsResult.status === 'fulfilled' ? skillsResult.value : [],
+      reputation: reputationResult.status === 'fulfilled' ? reputationResult.value : null,
+    };
+  }
+
+  async getPublicCompanyJobs(slug: string, params: PublicCompanyJobsParams) {
+    const company = await this.repository.findPublicCompanyBySlug(slug);
+    if (!company) throw Object.assign(new Error('Company not found'), { statusCode: 404 });
+
+    const { data, total } = await this.repository.findPublicCompanyJobs(company.id, params);
+    const page = params.page || 1;
+    const limit = Math.min(params.limit || 20, 100);
+    return { data, pagination: { total, page, limit, total_pages: Math.ceil(total / limit) } };
+  }
+}
diff --git a/services/network-service/src/v3/public-companies/types.ts b/services/network-service/src/v3/public-companies/types.ts
new file mode 100644
index 000000000..2c4b9fab9
--- /dev/null
+++ b/services/network-service/src/v3/public-companies/types.ts
@@ -0,0 +1,54 @@
+/**
+ * Public Companies V3 Types & JSON Schemas
+ */
+
+export interface PublicCompanyListParams {
+  page?: number;
+  limit?: number;
+  search?: string;
+  industry?: string;
+  company_size?: string;
+  stage?: string;
+  sort_by?: string;
+  sort_order?: 'asc' | 'desc';
+}
+
+export interface PublicCompanyJobsParams {
+  page?: number;
+  limit?: number;
+}
+
+export const PUBLIC_COMPANY_SELECT = [
+  'id', 'name', 'slug', 'tagline', 'description', 'logo_url',
+  'website', 'industry', 'company_size', 'headquarters_location',
+  'stage', 'founded_year', 'linkedin_url', 'twitter_url', 'glassdoor_url',
+  'created_at',
+].join(', ');
+
+export const listQuerySchema = {
+  type: 'object',
+  properties: {
+    page: { type: 'integer', minimum: 1 },
+    limit: { type: 'integer', minimum: 1, maximum: 100 },
+    search: { type: 'string' },
+    industry: { type: 'string' },
+    company_size: { type: 'string' },
+    stage: { type: 'string' },
+    sort_by: { type: 'string' },
+    sort_order: { type: 'string', enum: ['asc', 'desc'] },
+  },
+} as const;
+
+export const jobsQuerySchema = {
+  type: 'object',
+  properties: {
+    page: { type: 'integer', minimum: 1 },
+    limit: { type: 'integer', minimum: 1, maximum: 100 },
+  },
+} as const;
+
+export const slugParamSchema = {
+  type: 'object',
+  required: ['slug'],
+  properties: { slug: { type: 'string' } },
+} as const;
diff --git a/services/network-service/src/v3/routes.ts b/services/network-service/src/v3/routes.ts
index 08599eb1b..c9c9a192f 100644
--- a/services/network-service/src/v3/routes.ts
+++ b/services/network-service/src/v3/routes.ts
@@ -14,6 +14,7 @@ import { registerCompanyReputationRoutes } from './company-reputation/routes.js'
 import { registerRecruiterCodeRoutes } from './recruiter-codes/routes.js';
 import { registerFirmRoutes } from './firms/routes.js';
 import { registerCompanyInvitationRoutes } from './company-invitations/routes.js';
+import { registerPublicCompanyRoutes } from './public-companies/routes.js';
 import { registerAdminRoutes } from './admin/routes.js';
 
 export function registerV3Routes(
@@ -30,5 +31,6 @@ export function registerV3Routes(
   registerRecruiterCodeRoutes(app, supabase, eventPublisher);
   registerFirmRoutes(app, supabase, eventPublisher);
   registerCompanyInvitationRoutes(app, supabase, eventPublisher);
+  registerPublicCompanyRoutes(app, supabase);
   registerAdminRoutes(app, supabase);
 }
diff --git a/supabase/migrations/20260411000001_add_cumulative_platform_stats_columns.sql b/supabase/migrations/20260411000001_add_cumulative_platform_stats_columns.sql
new file mode 100644
index 000000000..faa1df52f
--- /dev/null
+++ b/supabase/migrations/20260411000001_add_cumulative_platform_stats_columns.sql
@@ -0,0 +1,11 @@
+-- Add cumulative platform stats columns to marketplace_health_daily
+-- These support the public platform-summary endpoint for real footer/landing stats
+
+ALTER TABLE "analytics"."marketplace_health_daily"
+    ADD COLUMN IF NOT EXISTS "total_recruiters" integer DEFAULT 0,
+    ADD COLUMN IF NOT EXISTS "cumulative_placements" integer DEFAULT 0;
+
+COMMENT ON COLUMN "analytics"."marketplace_health_daily"."total_recruiters"
+    IS 'Total registered recruiters on the platform (all-time)';
+COMMENT ON COLUMN "analytics"."marketplace_health_daily"."cumulative_placements"
+    IS 'Cumulative placements completed on the platform (all-time)';
diff --git a/supabase/migrations/20260411100000_add_company_slug_and_marketplace.sql b/supabase/migrations/20260411100000_add_company_slug_and_marketplace.sql
new file mode 100644
index 000000000..faf501199
--- /dev/null
+++ b/supabase/migrations/20260411100000_add_company_slug_and_marketplace.sql
@@ -0,0 +1,82 @@
+-- Add slug and marketplace visibility columns to companies
+-- for public company directory in candidate app
+
+-- 1. Add new columns
+ALTER TABLE public.companies
+  ADD COLUMN IF NOT EXISTS slug TEXT,
+  ADD COLUMN IF NOT EXISTS marketplace_visible BOOLEAN NOT NULL DEFAULT false,
+  ADD COLUMN IF NOT EXISTS marketplace_approved_at TIMESTAMPTZ;
+
+-- 2. Backfill slugs from company name
+UPDATE public.companies c
+SET slug = sub.generated_slug
+FROM (
+  SELECT
+    c2.id,
+    lower(regexp_replace(
+      regexp_replace(c2.name, '[^a-zA-Z0-9\s-]', '', 'g'),
+      '\s+', '-', 'g'
+    )) AS generated_slug
+  FROM public.companies c2
+  WHERE c2.slug IS NULL AND c2.name IS NOT NULL
+) sub
+WHERE c.id = sub.id;
+
+-- 3. De-duplicate slugs by appending -2, -3, etc.
+DO $$
+DECLARE
+  rec RECORD;
+  base_slug TEXT;
+  counter INT;
+  new_slug TEXT;
+BEGIN
+  FOR rec IN
+    SELECT id, slug
+    FROM public.companies
+    WHERE slug IN (
+      SELECT slug FROM public.companies
+      WHERE slug IS NOT NULL
+      GROUP BY slug HAVING count(*) > 1
+    )
+    ORDER BY created_at ASC
+  LOOP
+    -- Skip the first occurrence (keep its slug)
+    IF NOT EXISTS (
+      SELECT 1 FROM public.companies
+      WHERE slug = rec.slug AND id <> rec.id AND created_at < (
+        SELECT created_at FROM public.companies WHERE id = rec.id
+      )
+    ) THEN
+      CONTINUE;
+    END IF;
+
+    base_slug := rec.slug;
+    counter := 2;
+    LOOP
+      new_slug := base_slug || '-' || counter;
+      EXIT WHEN NOT EXISTS (
+        SELECT 1 FROM public.companies WHERE slug = new_slug
+      );
+      counter := counter + 1;
+    END LOOP;
+
+    UPDATE public.companies SET slug = new_slug WHERE id = rec.id;
+  END LOOP;
+END $$;
+
+-- 4. Create indexes
+CREATE UNIQUE INDEX IF NOT EXISTS idx_companies_slug
+  ON public.companies (slug) WHERE slug IS NOT NULL;
+
+CREATE INDEX IF NOT EXISTS idx_companies_marketplace
+  ON public.companies (marketplace_visible, status)
+  WHERE marketplace_visible = true AND status = 'active';
+
+-- 5. Auto-enable marketplace for active companies with at least one active job
+UPDATE public.companies
+SET marketplace_visible = true,
+    marketplace_approved_at = now()
+WHERE status = 'active'
+  AND id IN (
+    SELECT DISTINCT company_id FROM public.jobs WHERE status = 'active'
+  );