diff --git a/apps/docs/src/data/structures/templates/templates.js b/apps/docs/src/data/structures/templates/templates.js
index 530fc4c3f8..ac8247aac2 100644
--- a/apps/docs/src/data/structures/templates/templates.js
+++ b/apps/docs/src/data/structures/templates/templates.js
@@ -15,9 +15,9 @@ export const templates = [
     name: 'Ascending navigation',
     available: true,
     cardOrder: 101,
-    description: `The Ascending Button for Navigation allows
-    the user to navigate to a parent page from a child page
-    by moving upward in the application or website hierarchy.`,
+    description: `Ascending navigation enables users 
+    to move up one level in an application’s hierarchy, 
+    from a child page back to its parent.`,
     preview: {
       image: {
         src: {
diff --git a/apps/docs/src/examples/templates/ascending-navigation/AscendingNavigationAnatomy.js b/apps/docs/src/examples/templates/ascending-navigation/AscendingNavigationAnatomy.js
deleted file mode 100644
index fbd373057d..0000000000
--- a/apps/docs/src/examples/templates/ascending-navigation/AscendingNavigationAnatomy.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  Box,
-  Image,
-  Grid,
-  Diagram,
-  Stack,
-  ThemeContext,
-  ResponsiveContext,
-} from 'grommet';
-import { Annotation } from '../../../layouts';
-
-const color = 'border';
-const anchor = 'vertical';
-const thickness = 'hair';
-const type = 'direct';
-
-const connections = [
-  {
-    anchor,
-    type,
-    color,
-    thickness,
-    fromTarget: '1',
-    toTarget: 'leftVisual',
-  },
-  {
-    anchor,
-    type,
-    color,
-    thickness,
-    fromTarget: '2',
-    toTarget: 'rightVisual',
-  },
-];
-
-const AnatomyGrid = ({ ...rest }) => {
-  const size = useContext(ResponsiveContext);
-  return (
-    <Grid
-      columns={
-        !['xsmall', 'small'].includes(size)
-          ? ['medium', 'medium']
-          : ['xsmall', 'xsmall']
-      }
-      rows={['5xsmall', 'auto']}
-      gap="none"
-      justify="center"
-      {...rest}
-    />
-  );
-};
-
-export const AscendingNavigationAnatomy = () => {
-  const theme = useContext(ThemeContext);
-  return (
-    <Stack margin={{ bottom: 'medium' }}>
-      <AnatomyGrid>
-        <Annotation id={1} target="1" />
-        <Annotation id={2} target="2" />
-        <Box width="medium" id="leftVisual">
-          <Image
-            alt="test"
-            src={
-              theme.dark
-                ? '/templateImages/ascending-nav-left-invert.png'
-                : '/templateImages/ascending-nav-left.png'
-            }
-          />
-        </Box>
-        <Box width="medium" id="rightVisual">
-          <Image
-            alt="test"
-            src={
-              theme.dark
-                ? '/templateImages/ascending-nav-right-invert.png'
-                : '/templateImages/ascending-nav-right.png'
-            }
-          />
-        </Box>
-      </AnatomyGrid>
-      <Diagram connections={connections} />
-    </Stack>
-  );
-};
diff --git a/apps/docs/src/examples/templates/ascending-navigation/AscendingNavigationCodeExample.js b/apps/docs/src/examples/templates/ascending-navigation/AscendingNavigationCodeExample.js
new file mode 100644
index 0000000000..b3ee59844e
--- /dev/null
+++ b/apps/docs/src/examples/templates/ascending-navigation/AscendingNavigationCodeExample.js
@@ -0,0 +1,23 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { Anchor, Button, PageHeader } from 'grommet';
+import { Left } from '@hpe-design/icons-grommet';
+
+export const AscendingNavigationCodeExample = () => {
+  return (
+    <PageHeader
+      title="Child page title"
+      subtitle="Page subtitle goes here. It can be a little bit longer to 
+      provide more context about the page."
+      size="large"
+      parent={
+        <Anchor
+          label="Home"
+          icon={<Left />}
+          a11yTitle="Link to the home page"
+        />
+      }
+      actions={<Button label="Action" primary />}
+    />
+  );
+};
diff --git a/apps/docs/src/examples/templates/ascending-navigation/AscendingNavigationExample.js b/apps/docs/src/examples/templates/ascending-navigation/AscendingNavigationExample.js
new file mode 100644
index 0000000000..d862d0fe0e
--- /dev/null
+++ b/apps/docs/src/examples/templates/ascending-navigation/AscendingNavigationExample.js
@@ -0,0 +1,45 @@
+/* eslint-disable react/prop-types */
+import React, { useState } from 'react';
+import { Anchor, Box, Button, PageContent, PageHeader } from 'grommet';
+import { Left } from '@hpe-design/icons-grommet';
+import { HomeContent } from './components/HomeContent';
+import { PageOneContent } from './components/PageOneContent';
+import { PageTwoContent } from './components/PageTwoContent';
+import { sectionConfig } from './data/sections';
+
+export const AscendingNavigationExample = () => {
+  const [activePage, setActivePage] = useState('pageOne');
+
+  const page = sectionConfig[activePage];
+
+  const sectionContent = {
+    home: <HomeContent onNavigate={setActivePage} />,
+    pageOne: <PageOneContent onNavigate={setActivePage} />,
+    pageTwo: <PageTwoContent onNavigate={setActivePage} />,
+  };
+
+  return (
+    <PageContent gap="xsmall" kind="full">
+      <Box width="xlarge" pad={{ bottom: 'xxlarge' }}>
+        <PageHeader
+          title={page.label}
+          subtitle={page.subtitle}
+          size="large"
+          parent={
+            activePage !== 'home' ? (
+              <Anchor
+                label={sectionConfig.home.label}
+                icon={<Left />}
+                onClick={() => setActivePage('home')}
+              />
+            ) : undefined
+          }
+          actions={
+            activePage !== 'home' && <Button label={page.action} primary />
+          }
+        />
+        <Box gap="small">{sectionContent[activePage]}</Box>
+      </Box>
+    </PageContent>
+  );
+};
diff --git a/apps/docs/src/examples/templates/ascending-navigation/components/HomeContent.js b/apps/docs/src/examples/templates/ascending-navigation/components/HomeContent.js
new file mode 100644
index 0000000000..66c10ba045
--- /dev/null
+++ b/apps/docs/src/examples/templates/ascending-navigation/components/HomeContent.js
@@ -0,0 +1,18 @@
+/* eslint-disable react/prop-types */
+import { Grid } from 'grommet';
+import { SectionCard } from './SectionCard';
+import { sectionConfig } from '../data/sections';
+
+export const HomeContent = ({ onNavigate }) => (
+  <Grid columns="small" gap="small">
+    {Object.entries(sectionConfig)
+      .filter(([key]) => key !== 'home')
+      .map(([key, config]) => (
+        <SectionCard
+          key={key}
+          section={{ id: key, ...config }}
+          onClick={onNavigate}
+        />
+      ))}
+  </Grid>
+);
diff --git a/apps/docs/src/examples/templates/ascending-navigation/components/PageOneContent.js b/apps/docs/src/examples/templates/ascending-navigation/components/PageOneContent.js
new file mode 100644
index 0000000000..15b56a48f4
--- /dev/null
+++ b/apps/docs/src/examples/templates/ascending-navigation/components/PageOneContent.js
@@ -0,0 +1,92 @@
+/* eslint-disable react/prop-types */
+import { useState } from 'react';
+import { Box, DataTable, Avatar, Text } from 'grommet';
+
+const data = [
+  {
+    id: 1,
+    initials: 'AL',
+    name: 'Alex Lee',
+    email: 'alex.lee@example.com',
+    status: 'Active',
+  },
+  {
+    id: 2,
+    initials: 'SM',
+    name: 'Sofia Martinez',
+    email: 'sofia.martinez@example.com',
+    status: 'Active',
+  },
+  {
+    id: 3,
+    initials: 'JR',
+    name: 'Jordan Roberts',
+    email: 'jordan.roberts@example.com',
+    status: 'Pending',
+  },
+  {
+    id: 4,
+    initials: 'AK',
+    name: 'Aisha Khan',
+    email: 'aisha.khan@example.com',
+    status: 'Inactive',
+  },
+  {
+    id: 5,
+    initials: 'DL',
+    name: 'Daniel Lopez',
+    email: 'daniel.lopez@example.com',
+    status: 'Active',
+  },
+  {
+    id: 6,
+    initials: 'NP',
+    name: 'Nina Patel',
+    email: 'nina.patel@example.com',
+    status: 'Active',
+  },
+  {
+    id: 7,
+    initials: 'MT',
+    name: 'Marco Tan',
+    email: 'marco.tan@example.com',
+    status: 'Pending',
+  },
+];
+
+export const PageOneContent = () => {
+  const [selected, setSelected] = useState([]);
+
+  return (
+    <DataTable
+      data={data}
+      aria-describedby="User management table"
+      select={selected}
+      onSelect={setSelected}
+      columns={[
+        {
+          property: 'name',
+          header: 'User name',
+          primary: true,
+          render: datum => (
+            <Box direction="row" gap="small" align="center">
+              <Avatar background="decorative-green">
+                <Text color="text-strong">{datum.initials}</Text>
+              </Avatar>
+              <Text>{datum.name}</Text>
+            </Box>
+          ),
+        },
+        {
+          property: 'email',
+          header: 'Email',
+        },
+        {
+          property: 'status',
+          header: 'Status',
+          render: datum => <Text>{datum.status}</Text>,
+        },
+      ]}
+    />
+  );
+};
diff --git a/apps/docs/src/examples/templates/ascending-navigation/components/PageTwoContent.js b/apps/docs/src/examples/templates/ascending-navigation/components/PageTwoContent.js
new file mode 100644
index 0000000000..aac633682f
--- /dev/null
+++ b/apps/docs/src/examples/templates/ascending-navigation/components/PageTwoContent.js
@@ -0,0 +1,108 @@
+/* eslint-disable react/prop-types */
+import { useState } from 'react';
+import { DataTable, Text } from 'grommet';
+
+const data = [
+  {
+    id: 'id-1',
+    displayName: 'Server 1',
+    serialNumber: '8899569448808967',
+    model: 'Proliant SY 480 Gen10',
+    powerState: 'On',
+    health: { summary: 'OK' },
+    state: { connected: false },
+  },
+  {
+    id: 'id-2',
+    displayName: 'Server 2',
+    serialNumber: '482148808968',
+    model: 'Proliant SY 990 Gen9',
+    powerState: 'Off',
+    health: { summary: 'Warning' },
+    state: { connected: true },
+  },
+  {
+    id: 'id-3',
+    displayName: 'Server 3',
+    serialNumber: '3890108963',
+    model: 'Proliant SY 990 Gen9',
+    powerState: 'Off',
+    health: { summary: 'Warning' },
+    state: { connected: false },
+  },
+  {
+    id: 'id-4',
+    displayName: 'Server 4',
+    serialNumber: '8508964',
+    model: 'Proliant SY 660 Gen10',
+    powerState: 'On',
+    health: { summary: 'OK' },
+    state: { connected: true },
+  },
+  {
+    id: 'id-5',
+    displayName: 'Server 5',
+    serialNumber: '3123i4264',
+    model: 'Proliant SY 660 Gen10',
+    powerState: 'On',
+    health: { summary: 'OK' },
+    state: { connected: true },
+  },
+  {
+    id: 'id-6',
+    displayName: '3M442501WV',
+    serialNumber: '4208964',
+    model: 'ProLiant DL380 Gen10',
+    powerState: 'Off',
+    health: { summary: 'Critical' },
+    state: { connected: true },
+  },
+  {
+    id: 'id-7',
+    displayName: 'ZFD3712GP',
+    serialNumber: 'CCD21712GP',
+    model: null,
+    powerState: 'On',
+    health: { summary: 'OK' },
+    state: { connected: false },
+  },
+];
+
+export const PageTwoContent = () => {
+  const [selected, setSelected] = useState([]);
+
+  return (
+    <DataTable
+      data={data}
+      aria-describedby="Server data table"
+      select={selected}
+      onSelect={setSelected}
+      columns={[
+        {
+          property: 'displayName',
+          header: 'Name',
+          primary: true,
+          render: datum => <Text>{datum.displayName}</Text>,
+        },
+        {
+          property: 'serialNumber',
+          header: 'Serial Number',
+        },
+        {
+          property: 'model',
+          header: 'Model',
+          render: datum => <Text>{datum.model || '—'}</Text>,
+        },
+        {
+          property: 'powerState',
+          header: 'Power',
+        },
+        {
+          property: 'health',
+          header: 'Health',
+          render: datum => <Text>{datum.health?.summary}</Text>,
+        },
+      ]}
+    />
+  );
+};
diff --git a/apps/docs/src/examples/templates/ascending-navigation/components/SectionCard.js b/apps/docs/src/examples/templates/ascending-navigation/components/SectionCard.js
new file mode 100644
index 0000000000..984b07ef2c
--- /dev/null
+++ b/apps/docs/src/examples/templates/ascending-navigation/components/SectionCard.js
@@ -0,0 +1,15 @@
+/* eslint-disable react/prop-types */
+import { Card, Box, Heading, Paragraph } from 'grommet';
+import { LinkNext } from '@hpe-design/icons-grommet';
+
+export const SectionCard = ({ section, onClick }) => (
+  <Card default onClick={() => onClick(section.id)} pad="small">
+    <Box direction="row" fill justify="between">
+      <Heading level="2" margin="none">
+        {section.label}
+      </Heading>
+      <LinkNext height="xlarge" />
+    </Box>
+    <Paragraph>{section.subtitle}</Paragraph>
+  </Card>
+);
diff --git a/apps/docs/src/examples/templates/ascending-navigation/data/sections.js b/apps/docs/src/examples/templates/ascending-navigation/data/sections.js
new file mode 100644
index 0000000000..be2535020a
--- /dev/null
+++ b/apps/docs/src/examples/templates/ascending-navigation/data/sections.js
@@ -0,0 +1,31 @@
+import { User, Home, Template } from '@hpe-design/icons-grommet';
+
+export const sectionConfig = {
+  home: {
+    label: 'Manage account',
+    subtitle:
+      'Manage users, servers, and permissions across your system.',
+    details:
+      'Control who and what can access your systems. Manage users, servers, '
+      + 'roles, and permissions in one place.',
+    icon: <Home size="large" />,
+  },
+  pageOne: {
+    label: 'Users',
+    action: 'Add user',
+    subtitle: 'Manage users and their access.',
+    details:
+      'Invite teammates, assign roles, and review permissions in one place. '
+      + 'Use roles to ensure people only have access to what they need.',
+    icon: <User size="large" />,
+  },
+  pageTwo: {
+    label: 'Servers',
+    action: 'Add server',
+    subtitle: 'Manage HPE servers and their status.',
+    details:
+      'See all servers at a glance, check status and performance, and take '
+      + 'action when needed.',
+    icon: <Template size="large" />,
+  },
+};
diff --git a/apps/docs/src/examples/templates/ascending-navigation/index.js b/apps/docs/src/examples/templates/ascending-navigation/index.js
index 7f3e9815d3..295185bfeb 100644
--- a/apps/docs/src/examples/templates/ascending-navigation/index.js
+++ b/apps/docs/src/examples/templates/ascending-navigation/index.js
@@ -1 +1,2 @@
-export * from './AscendingNavigationAnatomy';
\ No newline at end of file
+export * from './AscendingNavigationExample';
+export * from './AscendingNavigationCodeExample';
diff --git a/apps/docs/src/pages/templates/ascending-navigation.mdx b/apps/docs/src/pages/templates/ascending-navigation.mdx
index 186340ee8d..4549593c31 100644
--- a/apps/docs/src/pages/templates/ascending-navigation.mdx
+++ b/apps/docs/src/pages/templates/ascending-navigation.mdx
@@ -1,59 +1,28 @@
-import { DiagramPreview, Example } from '../../layouts';
-import { AscendingNavigationAnatomy } from '../../examples';
+import { Example } from '../../layouts';
+import { 
+  AscendingNavigationExample 
+  } from '../../examples';
 import { Text } from 'grommet';
 
-When an application’s hierarchy is well designed, the ascending button will typically take the user
-back to the previous page they came from.
 
-<Example
-  caption="Example of an ascending button."
-  plain
-  pad="xsmall"
-  previewWidth="medium"
-  height={{ min: 'xsmall' }}
+
+<Example 
+  pad='small'
+  code='https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/templates/ascending-navigation/AscendingNavigationCodeExample.js'
 >
-  <DiagramPreview
-    src={{
-      dark: '/templateImages/ascending-button-preview-invert.svg',
-      light: '/templateImages/ascending-button-preview.svg',
-    }}
-    alt="ascending button in an application"
-  />
+  <AscendingNavigationExample />
 </Example>
 
-## Guidance
 
-- Follows the [default button styling](https://design-system.hpe.design/components/button#default-button) with a "FormPrevious" icon.
-- Displayed below the Header and aligned to the left with the pages content.
+ 
+## Guidance
+- The `parent` property on [PageHeader](/components/pageheader) generates a link to the immediate upstream page in the hierarchy. See [reverse anchor](/components/pageheader#reverse-anchor) for more details.
+- Match the label to the parent page's name to set navigation expectations.
+- Use only one ascending link per page.
 
 ## When to use
 
-- To allow users to return to the parent (hub) screen when on a details (child/spoke) page.
-- To visually communicate the parent page for the user’s current page.
-
-## Example
-
-Ascending Navigation provides an easy way for a user to move from a child page up to a parent page.
-
-<Example
-  caption={
-    <>
-      <Text margin={{ top: 'xsmall' }} size="small">
-        {' '}
-        1. A preview of Users detail view (child page).
-      </Text>
-      <br></br>
-      <Text margin={{ top: 'xsmall' }} size="small">
-        {' '}
-        2. A preview of Ascending Navigation to the parent page utilizing the ascending
-        button.
-      </Text>
-    </>
-  }
-  plain
-  pad="xsmall"
-  previewWidth="xlarge"
-  height={{ min: 'xsmall' }}
->
-  <AscendingNavigationAnatomy />
-</Example>
+Use ascending navigation when your product has a parent/child or hub/spoke page structure and users may need to return to the parent context.
+
+
+