diff --git a/CHANGELOG-update-workspace-pages.md b/CHANGELOG-update-workspace-pages.md
new file mode 100644
index 0000000000..b868a845b6
--- /dev/null
+++ b/CHANGELOG-update-workspace-pages.md
@@ -0,0 +1 @@
+- Add templates landing page and template detail pages.
\ No newline at end of file
diff --git a/context/app/routes_workspaces.py b/context/app/routes_workspaces.py
index 20adfd18a2..4fb04dd7d3 100644
--- a/context/app/routes_workspaces.py
+++ b/context/app/routes_workspaces.py
@@ -34,3 +34,23 @@ def workspace_detail(workspace_id):
         flask_data=flask_data,
         title='Workspace'
     )
+
+
+@blueprint.route('/templates')
+def templates():
+    flask_data = {**get_default_flask_data()}
+    return render_template(
+        'base-pages/react-content.html',
+        flask_data=flask_data,
+        title='Templates'
+    )
+
+
+@blueprint.route('/templates/<template_id>')
+def template_detail(template_id):
+    flask_data = {**get_default_flask_data()}
+    return render_template(
+        'base-pages/react-content.html',
+        flask_data=flask_data,
+        title='Template'
+    )
diff --git a/context/app/static/js/components/Routes/Routes.jsx b/context/app/static/js/components/Routes/Routes.jsx
index 1ffc354be9..a32fbd22ca 100644
--- a/context/app/static/js/components/Routes/Routes.jsx
+++ b/context/app/static/js/components/Routes/Routes.jsx
@@ -30,6 +30,8 @@ const Organ = lazy(() => import('js/pages/Organ'));
 const Workspaces = lazy(() => import('js/pages/Workspaces'));
 const Workspace = lazy(() => import('js/pages/Workspace'));
 const WorkspacePleaseWait = lazy(() => import('js/pages/WorkspacePleaseWait'));
+const Templates = lazy(() => import('js/pages/Templates'));
+const Template = lazy(() => import('js/pages/Template'));
 const GeneDetails = lazy(() => import('js/pages/Genes'));
 const Biomarkers = lazy(() => import('js/pages/Biomarkers'));
 const CellTypes = lazy(() => import('js/pages/CellTypes'));
@@ -243,6 +245,23 @@ function Routes({ flaskData }) {
     );
   }
 
