diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md
index 981464fdf..76aff8986 100644
--- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md
+++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md
@@ -37,6 +37,8 @@ import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
 import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx
index db5acf761..afaeab71c 100644
--- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx
+++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx
@@ -1,53 +1,229 @@
-import { Fragment, FunctionComponent } from 'react';
+import { useState, FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
-import { Alert, Badge, Button, Card, CardBody, CardFooter, CardTitle } from '@patternfly/react-core';
+import {
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  Flex,
+  FlexItem,
+  Label,
+  Tab,
+  Tabs,
+  TabTitleText
+} from '@patternfly/react-core';
+import { CubeIcon, CubesIcon } from '@patternfly/react-icons';
+
+const VersionSelectorCard = () => {
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isCardSelected, setIsCardSelected] = useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const id1 = '4.20';
+  const id2 = '4.19';
+  const id3 = '4.18';
+  const id4 = '4.17';
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setIsCardSelected(event.currentTarget.id);
+  };
+
+  const onToggleExpandableSection = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const handleTabClick = (_event: any, tabIndex: string | number) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const contentId = 'detached-expandable-section-content';
+  const toggleId = 'detached-expandable-section-toggle';
+
+  const generateTabContent = (title: string, subtitle: string) => (
+    <Flex direction={{ default: 'column' }} alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapMd' }}>
+      <FlexItem
+        alignSelf={{ default: 'alignSelfCenter' }}
+        style={{ marginBlockStart: 'var(--pf-t--global--spacer--md)', textAlign: 'center' }}
+      >
+        <div style={{ fontWeight: 'var(--pf-t--global--font--weight--heading--bold)' }}>{title}</div>
+        <div>{subtitle}</div>
+      </FlexItem>
+      <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+        <Card id="4.20-card" isSelectable isSelected={isCardSelected === id1}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id1,
+              selectableActionAriaLabelledby: '4.20-card',
+              name: 'version',
+              variant: 'single',
+              onChange,
+              isHidden: true
+            }}
+          >
+            <CardTitle>
+              <Flex spaceItems={{ default: 'spaceItemsXs' }}>
+                <FlexItem>4.20.0-ec.3</FlexItem>
+                <FlexItem>
+                  <Label color={isCardSelected === id1 ? 'blue' : undefined}>Preview</Label>
+                </FlexItem>
+              </Flex>
+            </CardTitle>
+          </CardHeader>
+          <CardBody>Developer preview • Not for production</CardBody>
+        </Card>
+      </FlexItem>
+      <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+        <Card id="4.19-card" isSelectable isSelected={isCardSelected === id2}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id2,
+              selectableActionAriaLabelledby: '4.19-card',
+              name: 'version',
+              variant: 'single',
+              onChange,
+              isHidden: true
+            }}
+          >
+            <CardTitle>
+              <Flex spaceItems={{ default: 'spaceItemsXs' }}>
+                <FlexItem>4.19.2</FlexItem>
+                <FlexItem>
+                  <Label color={isCardSelected === id2 ? 'blue' : undefined}>Latest</Label>
+                </FlexItem>
+              </Flex>
+            </CardTitle>
+          </CardHeader>
+          <CardBody>Newest features • 18-month support • Recommended</CardBody>
+        </Card>
+      </FlexItem>
+      <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+        <Card id="4.18-card" isSelectable isSelected={isCardSelected === id3}>
+          <CardHeader
+            selectableActions={{
+              selectableActionId: id3,
+              selectableActionAriaLabelledby: '4.18-card',
+              name: 'version',
+              variant: 'single',
+              onChange,
+              isHidden: true
+            }}
+          >
+            <CardTitle>4.18.19</CardTitle>
+          </CardHeader>
+          <CardBody>Previous stable • Full support</CardBody>
+        </Card>
+        <ExpandableSection isExpanded={isExpanded} isDetached toggleId={toggleId} contentId={contentId}>
+          <Flex
+            direction={{ default: 'column' }}
+            alignItems={{ default: 'alignItemsCenter' }}
+            gap={{ default: 'gapMd' }}
+          >
+            <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+              <Card
+                id="4.17-card"
+                isSelectable
+                isSelected={isCardSelected === id4}
+                style={{ marginBlockStart: 'var(--pf-t--global--spacer--md)' }}
+              >
+                <CardHeader
+                  selectableActions={{
+                    selectableActionId: id4,
+                    selectableActionAriaLabelledby: '4.17-card',
+                    name: 'version',
+                    variant: 'single',
+                    onChange,
+                    isHidden: true
+                  }}
+                >
+                  <CardTitle>
+                    <Flex spaceItems={{ default: 'spaceItemsXs' }}>
+                      <FlexItem>4.17.34</FlexItem>
+                      <FlexItem>
+                        <Label color={isCardSelected === id4 ? 'blue' : undefined}>Maintenance</Label>
+                      </FlexItem>
+                    </Flex>
+                  </CardTitle>
+                </CardHeader>
+                <CardBody>Maintenance support phase</CardBody>
+              </Card>
+            </FlexItem>
+          </Flex>
+        </ExpandableSection>
+      </FlexItem>
+      <FlexItem>
+        <ExpandableSectionToggle
+          isExpanded={isExpanded}
+          onToggle={onToggleExpandableSection}
+          toggleId={toggleId}
+          contentId={contentId}
+          direction="up"
+        >
+          {isExpanded ? 'Hide older versions' : 'Show older versions'}
+        </ExpandableSectionToggle>
+      </FlexItem>
+    </Flex>
+  );
 
