diff --git a/site/src/modules/workspaces/WorkspaceSharingForm/WorkspaceSharingForm.tsx b/site/src/modules/workspaces/WorkspaceSharingForm/WorkspaceSharingForm.tsx
index c361aaf112..47cb0066f2 100644
--- a/site/src/modules/workspaces/WorkspaceSharingForm/WorkspaceSharingForm.tsx
+++ b/site/src/modules/workspaces/WorkspaceSharingForm/WorkspaceSharingForm.tsx
@@ -20,7 +20,6 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "#/components/DropdownMenu/DropdownMenu";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import {
 	Select,
 	SelectContent,
@@ -37,6 +36,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { TableLoader } from "#/components/TableLoader/TableLoader";
 import { getGroupSubtitle } from "#/modules/groups";
 
@@ -198,15 +198,11 @@ export const WorkspaceSharingForm: FC<WorkspaceSharingFormProps> = ({
 	if (sharingSettingsQuery.data.sharing_disabled) {
 		return (
 			<TableBody>
-				<TableRow>
-					<TableCell colSpan={999}>
-						<EmptyState
-							message="This workspace cannot be shared"
-							description="Workspace sharing has been disabled for this organization."
-							isCompact={isCompact}
-						/>
-					</TableCell>
-				</TableRow>
+				<TableEmpty
+					message="This workspace cannot be shared"
+					description="Workspace sharing has been disabled for this organization."
+					isCompact={isCompact}
+				/>
 			</TableBody>
 		);
 	}
@@ -232,15 +228,11 @@ export const WorkspaceSharingForm: FC<WorkspaceSharingFormProps> = ({
 			{!workspaceACL ? (
 				<TableLoader />
 			) : isEmpty ? (
-				<TableRow>
-					<TableCell colSpan={999}>
-						<EmptyState
-							message="No shared members or groups yet"
-							description="Add a member or group using the controls above."
-							isCompact={isCompact}
-						/>
-					</TableCell>
-				</TableRow>
+				<TableEmpty
+					message="No shared members or groups yet"
+					description="Add a member or group using the controls above."
+					isCompact={isCompact}
+				/>
 			) : (
 				<>
 					{workspaceACL.group.map((group) => (
diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
index f6753b9aa8..ed3a94dc7d 100644
--- a/site/src/pages/AuditPage/AuditPageView.tsx
+++ b/site/src/pages/AuditPage/AuditPageView.tsx
@@ -1,6 +1,5 @@
 import type { ComponentProps, FC } from "react";
 import type { AuditLog } from "#/api/typesGenerated";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { Margins } from "#/components/Margins/Margins";
 import {
 	PageHeader,
@@ -12,12 +11,8 @@ import {
 	type PaginationResult,
 } from "#/components/PaginationWidget/PaginationContainer";
 import { PaywallPremium } from "#/components/Paywall/PaywallPremium";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableRow,
-} from "#/components/Table/Table";
+import { Table, TableBody } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { TableLoader } from "#/components/TableLoader/TableLoader";
 import { Timeline } from "#/components/Timeline/Timeline";
 import { docs } from "#/utils/docs";
@@ -114,13 +109,7 @@ const AuditTableBody: FC<AuditTableBodyProps> = ({
 }) => {
 	// An error renders as an empty table.
 	if (error) {
-		return (
-			<TableRow>
-				<TableCell colSpan={999}>
-					<EmptyState message="An error occurred while loading audit logs" />
-				</TableCell>
-			</TableRow>
-		);
+		return <TableEmpty message="An error occurred while loading audit logs" />;
 	}
 	if (isLoading) {
 		return <TableLoader />;
@@ -129,13 +118,7 @@ const AuditTableBody: FC<AuditTableBodyProps> = ({
 		const emptyMessage = isNonInitialPage
 			? "No audit logs available on this page"
 			: "No audit logs available";
-		return (
-			<TableRow>
-				<TableCell colSpan={999}>
-					<EmptyState message={emptyMessage} />
-				</TableCell>
-			</TableRow>
-		);
+		return <TableEmpty message={emptyMessage} />;
 	}
 	if (!auditLogs) {
 		return null;
diff --git a/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx b/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx
index c5d2a920d4..009e78a2e6 100644
--- a/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx
+++ b/site/src/pages/ConnectionLogPage/ConnectionLogPageView.tsx
@@ -1,6 +1,5 @@
 import type { ComponentProps, FC } from "react";
 import type { ConnectionLog } from "#/api/typesGenerated";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { Margins } from "#/components/Margins/Margins";
 import {
 	PageHeader,
@@ -12,12 +11,8 @@ import {
 	type PaginationResult,
 } from "#/components/PaginationWidget/PaginationContainer";
 import { PaywallPremium } from "#/components/Paywall/PaywallPremium";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableRow,
-} from "#/components/Table/Table";
+import { Table, TableBody } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { TableLoader } from "#/components/TableLoader/TableLoader";
 import { Timeline } from "#/components/Timeline/Timeline";
 import { docs } from "#/utils/docs";
@@ -113,11 +108,7 @@ const ConnectionLogTableBody: FC<ConnectionLogTableBodyProps> = ({
 	// An error renders as an empty table.
 	if (error) {
 		return (
-			<TableRow>
-				<TableCell colSpan={999}>
-					<EmptyState message="An error occurred while loading connection logs" />
-				</TableCell>
-			</TableRow>
+			<TableEmpty message="An error occurred while loading connection logs" />
 		);
 	}
 	if (isLoading) {
@@ -127,13 +118,7 @@ const ConnectionLogTableBody: FC<ConnectionLogTableBodyProps> = ({
 		const emptyMessage = isNonInitialPage
 			? "No connection logs available on this page"
 			: "No connection logs available";
-		return (
-			<TableRow>
-				<TableCell colSpan={999}>
-					<EmptyState message={emptyMessage} />
-				</TableCell>
-			</TableRow>
-		);
+		return <TableEmpty message={emptyMessage} />;
 	}
 	if (!connectionLogs) {
 		return null;
diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
index bd9f587256..d0f2d04b7c 100644
--- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
+++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
@@ -3,16 +3,15 @@ import { type FC, useState } from "react";
 import type { BannerConfig } from "#/api/typesGenerated";
 import { Button } from "#/components/Button/Button";
 import { ConfirmDialog } from "#/components/Dialog/ConfirmDialog/ConfirmDialog";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { Link } from "#/components/Link/Link";
 import {
 	Table,
 	TableBody,
-	TableCell,
 	TableHead,
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { AnnouncementBannerDialog } from "./AnnouncementBannerDialog";
 import { AnnouncementBannerItem } from "./AnnouncementBannerItem";
 
@@ -91,12 +90,10 @@ export const AnnouncementBannerSettings: FC<
 							</TableHeader>
 							<TableBody>
 								{!isEntitled || banners.length < 1 ? (
-									<TableCell colSpan={999}>
-										<EmptyState
-											className="min-h-[160px]"
-											message="No announcement banners"
-										/>
-									</TableCell>
+									<TableEmpty
+										className="min-h-[160px]"
+										message="No announcement banners"
+									/>
 								) : (
 									banners.map((banner, i) => (
 										<AnnouncementBannerItem
diff --git a/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx
index d4d8059148..f37f581781 100644
--- a/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx
+++ b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.stories.tsx
@@ -39,3 +39,11 @@ export default meta;
 type Story = StoryObj<typeof ExternalAuthSettingsPageView>;
 
 export const Page: Story = {};
+
+export const Empty: Story = {
+	args: {
+		config: {
+			external_auth: [],
+		},
+	},
+};
diff --git a/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
index 29a3ac506a..b6f6538d91 100644
--- a/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
@@ -19,6 +19,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { docs } from "#/utils/docs";
 
 type ExternalAuthSettingsPageViewProps = {
@@ -68,16 +69,10 @@ export const ExternalAuthSettingsPageView: FC<
 					</TableRow>
 				</TableHeader>
 				<TableBody>
-					{((config.external_auth === null ||
-						config.external_auth?.length === 0) && (
-						<TableRow>
-							<TableCell colSpan={999}>
-								<div className="text-center">
-									No providers have been configured!
-								</div>
-							</TableCell>
-						</TableRow>
-					)) ||
+					{config.external_auth === null ||
+					config.external_auth?.length === 0 ? (
+						<TableEmpty message="No providers have been configured!" />
+					) : (
 						config.external_auth?.map((git: ExternalAuthConfig) => {
 							const name = git.id || git.type;
 							return (
@@ -87,7 +82,8 @@ export const ExternalAuthSettingsPageView: FC<
 									<TableCell>{git.regex || "Not Set"}</TableCell>
 								</TableRow>
 							);
-						})}
+						})
+					)}
 				</TableBody>
 			</Table>
 		</>
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
index 74fce05ebb..fea9a48860 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
@@ -25,7 +25,6 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "#/components/Dialog/Dialog";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import {
 	HelpPopover,
 	HelpPopoverContent,
@@ -49,6 +48,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import {
 	Tooltip,
 	TooltipContent,
@@ -408,19 +408,15 @@ const IdpMappingTable: FC<IdpMappingTableProps> = ({ isEmpty, children }) => {
 			</TableHeader>
 			<TableBody>
 				{isEmpty ? (
-					<TableRow>
-						<TableCell colSpan={999}>
-							<EmptyState
-								message="No organization mappings"
-								isCompact
-								cta={
-									<Link href={docs("/admin/users/idp-sync#organization-sync")}>
-										How to set up IdP organization sync
-									</Link>
-								}
-							/>
-						</TableCell>
-					</TableRow>
+					<TableEmpty
+						message="No organization mappings"
+						isCompact
+						cta={
+							<Link href={docs("/admin/users/idp-sync#organization-sync")}>
+								How to set up IdP organization sync
+							</Link>
+						}
+					/>
 				) : (
 					children
 				)}
diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.stories.tsx
index 01be035ccf..2131b5b1ba 100644
--- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.stories.tsx
+++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.stories.tsx
@@ -67,6 +67,28 @@ export const Default: Story = {
 	},
 };
 
+export const EmptySecrets: Story = {
+	parameters: {
+		queries: [
+			{ key: oauth2ProviderAppKey(appId), data: mockApp },
+			{
+				key: oauth2ProviderAppSecretsKey(appId),
+				data: [],
+			},
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText(mockApp.name)).toBeVisible();
+		await expect(
+			canvas.getByRole("table", { name: "OAuth2 client secrets" }),
+		).toBeVisible();
+		await expect(
+			canvas.getByText("No client secrets have been generated."),
+		).toBeVisible();
+	},
+};
+
 export const Loading: Story = {
 	parameters: {
 		queries: [],
diff --git a/site/src/pages/GroupsPage/GroupMembersPage.tsx b/site/src/pages/GroupsPage/GroupMembersPage.tsx
index fa8c1d7808..66fecd2e0e 100644
--- a/site/src/pages/GroupsPage/GroupMembersPage.tsx
+++ b/site/src/pages/GroupsPage/GroupMembersPage.tsx
@@ -33,7 +33,6 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "#/components/DropdownMenu/DropdownMenu";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { UsersFilter } from "#/components/Filter/UsersFilter";
 import { LastSeen } from "#/components/LastSeen/LastSeen";
 import { MultiMemberSelect } from "#/components/MultiUserSelect/MultiUserSelect";
@@ -47,6 +46,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { useAuthenticated } from "#/hooks/useAuthenticated";
 import { useFeatureVisibility } from "#/modules/dashboard/useFeatureVisibility";
 import { isEveryoneGroup } from "#/modules/groups";
@@ -198,11 +198,7 @@ const GroupMembersPage: FC = () => {
 
 					<TableBody>
 						{members.length === 0 ? (
-							<TableRow>
-								<TableCell colSpan={999}>
-									<EmptyState message="No members found" />
-								</TableCell>
-							</TableRow>
+							<TableEmpty message="No members found" />
 						) : (
 							membersWithSpend.map((member) => (
 								<GroupMemberRow
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
index 79e4459790..b4b2eab527 100644
--- a/site/src/pages/GroupsPage/GroupsPageView.tsx
+++ b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -8,7 +8,6 @@ import { AvatarData } from "#/components/Avatar/AvatarData";
 import { AvatarDataSkeleton } from "#/components/Avatar/AvatarDataSkeleton";
 import { Badge } from "#/components/Badge/Badge";
 import { Button } from "#/components/Button/Button";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { PaywallPremium } from "#/components/Paywall/PaywallPremium";
 import { Skeleton } from "#/components/Skeleton/Skeleton";
 import {
@@ -19,6 +18,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import {
 	TableLoaderSkeleton,
 	TableRowSkeleton,
@@ -137,28 +137,24 @@ const GroupsTableBody: FC<GroupsTableBodyProps> = ({
 	}
 	if (groups.length === 0) {
 		return (
-			<TableRow>
-				<TableCell colSpan={999}>
-					<EmptyState
-						message="No groups yet"
-						description={
-							canCreateGroup
-								? "Create your first group"
-								: "You don't have permission to create a group"
-						}
-						cta={
-							canCreateGroup && (
-								<Button asChild>
-									<RouterLink to="create">
-										<PlusIcon className="size-icon-sm" />
-										Create group
-									</RouterLink>
-								</Button>
-							)
-						}
-					/>
-				</TableCell>
-			</TableRow>
+			<TableEmpty
+				message="No groups yet"
+				description={
+					canCreateGroup
+						? "Create your first group"
+						: "You don't have permission to create a group"
+				}
+				cta={
+					canCreateGroup && (
+						<Button asChild>
+							<RouterLink to="create">
+								<PlusIcon className="size-icon-sm" />
+								Create group
+							</RouterLink>
+						</Button>
+					)
+				}
+			/>
 		);
 	}
 	return (
diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
index b239d163af..331bf8510f 100644
--- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
@@ -10,7 +10,6 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "#/components/DropdownMenu/DropdownMenu";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { PaywallPremium } from "#/components/Paywall/PaywallPremium";
 import { Skeleton } from "#/components/Skeleton/Skeleton";
 import {
@@ -21,6 +20,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import {
 	TableLoaderSkeleton,
 	TableRowSkeleton,
@@ -282,31 +282,27 @@ const RoleTableBody: FC<RoleTableProps> = ({
 	}
 	if (roles.length === 0) {
 		return (
-			<TableRow className="h-14">
-				<TableCell colSpan={999}>
-					<EmptyState
-						message="No custom roles yet"
-						description={
-							canCreateOrgRole && isCustomRolesEnabled
-								? "Create your first custom role"
-								: !isCustomRolesEnabled
-									? "Upgrade to a premium license to create a custom role"
-									: "You don't have permission to create a custom role"
-						}
-						cta={
-							canCreateOrgRole &&
-							isCustomRolesEnabled && (
-								<Button asChild>
-									<RouterLink to="create">
-										<PlusIcon />
-										Create custom role
-									</RouterLink>
-								</Button>
-							)
-						}
-					/>
-				</TableCell>
-			</TableRow>
+			<TableEmpty
+				message="No custom roles yet"
+				description={
+					canCreateOrgRole && isCustomRolesEnabled
+						? "Create your first custom role"
+						: !isCustomRolesEnabled
+							? "Upgrade to a premium license to create a custom role"
+							: "You don't have permission to create a custom role"
+				}
+				cta={
+					canCreateOrgRole &&
+					isCustomRolesEnabled && (
+						<Button asChild>
+							<RouterLink to="create">
+								<PlusIcon />
+								Create custom role
+							</RouterLink>
+						</Button>
+					)
+				}
+			/>
 		);
 	}
 	return (
diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpMappingTable.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpMappingTable.tsx
index 3d92b6e133..6cb2820847 100644
--- a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpMappingTable.tsx
+++ b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpMappingTable.tsx
@@ -1,5 +1,4 @@
 import type { FC } from "react";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { Link } from "#/components/Link/Link";
 import {
 	Table,
@@ -8,6 +7,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { docs } from "#/utils/docs";
 
 interface IdpMappingTableProps {
@@ -37,23 +37,19 @@ export const IdpMappingTable: FC<IdpMappingTableProps> = ({
 				</TableHeader>
 				<TableBody>
 					{rowCount === 0 ? (
-						<TableRow>
-							<TableCell colSpan={999}>
-								<EmptyState
-									message={`No ${type.toLocaleLowerCase()} mappings`}
-									isCompact
-									cta={
-										<Link
-											href={docs(
-												`/admin/users/idp-sync#${type.toLocaleLowerCase()}-sync`,
-											)}
-										>
-											How to setup IdP {type.toLocaleLowerCase()} sync
-										</Link>
-									}
-								/>
-							</TableCell>
-						</TableRow>
+						<TableEmpty
+							message={`No ${type.toLocaleLowerCase()} mappings`}
+							isCompact
+							cta={
+								<Link
+									href={docs(
+										`/admin/users/idp-sync#${type.toLocaleLowerCase()}-sync`,
+									)}
+								>
+									How to setup IdP {type.toLocaleLowerCase()} sync
+								</Link>
+							}
+						/>
 					) : (
 						children
 					)}
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx
index 3e6deb8b9e..e488288bcb 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.tsx
@@ -36,6 +36,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import {
 	Tooltip,
 	TooltipContent,
@@ -191,25 +192,17 @@ const OrganizationProvisionerJobsPageView: FC<
 									/>
 								))
 							) : (
-								<TableRow>
-									<TableCell colSpan={999}>
-										<EmptyState message="No provisioner jobs found" />
-									</TableCell>
-								</TableRow>
+								<TableEmpty message="No provisioner jobs found" />
 							)
 						) : error ? (
-							<TableRow>
-								<TableCell colSpan={999}>
-									<EmptyState
-										message="Error loading the provisioner jobs"
-										cta={
-											<Button size="sm" onClick={onRetry}>
-												Retry
-											</Button>
-										}
-									/>
-								</TableCell>
-							</TableRow>
+							<TableEmpty
+								message="Error loading the provisioner jobs"
+								cta={
+									<Button size="sm" onClick={onRetry}>
+										Retry
+									</Button>
+								}
+							/>
 						) : (
 							<TableRow>
 								<TableCell colSpan={999}>
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx
index 104b9ffdf2..b221a1bc5b 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/OrganizationProvisionerKeysPageView.tsx
@@ -6,7 +6,6 @@ import {
 	ProvisionerKeyIDUserAuth,
 } from "#/api/typesGenerated";
 import { Button } from "#/components/Button/Button";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { Link } from "#/components/Link/Link";
 import { Loader } from "#/components/Loader/Loader";
 import { PaywallPremium } from "#/components/Paywall/PaywallPremium";
@@ -23,6 +22,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { docs } from "#/utils/docs";
 import { ProvisionerKeyRow } from "./ProvisionerKeyRow";
 
@@ -77,14 +77,10 @@ export const OrganizationProvisionerKeysPageView: FC<
 					<TableBody>
 						{filteredProvisionerKeyDaemons ? (
 							filteredProvisionerKeyDaemons.length === 0 ? (
-								<TableRow>
-									<TableCell colSpan={5}>
-										<EmptyState
-											message="No provisioner keys"
-											description="Create your first provisioner key to authenticate external provisioner daemons."
-										/>
-									</TableCell>
-								</TableRow>
+								<TableEmpty
+									message="No provisioner keys"
+									description="Create your first provisioner key to authenticate external provisioner daemons."
+								/>
 							) : (
 								filteredProvisionerKeyDaemons.map((pkd) => (
 									<ProvisionerKeyRow
@@ -96,18 +92,14 @@ export const OrganizationProvisionerKeysPageView: FC<
 								))
 							)
 						) : error ? (
-							<TableRow>
-								<TableCell colSpan={5}>
-									<EmptyState
-										message="Error loading provisioner keys"
-										cta={
-											<Button onClick={onRetry} size="sm">
-												Retry
-											</Button>
-										}
-									/>
-								</TableCell>
-							</TableRow>
+							<TableEmpty
+								message="Error loading provisioner keys"
+								cta={
+									<Button onClick={onRetry} size="sm">
+										Retry
+									</Button>
+								}
+							/>
 						) : (
 							<TableRow>
 								<TableCell colSpan={999}>
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx
index dce453dbda..4dd0bfe90d 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/OrganizationProvisionersPageView.tsx
@@ -4,7 +4,6 @@ import type { ProvisionerDaemon } from "#/api/typesGenerated";
 import { Badge } from "#/components/Badge/Badge";
 import { Button } from "#/components/Button/Button";
 import { Checkbox } from "#/components/Checkbox/Checkbox";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { Link } from "#/components/Link/Link";
 import { Loader } from "#/components/Loader/Loader";
 import { PaywallPremium } from "#/components/Paywall/PaywallPremium";
@@ -21,6 +20,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import {
 	Tooltip,
 	TooltipContent,
@@ -145,35 +145,27 @@ export const OrganizationProvisionersPageView: FC<
 										/>
 									))
 								) : (
-									<TableRow>
-										<TableCell colSpan={999}>
-											<EmptyState
-												message="No provisioners found"
-												description="A provisioner is required before you can create templates and workspaces. You can connect your first provisioner by following our documentation."
-												cta={
-													<Button size="sm" asChild>
-														<Link href={docs("/admin/provisioners")}>
-															Create a provisioner
-														</Link>
-													</Button>
-												}
-											/>
-										</TableCell>
-									</TableRow>
+									<TableEmpty
+										message="No provisioners found"
+										description="A provisioner is required before you can create templates and workspaces. You can connect your first provisioner by following our documentation."
+										cta={
+											<Button size="sm" asChild>
+												<Link href={docs("/admin/provisioners")}>
+													Create a provisioner
+												</Link>
+											</Button>
+										}
+									/>
 								)
 							) : error ? (
-								<TableRow>
-									<TableCell colSpan={999}>
-										<EmptyState
-											message="Error loading the provisioner jobs"
-											cta={
-												<Button onClick={onRetry} size="sm">
-													Retry
-												</Button>
-											}
-										/>
-									</TableCell>
-								</TableRow>
+								<TableEmpty
+									message="Error loading the provisioner jobs"
+									cta={
+										<Button onClick={onRetry} size="sm">
+											Retry
+										</Button>
+									}
+								/>
 							) : (
 								<TableRow>
 									<TableCell colSpan={999}>
diff --git a/site/src/pages/TasksPage/TasksTable.tsx b/site/src/pages/TasksPage/TasksTable.tsx
index ef7b4eee6e..6c03b0f444 100644
--- a/site/src/pages/TasksPage/TasksTable.tsx
+++ b/site/src/pages/TasksPage/TasksTable.tsx
@@ -26,6 +26,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import {
 	TableLoaderSkeleton,
 	TableRowSkeleton,
@@ -131,43 +132,25 @@ type TasksErrorBodyProps = {
 
 const TasksErrorBody: FC<TasksErrorBodyProps> = ({ error, onRetry }) => {
 	return (
-		<TableRow>
-			<TableCell colSpan={999} className="text-center">
-				<div className="rounded-lg w-full min-h-80 flex items-center justify-center">
-					<div className="flex flex-col items-center">
-						<h3 className="m-0 font-medium text-content-primary text-base">
-							{getErrorMessage(error, "Error loading tasks")}
-						</h3>
-						<span className="text-content-secondary text-sm">
-							{getErrorDetail(error) ?? "Please try again"}
-						</span>
-						<Button size="sm" onClick={onRetry} className="mt-4">
-							<RotateCcwIcon />
-							Try again
-						</Button>
-					</div>
-				</div>
-			</TableCell>
-		</TableRow>
+		<TableEmpty
+			message={getErrorMessage(error, "Error loading tasks")}
+			description={getErrorDetail(error) ?? "Please try again"}
+			cta={
+				<Button size="sm" onClick={onRetry}>
+					<RotateCcwIcon />
+					Try again
+				</Button>
+			}
+		/>
 	);
 };
 
 const TasksEmpty: FC = () => {
 	return (
-		<TableRow>
-			<TableCell colSpan={4} className="text-center">
-				<div className="w-full min-h-80 p-4 flex items-center justify-center">
-					<div className="flex flex-col items-center">
-						<h3 className="m-0 font-medium text-content-primary text-base">
-							No tasks found
-						</h3>
-						<span className="text-content-secondary text-sm">
-							Use the form above to run a task
-						</span>
-					</div>
-				</div>
-			</TableCell>
-		</TableRow>
+		<TableEmpty
+			message="No tasks found"
+			description="Use the form above to run a task"
+		/>
 	);
 };
 
diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx
index a96d69dcea..5bddffb197 100644
--- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx
+++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx
@@ -1,12 +1,7 @@
 import type { FC } from "react";
 import type * as TypesGen from "#/api/typesGenerated";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableRow,
-} from "#/components/Table/Table";
+import { Table, TableBody } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { TableLoader } from "#/components/TableLoader/TableLoader";
 import { Timeline } from "#/components/Timeline/Timeline";
 import { VersionRow } from "./VersionRow";
@@ -65,13 +60,7 @@ export const VersionsTable: FC<VersionsTableProps> = ({
 				)}
 
 				{versions && versions.length === 0 && (
-					<TableRow>
-						<TableCell colSpan={999}>
-							<div className="p-8">
-								<EmptyState message="No versions found" />
-							</div>
-						</TableCell>
-					</TableRow>
+					<TableEmpty message="No versions found" />
 				)}
 			</TableBody>
 		</Table>
diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
index 4d4ba40459..764840d3a7 100644
--- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
@@ -17,7 +17,6 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "#/components/DropdownMenu/DropdownMenu";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import {
 	Select,
 	SelectContent,
@@ -39,6 +38,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { TableLoader } from "#/components/TableLoader/TableLoader";
 import { getGroupSubtitle } from "#/modules/groups";
 import {
@@ -302,14 +302,10 @@ const MembersTableBody: FC<MembersTableBodyProps> = ({
 		templateACL.users.length === 0 && templateACL.group.length === 0;
 	if (isEmpty) {
 		return (
-			<TableRow>
-				<TableCell colSpan={999}>
-					<EmptyState
-						message="No members yet"
-						description="Add a member using the controls above"
-					/>
-				</TableCell>
-			</TableRow>
+			<TableEmpty
+				message="No members yet"
+				description="Add a member using the controls above"
+			/>
 		);
 	}
 
diff --git a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.stories.tsx b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.stories.tsx
index a85508f8ac..95c1954615 100644
--- a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.stories.tsx
+++ b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.stories.tsx
@@ -34,3 +34,12 @@ export const Apps: Story = {
 		revoke: () => undefined,
 	},
 };
+
+export const Empty: Story = {
+	args: {
+		isLoading: false,
+		error: undefined,
+		apps: [],
+		revoke: () => undefined,
+	},
+};
diff --git a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx
index 32ba171ea7..350e7a8d7b 100644
--- a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx
+++ b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx
@@ -11,6 +11,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { TableLoader } from "#/components/TableLoader/TableLoader";
 
 type OAuth2ProviderPageViewProps = {
@@ -43,13 +44,7 @@ const OAuth2ProviderPageView: FC<OAuth2ProviderPageViewProps> = ({
 						<OAuth2AppRow key={app.id} app={app} revoke={revoke} />
 					))}
 					{apps?.length === 0 && (
-						<TableRow>
-							<TableCell colSpan={999}>
-								<div className="text-center">
-									No OAuth2 applications have been authorized.
-								</div>
-							</TableCell>
-						</TableRow>
+						<TableEmpty message="No OAuth2 applications have been authorized." />
 					)}
 				</TableBody>
 			</Table>
diff --git a/site/src/pages/UsersPage/UsersTable.tsx b/site/src/pages/UsersPage/UsersTable.tsx
index 18400743ad..8cf958c83f 100644
--- a/site/src/pages/UsersPage/UsersTable.tsx
+++ b/site/src/pages/UsersPage/UsersTable.tsx
@@ -15,7 +15,6 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "#/components/DropdownMenu/DropdownMenu";
-import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { LastSeen } from "#/components/LastSeen/LastSeen";
 import { Skeleton } from "#/components/Skeleton/Skeleton";
 import {
@@ -26,6 +25,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "#/components/Table/Table";
+import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import {
 	TableLoaderSkeleton,
 	TableRowSkeleton,
@@ -136,15 +136,7 @@ const UsersTableBody: React.FC<UsersTableProps> = ({
 	}
 
 	if (!users || users.length === 0) {
-		return (
-			<TableRow>
-				<TableCell colSpan={999}>
-					<div className="p-8">
-						<EmptyState message="No users found" />
-					</div>
-				</TableCell>
-			</TableRow>
-		);
+		return <TableEmpty message="No users found" />;
 	}
 
 	return (