diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
new file mode 100644
index 0000000000..9c1603d1c6
--- /dev/null
+++ b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
@@ -0,0 +1,97 @@
+import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined";
+import Button from "@mui/material/Button";
+import { Template } from "api/typesGenerated";
+import { Avatar } from "components/Avatar/Avatar";
+import { TableEmpty } from "components/TableEmpty/TableEmpty";
+import { Link } from "react-router-dom";
+
+export const WorkspacesEmpty = (props: {
+  isUsingFilter: boolean;
+  templates?: Template[];
+}) => {
+  const { isUsingFilter, templates } = props;
+  const totalFeaturedTemplates = 6;
+  const featuredTemplates = templates?.slice(0, totalFeaturedTemplates);
+
+  if (isUsingFilter) {
+    return <TableEmpty message="No results matched your search" />;
+  }
+
+  return (
+    <TableEmpty
+      message="Create a workspace"
+      description="A workspace is your personal, customizable development environment in the cloud. Select one template below to start."
+      cta={
+        <div>
+          <div
+            css={(theme) => ({
+              display: "flex",
+              flexWrap: "wrap",
+              gap: theme.spacing(2),
+              marginBottom: theme.spacing(3),
+              justifyContent: "center",
+              maxWidth: "800px",
+            })}
+          >
+            {featuredTemplates?.map((t) => (
+              <Link
+                to={`/templates/${t.name}/workspace`}
+                key={t.id}
+                css={(theme) => ({
+                  width: "320px",
+                  padding: theme.spacing(2),
+                  borderRadius: 6,
+                  border: `1px solid ${theme.palette.divider}`,
+                  textAlign: "left",
+                  display: "flex",
+                  gap: theme.spacing(2),
+                  textDecoration: "none",
+                  color: "inherit",
+
+                  "&:hover": {
+                    backgroundColor: theme.palette.background.paperLight,
+                  },
+                })}
+              >
+                <div css={{ flexShrink: 0, paddingTop: 4 }}>
+                  <Avatar
+                    variant={t.icon ? "square" : undefined}
+                    fitImage={Boolean(t.icon)}
+                    src={t.icon}
+                    size="sm"
+                  >
+                    {t.name}
+                  </Avatar>
+                </div>
+                <div>
+                  <h4 css={{ fontSize: 14, fontWeight: 600, margin: 0 }}>
+                    {t.display_name}
+                  </h4>
+                  <span
+                    css={(theme) => ({
+                      fontSize: 13,
+                      color: theme.palette.text.secondary,
+                      lineHeight: "0.5",
+                    })}
+                  >
+                    {t.description}
+                  </span>
+                </div>
+              </Link>
+            ))}
+          </div>
+          {templates && templates.length > totalFeaturedTemplates && (
+            <Button
+              component={Link}
+              to="/templates"
+              variant="contained"
+              startIcon={<ArrowForwardOutlined />}
+            >
+              See all templates
+            </Button>
+          )}
+        </div>
+      }
+    />
+  );
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index 44d16701d5..45f90bf0e1 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -47,7 +47,6 @@ export interface WorkspacesPageViewProps {
   onCheckChange: (checkedWorkspaces: Workspace[]) => void;
   onDeleteAll: () => void;
   canCheckWorkspaces: boolean;
-
   templatesFetchStatus: TemplateQuery["status"];
   templates: TemplateQuery["data"];
 }
@@ -156,6 +155,7 @@ export const WorkspacesPageView: FC<
         checkedWorkspaces={checkedWorkspaces}
         onCheckChange={onCheckChange}
         canCheckWorkspaces={canCheckWorkspaces}
+        templates={templates}
       />
       {count !== undefined && (
         <PaginationWidgetBase
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 63eb19d865..fc82c59a08 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -4,16 +4,13 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import { Workspace } from "api/typesGenerated";
+import { Template, Workspace } from "api/typesGenerated";
 import { FC, ReactNode } from "react";
-import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import {
   TableLoaderSkeleton,
   TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
-import AddOutlined from "@mui/icons-material/AddOutlined";
-import Button from "@mui/material/Button";
-import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
 import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Box from "@mui/material/Box";
@@ -28,8 +25,7 @@ import Checkbox from "@mui/material/Checkbox";
 import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
 import Skeleton from "@mui/material/Skeleton";
 import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
-import { css } from "@emotion/react";
-import { useTheme } from "@mui/system";
+import { WorkspacesEmpty } from "./WorkspacesEmpty";
 
 export interface WorkspacesTableProps {
   workspaces?: Workspace[];
@@ -39,6 +35,7 @@ export interface WorkspacesTableProps {
   onUpdateWorkspace: (workspace: Workspace) => void;
   onCheckChange: (checkedWorkspaces: Workspace[]) => void;
   canCheckWorkspaces: boolean;
+  templates?: Template[];
 }
 
 export const WorkspacesTable: FC<WorkspacesTableProps> = ({
@@ -48,9 +45,8 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
   onUpdateWorkspace,
   onCheckChange,
   canCheckWorkspaces,
+  templates,
 }) => {
-  const theme = useTheme();
-
   return (
     <TableContainer>
       <Table>
@@ -93,47 +89,10 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
             <TableLoader canCheckWorkspaces={canCheckWorkspaces} />
           )}
           {workspaces && workspaces.length === 0 && (
-            <>
-              {isUsingFilter ? (
-                <TableEmpty message="No results matched your search" />
-              ) : (
-                <TableEmpty
-                  css={{
-                    paddingBottom: 0,
-                  }}
-                  message="Create a workspace"
-                  description="A workspace is your personal, customizable development environment in the cloud"
-                  cta={
-                    <Button
-                      component={RouterLink}
-                      to="/templates"
-                      startIcon={<AddOutlined />}
-                      variant="contained"
-                      data-testid="button-select-template"
-                    >
-                      Select a Template
-                    </Button>
-                  }
-                  image={
-                    <div
-                      css={css`
-                        max-width: 50%;
-                        height: ${theme.spacing(34)};
-                        overflow: hidden;
-                        margin-top: ${theme.spacing(6)};
-                        opacity: 0.85;
-
-                        & img {
-                          max-width: 100%;
-                        }
-                      `}
-                    >
-                      <img src="/featured/workspaces.webp" alt="" />
-                    </div>
-                  }
-                />
-              )}
-            </>
+            <WorkspacesEmpty
+              templates={templates}
+              isUsingFilter={isUsingFilter}
+            />
           )}
           {workspaces &&
             workspaces.map((workspace) => {