diff --git a/pages/app/templates.tsx b/pages/app/templates.tsx
index 41a653b..52c6800 100644
--- a/pages/app/templates.tsx
+++ b/pages/app/templates.tsx
@@ -39,8 +39,6 @@ export function Page({
       navigationHide={true}
       activeDrawerId={toolsOpen ? "settings" : null}
       onDrawerChange={({ detail }) => setToolsOpen(!!detail.activeDrawerId)}
-      tools={settings && <Drawer header={<Header variant="h2">Page settings</Header>}>{settings}</Drawer>}
-      toolsHide={!settings}
       drawers={drawers}
       content={
         <Box>
diff --git a/pages/chat-bubble/selectable-custom-card.page.tsx b/pages/chat-bubble/selectable-custom-card.page.tsx
new file mode 100644
index 0000000..5e5ba06
--- /dev/null
+++ b/pages/chat-bubble/selectable-custom-card.page.tsx
@@ -0,0 +1,111 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from "react";
+import clsx from "clsx";
+
+import Box from "@cloudscape-design/components/box";
+import Button from "@cloudscape-design/components/button";
+import Container from "@cloudscape-design/components/container";
+import Header from "@cloudscape-design/components/header";
+import Icon, { IconProps } from "@cloudscape-design/components/icon";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+
+import { ChatBubble } from "../../lib/components";
+import { Page } from "../app/templates";
+import { ChatBubbleAvatarGenAI, ChatBubbleAvatarUser } from "./util-components";
+
+import styles from "./styles.module.scss";
+
+export default function ChatBubbleSelectableCustomPage() {
+  const [selectedCardId, setSelectedCardId] = useState<null | string>(null);
+  return (
+    <Page title="Chat bubble: selectable custom card">
+      <SpaceBetween direction="horizontal" size="l">
+        <Container header={<Header variant="h3">Chat container</Header>}>
+          <SpaceBetween size="m">
+            <ChatBubble avatar={<ChatBubbleAvatarUser />} type="outgoing" ariaLabel="User at 4:24:12pm">
+              <Box color="text-body-secondary">User request example</Box>
+            </ChatBubble>
+
+            <ChatBubble avatar={<ChatBubbleAvatarGenAI />} type="incoming" ariaLabel="Gen AI at 4:24:24pm">
+              <Box color="text-body-secondary">Normal response example</Box>
+            </ChatBubble>
+
+            <ChatBubble
+              avatar={<ChatBubbleAvatarGenAI />}
+              hideAvatar={true}
+              type="incoming"
+              ariaLabel="Gen AI at 4:24:25pm"
+              additionalContent={
+                <SpaceBetween size="s" direction="horizontal">
+                  <CustomSelectableCard
+                    header="Selectable card 1"
+                    pressed={selectedCardId === "1"}
+                    iconName="expand"
+                    iconNamePressed="shrink"
+                    onClick={() => setSelectedCardId(selectedCardId === "1" ? null : "1")}
+                  >
+                    Selectable card 1 content
+                  </CustomSelectableCard>
+                  <CustomSelectableCard
+                    header="Selectable card 2"
+                    pressed={selectedCardId === "2"}
+                    iconName="expand"
+                    iconNamePressed="shrink"
+                    onClick={() => setSelectedCardId(selectedCardId === "2" ? null : "2")}
+                  >
+                    Selectable card 2 content
+                  </CustomSelectableCard>
+                </SpaceBetween>
+              }
+            >
+              Selectable response example
+            </ChatBubble>
+          </SpaceBetween>
+        </Container>
+
+        <Container header={<Header variant="h3">Presentation container</Header>}>
+          {selectedCardId ? (
+            <SpaceBetween size="m">
+              <Box>{selectedCardId === "1" ? "First" : "Second"} card is selected</Box>
+              <Button onClick={() => setSelectedCardId(null)}>Clear selection</Button>
+            </SpaceBetween>
+          ) : null}
+        </Container>
+      </SpaceBetween>
+    </Page>
+  );
+}
+
+function CustomSelectableCard({
+  header,
+  children,
+  iconName,
+  iconNamePressed,
+  pressed,
+  onClick,
+}: {
+  header: React.ReactNode;
+  children: React.ReactNode;
+  iconName: IconProps.Name;
+  iconNamePressed: IconProps.Name;
+  pressed: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      aria-pressed={pressed}
+      className={clsx(styles["selectable-card"], pressed && styles["selectable-card-pressed"])}
+      onClick={onClick}
+    >
+      <SpaceBetween size="s">
+        <div className={styles["selectable-card-header"]}>
+          <Box fontWeight="bold">{header}</Box>
+          <Icon name={pressed ? iconNamePressed : iconName} />
+        </div>
+        <Box>{children}</Box>
+      </SpaceBetween>
+    </button>
+  );
+}
diff --git a/pages/chat-bubble/selectable.page.tsx b/pages/chat-bubble/selectable.page.tsx
new file mode 100644
index 0000000..df8a33b
--- /dev/null
+++ b/pages/chat-bubble/selectable.page.tsx
@@ -0,0 +1,82 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from "react";
+
+import Box from "@cloudscape-design/components/box";
+import Button from "@cloudscape-design/components/button";
+import Container from "@cloudscape-design/components/container";
+import Header from "@cloudscape-design/components/header";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+
+import { ChatBubble } from "../../lib/components";
+import { Page } from "../app/templates";
+import { ChatBubbleAvatarGenAI, ChatBubbleAvatarUser } from "./util-components";
+
+export default function ChatBubbleSelectablePage() {
+  const [selectedCardId, setSelectedCardId] = useState<null | string>(null);
+  return (
+    <Page title="Chat bubble: selectable">
+      <SpaceBetween direction="horizontal" size="l">
+        <Container header={<Header variant="h3">Chat container</Header>}>
+          <SpaceBetween size="m">
+            <ChatBubble avatar={<ChatBubbleAvatarUser />} type="outgoing" ariaLabel="User at 4:24:12pm">
+              <Box color="text-body-secondary">User request example</Box>
+            </ChatBubble>
+
+            <ChatBubble avatar={<ChatBubbleAvatarGenAI />} type="incoming" ariaLabel="Gen AI at 4:24:24pm">
+              <Box color="text-body-secondary">Normal response example</Box>
+            </ChatBubble>
+
+            <ChatBubble
+              avatar={<ChatBubbleAvatarGenAI />}
+              hideAvatar={true}
+              type="incoming"
+              ariaLabel="Gen AI at 4:24:25pm"
+              selectionType="click"
+              onSelect={() => setSelectedCardId((prev) => (prev !== "1" ? "1" : null))}
+              selected={selectedCardId === "1"}
+            >
+              <Box variant="h4">Selectable response example</Box>
+              <Box variant="p">This entire card is clickable</Box>
+            </ChatBubble>
+
+            <ChatBubble
+              avatar={<ChatBubbleAvatarGenAI />}
+              hideAvatar={true}
+              type="incoming"
+              ariaLabel="Gen AI at 4:24:25pm"
+              selectionType="custom"
+              selected={selectedCardId === "2"}
+            >
+              <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
+                <Box variant="h4">Selectable response example</Box>
+                {selectedCardId !== "2" ? (
+                  <Button variant="inline-link" onClick={() => setSelectedCardId("2")}>
+                    Show
+                  </Button>
+                ) : (
+                  <Button variant="inline-link" onClick={() => setSelectedCardId(null)}>
+                    Hide
+                  </Button>
+                )}
+              </div>
+              <Box variant="p">
+                This entire card is not clickable. Instead, there is a custom action in the top-right.
+              </Box>
+            </ChatBubble>
+          </SpaceBetween>
+        </Container>
+
+        <Container header={<Header variant="h3">Presentation container</Header>}>
+          {selectedCardId ? (
+            <SpaceBetween size="m">
+              <Box>{selectedCardId === "1" ? "First" : "Second"} card is selected</Box>
+              <Button onClick={() => setSelectedCardId(null)}>Clear selection</Button>
+            </SpaceBetween>
+          ) : null}
+        </Container>
+      </SpaceBetween>
+    </Page>
+  );
+}
diff --git a/pages/chat-bubble/styles.module.scss b/pages/chat-bubble/styles.module.scss
new file mode 100644
index 0000000..e558a11
--- /dev/null
+++ b/pages/chat-bubble/styles.module.scss
@@ -0,0 +1,91 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use "../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
+
+@mixin styles-reset {
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  caption-side: top;
+  cursor: auto;
+  direction: inherit;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  line-height: normal;
+  hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: start;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  word-spacing: normal;
+}
+
+@mixin focus-highlight(
+  $gutter: 4px,
+  $border-radius: cs.$border-radius-control-default-focus-ring,
+  $border-color: cs.$color-border-item-focused,
+  $border-width: 2px
+) {
+  position: relative;
+  box-sizing: border-box;
+  outline: 2px dotted transparent;
+  outline-offset: calc($gutter - 1px);
+
+  &::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    box-sizing: border-box;
+    inset-inline-start: calc(-1 * #{$gutter});
+    inset-block-start: calc(-1 * #{$gutter});
+    inline-size: calc(100% + 2 * #{$gutter});
+    block-size: calc(100% + 2 * #{$gutter});
+    border-radius: $border-radius;
+    border: $border-width solid $border-color;
+  }
+}
+
+.selectable-card {
+  @include styles-reset;
+  background: cs.$color-background-layout-main;
+  border-radius: 8px;
+  border: 2px solid cs.$color-border-divider-default;
+  padding: cs.$space-scaled-s cs.$space-scaled-s;
+  cursor: pointer;
+
+  &:hover {
+    background: cs.$color-background-dropdown-item-hover;
+  }
+
+  &-pressed {
+    border-color: cs.$color-border-item-selected;
+    background: cs.$color-background-item-selected;
+
+    &:hover {
+      background: cs.$color-background-item-selected;
+    }
+  }
+
+  &:focus-visible {
+    @include focus-highlight(8px, 8px);
+  }
+}
+
+.selectable-card-header {
+  display: flex;
+  justify-content: space-between;
+  gap: cs.$space-static-s;
+}
diff --git a/pages/support-prompt-group/selectable.page.tsx b/pages/support-prompt-group/selectable.page.tsx
new file mode 100644
index 0000000..204aac4
--- /dev/null
+++ b/pages/support-prompt-group/selectable.page.tsx
@@ -0,0 +1,108 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useContext, useState } from "react";
+
+import Box from "@cloudscape-design/components/box";
+import Button from "@cloudscape-design/components/button";
+import Checkbox from "@cloudscape-design/components/checkbox";
+import Container from "@cloudscape-design/components/container";
+import Header from "@cloudscape-design/components/header";
+import Icon from "@cloudscape-design/components/icon";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+
+import { ChatBubble, SupportPromptGroup } from "../../lib/components";
+import AppContext, { AppContextType } from "../app/app-context";
+import { Page } from "../app/templates";
+import { ChatBubbleAvatarGenAI, ChatBubbleAvatarUser } from "../chat-bubble/util-components";
+
+interface PageSettings {
+  alignment: "horizontal" | "vertical";
+}
+
+type PageContext<PageSettings> = React.Context<AppContextType<Partial<PageSettings>>>;
+
+export default function ChatBubbleSelectablePage() {
+  const {
+    urlParams: { alignment = "horizontal" },
+    setUrlParams,
+  } = useContext(AppContext as PageContext<PageSettings>);
+  const [selectedCardId, setSelectedCardId] = useState<null | string>(null);
+  return (
+    <Page
+      title="Support prompts: selectable"
+      settings={
+        <SpaceBetween size="m">
+          <Checkbox
+            checked={alignment === "vertical"}
+            onChange={({ detail }) => setUrlParams({ alignment: detail.checked ? "vertical" : "horizontal" })}
+          >
+            Use vertical prompts
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <SpaceBetween direction="horizontal" size="l">
+        <Container header={<Header variant="h3">Chat container</Header>}>
+          <SpaceBetween size="m">
+            <ChatBubble avatar={<ChatBubbleAvatarUser />} type="outgoing" ariaLabel="User at 4:24:12pm">
+              <Box color="text-body-secondary">User request example</Box>
+            </ChatBubble>
+
+            <ChatBubble avatar={<ChatBubbleAvatarGenAI />} type="incoming" ariaLabel="Gen AI at 4:24:24pm">
+              <Box color="text-body-secondary">Normal response example</Box>
+            </ChatBubble>
+
+            <ChatBubble
+              avatar={<ChatBubbleAvatarGenAI />}
+              hideAvatar={true}
+              type="incoming"
+              ariaLabel="Gen AI at 4:24:25pm"
+              additionalContent={
+                <SupportPromptGroup
+                  ariaLabel="additional actions"
+                  alignment={alignment}
+                  onItemClick={({ detail }) =>
+                    detail.id === selectedCardId ? setSelectedCardId(null) : setSelectedCardId(detail.id)
+                  }
+                  toggledItems={selectedCardId ? [selectedCardId] : []}
+                  items={[
+                    {
+                      id: "1",
+                      text: "Expandable option 1 content",
+                      header: {
+                        text: "Expandable option 1",
+                        icon: <Icon name="expand" />,
+                        pressedIcon: <Icon name="shrink" />,
+                      },
+                    },
+                    {
+                      id: "2",
+                      text: "Expandable option 2 content",
+                      header: {
+                        text: "Expandable option 2",
+                        icon: <Icon name="expand" />,
+                        pressedIcon: <Icon name="shrink" />,
+                      },
+                    },
+                  ]}
+                />
+              }
+            >
+              Selectable response example
+            </ChatBubble>
+          </SpaceBetween>
+        </Container>
+
+        <Container header={<Header variant="h3">Presentation container</Header>}>
+          {selectedCardId ? (
+            <SpaceBetween size="m">
+              <Box>Option {selectedCardId} is selected</Box>
+              <Button onClick={() => setSelectedCardId(null)}>Clear selection</Button>
+            </SpaceBetween>
+          ) : null}
+        </Container>
+      </SpaceBetween>
+    </Page>
+  );
+}
diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
index c3276f4..2979c9b 100644
--- a/src/__tests__/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/__snapshots__/documenter.test.ts.snap
@@ -201,7 +201,13 @@ Use this property if the icon you want isn't available.",
 exports[`definition for chat-bubble matches the snapshot > chat-bubble 1`] = `
 {
   "dashCaseName": "chat-bubble",
-  "events": [],
+  "events": [
+    {
+      "cancelable": false,
+      "description": "POC",
+      "name": "onSelect",
+    },
+  ],
   "functions": [],
   "name": "ChatBubble",
   "properties": [
@@ -219,6 +225,26 @@ Useful for when there are multiple consecutive messages coming from the same aut
       "optional": true,
       "type": "boolean",
     },
+    {
+      "description": "POC",
+      "name": "selected",
+      "optional": true,
+      "type": "boolean",
+    },
+    {
+      "description": "POC",
+      "inlineType": {
+        "name": ""click" | "custom"",
+        "type": "union",
+        "values": [
+          "click",
+          "custom",
+        ],
+      },
+      "name": "selectionType",
+      "optional": true,
+      "type": "string",
+    },
     {
       "description": "Adds a loading bar to the bottom of the chat bubble. This property should only be used for Generative AI loading state.
 If avatar is being used, set its \`loading\` state to true.",
@@ -247,6 +273,11 @@ If avatar is being used, set its \`loading\` state to true.",
       "isDefault": false,
       "name": "actions",
     },
+    {
+      "description": "POC",
+      "isDefault": false,
+      "name": "additionalContent",
+    },
     {
       "description": "Avatar slot paired with the chat bubble content. Use [avatar](/components/avatar/).",
       "isDefault": false,
@@ -383,6 +414,12 @@ Each item has the following properties:
       "optional": false,
       "type": "ReadonlyArray<SupportPromptGroupProps.Item>",
     },
+    {
+      "description": "POC",
+      "name": "toggledItems",
+      "optional": true,
+      "type": "Array<string>",
+    },
   ],
   "regions": [],
   "releaseStatus": "stable",
diff --git a/src/chat-bubble/index.tsx b/src/chat-bubble/index.tsx
index 9067b2b..45a2386 100644
--- a/src/chat-bubble/index.tsx
+++ b/src/chat-bubble/index.tsx
@@ -1,5 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+
 import useBaseComponent from "../internal/base-component/use-base-component";
 import { applyDisplayName } from "../internal/utils/apply-display-name";
 import { ChatBubbleProps } from "./interfaces";
diff --git a/src/chat-bubble/interfaces.ts b/src/chat-bubble/interfaces.ts
index 068f48c..425035e 100644
--- a/src/chat-bubble/interfaces.ts
+++ b/src/chat-bubble/interfaces.ts
@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { NonCancelableEventHandler } from "../internal/events";
+
 export interface ChatBubbleProps {
   /** Avatar slot paired with the chat bubble content. Use [avatar](/components/avatar/). */
   avatar: React.ReactNode;
@@ -11,6 +13,11 @@ export interface ChatBubbleProps {
   /** Content of the chat bubble */
   children: React.ReactNode;
 
+  /**
+   * POC
+   */
+  additionalContent?: React.ReactNode;
+
   /** Actions slot of the chat bubble, placed at the footer. Use [button group](/components/button-group/). */
   actions?: React.ReactNode;
 
@@ -31,6 +38,21 @@ export interface ChatBubbleProps {
    * Useful for when there are multiple consecutive messages coming from the same author.
    */
   hideAvatar?: boolean;
+
+  /**
+   * POC
+   */
+  selectionType?: "click" | "custom";
+
+  /**
+   * POC
+   */
+  selected?: boolean;
+
+  /**
+   * POC
+   */
+  onSelect?: NonCancelableEventHandler<null>;
 }
 
 export namespace ChatBubbleProps {
diff --git a/src/chat-bubble/internal.tsx b/src/chat-bubble/internal.tsx
index bd3e798..1d26fcb 100644
--- a/src/chat-bubble/internal.tsx
+++ b/src/chat-bubble/internal.tsx
@@ -1,10 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+
 import { useEffect, useRef } from "react";
 import clsx from "clsx";
 
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
+import { fireNonCancelableEvent } from "../internal/events";
 import { InternalLoadingBar } from "../loading-bar/internal";
 import { ChatBubbleProps } from "./interfaces.js";
 
@@ -15,11 +17,15 @@ export interface InternalChatBubbleProps extends ChatBubbleProps, InternalBaseCo
 export default function InternalChatBubble({
   type,
   children,
+  additionalContent,
   avatar,
   actions,
   showLoadingBar,
   hideAvatar = false,
   ariaLabel,
+  selectionType,
+  selected,
+  onSelect,
   __internalRootRef = null,
   ...rest
 }: InternalChatBubbleProps) {
@@ -36,6 +42,8 @@ export default function InternalChatBubble({
     }
   }, [hideAvatar]);
 
+  const Tag = selectionType === "click" && onSelect ? "button" : "div";
+
   return (
     <div
       className={styles.root}
@@ -50,16 +58,25 @@ export default function InternalChatBubble({
         </div>
       )}
 
-      <div
-        className={clsx(styles["message-area"], styles[`chat-bubble-type-${type}`], {
-          [styles["with-loading-bar"]]: showLoadingBar,
-        })}
-      >
-        <div className={styles.content}>{children}</div>
+      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <Tag
+          aria-pressed={selected}
+          onClick={() => fireNonCancelableEvent(onSelect)}
+          className={clsx(styles["message-area"], styles[`chat-bubble-type-${type}`], {
+            [styles["with-loading-bar"]]: showLoadingBar,
+            [styles["message-area-selectable"]]: !!selectionType,
+            [styles["message-area-clickable"]]: selectionType === "click",
+            [styles["message-area-selected"]]: selected,
+          })}
+        >
+          <div className={styles.content}>{children}</div>
+
+          {actions && <div className={styles.actions}>{actions}</div>}
 
-        {actions && <div className={styles.actions}>{actions}</div>}
+          {showLoadingBar && <InternalLoadingBar variant="gen-ai-masked" />}
+        </Tag>
 
-        {showLoadingBar && <InternalLoadingBar variant="gen-ai-masked" />}
+        {additionalContent && <div>{additionalContent}</div>}
       </div>
     </div>
   );
diff --git a/src/chat-bubble/styles.scss b/src/chat-bubble/styles.scss
index cf79209..482f8e7 100644
--- a/src/chat-bubble/styles.scss
+++ b/src/chat-bubble/styles.scss
@@ -18,12 +18,15 @@
 }
 
 .message-area {
+  @include shared.styles-reset;
+  @include shared.default-text-style;
+
   display: flex;
   flex-direction: column;
   gap: cs.$space-scaled-s;
   padding: cs.$space-scaled-s;
   min-width: 0;
-  overflow-x: auto;
+  // overflow-x: auto;
 
   border-start-start-radius: cs.$border-radius-chat-bubble;
   border-start-end-radius: cs.$border-radius-chat-bubble;
@@ -39,6 +42,34 @@
     background-color: cs.$color-background-chat-bubble-outgoing;
   }
 
+  // TODO: create new tokens for outgoing-selectable (background, border, selected background, selected border)
+  // Potentially, need some for border width, too.
+  &.message-area-selectable.message-area-selectable {
+    border-color: cs.$color-border-divider-default;
+    border-width: 2px;
+    border-style: solid;
+    background-color: cs.$color-background-layout-main;
+  }
+
+  &.message-area-clickable.message-area-clickable {
+    cursor: pointer;
+
+    &:focus-visible {
+      @include shared.focus-highlight(6px, cs.$border-radius-chat-bubble);
+    }
+
+    &:hover {
+      background-color: cs.$color-background-dropdown-item-hover;
+    }
+  }
+
+  &.message-area-selected.message-area-selected.message-area-selected {
+    border-color: cs.$color-border-item-selected;
+    border-width: 2px;
+    border-style: solid;
+    background-color: cs.$color-background-item-selected;
+  }
+
   &.chat-bubble-type-incoming {
     color: cs.$color-text-chat-bubble-incoming;
     background-color: cs.$color-background-chat-bubble-incoming;
diff --git a/src/internal/shared.scss b/src/internal/shared.scss
index 4d762dc..b959c9c 100644
--- a/src/internal/shared.scss
+++ b/src/internal/shared.scss
@@ -4,6 +4,23 @@
 */
 @use "../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
 
+$font-family-base: cs.$font-family-base;
+$font-weight-normal: 400;
+
+@mixin default-text-style {
+  @include font-body-m;
+  color: cs.$color-text-body-default;
+  font-weight: $font-weight-normal;
+  font-family: $font-family-base;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+@mixin font-body-m {
+  font-size: cs.$font-size-body-m;
+  line-height: cs.$line-height-body-m;
+}
+
 @mixin focus-highlight(
   $gutter: 4px,
   $border-radius: cs.$border-radius-control-default-focus-ring,
@@ -44,12 +61,14 @@
     animation: none;
     transition: none;
   }
+
   :global(.awsui-motion-disabled) &,
   :global(.awsui-mode-entering) & {
     animation: none;
     transition: none;
   }
 }
+
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 
 @mixin styles-reset {
diff --git a/src/support-prompt-group/interfaces.ts b/src/support-prompt-group/interfaces.ts
index 61e437a..34edb1c 100644
--- a/src/support-prompt-group/interfaces.ts
+++ b/src/support-prompt-group/interfaces.ts
@@ -27,14 +27,20 @@ export interface SupportPromptGroupProps {
    * Use this to provide a unique accessible name for each support prompt group on the page.
    */
   ariaLabel: string;
+
+  /**
+   * POC
+   */
+  toggledItems?: string[];
 }
 
 export namespace SupportPromptGroupProps {
   export type Alignment = "vertical" | "horizontal";
 
   export interface Item {
-    text: string;
     id: string;
+    text: string;
+    header?: { text: string; icon?: React.ReactNode; pressedIcon?: React.ReactNode };
   }
 
   export interface ItemClickDetail extends _ClickDetail {
diff --git a/src/support-prompt-group/internal.tsx b/src/support-prompt-group/internal.tsx
index 4e113da..388f904 100644
--- a/src/support-prompt-group/internal.tsx
+++ b/src/support-prompt-group/internal.tsx
@@ -31,6 +31,7 @@ export const InternalSupportPromptGroup = forwardRef(
       items,
       __internalRootRef,
       ariaLabel,
+      toggledItems,
       ...rest
     }: SupportPromptGroupProps & InternalBaseComponentProps,
     ref: Ref<SupportPromptGroupProps.Ref>,
@@ -154,9 +155,16 @@ export const InternalSupportPromptGroup = forwardRef(
                 key={index}
                 onClick={(event) => handleClick(event, item.id)}
                 id={item.id}
+                pressed={toggledItems?.includes(item.id)}
                 ref={(element) => (itemsRef.current[item.id] = element)}
               >
-                {item.text}
+                {item.header && (
+                  <div className={styles["item-header"]}>
+                    <div>{item.header.text}</div>
+                    <div>{toggledItems?.includes(item.id) ? item.header.pressedIcon : item.header.icon}</div>
+                  </div>
+                )}
+                <div>{item.text}</div>
               </Prompt>
             );
           })}
diff --git a/src/support-prompt-group/prompt.tsx b/src/support-prompt-group/prompt.tsx
index 693ef78..ac3e4b4 100644
--- a/src/support-prompt-group/prompt.tsx
+++ b/src/support-prompt-group/prompt.tsx
@@ -10,31 +10,34 @@ import useForwardFocus from "../internal/utils/use-forward-focus";
 import styles from "./styles.css.js";
 
 export interface PromptProps {
-  children: string;
+  children: React.ReactNode;
   id: string;
+  pressed?: boolean;
   onClick: (event: React.MouseEvent, id: string) => void;
 }
 
-export const Prompt = forwardRef(({ children, id, onClick }: PromptProps, ref: Ref<HTMLButtonElement | null>) => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  useForwardFocus(ref, buttonRef);
+export const Prompt = forwardRef(
+  ({ children, id, pressed, onClick }: PromptProps, ref: Ref<HTMLButtonElement | null>) => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    useForwardFocus(ref, buttonRef);
 
-  const { tabIndex } = useSingleTabStopNavigation(buttonRef);
+    const { tabIndex } = useSingleTabStopNavigation(buttonRef);
 
-  return (
-    <button
-      role="menuitem"
-      tabIndex={tabIndex}
-      ref={buttonRef}
-      onClick={(event) => {
-        onClick(event, id);
-      }}
-      id={id}
-      data-testid={id}
-      data-itemid={id}
-      className={clsx(styles["support-prompt"])}
-    >
-      {children}
-    </button>
-  );
-});
+    return (
+      <button
+        role="menuitem"
+        tabIndex={tabIndex}
+        ref={buttonRef}
+        onClick={(event) => {
+          onClick(event, id);
+        }}
+        id={id}
+        data-testid={id}
+        data-itemid={id}
+        className={clsx(styles["support-prompt"], pressed && styles["support-prompt-pressed"])}
+      >
+        {children}
+      </button>
+    );
+  },
+);
diff --git a/src/support-prompt-group/styles.scss b/src/support-prompt-group/styles.scss
index 6b780e1..63e314c 100644
--- a/src/support-prompt-group/styles.scss
+++ b/src/support-prompt-group/styles.scss
@@ -51,6 +51,12 @@
     border-color: awsui.$color-border-button-normal-active;
   }
 
+  &-pressed {
+    color: awsui.$color-text-button-normal-active;
+    background: awsui.$color-background-button-normal-active;
+    border-color: awsui.$color-border-button-normal-active;
+  }
+
   &:focus {
     outline: none;
   }
@@ -59,3 +65,11 @@
     @include shared.focus-highlight(6px, 6px);
   }
 }
+
+.item-header {
+  display: flex;
+  gap: awsui.$space-static-xs;
+  justify-content: space-between;
+
+  font-weight: bold;
+}
diff --git a/tsconfig.json b/tsconfig.json
index e7229a3..ca91991 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,7 @@
     "types": [],
     "lib": ["es2019", "dom", "dom.iterable"],
     "module": "ESNext",
-    "moduleResolution": "nodenext",
+    "moduleResolution": "Node",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,