diff --git a/examples/cra-ts-essentials/src/stories/cli-templates/Header.tsx b/examples/cra-ts-essentials/src/stories/cli-templates/Header.tsx
index a52c1617ff3a..97ee0691ecb9 100644
--- a/examples/cra-ts-essentials/src/stories/cli-templates/Header.tsx
+++ b/examples/cra-ts-essentials/src/stories/cli-templates/Header.tsx
@@ -38,7 +38,11 @@ export const Header = ({ user, isLoggedIn, onLogin, onLogout, onCreateAccount }:
         <h1>Acme</h1>
       </div>
       <div>
-        {user && <span>Hello, {user.name}!</span>}
+        {user && (
+          <span className="welcome">
+            Welcome, <b>{user.name}</b>!
+          </span>
+        )}
         {isLoggedIn ? (
           <Button size="small" onClick={onLogout} label="Log out" />
         ) : (
diff --git a/examples/cra-ts-essentials/src/stories/cli-templates/header.css b/examples/cra-ts-essentials/src/stories/cli-templates/header.css
index acadc9ec8c7f..830610e6f2e9 100644
--- a/examples/cra-ts-essentials/src/stories/cli-templates/header.css
+++ b/examples/cra-ts-essentials/src/stories/cli-templates/header.css
@@ -24,3 +24,9 @@ h1 {
 button + button {
   margin-left: 10px;
 }
+
+.welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}