+  if (urlPath === '/templates') {
+    return (
+      <Route>
+        <Templates />
+      </Route>
+    );
+  }
+
+  if (urlPath.startsWith('/templates/')) {
+    const templateKey = urlPath.split('/').pop();
+    return (
+      <Route>
+        <Template templateKey={templateKey} />
+      </Route>
+    );
+  }
+
   if (urlPath === '/profile') {
     return (
       <Route>
diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx
index d553cfe0e6..512f21a2dc 100644
--- a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx
+++ b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx
@@ -6,13 +6,13 @@ import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
 import Skeleton from '@mui/material/Skeleton';
 
 import { VisualizationIcon } from 'js/shared-styles/icons';
+import PrimaryColorAccordion from 'js/shared-styles/accordions/PrimaryColorAccordion';
 
 import { datasetSectionId } from 'js/pages/Dataset/utils';
 import { useInView } from 'react-intersection-observer';
 import { useHash } from 'js/hooks/useHash';
 import { useTrackEntityPageEvent } from '../../useTrackEntityPageEvent';
 import StatusIcon from '../../StatusIcon';
-import { StyledProcessedDatasetAccordion } from './styles';
 import { useProcessedDatasetContext } from './ProcessedDatasetContext';
 import useProcessedDataStore from '../store';
 import { DetailPageSection } from '../../DetailPageSection';
@@ -57,7 +57,7 @@ export function ProcessedDatasetAccordion({ children }: PropsWithChildren) {
 
   return (
     <DetailPageSection id={datasetSectionId(sectionDataset, 'section')}>
-      <StyledProcessedDatasetAccordion
+      <PrimaryColorAccordion
         defaultExpanded={defaultExpanded}
         expanded={isExpanded}
         onChange={(_, expanded) => {
@@ -80,7 +80,7 @@ export function ProcessedDatasetAccordion({ children }: PropsWithChildren) {
           </Typography>
         </AccordionSummary>
         {dataset && !isLoading ? <AccordionDetails ref={ref}>{children}</AccordionDetails> : <LoadingFallback />}
-      </StyledProcessedDatasetAccordion>
+      </PrimaryColorAccordion>
     </DetailPageSection>
   );
 }
diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/styles.ts b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/styles.ts
index 1a07fec75c..013a40337b 100644
--- a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/styles.ts
+++ b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/styles.ts
@@ -1,31 +1,6 @@
 import Accordion from '@mui/material/Accordion';
 import { styled } from '@mui/material/styles';
 
-export const StyledProcessedDatasetAccordion = styled(Accordion)(({ theme }) => ({
-  '& > .MuiAccordionSummary-root': {
-    backgroundColor: theme.palette.secondaryContainer.main,
-    '& > .MuiAccordionSummary-content': {
-      display: 'flex',
-      alignItems: 'center',
-      gap: theme.spacing(1),
-      color: theme.palette.primary.main,
-      '&.Mui-expanded': {
-        color: theme.palette.common.white,
-      },
-    },
-    '& > .MuiAccordionSummary-expandIconWrapper': {
-      marginRight: theme.spacing(1),
-      color: theme.palette.primary.main,
-      '&.Mui-expanded': {
-        color: theme.palette.common.white,
-      },
-    },
-    '&.Mui-expanded': {
-      backgroundColor: theme.palette.primary.main,
-    },
-  },
-}));
-
 export const StyledSubsectionAccordion = styled(Accordion)(({ theme }) => ({
   '& > .MuiAccordionSummary-root': {
     flexDirection: 'row-reverse',
diff --git a/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx b/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx
index 35157a7081..30deb6f6ee 100644
--- a/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx
+++ b/context/app/static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx
@@ -28,7 +28,7 @@ import StatusIcon from '../../StatusIcon';
 
 type EntityTypesWithIcons = Exclude<
   keyof typeof entityIconMap,
-  'Support' | 'Collection' | 'Workspace' | 'VerifiedUser'
+  'Support' | 'Collection' | 'Workspace' | 'WorkspaceTemplate' | 'VerifiedUser'
 >;
 
 export interface AssayMetadata {
diff --git a/context/app/static/js/components/detailPage/summary/SummaryData/SummaryData.tsx b/context/app/static/js/components/detailPage/summary/SummaryData/SummaryData.tsx
index 804dcac2b9..3059d7f8b8 100644
--- a/context/app/static/js/components/detailPage/summary/SummaryData/SummaryData.tsx
+++ b/context/app/static/js/components/detailPage/summary/SummaryData/SummaryData.tsx
@@ -15,8 +15,8 @@ const entitiesWithStatus = datasetEntityTypes.concat(...publicationEntityTypes);
 interface SummaryDataProps extends PropsWithChildren {
   entity_type: AllEntityTypes;
   entityTypeDisplay?: string;
-  status: string;
-  mapped_data_access_level: string;
+  status?: string;
+  mapped_data_access_level?: string;
   title?: string;
   mapped_external_group_name?: string;
   otherButtons?: React.ReactNode;
@@ -58,9 +58,9 @@ function SummaryData({
               <>
                 <SummaryItem
                   showDivider={Boolean(mapped_external_group_name)}
-                  statusIcon={<StatusIcon status={status} />}
+                  statusIcon={<StatusIcon status={status ?? ''} />}
                 >
-                  {status} ({mapped_data_access_level})
+                  {status} ({mapped_data_access_level ?? ''})
                 </SummaryItem>
                 {mapped_external_group_name && <SummaryItem>{mapped_external_group_name}</SummaryItem>}
               </>
diff --git a/context/app/static/js/components/workspaces/AddDatasetsTable/AddDatasetsTable.tsx b/context/app/static/js/components/workspaces/AddDatasetsTable/AddDatasetsTable.tsx
index 304cf29492..2e78e698fd 100644
--- a/context/app/static/js/components/workspaces/AddDatasetsTable/AddDatasetsTable.tsx
+++ b/context/app/static/js/components/workspaces/AddDatasetsTable/AddDatasetsTable.tsx
@@ -5,9 +5,9 @@ import Autocomplete, { AutocompleteRenderInputParams } from '@mui/material/Autoc
 import InputAdornment from '@mui/material/InputAdornment';
 import Typography from '@mui/material/Typography';
 
-import { Alert } from 'js/shared-styles/alerts/Alert';
+import WorkspacesNoDatasetsAlert from 'js/components/workspaces/WorkspacesNoDatasetsAlert';
+import WorkspaceDatasetsTable from 'js/components/workspaces/WorkspaceDatasetsTable';
 import { UseDatasetsAutocompleteReturnType, SearchAheadHit } from './hooks';
-import WorkspaceDatasetsTable from '../WorkspaceDatasetsTable';
 
 function DatasetOption(props: React.HTMLAttributes<HTMLLIElement>, option: SearchAheadHit) {
   const {
@@ -76,7 +76,8 @@ function AddDatasetsTable({
         datasetsUUIDs={allDatasets}
         disabledIDs={new Set(workspaceDatasets)}
         removeDatasets={removeDatasets}
-        emptyAlert={<Alert severity="info">No datasets available.</Alert>}
+        emptyAlert={<WorkspacesNoDatasetsAlert />}
+        copyDatasets
       />
     </Stack>
   );
diff --git a/context/app/static/js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialog.tsx b/context/app/static/js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialog.tsx
index 5731924de3..16aa686cf7 100644
--- a/context/app/static/js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialog.tsx
+++ b/context/app/static/js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialog.tsx
@@ -12,12 +12,12 @@ import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
 
 import Step, { StepDescription } from 'js/shared-styles/surfaces/Step';
-import { Alert } from 'js/shared-styles/alerts/Alert';
 import WorkspaceField from 'js/components/workspaces/WorkspaceField';
 import { useLaunchWorkspaceStore } from 'js/stores/useWorkspaceModalStore';
 import { useSelectItems } from 'js/hooks/useSelectItems';
 import InternalLink from 'js/shared-styles/Links/InternalLink';
 
+import WorkspacesNoDatasetsAlert from 'js/components/workspaces/WorkspacesNoDatasetsAlert';
 import { useWorkspaceTemplates } from './hooks';
 import { CreateWorkspaceFormTypes } from './useCreateWorkspaceForm';
 import { CreateTemplateNotebooksTypes } from '../types';
@@ -181,7 +181,8 @@ function NewWorkspaceDialog({
               <WorkspaceDatasetsTable
                 datasetsUUIDs={allDatasets}
                 removeDatasets={removeDatasets}
-                emptyAlert={<Alert severity="info">No datasets available.</Alert>}
+                emptyAlert={<WorkspacesNoDatasetsAlert />}
+                copyDatasets
               />
             )}
           </Stack>
diff --git a/context/app/static/js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialogFromExample.tsx b/context/app/static/js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialogFromExample.tsx
new file mode 100644
index 0000000000..4e604f81ae
--- /dev/null
+++ b/context/app/static/js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialogFromExample.tsx
@@ -0,0 +1,177 @@
+import React, { PropsWithChildren, useCallback } from 'react';
+import { UseFormReturn, FieldErrors } from 'react-hook-form';
+
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import LoadingButton from '@mui/lab/LoadingButton';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
+
+import Step from 'js/shared-styles/surfaces/Step';
+import WorkspaceField from 'js/components/workspaces/WorkspaceField';
+import { useLaunchWorkspaceStore } from 'js/stores/useWorkspaceModalStore';
+import { CreateTemplateNotebooksTypes, TemplateExample } from 'js/components/workspaces/types';
+import WorkspaceDatasetsTable from 'js/components/workspaces/WorkspaceDatasetsTable';
+import AdvancedConfigOptions from 'js/components/workspaces/AdvancedConfigOptions';
+import { StyledSubtitle1 } from 'js/components/workspaces/style';
+import WorkspacesNoDatasetsAlert from 'js/components/workspaces/WorkspacesNoDatasetsAlert';
+import { useJobTypeName } from 'js/components/workspaces/NewWorkspaceDialog/hooks';
+import { CreateWorkspaceFormTypes } from './useCreateWorkspaceForm';
+
+const text = {
+  overview: {
+    title: 'Try Sample Workspace',
+    description:
+      'Sample workspaces are provided to help you get started with this template and to better understand the types of data that are compatible with it.',
+  },
+  datasets: {
+    title: 'Selected Datasets',
+  },
+  configure: {
+    title: 'Configure Workspace',
+    selected: {
+      title: 'Selected Configurations',
+      description:
+        'The recommended configurations have been selected for this launch. You can edit these settings in future launches.',
+    },
+    advanced: {
+      title: 'Advanced Configurations (Optional)',
+      description: 'The suggested advanced configurations for this template have been selected as defaults.',
+    },
+  },
+};
+
+type ReactHookFormProps = Pick<UseFormReturn<CreateWorkspaceFormTypes>, 'handleSubmit' | 'control'> & {
+  errors: FieldErrors<CreateWorkspaceFormTypes>;
+};
+
+interface NewWorkspaceDialogFromExampleProps {
+  example: TemplateExample;
+  dialogIsOpen: boolean;
+  handleClose: () => void;
+  onSubmit: ({ workspaceName, templateKeys, uuids }: CreateTemplateNotebooksTypes) => void;
+  allDatasets: string[];
+  isSubmitting?: boolean;
+}
+
+function NewWorkspaceDialogFromExample({
+  example,
+  dialogIsOpen,
+  handleClose,
+  handleSubmit,
+  control,
+  errors,
+  onSubmit,
+  allDatasets,
+  isSubmitting,
+}: PropsWithChildren<NewWorkspaceDialogFromExampleProps & ReactHookFormProps>) {
+  const { isOpen: isLaunchWorkspaceDialogOpen } = useLaunchWorkspaceStore();
+  const jobTypeName = useJobTypeName(example);
+
+  const submit = useCallback(
+    ({
+      'workspace-name': workspaceName,
+      templates: templateKeys,
+      workspaceJobTypeId,
+      datasets,
+      workspaceResourceOptions,
+    }: CreateWorkspaceFormTypes) => {
+      onSubmit({
+        workspaceName,
+        templateKeys,
+        uuids: datasets,
+        workspaceJobTypeId,
+        workspaceResourceOptions,
+      });
+    },
+    [onSubmit],
+  );
+
+  return (
+    <Dialog
+      open={dialogIsOpen && !isLaunchWorkspaceDialogOpen}
+      onClose={handleClose}
+      scroll="paper"
+      aria-labelledby="create-workspace-dialog-title"
+      maxWidth="lg"
+    >
+      <Box mb={2}>
+        <DialogTitle id="create-workspace-dialog-title" variant="h3">
+          {text.overview.title}
+        </DialogTitle>
+        <Box sx={{ px: 3 }}>
+          <Stack spacing={1} p={2} component={Paper}>
+            <Typography>{text.overview.description}</Typography>
+            <Typography variant="subtitle2">{example.title}</Typography>
+            <Typography>{example.description}</Typography>
+          </Stack>
+        </Box>
+      </Box>
+      <DialogContent dividers>
+        <Step title={text.datasets.title} index={0} hideRequiredText>
+          <WorkspaceDatasetsTable
+            datasetsUUIDs={allDatasets}
+            emptyAlert={<WorkspacesNoDatasetsAlert />}
+            isSelectable={false}
+          />
+        </Step>
+        <Step title={text.configure.title} index={1} isRequired>
+          <Stack
+            gap={2}
+            mt={1}
+            component="form"
+            id="create-workspace-form"
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            onSubmit={handleSubmit(submit)}
+          >
+            <WorkspaceField
+              control={control}
+              name="workspace-name"
+              label="Workspace Name"
+              placeholder="Like “Spleen-Related Data” or “ATAC-seq Visualizations”"
+              autoFocus
+              onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                e.stopPropagation();
+              }}
+            />
+            <Accordion>
+              <AccordionSummary expandIcon={<ArrowDropDownRounded color="primary" />}>
+                <StyledSubtitle1>{text.configure.selected.title}</StyledSubtitle1>
+              </AccordionSummary>
+              <AccordionDetails>
+                <Stack spacing={1}>
+                  <Typography>{text.configure.selected.description}</Typography>
+                  <Typography variant="subtitle2">Environment</Typography>
+                  <Typography>{jobTypeName}</Typography>
+                </Stack>
+              </AccordionDetails>
+            </Accordion>
+            <AdvancedConfigOptions control={control} description={text.configure.advanced.description} />
+          </Stack>
+        </Step>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <LoadingButton
+          loading={isSubmitting}
+          type="submit"
+          form="create-workspace-form"
+          disabled={Object.keys(errors).length > 0}
+        >
+          Launch Workspace
+        </LoadingButton>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default NewWorkspaceDialogFromExample;
diff --git a/context/app/static/js/components/workspaces/NewWorkspaceDialog/hooks.ts b/context/app/static/js/components/workspaces/NewWorkspaceDialog/hooks.ts
index da0fc7f0c1..ad48389c2e 100644
--- a/context/app/static/js/components/workspaces/NewWorkspaceDialog/hooks.ts
+++ b/context/app/static/js/components/workspaces/NewWorkspaceDialog/hooks.ts
@@ -10,10 +10,13 @@ import {
   CreateTemplateNotebooksTypes,
   TemplateTagsResponse,
   TemplatesTypes,
+  TemplateExample,
 } from 'js/components/workspaces/types';
 import { useCreateAndLaunchWorkspace, useCreateTemplates } from 'js/components/workspaces/hooks';
 import { buildDatasetSymlinks } from 'js/components/workspaces/utils';
 import { useWorkspaceToasts } from 'js/components/workspaces/toastHooks';
+import { useJobTypes } from 'js/components/workspaces/api';
+import { DEFAULT_JOB_TYPE } from 'js/components/workspaces/constants';
 
 interface UserTemplatesTypes {
   templatesURL: string;
@@ -131,4 +134,11 @@ function useWorkspaceTemplateTags() {
   return { tags };
 }
 
-export { useWorkspaceTemplates, useWorkspaceTemplateTags, useTemplateNotebooks };
+function useJobTypeName(example: TemplateExample) {
+  const { data } = useJobTypes();
+  const jobTypeKey = example.job_types?.[0] ?? DEFAULT_JOB_TYPE;
+
+  return data ? Object.values(data).find(({ id }) => id === jobTypeKey)?.name : jobTypeKey;
+}
+
+export { useWorkspaceTemplates, useWorkspaceTemplateTags, useTemplateNotebooks, useJobTypeName };
diff --git a/context/app/static/js/components/workspaces/NewWorkspaceDialog/index.ts b/context/app/static/js/components/workspaces/NewWorkspaceDialog/index.ts
index bcef0bec7b..f9a67ddb4d 100644
--- a/context/app/static/js/components/workspaces/NewWorkspaceDialog/index.ts
+++ b/context/app/static/js/components/workspaces/NewWorkspaceDialog/index.ts
@@ -1,5 +1,6 @@
 import NewWorkspaceDialog from './NewWorkspaceDialog';
 import NewWorkspaceDialogFromSelections from './NewWorkspaceDialogFromSelections';
+import NewWorkspaceDialogFromExample from './NewWorkspaceDialogFromExample';
 
-export { NewWorkspaceDialogFromSelections };
+export { NewWorkspaceDialogFromSelections, NewWorkspaceDialogFromExample };
 export default NewWorkspaceDialog;
diff --git a/context/app/static/js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm.ts b/context/app/static/js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm.ts
index a63ade7abf..ddfcfa6acb 100644
--- a/context/app/static/js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm.ts
+++ b/context/app/static/js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm.ts
@@ -39,6 +39,8 @@ interface CreateWorkspaceFormTypes extends FormWithTemplates {
 interface UseCreateWorkspaceTypes {
   defaultName?: string;
   defaultTemplate?: string;
+  defaultJobType?: string;
+  defaultResourceOptions?: WorkspaceResourceOptions;
   initialProtectedDatasets?: string;
   initialSelectedDatasets?: string[];
 }
@@ -57,7 +59,14 @@ const schema = z
 
 function useCreateWorkspaceForm({
   defaultName,
-  defaultTemplate,
+  defaultTemplate = DEFAULT_TEMPLATE_KEY,
+  defaultJobType = DEFAULT_JOB_TYPE,
+  defaultResourceOptions = {
+    num_cpus: DEFAULT_NUM_CPUS,
+    memory_mb: DEFAULT_MEMORY_MB,
+    time_limit_minutes: DEFAULT_TIME_LIMIT_MINUTES,
+    gpu_enabled: DEFAULT_GPU_ENABLED,
+  },
   initialProtectedDatasets,
   initialSelectedDatasets = [],
 }: UseCreateWorkspaceTypes) {
@@ -80,14 +89,9 @@ function useCreateWorkspaceForm({
     defaultValues: {
       'workspace-name': checkedWorkspaceName,
       'protected-datasets': checkedProtectedDatasets,
-      templates: [defaultTemplate ?? DEFAULT_TEMPLATE_KEY],
-      workspaceJobTypeId: DEFAULT_JOB_TYPE,
-      workspaceResourceOptions: {
-        num_cpus: DEFAULT_NUM_CPUS,
-        memory_mb: DEFAULT_MEMORY_MB,
-        time_limit_minutes: DEFAULT_TIME_LIMIT_MINUTES,
-        gpu_enabled: DEFAULT_GPU_ENABLED,
-      },
+      templates: [defaultTemplate],
+      workspaceJobTypeId: defaultJobType,
+      workspaceResourceOptions: defaultResourceOptions,
       datasets: initialSelectedDatasets,
     },
     mode: 'onChange',
diff --git a/context/app/static/js/components/workspaces/SelectableTemplateGrid/SelectableTemplateGrid.tsx b/context/app/static/js/components/workspaces/SelectableTemplateGrid/SelectableTemplateGrid.tsx
index 23f9ac9698..3ab533b0ac 100644
--- a/context/app/static/js/components/workspaces/SelectableTemplateGrid/SelectableTemplateGrid.tsx
+++ b/context/app/static/js/components/workspaces/SelectableTemplateGrid/SelectableTemplateGrid.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, ChangeEvent, useMemo } from 'react';
+import React, { useCallback, ChangeEvent } from 'react';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
@@ -10,7 +10,6 @@ import ErrorOrWarningMessages from 'js/shared-styles/alerts/ErrorOrWarningMessag
 import { TemplatesTypes } from '../types';
 import TemplateGrid from '../TemplateGrid';
 import { FormWithTemplates } from '../NewWorkspaceDialog/useCreateWorkspaceForm';
-import { sortTemplates } from '../utils';
 
 interface TemplateGridProps {
   disabledTemplates?: TemplatesTypes;
@@ -44,8 +43,6 @@ function SelectableTemplateGrid<FormType extends FormWithTemplates>({
     field.value satisfies FormType[typeof inputName],
   );
 
-  const sortedTemplates = useMemo(() => sortTemplates(templates, disabledTemplates), [templates, disabledTemplates]);
-
   const updateTemplates = useCallback(
     (templateKeys: string[]) => {
       setSelectedTemplates(templateKeys);
@@ -90,7 +87,7 @@ function SelectableTemplateGrid<FormType extends FormWithTemplates>({
         }
       />
       <TemplateGrid
-        templates={sortedTemplates}
+        templates={templates}
         selectItem={selectItem}
         selectedTemplates={selectedTemplates}
         disabledTemplates={disabledTemplates}
diff --git a/context/app/static/js/components/workspaces/TemplateGrid/TemplateGrid.tsx b/context/app/static/js/components/workspaces/TemplateGrid/TemplateGrid.tsx
index a0d75a09c8..b4be238425 100644
--- a/context/app/static/js/components/workspaces/TemplateGrid/TemplateGrid.tsx
+++ b/context/app/static/js/components/workspaces/TemplateGrid/TemplateGrid.tsx
@@ -1,8 +1,9 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, useMemo } from 'react';
 import Grid from '@mui/material/Grid';
-
 import SelectableCard from 'js/shared-styles/cards/SelectableCard/SelectableCard';
-import { TemplatesTypes } from '../types';
+import { InternalLink } from 'js/shared-styles/Links';
+import { sortTemplates } from 'js/components/workspaces/utils';
+import { TemplatesTypes } from 'js/components/workspaces/types';
 
 interface TemplateGridProps {
   templates: TemplatesTypes;
@@ -17,12 +18,14 @@ function TemplateGrid({
   selectedTemplates = new Set([]),
   disabledTemplates = {},
 }: TemplateGridProps) {
+  const sortedTemplates = useMemo(() => sortTemplates(templates, disabledTemplates), [templates, disabledTemplates]);
+
   return (
-    <Grid container columnSpacing={2} alignItems="stretch" sx={{ maxHeight: '625px', overflowY: 'auto' }}>
-      {Object.entries(templates).map(([templateKey, { title, description, tags }]) => (
-        <Grid item md={4} xs={12} key={templateKey} paddingBottom={2}>
+    <Grid container alignItems="stretch" sx={{ maxHeight: '625px', overflowY: 'auto' }}>
+      {Object.entries(sortedTemplates).map(([templateKey, { title, description, tags }]) => (
+        <Grid item md={4} xs={12} key={templateKey} paddingBottom={2} paddingX={1}>
           <SelectableCard
-            title={title}
+            title={<InternalLink href={`/templates/${templateKey}`}>{title}</InternalLink>}
             description={description}
             tags={tags}
             isSelected={selectedTemplates.has(templateKey) || templateKey in disabledTemplates}
diff --git a/context/app/static/js/components/workspaces/TemplateSelectStep/TemplateSelectStep.tsx b/context/app/static/js/components/workspaces/TemplateSelectStep/TemplateSelectStep.tsx
index 607c0dee2d..fd55c8cf6a 100644
--- a/context/app/static/js/components/workspaces/TemplateSelectStep/TemplateSelectStep.tsx
+++ b/context/app/static/js/components/workspaces/TemplateSelectStep/TemplateSelectStep.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Control } from 'react-hook-form';
-import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 
 import { SelectedItems } from 'js/hooks/useSelectItems';
 import Step, { StepDescription } from 'js/shared-styles/surfaces/Step';
 import ContactUsLink from 'js/shared-styles/Links/ContactUsLink';
+import Typography from '@mui/material/Typography';
 import SelectableTemplateGrid from '../SelectableTemplateGrid';
 import { TemplatesTypes } from '../types';
 import { FormWithTemplates } from '../NewWorkspaceDialog/useCreateWorkspaceForm';
@@ -52,10 +52,10 @@ function TemplateSelectStep<FormType extends FormWithTemplates>({
   return (
     <Step title={title} index={stepIndex}>
       <StepDescription blocks={description} />
-      <Typography sx={{ mt: 2 }} variant="subtitle1">
-        Filter workspace templates by tags
-      </Typography>
-      <Stack spacing={1}>
+      <Stack spacing={2} marginTop={3}>
+        <Typography sx={{ mt: 2 }} variant="subtitle1">
+          Filter workspace templates by tags
+        </Typography>
         <TemplateTagsAutocomplete
           selectedTags={selectedTags}
           recommendedTags={recommendedTags}
diff --git a/context/app/static/js/components/workspaces/TemplateTagsAutocomplete/TemplateTagsAutocomplete.tsx b/context/app/static/js/components/workspaces/TemplateTagsAutocomplete/TemplateTagsAutocomplete.tsx
index c3196b75b0..38d5d90b40 100644
--- a/context/app/static/js/components/workspaces/TemplateTagsAutocomplete/TemplateTagsAutocomplete.tsx
+++ b/context/app/static/js/components/workspaces/TemplateTagsAutocomplete/TemplateTagsAutocomplete.tsx
@@ -48,6 +48,11 @@ function TemplateTagsAutocomplete({
         onChange={(_, value: string[]) => {
           setSelectedTags(value);
         }}
+        renderInputProps={{
+          variant: 'outlined',
+          label: 'Workspace Template Tags',
+          placeholder: 'Select tags to filter workspace templates',
+        }}
       />
       <Box>
         <Typography variant="subtitle2" gutterBottom>
diff --git a/context/app/static/js/components/workspaces/WorkspaceDatasetsTable/WorkspaceDatasetsTable.tsx b/context/app/static/js/components/workspaces/WorkspaceDatasetsTable/WorkspaceDatasetsTable.tsx
index 5dd85d53d2..14c8364ca3 100644
--- a/context/app/static/js/components/workspaces/WorkspaceDatasetsTable/WorkspaceDatasetsTable.tsx
+++ b/context/app/static/js/components/workspaces/WorkspaceDatasetsTable/WorkspaceDatasetsTable.tsx
@@ -27,22 +27,26 @@ interface WorkspaceDatasetsTableProps {
   datasetsUUIDs: string[];
   removeDatasets?: (ids: string[]) => void;
   addDatasets?: MergedWorkspace;
+  copyDatasets?: boolean;
   label?: ReactNode;
   disabledIDs?: Set<string>;
   emptyAlert?: ReactNode;
   additionalButtons?: ReactNode;
   hideTableIfEmpty?: boolean;
+  isSelectable?: boolean;
 }
 
 function WorkspaceDatasetsTable({
   datasetsUUIDs,
   removeDatasets,
   addDatasets,
+  copyDatasets,
   label,
   disabledIDs,
   emptyAlert,
   additionalButtons,
   hideTableIfEmpty,
+  isSelectable = true,
 }: WorkspaceDatasetsTableProps) {
   const { selectedRows } = useSelectableTableStore();
   const query = useMemo(
@@ -67,35 +71,38 @@ function WorkspaceDatasetsTable({
   const datasetsPresent = datasetsUUIDs.length > 0;
   const hasMaxDatasets = addDatasets && isWorkspaceAtDatasetLimit(addDatasets);
   const hideTable = hideTableIfEmpty && !datasetsPresent;
+  const hideButtonRow = (!addDatasets && !removeDatasets && !copyDatasets && !additionalButtons) || !datasetsPresent;
 
   return (
     <Box>
-      <SpacedSectionButtonRow
-        leftText={label}
-        buttons={
-          <Stack direction="row" gap={1}>
-            {datasetsPresent && <Copy />}
-            {addDatasets && (
-              <WorkspacesUpdateButton
-                workspace={addDatasets}
-                dialogType="ADD_DATASETS"
-                tooltip={hasMaxDatasets ? tooltips.maxDatasets : tooltips.add}
-                disabled={hasMaxDatasets}
-              >
-                <AddIcon />
-              </WorkspacesUpdateButton>
-            )}
-            {removeDatasets && datasetsPresent && (
-              <Delete
-                onClick={() => removeDatasets([...selectedRows])}
-                tooltip={tooltips.delete}
-                disabled={selectedRows.size === 0}
-              />
-            )}
-            {additionalButtons}
-          </Stack>
-        }
-      />
+      {!hideButtonRow && (
+        <SpacedSectionButtonRow
+          leftText={label}
+          buttons={
+            <Stack direction="row" gap={1}>
+              {copyDatasets && datasetsPresent && <Copy />}
+              {addDatasets && (
+                <WorkspacesUpdateButton
+                  workspace={addDatasets}
+                  dialogType="ADD_DATASETS"
+                  tooltip={hasMaxDatasets ? tooltips.maxDatasets : tooltips.add}
+                  disabled={hasMaxDatasets}
+                >
+                  <AddIcon />
+                </WorkspacesUpdateButton>
+              )}
+              {removeDatasets && datasetsPresent && (
+                <Delete
+                  onClick={() => removeDatasets([...selectedRows])}
+                  tooltip={tooltips.delete}
+                  disabled={selectedRows.size === 0}
+                />
+              )}
+              {additionalButtons}
+            </Stack>
+          }
+        />
+      )}
       {hideTable ? (
         emptyAlert
       ) : (
@@ -103,6 +110,7 @@ function WorkspaceDatasetsTable({
           entities={[{ query, columns, entityType: 'Dataset' }]}
           disabledIDs={disabledIDs}
           emptyAlert={emptyAlert}
+          isSelectable={isSelectable}
         />
       )}
     </Box>
diff --git a/context/app/static/js/components/workspaces/WorkspacesAuthGuard/WorkspacesAuthGuard.tsx b/context/app/static/js/components/workspaces/WorkspacesAuthGuard/WorkspacesAuthGuard.tsx
index ae38a0d6c4..a1ea654d56 100644
--- a/context/app/static/js/components/workspaces/WorkspacesAuthGuard/WorkspacesAuthGuard.tsx
+++ b/context/app/static/js/components/workspaces/WorkspacesAuthGuard/WorkspacesAuthGuard.tsx
@@ -8,7 +8,7 @@ function WorkspacesAuthGuard({ children }: { children: ReactNode }) {
 
   if (!isAuthenticated) {
     return (
-      <TextItems textKey="unauthenticated">
+      <TextItems textKey="workspacesUserOrLoggedOut">
         <LogInAlert />
       </TextItems>
     );
@@ -16,7 +16,7 @@ function WorkspacesAuthGuard({ children }: { children: ReactNode }) {
 
   if (!isWorkspacesUser) {
     return (
-      <TextItems textKey="noAccess">
+      <TextItems textKey="nonWorkspacesUser">
         <AccessAlert />
       </TextItems>
     );
diff --git a/context/app/static/js/components/workspaces/WorkspacesNoDatasetsAlert.tsx b/context/app/static/js/components/workspaces/WorkspacesNoDatasetsAlert.tsx
new file mode 100644
index 0000000000..e70f2f6d1d
--- /dev/null
+++ b/context/app/static/js/components/workspaces/WorkspacesNoDatasetsAlert.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Alert } from 'js/shared-styles/alerts/Alert';
+
+export default function WorkspacesNoDatasetsAlert() {
+  return <Alert severity="info">No datasets available.</Alert>;
+}
diff --git a/context/app/static/js/components/workspaces/types.ts b/context/app/static/js/components/workspaces/types.ts
index dad088b505..9a63ad4d2b 100644
--- a/context/app/static/js/components/workspaces/types.ts
+++ b/context/app/static/js/components/workspaces/types.ts
@@ -101,6 +101,16 @@ type WorkspaceAPIResponse<Data> = WorkspaceAPIFailure | WorkspaceAPISuccess<Data
 
 type WorkspaceAPIResponseWithoutData = Omit<WorkspaceAPIResponse<undefined>, 'data'>;
 
+interface TemplateExample {
+  title: string;
+  description: string;
+  datasets: string[];
+  assay_display_name?: string[];
+  job_types?: string[];
+  resource_options?: WorkspaceResourceOptions;
+  required_filetypes?: string[];
+}
+
 interface TemplateTypes {
   title: string;
   description: string;
@@ -108,6 +118,7 @@ interface TemplateTypes {
   is_multi_dataset_template: boolean;
   template_format: string;
   is_hidden: boolean;
+  examples: TemplateExample[];
 }
 
 type TemplatesTypes = Record<string, TemplateTypes>;
@@ -147,6 +158,7 @@ export type {
   TemplatesResponse,
   CreateTemplatesResponse,
   CreateWorkspaceResponse,
+  TemplateExample,
   TemplatesTypes,
   CreateTemplateNotebooksTypes,
   TemplateTags,
diff --git a/context/app/static/js/components/workspaces/workspaceMessaging.tsx b/context/app/static/js/components/workspaces/workspaceMessaging.tsx
index 99c028f2ff..daaf194ec3 100644
--- a/context/app/static/js/components/workspaces/workspaceMessaging.tsx
+++ b/context/app/static/js/components/workspaces/workspaceMessaging.tsx
@@ -3,7 +3,6 @@ import React, { PropsWithChildren, useState } from 'react';
 import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
 
 import LabelledSectionText from 'js/shared-styles/sections/LabelledSectionText';
 import ContactUsLink from 'js/shared-styles/Links/ContactUsLink';
@@ -11,12 +10,12 @@ import { Alert } from 'js/shared-styles/alerts';
 import LoginAlert from 'js/shared-styles/alerts/LoginAlert';
 import { InternalLink } from 'js/shared-styles/Links';
 import OutboundIconLink from 'js/shared-styles/Links/iconLinks/OutboundIconLink';
-import { InfoIcon } from 'js/shared-styles/icons';
+import OutlinedLinkButton from 'js/shared-styles/buttons/OutlinedLinkButton';
+import LogInPanel from 'js/shared-styles/panels/LogInPanel';
 import { useSelectItems } from 'js/hooks/useSelectItems';
 
 import TemplateGrid from './TemplateGrid';
 import { useWorkspaceTemplates } from './NewWorkspaceDialog/hooks';
-import { LoginButton } from '../detailPage/BulkDataTransfer/style';
 import TemplateTagsAutocomplete from './TemplateTagsAutocomplete/TemplateTagsAutocomplete';
 
 function ContactUsForAccess() {
@@ -32,6 +31,20 @@ const workspacesDescription = {
   body: 'Workspaces enable lightweight exploration of public HuBMAP data and user-provided data using Python and R in a Jupyter Lab environment hosted by HuBMAP at no cost to community members.',
 };
 
+const workspacesUsage = {
+  title: 'How do I use workspaces?',
+  body: (
+    <>
+      Explore more about this platform through our{' '}
+      <InternalLink href="/tutorials/workspaces">workspace tutorials</InternalLink> to optimize your experience with
+      workspaces. To begin a new workspace, find datasets on our{' '}
+      <InternalLink href="/search?entity_type[0]=Dataset">search page</InternalLink> and launch a workspace from them.
+      To learn more about getting started, explore <InternalLink href="/templates">workspace templates</InternalLink> to
+      help you start analyzing HuBMAP data.
+    </>
+  ),
+};
+
 const workspacesSupportInfo = {
   title: 'What do workspaces currently support?',
   body: 'Workspaces launch with Python support by default, with the option to add support for R upon launch. Please note that workspaces with added R support may experience longer load times.',
@@ -49,8 +62,13 @@ const workspacesQuestionsSuggestions = {
 };
 
 const text = {
-  unauthenticated: [workspacesDescription, workspacesSupportInfo, workspacesQuestionsSuggestions],
-  noAccess: [
+  workspacesUserOrLoggedOut: [
+    workspacesDescription,
+    workspacesUsage,
+    workspacesSupportInfo,
+    workspacesQuestionsSuggestions,
+  ],
+  nonWorkspacesUser: [
     workspacesDescription,
     {
       title: 'How do I get access to workspaces as a HuBMAP member?',
@@ -63,26 +81,26 @@ const text = {
         </>
       ),
     },
-  ],
-  access: [
-    workspacesDescription,
-    {
-      title: 'How do I use workspaces?',
-      body: (
-        <>
-          Explore more about this platform through our{' '}
-          <InternalLink href="/tutorials/workspaces">workspace tutorials</InternalLink> to optimize your experience with
-          workspaces. To begin a new workspace, find datasets on our{' '}
-          <InternalLink href="/search?entity_type[0]=Dataset">search page</InternalLink> and launch a workspace from
-          them.
-        </>
-      ),
-    },
+    workspacesUsage,
     workspacesSupportInfo,
-    workspacesQuestionsSuggestions,
   ],
 };
 
+const pageLinks = [
+  {
+    link: '/tutorials/workspaces',
+    children: 'Tutorials',
+  },
+  {
+    link: '/templates',
+    children: 'Templates',
+  },
+  {
+    link: '/search?entity_type[0]=Dataset',
+    children: 'Dataset Search Page',
+  },
+];
+
 function LogInAlert() {
   return <LoginAlert featureName="workspaces" />;
 }
@@ -96,6 +114,20 @@ function AccessAlert() {
   );
 }
 
+function TemplateLogInPanel() {
+  if (isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <LogInPanel>
+      Explore workspace templates designed to help you start analyzing HuBMAP data. Use tags to filter templates by your
+      specific interests. Click on any template for detailed information.{' '}
+      <InternalLink href="/login">Log in</InternalLink> to begin working in a workspace.
+    </LogInPanel>
+  );
+}
+
 function TemplateGridPreview() {
   const { selectedItems: selectedRecommendedTags, toggleItem: toggleTag } = useSelectItems([]);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
@@ -103,37 +135,30 @@ function TemplateGridPreview() {
 
   const recommendedTags = ['visualization', 'api'];
 
+  return (
+    <Stack spacing={2}>
+      <TemplateTagsAutocomplete
+        selectedTags={selectedTags}
+        recommendedTags={recommendedTags}
+        toggleTag={toggleTag}
+        setSelectedTags={setSelectedTags}
+        selectedRecommendedTags={selectedRecommendedTags}
+      />
+      <TemplateGrid templates={templates} />
+    </Stack>
+  );
+}
+
+function TemplatePreviewSection() {
+  if (isAuthenticated) {
+    return null;
+  }
+
   return (
     <Stack pt={2} spacing={2}>
-      <Typography component="h3" variant="h4">
-        Workspace Templates
-      </Typography>
-      <Stack component={Paper} p={2} spacing={2}>
-        <Stack direction="row" spacing={2}>
-          <InfoIcon color="primary" fontSize="1.5rem" />
-          <Typography>
-            Here are workspace templates available to help you start analyzing HuBMAP data. They are categorized by
-            tags, which can help you filter templates based on your interests. To view more details on a template,
-            please <InternalLink href="/login">log in</InternalLink>.
-          </Typography>
-        </Stack>
-        <Box>
-          <LoginButton href="/login" variant="contained" color="primary">
-            Log In
-          </LoginButton>
-        </Box>
-      </Stack>
-      <Typography variant="subtitle2">Workspace Template Tags</Typography>
-      <Stack spacing={1}>
-        <TemplateTagsAutocomplete
-          selectedTags={selectedTags}
-          recommendedTags={recommendedTags}
-          toggleTag={toggleTag}
-          setSelectedTags={setSelectedTags}
-          selectedRecommendedTags={selectedRecommendedTags}
-        />
-        <TemplateGrid templates={templates} />
-      </Stack>
+      <Typography variant="h4">Workspace Templates</Typography>
+      <TemplateLogInPanel />
+      <TemplateGridPreview />
     </Stack>
   );
 }
@@ -145,15 +170,22 @@ function TextItems({ textKey, children }: PropsWithChildren<{ textKey: keyof typ
         {children}
         <Stack spacing={1}>
           {text[textKey].map(({ title, body }) => (
-            <LabelledSectionText label={title} key={title} spacing={2}>
+            <LabelledSectionText label={title} key={title} spacing={1}>
               {body}
             </LabelledSectionText>
           ))}
+          <LabelledSectionText label="Relevant Pages" spacing={1}>
+            <Stack direction="row" spacing={1}>
+              {pageLinks.map((page) => (
+                <OutlinedLinkButton key={page.link} {...page} />
+              ))}
+            </Stack>
+          </LabelledSectionText>
         </Stack>
       </Stack>
-      {!isAuthenticated && <TemplateGridPreview />}
+      <TemplatePreviewSection />
     </Stack>
   );
 }
 
-export { LogInAlert, AccessAlert, TextItems };
+export { LogInAlert, AccessAlert, TemplateLogInPanel, TemplateGridPreview, TextItems };
diff --git a/context/app/static/js/pages/Template/Template.tsx b/context/app/static/js/pages/Template/Template.tsx
new file mode 100644
index 0000000000..aff96bbb98
--- /dev/null
+++ b/context/app/static/js/pages/Template/Template.tsx
@@ -0,0 +1,149 @@
+import React, { useMemo } from 'react';
+import Stack from '@mui/material/Stack';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+
+import { useWorkspaceTemplates } from 'js/components/workspaces/NewWorkspaceDialog/hooks';
+import SummaryPaper from 'js/shared-styles/sections/SectionPaper';
+import SummaryData from 'js/components/detailPage/summary/SummaryData';
+import LabelledSectionText from 'js/shared-styles/sections/LabelledSectionText';
+import LogInPanel from 'js/shared-styles/panels/LogInPanel';
+import { InternalLink } from 'js/shared-styles/Links';
+import IconPanel from 'js/shared-styles/panels/IconPanel';
+import WorkspaceDatasetsTable from 'js/components/workspaces/WorkspaceDatasetsTable';
+import { StyledButton, StyledChip } from 'js/pages/Template/style';
+import { NewWorkspaceDialogFromExample } from 'js/components/workspaces/NewWorkspaceDialog';
+import { useCreateWorkspaceForm } from 'js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm';
+import { useDatasetTypeMap } from 'js/components/home/HuBMAPDatasetsChart/hooks';
+import { TemplateExample } from 'js/components/workspaces/types';
+import PrimaryColorAccordion from 'js/shared-styles/accordions/PrimaryColorAccordion';
+
+interface ExampleAccordionProps {
+  example: TemplateExample;
+  templateKey: string;
+  defaultExpanded?: boolean;
+}
+
+function ExampleAccordion({ example, templateKey, defaultExpanded }: ExampleAccordionProps) {
+  const { title, description, assay_display_name, datasets, job_types, resource_options } = example;
+
+  const { setDialogIsOpen, ...rest } = useCreateWorkspaceForm({
+    defaultName: title,
+    defaultTemplate: templateKey,
+    defaultJobType: job_types?.[0],
+    defaultResourceOptions: resource_options,
+    initialSelectedDatasets: datasets,
+  });
+
+  const datasetTypeMap = useDatasetTypeMap();
+  const assayToRawDatasetMap = useMemo(() => {
+    const map: Record<string, string> = {};
+    Object.keys(datasetTypeMap).forEach((key) => {
+      datasetTypeMap[key].forEach((name) => {
+        map[name] = key;
+      });
+    });
+    return map;
+  }, [datasetTypeMap]);
+
+  return (
+    <>
+      <PrimaryColorAccordion defaultExpanded={defaultExpanded}>
+        <AccordionSummary expandIcon={<KeyboardArrowDownRoundedIcon className="accordion-icon" />}>
+          <Typography variant="subtitle1" color="inherit" component="h4">
+            {title}
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Stack spacing={2}>
+            <StyledButton variant="contained" disabled={!isAuthenticated} onClick={() => setDialogIsOpen(true)}>
+              Try Sample Workspace
+            </StyledButton>
+            <Stack component={SummaryPaper} spacing={1}>
+              <LabelledSectionText label="Description">{description}</LabelledSectionText>
+              {assay_display_name && (
+                <LabelledSectionText
+                  label="Dataset Types"
+                  iconTooltipText="Dataset types that are used in this sample workspace."
+                >
+                  <Stack spacing={1} direction="row">
+                    {assay_display_name.map((name, idx) => (
+                      <InternalLink
+                        href={`/search?raw_dataset_type_keyword-assay_display_name_keyword[${assayToRawDatasetMap[name]}][0]=${encodeURI(name)}&entity_type[0]=Dataset`}
+                        key={name}
+                      >
+                        {idx === assay_display_name.length - 1 ? name : `${name}, `}
+                      </InternalLink>
+                    ))}
+                  </Stack>
+                </LabelledSectionText>
+              )}
+            </Stack>
+            <WorkspaceDatasetsTable datasetsUUIDs={[...datasets]} isSelectable={false} />
+          </Stack>
+        </AccordionDetails>
+      </PrimaryColorAccordion>
+      <NewWorkspaceDialogFromExample example={example} {...rest} />
+    </>
+  );
+}
+
+interface TemplatePageProps {
+  templateKey: string;
+}
+
+function Template({ templateKey }: TemplatePageProps) {
+  const { templates } = useWorkspaceTemplates();
+  const template = templates[templateKey];
+
+  if (!template) {
+    return null;
+  }
+
+  return (
+    <Stack spacing={4} marginBottom={5}>
+      <Stack spacing={2}>
+        <SummaryData title={template.title} entity_type="WorkspaceTemplate" entityTypeDisplay="Workspace Template" />
+        <Stack component={SummaryPaper} spacing={1}>
+          <LabelledSectionText label="Description">{template.description}</LabelledSectionText>
+          <LabelledSectionText label="Tags">
+            <Stack spacing={1} marginTop={1} direction="row">
+              {template.tags.map((tag) => (
+                <StyledChip key={tag} label={tag} variant="outlined" />
+              ))}
+            </Stack>
+          </LabelledSectionText>
+        </Stack>
+      </Stack>
+      {template.examples && (
+        <Stack spacing={1}>
+          <Typography variant="h4">Sample Workspaces</Typography>
+          {isAuthenticated ? (
+            <IconPanel status="info">
+              Sample workspaces are provided to help you get started with this template and to better understand the
+              types of data that are compatible with it.
+            </IconPanel>
+          ) : (
+            <LogInPanel>
+              Sample workspaces are available to help you get started with this template and better understand the types
+              of compatible data. Please <InternalLink href="/login">log in</InternalLink> to explore a sample
+              workspace.
+            </LogInPanel>
+          )}
+          {template.examples.map((example, idx) => (
+            <ExampleAccordion
+              key={example.title}
+              example={example}
+              templateKey={templateKey}
+              defaultExpanded={idx === 0}
+            />
+          ))}
+        </Stack>
+      )}
+    </Stack>
+  );
+}
+
+export default Template;
diff --git a/context/app/static/js/pages/Template/index.ts b/context/app/static/js/pages/Template/index.ts
new file mode 100644
index 0000000000..fee8748da3
--- /dev/null
+++ b/context/app/static/js/pages/Template/index.ts
@@ -0,0 +1,3 @@
+import Template from './Template';
+
+export default Template;
diff --git a/context/app/static/js/pages/Template/style.ts b/context/app/static/js/pages/Template/style.ts
new file mode 100644
index 0000000000..cebab431ee
--- /dev/null
+++ b/context/app/static/js/pages/Template/style.ts
@@ -0,0 +1,14 @@
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+
+const StyledButton = styled(Button)({
+  alignSelf: 'flex-end',
+});
+
+const StyledChip = styled(Chip)(({ theme }) => ({
+  borderRadius: '.5rem',
+  borderColor: theme.palette.grey[200],
+}));
+
+export { StyledChip, StyledButton };
diff --git a/context/app/static/js/pages/Templates/Templates.tsx b/context/app/static/js/pages/Templates/Templates.tsx
new file mode 100644
index 0000000000..6db4ef85bb
--- /dev/null
+++ b/context/app/static/js/pages/Templates/Templates.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Stack from '@mui/material/Stack';
+
+import { TemplateGridPreview, TemplateLogInPanel } from 'js/components/workspaces/workspaceMessaging';
+import { WorkspacesIcon } from 'js/shared-styles/icons';
+import IconPageTitle from 'js/shared-styles/pages/IconPageTitle';
+
+function Templates() {
+  return (
+    <Stack spacing={3}>
+      <IconPageTitle icon={WorkspacesIcon}>Templates</IconPageTitle>
+      <TemplateLogInPanel />
+      <TemplateGridPreview />
+    </Stack>
+  );
+}
+
+export default Templates;
diff --git a/context/app/static/js/pages/Templates/index.js b/context/app/static/js/pages/Templates/index.js
new file mode 100644
index 0000000000..707a86a04d
--- /dev/null
+++ b/context/app/static/js/pages/Templates/index.js
@@ -0,0 +1,3 @@
+import Templates from './Templates';
+
+export default Templates;
diff --git a/context/app/static/js/pages/Workspace/Workspace.tsx b/context/app/static/js/pages/Workspace/Workspace.tsx
index 4d0708ec98..a22183cef8 100644
--- a/context/app/static/js/pages/Workspace/Workspace.tsx
+++ b/context/app/static/js/pages/Workspace/Workspace.tsx
@@ -71,8 +71,6 @@ function WorkspaceContent({ workspaceId }: WorkspacePageProps) {
           title={workspace.name}
           entity_type="Workspace"
           entityTypeDisplay={undefined}
-          status=""
-          mapped_data_access_level=""
           otherButtons={
             <>
               <WorkspacesUpdateButton
@@ -120,6 +118,7 @@ function WorkspaceContent({ workspaceId }: WorkspacePageProps) {
         addDatasets={workspace}
         label={<SectionHeader>Datasets</SectionHeader>}
         hideTableIfEmpty
+        copyDatasets
         emptyAlert={
           <Alert
             severity="info"
diff --git a/context/app/static/js/pages/Workspaces/Workspaces.tsx b/context/app/static/js/pages/Workspaces/Workspaces.tsx
index 967c2555ae..0d7a81f540 100644
--- a/context/app/static/js/pages/Workspaces/Workspaces.tsx
+++ b/context/app/static/js/pages/Workspaces/Workspaces.tsx
@@ -29,7 +29,7 @@ function Workspaces() {
       <WorkspacesTitle />
       <WorkspacesTutorialPrompt />
       <WorkspacesAuthGuard>
-        <TextItems textKey="access" />
+        <TextItems textKey="workspacesUserOrLoggedOut" />
         <WorkspacesAuthenticated />
       </WorkspacesAuthGuard>
     </Stack>
diff --git a/context/app/static/js/shared-styles/accordions/PrimaryColorAccordion/index.ts b/context/app/static/js/shared-styles/accordions/PrimaryColorAccordion/index.ts
new file mode 100644
index 0000000000..9256362020
--- /dev/null
+++ b/context/app/static/js/shared-styles/accordions/PrimaryColorAccordion/index.ts
@@ -0,0 +1,3 @@
+import { PrimaryColorAccordion } from './style';
+
+export default PrimaryColorAccordion;
diff --git a/context/app/static/js/shared-styles/accordions/PrimaryColorAccordion/style.ts b/context/app/static/js/shared-styles/accordions/PrimaryColorAccordion/style.ts
new file mode 100644
index 0000000000..4789034429
--- /dev/null
+++ b/context/app/static/js/shared-styles/accordions/PrimaryColorAccordion/style.ts
@@ -0,0 +1,29 @@
+import { styled } from '@mui/material/styles';
+import Accordion from '@mui/material/Accordion';
+
+const PrimaryColorAccordion = styled(Accordion)(({ theme }) => ({
+  '& > .MuiAccordionSummary-root': {
+    backgroundColor: theme.palette.secondaryContainer.main,
+    '& > .MuiAccordionSummary-content': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: theme.spacing(1),
+      color: theme.palette.primary.main,
+      '&.Mui-expanded': {
+        color: theme.palette.common.white,
+      },
+    },
+    '& > .MuiAccordionSummary-expandIconWrapper': {
+      marginRight: theme.spacing(1),
+      color: theme.palette.primary.main,
+      '&.Mui-expanded': {
+        color: theme.palette.common.white,
+      },
+    },
+    '&.Mui-expanded': {
+      backgroundColor: theme.palette.primary.main,
+    },
+  },
+}));
+
+export { PrimaryColorAccordion };
diff --git a/context/app/static/js/shared-styles/buttons/OutlinedLinkButton/OutlinedLinkButton.tsx b/context/app/static/js/shared-styles/buttons/OutlinedLinkButton/OutlinedLinkButton.tsx
index 61d64ac9e0..bfcfaaee24 100644
--- a/context/app/static/js/shared-styles/buttons/OutlinedLinkButton/OutlinedLinkButton.tsx
+++ b/context/app/static/js/shared-styles/buttons/OutlinedLinkButton/OutlinedLinkButton.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import Button from '@mui/material/Button';
 import LinkIcon from '@mui/icons-material/Link';
+import { StyledButton } from 'js/shared-styles/buttons/OutlinedLinkButton/style';
 
 interface OutlinedLinkButtonProps extends PropsWithChildren {
   link: string;
@@ -8,18 +8,14 @@ interface OutlinedLinkButtonProps extends PropsWithChildren {
 
 function OutlinedLinkButton({ link, children }: OutlinedLinkButtonProps) {
   return (
-    <Button
+    <StyledButton
       variant="outlined"
       color="info"
-      sx={(theme) => ({
-        borderColor: theme.palette.grey[300],
-        borderRadius: theme.spacing(0.5),
-      })}
       href={link}
-      endIcon={<LinkIcon color="info" fontSize="1rem" />}
+      endIcon={<LinkIcon color="info" sx={{ width: '1rem' }} />}
     >
       {children}
-    </Button>
+    </StyledButton>
   );
 }
 
diff --git a/context/app/static/js/shared-styles/buttons/OutlinedLinkButton/style.ts b/context/app/static/js/shared-styles/buttons/OutlinedLinkButton/style.ts
new file mode 100644
index 0000000000..a328a10162
--- /dev/null
+++ b/context/app/static/js/shared-styles/buttons/OutlinedLinkButton/style.ts
@@ -0,0 +1,9 @@
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  borderColor: theme.palette.grey[300],
+  borderRadius: theme.spacing(0.5),
+}));
+
+export { StyledButton };
diff --git a/context/app/static/js/shared-styles/cards/SelectableCard/SelectableCard.tsx b/context/app/static/js/shared-styles/cards/SelectableCard/SelectableCard.tsx
index b0a12c700f..f8491b024a 100644
--- a/context/app/static/js/shared-styles/cards/SelectableCard/SelectableCard.tsx
+++ b/context/app/static/js/shared-styles/cards/SelectableCard/SelectableCard.tsx
@@ -8,7 +8,7 @@ import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';
 import { StyledCard, SelectableCardText } from './styles';
 
 interface SelectableCardProps extends React.ComponentProps<typeof StyledCard> {
-  title: string;
+  title: React.ReactNode;
   description: string;
   tags?: string[];
   isSelected?: boolean;
diff --git a/context/app/static/js/shared-styles/icons/entityIconMap.ts b/context/app/static/js/shared-styles/icons/entityIconMap.ts
index 2cc179772a..f648951234 100644
--- a/context/app/static/js/shared-styles/icons/entityIconMap.ts
+++ b/context/app/static/js/shared-styles/icons/entityIconMap.ts
@@ -11,7 +11,7 @@ import {
   CellTypeIcon,
 } from './icons';
 
-type MUIIcon = typeof DonorIcon;
+export type MUIIcon = typeof DonorIcon;
 
 type CellTypeEntityType = 'CellType';
 type GeneEntityType = 'Gene';
@@ -20,7 +20,7 @@ type UBKGEntityType = CellTypeEntityType | GeneEntityType;
 type VerifiedUserEntityType = 'VerifiedUser';
 type GlobusEntityType = VerifiedUserEntityType;
 
-type WorkspaceEntityType = 'Workspace';
+type WorkspaceEntityType = 'Workspace' | 'WorkspaceTemplate';
 
 type WorkspaceAPIEntityType = WorkspaceEntityType;
 
@@ -34,6 +34,7 @@ export const entityIconMap: Record<AllEntityTypes, MUIIcon> = {
   Publication: PublicationIcon,
   Collection: CollectionIcon,
   Workspace: WorkspacesIcon,
+  WorkspaceTemplate: WorkspacesIcon,
   CellType: CellTypeIcon,
   Gene: GeneIcon,
   VerifiedUser: VerifiedIcon,
diff --git a/context/app/static/js/shared-styles/pages/IconPageTitle/IconPageTitle.tsx b/context/app/static/js/shared-styles/pages/IconPageTitle/IconPageTitle.tsx
index febb9b64c5..e11d445554 100644
--- a/context/app/static/js/shared-styles/pages/IconPageTitle/IconPageTitle.tsx
+++ b/context/app/static/js/shared-styles/pages/IconPageTitle/IconPageTitle.tsx
@@ -1,20 +1,20 @@
-import React, { ComponentProps } from 'react';
-
+import React from 'react';
+import Stack from '@mui/material/Stack';
 import PageTitle from 'js/shared-styles/pages/PageTitle';
-import { FlexContainer, StyledHeaderIcon } from './style';
+import { MUIIcon } from 'js/shared-styles/icons/entityIconMap';
+import { StyledHeaderIcon } from './style';
 
-interface IconPageTitleProps extends ComponentProps<typeof FlexContainer> {
-  icon: React.ElementType;
+interface IconPageTitleProps {
+  icon: MUIIcon;
   iconProps?: Record<string, unknown>;
-  children: React.ReactNode;
 }
 
-function IconPageTitle({ icon, children, iconProps, ...rest }: IconPageTitleProps) {
+function IconPageTitle({ icon, children, iconProps, ...rest }: React.PropsWithChildren<IconPageTitleProps>) {
   return (
-    <FlexContainer {...rest}>
-      <StyledHeaderIcon as={icon} color="primary" {...iconProps} />
+    <Stack direction="row" alignItems="center" {...rest}>
+      <StyledHeaderIcon component={icon} color="primary" {...iconProps} />
       <PageTitle>{children}</PageTitle>
-    </FlexContainer>
+    </Stack>
   );
 }
 
diff --git a/context/app/static/js/shared-styles/pages/IconPageTitle/style.ts b/context/app/static/js/shared-styles/pages/IconPageTitle/style.ts
index 781268255e..7436d42a3c 100644
--- a/context/app/static/js/shared-styles/pages/IconPageTitle/style.ts
+++ b/context/app/static/js/shared-styles/pages/IconPageTitle/style.ts
@@ -1,15 +1,8 @@
 import { styled } from '@mui/material/styles';
-
 import HeaderIcon from 'js/shared-styles/icons/HeaderIcon';
 
-const FlexContainer = styled('div')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  marginBottom: theme.spacing(2),
-}));
-
 const StyledHeaderIcon = styled(HeaderIcon)(({ theme }) => ({
   marginRight: theme.spacing(1.5),
 }));
 
-export { FlexContainer, StyledHeaderIcon };
+export { StyledHeaderIcon };
diff --git a/context/app/static/js/shared-styles/panels/LogInPanel/LogInPanel.tsx b/context/app/static/js/shared-styles/panels/LogInPanel/LogInPanel.tsx
new file mode 100644
index 0000000000..f8d2459d88
--- /dev/null
+++ b/context/app/static/js/shared-styles/panels/LogInPanel/LogInPanel.tsx
@@ -0,0 +1,31 @@
+import React, { PropsWithChildren } from 'react';
+
+import Stack from '@mui/material/Stack';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+import { InfoIcon } from 'js/shared-styles/icons';
+import { LoginButton } from 'js/components/detailPage/BulkDataTransfer/style';
+
+function LogInPanel({ children }: PropsWithChildren) {
+  if (isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <Stack component={Paper} p={2} spacing={2}>
+      <Stack direction="row" spacing={2}>
+        <InfoIcon color="primary" fontSize="1.5rem" />
+        <Typography>{children}</Typography>
+      </Stack>
+      <Box>
+        <LoginButton href="/login" variant="contained" color="primary">
+          Log In
+        </LoginButton>
+      </Box>
+    </Stack>
+  );
+}
+
+export default LogInPanel;
diff --git a/context/app/static/js/shared-styles/panels/LogInPanel/index.ts b/context/app/static/js/shared-styles/panels/LogInPanel/index.ts
new file mode 100644
index 0000000000..6381482bde
--- /dev/null
+++ b/context/app/static/js/shared-styles/panels/LogInPanel/index.ts
@@ -0,0 +1,3 @@
+import LogInPanel from './LogInPanel';
+
+export default LogInPanel;
diff --git a/context/app/static/js/shared-styles/surfaces/Step/Step.tsx b/context/app/static/js/shared-styles/surfaces/Step/Step.tsx
index 927b728aed..c2de34d34a 100644
--- a/context/app/static/js/shared-styles/surfaces/Step/Step.tsx
+++ b/context/app/static/js/shared-styles/surfaces/Step/Step.tsx
@@ -7,6 +7,7 @@ interface StepProps {
   index?: number;
   title: string;
   isRequired?: boolean;
+  hideRequiredText?: boolean;
 }
 
 interface RequiredVariant {
@@ -34,7 +35,7 @@ function StepDescription({ blocks }: { blocks: (string | ReactElement)[] }) {
     </Stack>
   );
 }
-function Step({ index, title, isRequired = false, children }: PropsWithChildren<StepProps>) {
+function Step({ index, title, isRequired = false, hideRequiredText, children }: PropsWithChildren<StepProps>) {
   const { color, text } = requiredVariants[isRequired.toString() as 'true' | 'false'] as RequiredVariant;
   return (
     <>
@@ -46,7 +47,8 @@ function Step({ index, title, isRequired = false, children }: PropsWithChildren<
       >
         <Typography variant="subtitle2" sx={{ color: `${color}.contrastText` }}>
           {index !== undefined && `${index + 1}. `}
-          {`${title} (${text})`}
+          {title}
+          {!hideRequiredText && ` (${text})`}
         </Typography>
       </Paper>
       <Paper sx={{ p: 2, mb: 2 }}>{children}</Paper>