-const UserActionEndContent = () => {
-  // eslint-disable-next-line no-console
-  const onClick = () => console.log('custom button click');
   return (
-    <Fragment>
-      <Button variant="secondary" ouiaId="Secondary" onClick={onClick}>
-        End content button
-      </Button>
-      <Alert variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
-    </Fragment>
+    <Card ouiaId="VersionSelectorCard">
+      <CardBody>
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} aria-label="Architecture" role="region" isFilled>
+          <Tab
+            eventKey={0}
+            title={
+              <TabTitleText>
+                <Flex spaceItems={{ default: 'spaceItemsXs' }}>
+                  <FlexItem>
+                    <CubeIcon />
+                  </FlexItem>
+                  <FlexItem>Single arch</FlexItem>
+                </Flex>
+              </TabTitleText>
+            }
+          >
+            {generateTabContent('x86_64 Intel/AMD only', 'Standard deployments • Most common choice')}
+          </Tab>
+          <Tab
+            eventKey={1}
+            title={
+              <TabTitleText>
+                <Flex spaceItems={{ default: 'spaceItemsXs' }}>
+                  <FlexItem>
+                    <CubesIcon />
+                  </FlexItem>
+                  <FlexItem>Multi arch</FlexItem>
+                </Flex>
+              </TabTitleText>
+            }
+          >
+            {generateTabContent('Multi arch', 'Standard deployments')}
+          </Tab>
+        </Tabs>
+      </CardBody>
+      <CardFooter>
+        <Button isBlock isDisabled={isCardSelected === ''}>
+          Continue with selections
+        </Button>
+      </CardFooter>
+    </Card>
   );
 };
 
-const CardInformationAfterMainContent = () => (
-  <Card ouiaId="BasicCard">
-    <CardTitle>This is content card after main content</CardTitle>
-    <CardBody>Body</CardBody>
-    <CardFooter>Footer</CardFooter>
-  </Card>
-);
-
-const BeforeMainContent = () => (
-  <div>
-    <Badge key={1} isRead>
-      7
-    </Badge>
-    <Badge key={2} isRead>
-      24
-    </Badge>
-  </div>
-);
-
 export const UserMessageWithExtraContent: FunctionComponent = () => (
   <>
     <Message
       avatar={userAvatar}
       name="User"
       role="user"
-      content="This is a main message."
+      content="This is a message with a version selector card."
       timestamp="1 hour ago"
       extraContent={{
-        beforeMainContent: <BeforeMainContent />,
-        afterMainContent: <CardInformationAfterMainContent />,
-        endContent: <UserActionEndContent />
+        afterMainContent: <VersionSelectorCard />
       }}
     />
   </>