diff --git a/assets/full-stack-chat-ui-cognito-auth-04.png b/assets/full-stack-chat-ui-cognito-auth-04.png
index 80e38e9..6ce5bb1 100644
Binary files a/assets/full-stack-chat-ui-cognito-auth-04.png and b/assets/full-stack-chat-ui-cognito-auth-04.png differ
diff --git a/full-stack-chat-ui-cognito-auth/user-interface/package-lock.json b/full-stack-chat-ui-cognito-auth/user-interface/package-lock.json
index 3b1b26e..c2c02a3 100644
--- a/full-stack-chat-ui-cognito-auth/user-interface/package-lock.json
+++ b/full-stack-chat-ui-cognito-auth/user-interface/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@aws-amplify/ui-react": "^6.1.3",
+        "@cloudscape-design/chat-components": "^1.0.12",
         "@cloudscape-design/components": "^3.0.611",
         "@cloudscape-design/design-tokens": "^3.0.35",
         "@cloudscape-design/global-styles": "^1.0.27",
@@ -2008,6 +2009,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cloudscape-design/chat-components": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/@cloudscape-design/chat-components/-/chat-components-1.0.12.tgz",
+      "integrity": "sha512-bayKaNxbbOoKW/WZkyAkwbHzdMMAKzW0F0kMoqMIA2fQVPl5l6k8mj9hZreB7pRXr0yEZIjK3ju6huRbcuNqGA==",
+      "dependencies": {
+        "@cloudscape-design/component-toolkit": "^1.0.0-beta",
+        "@cloudscape-design/test-utils-core": "^1.0.0",
+        "clsx": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@cloudscape-design/components": "^3",
+        "@cloudscape-design/design-tokens": "^3",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "node_modules/@cloudscape-design/collection-hooks": {
       "version": "1.0.54",
       "resolved": "https://registry.npmjs.org/@cloudscape-design/collection-hooks/-/collection-hooks-1.0.54.tgz",
diff --git a/full-stack-chat-ui-cognito-auth/user-interface/package.json b/full-stack-chat-ui-cognito-auth/user-interface/package.json
index ab4dfd8..d3b8336 100644
--- a/full-stack-chat-ui-cognito-auth/user-interface/package.json
+++ b/full-stack-chat-ui-cognito-auth/user-interface/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@aws-amplify/ui-react": "^6.1.3",
+    "@cloudscape-design/chat-components": "^1.0.12",
     "@cloudscape-design/components": "^3.0.611",
     "@cloudscape-design/design-tokens": "^3.0.35",
     "@cloudscape-design/global-styles": "^1.0.27",
diff --git a/full-stack-chat-ui-cognito-auth/user-interface/src/components/chat-ui/Avatar.tsx b/full-stack-chat-ui-cognito-auth/user-interface/src/components/chat-ui/Avatar.tsx
deleted file mode 100644
index 4050d97..0000000
--- a/full-stack-chat-ui-cognito-auth/user-interface/src/components/chat-ui/Avatar.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Popover } from "@cloudscape-design/components";
-import styles from "../../styles/chat-ui.module.scss";
-import { ReactElement } from "react";
-
-export function Avatar(props: {
-  readonly name?: string;
-  readonly content?: ReactElement;
-  readonly role: "ai" | "human";
-  readonly waiting?: boolean;
-}) {
-  return (
-    <div
-      style={{
-        display: "block",
-        marginRight: "1em",
-        width: "40px",
-        height: "40px",
-        minWidth: "40px",
-        minHeight: "40px",
-        alignContent: "start",
-        borderRadius: "50%",
-        background:
-          props.role === "ai"
-            ? "linear-gradient(300deg, rgb(52,20,120), rgb(118,72,250), rgb(62,141,255))"
-            : "#545b64",
-      }}
-    >
-      {props.waiting ? (
-        <div className={styles.wave}>
-          <span className={styles.dot}></span>
-          <span className={styles.dot}></span>
-          <span className={styles.dot}></span>
-        </div>
-      ) : (
-        <>
-          <div
-            style={{
-              display: "block",
-              textAlign: "center",
-              position: "relative",
-              color: "#FFFFFF",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-            }}
-          >
-            {props.content ? (
-              <div
-                style={{
-                  width: "25px",
-                  height: "25px",
-                  color: "#FFFFFF",
-                  margin: "auto",
-                }}
-              >
-                {props.content}
-              </div>
-            ) : (
-              <Popover
-                content={props.name}
-                dismissButton={false}
-                position="top"
-                size="small"
-              >
-                <h3>{(props.name ?? "A")[0].toUpperCase()}</h3>
-              </Popover>
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/full-stack-chat-ui-cognito-auth/user-interface/src/components/chat-ui/BaseChatMessage.tsx b/full-stack-chat-ui-cognito-auth/user-interface/src/components/chat-ui/BaseChatMessage.tsx
index 9582af3..ea4ef4c 100644
--- a/full-stack-chat-ui-cognito-auth/user-interface/src/components/chat-ui/BaseChatMessage.tsx
+++ b/full-stack-chat-ui-cognito-auth/user-interface/src/components/chat-ui/BaseChatMessage.tsx
@@ -6,7 +6,7 @@ import {
 import { ReactElement, useState } from "react";
 import styles from "../../styles/chat-ui.module.scss";
 import { CopyWithPopoverButton } from "./CopyButton";
-import { Avatar } from "./Avatar";
+import Avatar from "@cloudscape-design/chat-components/avatar";
 import * as awsui from "@cloudscape-design/design-tokens";
 
 export function BaseChatMessage(props: {
@@ -31,10 +31,11 @@ export function BaseChatMessage(props: {
       }}
     >
       <Avatar
-        name={props.name}
-        content={props.avatarElement}
-        waiting={props.waiting}
-        role={props.role}
+        ariaLabel={props.name || props.role}
+        tooltipText={props.name || props.role}
+        color={props.role === 'ai' ? "gen-ai" : 'default'}
+        loading={props.waiting}
+        iconName={props.role === 'ai' ? 'gen-ai':'user-profile'}
       />
       {props.children && (
         <div