diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e4b3be33e..31c8279c4b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  Fixed to keep telephone keypad on-screen on click, in PR [#5132](https://github.com/microsoft/BotFramework-WebChat/pull/5132)
    -  Disabled send button and hid message length when telephone keypad is shown, in PR [#5136](https://github.com/microsoft/BotFramework-WebChat/pull/5136)
    -  Added dark theme support, in PR [#5138](https://github.com/microsoft/BotFramework-WebChat/pull/5138)
+   -  Added an information message to the telephone keypad, in PR [#5140](https://github.com/microsoft/BotFramework-WebChat/pull/5140)
+-  (Experimental) Added `<LocalizeString />` component which can be used to localize strings, by [@OEvgeny](https://github.com/OEvgeny) in PR [#5140](https://github.com/microsoft/BotFramework-WebChat/pull/5140)
 -  Added `<ThemeProvider>` component to apply theme pack to Web Chat, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
 -  Added `useMakeThumbnail` hook option to create a thumbnail from the file given, by [@compulim](https://github.com/compulim), in PR [#5123](https://github.com/microsoft/BotFramework-WebChat/pull/5123) and [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
 
diff --git a/__tests__/__image_snapshots__/html/fluent-theme-fallback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-3-snap.png b/__tests__/__image_snapshots__/html/fluent-theme-fallback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-3-snap.png
index 3a386f90ac..fafb23d2a5 100644
Binary files a/__tests__/__image_snapshots__/html/fluent-theme-fallback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-3-snap.png and b/__tests__/__image_snapshots__/html/fluent-theme-fallback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-3-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/telephone-keypad-custom-input-message-js-fluent-theme-applied-telephone-keypad-should-show-custom-message-1-snap.png b/__tests__/__image_snapshots__/html/telephone-keypad-custom-input-message-js-fluent-theme-applied-telephone-keypad-should-show-custom-message-1-snap.png
new file mode 100644
index 0000000000..60301b33cb
Binary files /dev/null and b/__tests__/__image_snapshots__/html/telephone-keypad-custom-input-message-js-fluent-theme-applied-telephone-keypad-should-show-custom-message-1-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/telephone-keypad-custom-input-message-js-fluent-theme-applied-telephone-keypad-should-show-custom-message-2-snap.png b/__tests__/__image_snapshots__/html/telephone-keypad-custom-input-message-js-fluent-theme-applied-telephone-keypad-should-show-custom-message-2-snap.png
new file mode 100644
index 0000000000..bba55b77da
Binary files /dev/null and b/__tests__/__image_snapshots__/html/telephone-keypad-custom-input-message-js-fluent-theme-applied-telephone-keypad-should-show-custom-message-2-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/telephone-keypad-show-hide-js-fluent-theme-applied-telephone-keypad-should-show-hide-1-snap.png b/__tests__/__image_snapshots__/html/telephone-keypad-show-hide-js-fluent-theme-applied-telephone-keypad-should-show-hide-1-snap.png
index 9460243b91..6fb9904279 100644
Binary files a/__tests__/__image_snapshots__/html/telephone-keypad-show-hide-js-fluent-theme-applied-telephone-keypad-should-show-hide-1-snap.png and b/__tests__/__image_snapshots__/html/telephone-keypad-show-hide-js-fluent-theme-applied-telephone-keypad-should-show-hide-1-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/telephone-keypad-show-hide-js-fluent-theme-applied-telephone-keypad-should-show-hide-2-snap.png b/__tests__/__image_snapshots__/html/telephone-keypad-show-hide-js-fluent-theme-applied-telephone-keypad-should-show-hide-2-snap.png
index 9e405310c5..96d1694236 100644
Binary files a/__tests__/__image_snapshots__/html/telephone-keypad-show-hide-js-fluent-theme-applied-telephone-keypad-should-show-hide-2-snap.png and b/__tests__/__image_snapshots__/html/telephone-keypad-show-hide-js-fluent-theme-applied-telephone-keypad-should-show-hide-2-snap.png differ
diff --git a/__tests__/__image_snapshots__/html/telephone-keypad-tap-js-fluent-theme-applied-telephone-keypad-when-tapped-should-send-message-1-snap.png b/__tests__/__image_snapshots__/html/telephone-keypad-tap-js-fluent-theme-applied-telephone-keypad-when-tapped-should-send-message-1-snap.png
index 9408d661e5..5dd2b5b185 100644
Binary files a/__tests__/__image_snapshots__/html/telephone-keypad-tap-js-fluent-theme-applied-telephone-keypad-when-tapped-should-send-message-1-snap.png and b/__tests__/__image_snapshots__/html/telephone-keypad-tap-js-fluent-theme-applied-telephone-keypad-when-tapped-should-send-message-1-snap.png differ
diff --git a/__tests__/html/fluentTheme/telephoneKeypad.customInputMessage.html b/__tests__/html/fluentTheme/telephoneKeypad.customInputMessage.html
new file mode 100644
index 0000000000..1676d7bdd6
--- /dev/null
+++ b/__tests__/html/fluentTheme/telephoneKeypad.customInputMessage.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const App = () => (
+          <ReactWebChat 
+            directLine={directLine} 
+            store={store} 
+            styleOptions={{ hideUploadButton: true, hideTelephoneKeypadButton: false }}
+            overrideLocalizedStrings={{
+              TELEPHONE_KEYPAD_INPUT_MESSAGE: 'Only supports single-digit input. [Learn more](https://aka.ms/ms)'
+            }}
+          />
+        );
+
+        render(
+          <FluentThemeProvider>
+            <App />
+          </FluentThemeProvider>,
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity(
+          'Eiusmod anim adipisicing cupidatat adipisicing officia sint qui consequat veniam id aute.'
+        );
+
+        await pageConditions.numActivitiesShown(1);
+
+        // WHEN: Telephone keypad button is clicked.
+        await host.click(
+          document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTelephoneKeypadToolbarButton}"]`)
+        );
+
+        // THEN: Should show the telephone keypad with custom link
+        await host.snapshot();
+
+        // WHEN: The link is focused
+        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTelephoneKeypadToolbarButton}"]`).focus();
+        await host.sendShiftTab();
+
+        // THEN: Should display a focused state
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/fluentTheme/telephoneKeypad.customInputMessage.js b/__tests__/html/fluentTheme/telephoneKeypad.customInputMessage.js
new file mode 100644
index 0000000000..966dc928dd
--- /dev/null
+++ b/__tests__/html/fluentTheme/telephoneKeypad.customInputMessage.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('telephone keypad should show custom message', () => runHTML('fluentTheme/telephoneKeypad.customInputMessage'));
+});
diff --git a/docs/LOCALIZATION.md b/docs/LOCALIZATION.md
index e4c88d8d0f..ffc8b9c418 100644
--- a/docs/LOCALIZATION.md
+++ b/docs/LOCALIZATION.md
@@ -261,7 +261,9 @@ function convertFromOldStringId(js) {
     TEXT_INPUT_UPLOAD_BUTTON_ALT: js['Upload file'],
     TEXT_INPUT_TELEPHON_KEYPAD_BUTTON_ALT: js['Telephone keypad'],
     TEXT_INPUT_DROP_ZONE: js['Drop files'],
-    TEXT_INPUT_LENGTH_EXCEEDED_ALT: js['Message lengths exceeded'],
+    TEXT_INPUT_LENGTH_EXCEEDED_ALT: js['Message length exceeded'],
+
+    TELEPHONE_KEYPAD_INPUT_MESSAGE: js['Only supports single-digit input'],
 
     TEXT_INPUT_ATTACHMENTS_FEW: js['attachments'],
     TEXT_INPUT_ATTACHMENTS_MANY: js['attachments'],
diff --git a/packages/api/src/localization/en-US.json b/packages/api/src/localization/en-US.json
index d815cf8baa..78950157d4 100644
--- a/packages/api/src/localization/en-US.json
+++ b/packages/api/src/localization/en-US.json
@@ -125,7 +125,8 @@
   "TEXT_INPUT_UPLOAD_BUTTON_ALT": "Upload file",
   "TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT": "Telephone keypad",
   "TEXT_INPUT_DROP_ZONE": "Drop files",
-  "TEXT_INPUT_LENGTH_EXCEEDED_ALT": "Message lengths exceeded",
+  "TEXT_INPUT_LENGTH_EXCEEDED_ALT": "Message length exceeded",
+  "TELEPHONE_KEYPAD_INPUT_MESSAGE": "Only supports single-digit input",
   "TEXT_INPUT_ATTACHMENTS_FEW": "$1 attachments",
   "_TEXT_INPUT_ATTACHMENTS_FEW.comment": "$1 is the number of attachments. This is for plural rule of \"few\".",
   "TEXT_INPUT_ATTACHMENTS_MANY": "$1 attachments",
diff --git a/packages/component/src/Utils/LocalizedString.tsx b/packages/component/src/Utils/LocalizedString.tsx
new file mode 100644
index 0000000000..517885e18e
--- /dev/null
+++ b/packages/component/src/Utils/LocalizedString.tsx
@@ -0,0 +1,143 @@
+/* eslint react/no-danger: "off" */
+
+import { hooks } from 'botframework-webchat-api';
+import { onErrorResumeNext } from 'botframework-webchat-core';
+import MarkdownIt from 'markdown-it';
+import React, { memo, useMemo } from 'react';
+import betterLinks, { type BetterLinkEnv, type LinkOptions } from './betterLinks';
+
+const allowedSchemes = ['data', 'http', 'https', 'ftp', 'mailto', 'sip', 'tel'];
+
+const linkDefinitions = [];
+
+const externalLinkAlt = '';
+
+const defaultDecorateLink = (href: string, textContent: string, linkOptions?: LinkOptions): LinkOptions | undefined => {
+  const decoration: LinkOptions = {
+    rel: 'noopener noreferrer',
+    target: '_blank',
+    wrapZeroWidthSpace: true,
+    ...linkOptions
+  };
+
+  const ariaLabelSegments: string[] = [textContent];
+  const classes: Set<string> = new Set();
+  const linkDefinition = linkDefinitions.find(({ url }) => url === href);
+  const protocol = onErrorResumeNext(() => new URL(href).protocol);
+
+  if (linkDefinition) {
+    ariaLabelSegments.push(
+      linkDefinition.title || onErrorResumeNext(() => new URL(linkDefinition.url).host) || linkDefinition.url
+    );
+
+    // linkDefinition.identifier is uppercase, while linkDefinition.label is as-is.
+    linkDefinition.label === textContent && classes.add('webchat__render-markdown__pure-identifier');
+  }
+
+  // For links that would be sanitized out, let's turn them into a button so we could handle them later.
+  if (!allowedSchemes.map(scheme => `${scheme}:`).includes(protocol)) {
+    decoration.asButton ??= true;
+
+    classes.add('webchat__render-markdown__citation');
+  } else if (protocol === 'http:' || protocol === 'https:') {
+    decoration.iconClassName = [decoration.iconClassName, 'webchat__render-markdown__external-link-icon']
+      .filter((className: string | undefined) => className)
+      .join(' ');
+
+    ariaLabelSegments.push(externalLinkAlt);
+  }
+
+  // The first segment is textContent. Putting textContent is aria-label is useless.
+  if (ariaLabelSegments.length > 1) {
+    // If "aria-label" is already applied, do not overwrite it.
+    decoration.ariaLabel ??= (value: string) => value || ariaLabelSegments.join(' ');
+  }
+
+  if (typeof linkOptions?.className === 'string') {
+    classes.add(linkOptions.className);
+  }
+
+  // Resolve className
+  const classNamesString = Array.from(classes).join(' ');
+  if (linkOptions?.className && linkOptions?.className instanceof Function) {
+    decoration.className = linkOptions.className(classNamesString);
+  } else {
+    decoration.className = classNamesString;
+  }
+
+  // By default, Markdown-It will set "title" to the link title in link definition.
+
+  // However, "title" may be narrated by screen reader:
+  // - Edge
+  //   - <a> will narrate "aria-label" but not "title"
+  //   - <button> will narrate both "aria-label" and "title"
+  // - NVDA
+  //   - <a> will narrate both "aria-label" and "title"
+  //   - <button> will narrate both "aria-label" and "title"
+
+  // Title makes it very difficult to control narrations by the screen reader. Thus, we are disabling it in favor of "aria-label".
+  // This will not affect our accessibility compliance but UX. We could use a non-native tooltip or other forms of visual hint.
+
+  decoration.title ??= false;
+
+  return decoration;
+};
+
+const { useLocalizer } = hooks;
+
+type Plural = {
+  zero?: string;
+  one?: string;
+  two?: string;
+  few?: string;
+  many?: string;
+  other: string;
+};
+
+const markdownIt = new MarkdownIt().use(betterLinks);
+
+type PluralProps = Readonly<{
+  stringIds: Plural;
+  values: readonly [number, ...(number | string)[]] | undefined;
+}>;
+
+type SingularProps = Readonly<{
+  stringIds: string;
+  values?: readonly (number | string)[] | undefined;
+}>;
+
+type Props = Readonly<{
+  className?: string | undefined;
+  linkClassName?: string | undefined;
+  onDecorateLink?: ((href: string, textContent: string) => LinkOptions | undefined) | undefined;
+}> &
+  (SingularProps | PluralProps);
+
+function isPlural(props: Props): props is PluralProps {
+  return typeof props.stringIds !== 'string';
+}
+
+const LocalizedString = (props: Props) => {
+  const { className, linkClassName, onDecorateLink = defaultDecorateLink, stringIds, values } = props;
+  const localize = useLocalizer(isPlural(props) && { plural: true });
+  const env = useMemo<BetterLinkEnv>(
+    () => ({
+      linkOptions: {
+        className: linkClassName
+      },
+      decorateLink: onDecorateLink
+    }),
+    [linkClassName, onDecorateLink]
+  );
+
+  const html = useMemo(
+    () => ({
+      __html: markdownIt.renderer.render(markdownIt.parseInline(localize(stringIds, ...(values ?? [])), env), env)
+    }),
+    [env, localize, stringIds, values]
+  );
+
+  return <span className={className} dangerouslySetInnerHTML={html} />;
+};
+
+export default memo(LocalizedString);
diff --git a/packages/component/src/Utils/betterLinks.ts b/packages/component/src/Utils/betterLinks.ts
new file mode 100644
index 0000000000..9f7b1e1dea
--- /dev/null
+++ b/packages/component/src/Utils/betterLinks.ts
@@ -0,0 +1,157 @@
+/* eslint-disable security/detect-object-injection */
+import MarkdownIt from 'markdown-it';
+
+function iterator(md, ruleName, tokenType, iterator) {
+  function scan(state) {
+    const { env = {} } = state;
+    for (let blkIdx = state.tokens.length - 1; blkIdx >= 0; blkIdx--) {
+      if (state.tokens[blkIdx].type !== 'inline') {
+        continue;
+      }
+      const inlineTokens = state.tokens[blkIdx].children;
+      for (let i = inlineTokens.length - 1; i >= 0; i--) {
+        if (inlineTokens[i].type !== tokenType) {
+          continue;
+        }
+        iterator(inlineTokens, i, env);
+      }
+    }
+  }
+  md.core.ruler.push(ruleName, scan);
+}
+
+// Put a transparent pixel instead of the "open in new window" icon, so developers can easily modify the icon in CSS.
+const TRANSPARENT_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+type AttributeSetter = false | string | ((value?: string) => string);
+
+export type LinkOptions = {
+  /** Value of "aria-label" attribute of the link. If set to `false`, remove existing attribute. */
+  ariaLabel?: AttributeSetter;
+
+  /** Turns this link into a <button> with "value" attribute instead of "href". */
+  asButton?: boolean;
+
+  /** Value of "class" attribute of the link. If set to `false`, remove existing attribute. */
+  className?: AttributeSetter;
+
+  /** Alternate text of the image icon appended to the link. */
+  iconAlt?: string;
+
+  /** Class name of the image icon appended to the link. */
+  iconClassName?: string;
+
+  /** Value of "rel" attribute of the link. If set to `false`, remove existing attribute. */
+  rel?: AttributeSetter;
+
+  /** Value of "target" attribute of the link. If set to `false`, remove existing attribute. */
+  target?: AttributeSetter;
+
+  /** Value of "title" attribute of the link. If set to `false`, remove existing attribute. */
+  title?: AttributeSetter;
+
+  /** Wraps the link with zero-width space. */
+  wrapZeroWidthSpace?: boolean;
+};
+
+export type BetterLinkEnv = {
+  decorateLink?: (href: string, textContent: string, linkOptions: LinkOptions) => LinkOptions | undefined;
+  linkOptions?: LinkOptions;
+};
+
+// This is used for parsing Markdown for external links.
+const internalMarkdownIt = new MarkdownIt();
+
+const ZERO_WIDTH_SPACE_TOKEN = {
+  content: '\u200b',
+  type: 'text'
+};
+
+function setTokenAttribute(attrs: Array<[string, string]>, name: string, value?: AttributeSetter) {
+  const index = attrs.findIndex(entry => entry[0] === name);
+
+  if (value === false) {
+    ~index && attrs.splice(index, 1);
+  } else if (typeof value === 'string') {
+    if (~index) {
+      attrs[+index][1] = value;
+    } else {
+      attrs.push([name, value]);
+    }
+  } else if (typeof value === 'function') {
+    if (~index) {
+      attrs[+index][1] = value(attrs[+index][1]);
+    } else {
+      attrs.push([name, value()]);
+    }
+  }
+}
+
+const betterLinks = (markdown: typeof MarkdownIt): typeof MarkdownIt =>
+  markdown.use(iterator, 'url_new_win', 'link_open', (tokens, index, env) => {
+    const { decorateLink, linkOptions }: BetterLinkEnv = env;
+
+    const indexOfLinkCloseToken = tokens.indexOf(tokens.slice(index + 1).find(({ type }) => type === 'link_close'));
+    // eslint-disable-next-line no-magic-numbers
+    const updatedTokens = tokens.splice(index, ~indexOfLinkCloseToken ? indexOfLinkCloseToken - index + 1 : 2);
+
+    try {
+      const [linkOpenToken] = updatedTokens;
+      const linkCloseToken = updatedTokens[updatedTokens.length - 1];
+
+      const [, href] = linkOpenToken.attrs.find(([name]) => name === 'href');
+      const nodesInLink = updatedTokens.slice(1, updatedTokens.length - 1);
+
+      const textContent = nodesInLink
+        .filter(({ type }) => type === 'text')
+        .map(({ content }) => content)
+        .join(' ');
+
+      const decoration = decorateLink?.(href, textContent, linkOptions);
+
+      if (!decoration) {
+        return;
+      }
+
+      const { ariaLabel, asButton, className, iconAlt, iconClassName, rel, target, title, wrapZeroWidthSpace } =
+        decoration;
+
+      setTokenAttribute(linkOpenToken.attrs, 'aria-label', ariaLabel);
+      setTokenAttribute(linkOpenToken.attrs, 'class', className);
+      setTokenAttribute(linkOpenToken.attrs, 'title', title);
+
+      if (iconClassName) {
+        const iconTokens = internalMarkdownIt.parseInline(`![](${TRANSPARENT_GIF})`)[0].children;
+
+        setTokenAttribute(iconTokens[0].attrs, 'class', iconClassName);
+        setTokenAttribute(iconTokens[0].attrs, 'title', iconAlt);
+
+        // Add an icon before </a>.
+        // eslint-disable-next-line no-magic-numbers
+        updatedTokens.splice(-1, 0, ...iconTokens);
+      }
+
+      if (asButton) {
+        setTokenAttribute(linkOpenToken.attrs, 'href', false);
+
+        linkOpenToken.tag = 'button';
+
+        setTokenAttribute(linkOpenToken.attrs, 'type', 'button');
+        setTokenAttribute(linkOpenToken.attrs, 'value', href);
+
+        linkCloseToken.tag = 'button';
+      } else {
+        setTokenAttribute(linkOpenToken.attrs, 'rel', rel);
+        setTokenAttribute(linkOpenToken.attrs, 'target', target);
+      }
+
+      if (wrapZeroWidthSpace) {
+        updatedTokens.splice(0, 0, ZERO_WIDTH_SPACE_TOKEN);
+        updatedTokens.splice(Infinity, 0, ZERO_WIDTH_SPACE_TOKEN);
+      }
+    } finally {
+      tokens.splice(index, 0, ...updatedTokens);
+    }
+  });
+
+export default betterLinks;
diff --git a/packages/component/src/index.ts b/packages/component/src/index.ts
index 4092132c6c..4caac3fe54 100644
--- a/packages/component/src/index.ts
+++ b/packages/component/src/index.ts
@@ -20,6 +20,8 @@ import SendStatus, { connectSendStatus } from './ActivityStatus/SendStatus/SendS
 import Timestamp from './ActivityStatus/Timestamp';
 import ErrorBox from './ErrorBox';
 
+import LocalizedString from './Utils/LocalizedString';
+
 import AudioContent from './Attachment/AudioContent';
 import FileContent from './Attachment/FileContent';
 import HTMLVideoContent from './Attachment/HTMLVideoContent';
@@ -101,7 +103,10 @@ const Components = {
   connectMicrophoneButton,
   connectSendButton,
   connectSuggestedActions,
-  connectUploadButton
+  connectUploadButton,
+
+  // Components for localization
+  LocalizedString
 };
 
 export default ReactWebChat;
diff --git a/packages/fluent-theme/src/components/Theme.module.css b/packages/fluent-theme/src/components/Theme.module.css
index 7d7e4fe92c..4ed9e7b48a 100644
--- a/packages/fluent-theme/src/components/Theme.module.css
+++ b/packages/fluent-theme/src/components/Theme.module.css
@@ -19,12 +19,19 @@
   --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);
   --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);
   --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);
+  
+  --webchat-colorStrokeFocus2: var(--colorStrokeFocus2, #000000);
 
   --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);
 
   --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);
   --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);
 
+  --webchat-colorBrandForegroundLink: var(--colorBrandForegroundLink, #01678c);
+  --webchat-colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover, #015a7a);
+  --webchat-colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed, #014259);
+  --webchat-colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected, #01678c);  
+
   --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);
   --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);
 
diff --git a/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.module.css b/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.module.css
index 3add5a2d96..2bf4a54826 100644
--- a/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.module.css
+++ b/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.module.css
@@ -28,3 +28,32 @@
   padding: 16px;
   width: 100%;
 }
+
+:global(.webchat-fluent) .telephone-keypad__info-message {
+  align-items: center;
+  color: var(--webchat-colorNeutralForeground4);
+  display: flex;
+  font-size: 12px;
+  gap: 6px;
+  margin-block-end: 6px;
+}
+
+:global(.webchat-fluent) .telephone-keypad__info-message-link {
+  color: var(--webchat-colorBrandForegroundLink);
+  text-decoration-color: transparent;
+
+  &:target {
+    color: var(--webchat-colorBrandForegroundLinkSelected);
+  }
+  &:hover {
+    color: var(--webchat-colorBrandForegroundLinkHover);
+    text-decoration: underline 1px currentColor;
+  }
+  &:active {
+    color: var(--webchat-colorBrandForegroundLinkPressed);
+  }
+  &:focus-visible {
+    outline: none;
+    text-decoration: underline 1px double var(--webchat-colorStrokeFocus2);
+  }
+}
diff --git a/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.tsx b/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.tsx
index 634a70cfea..7bdff9bafc 100644
--- a/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.tsx
+++ b/packages/fluent-theme/src/components/telephoneKeypad/private/TelephoneKeypad.tsx
@@ -1,6 +1,7 @@
 import React, { KeyboardEventHandler, memo, useCallback, useEffect, useRef, type ReactNode } from 'react';
 import cx from 'classnames';
 import { useRefFrom } from 'use-ref-from';
+import { Components } from 'botframework-webchat-component';
 
 import Button from './Button';
 // import HorizontalDialPadController from './HorizontalDialPadController';
@@ -9,6 +10,9 @@ import { type DTMF } from '../types';
 import useShown from '../useShown';
 import styles from './TelephoneKeypad.module.css';
 import { useStyles } from '../../../styles';
+import InfoSmallIcon from '../../../icons/InfoSmallIcon';
+
+const { LocalizedString } = Components;
 
 type Props = Readonly<{
   autoFocus?: boolean | undefined;
@@ -130,6 +134,13 @@ const TelephoneKeypad = memo(({ autoFocus, className, onButtonClick, isHorizonta
           onClick={handleButtonPoundClick}
         />
       </Orientation>
+      <div className={classNames['telephone-keypad__info-message']}>
+        <InfoSmallIcon />
+        <LocalizedString
+          linkClassName={classNames['telephone-keypad__info-message-link']}
+          stringIds="TELEPHONE_KEYPAD_INPUT_MESSAGE"
+        />
+      </div>
     </div>
   );
 });
diff --git a/packages/fluent-theme/src/icons/InfoSmallIcon.tsx b/packages/fluent-theme/src/icons/InfoSmallIcon.tsx
new file mode 100644
index 0000000000..ea1ea11a32
--- /dev/null
+++ b/packages/fluent-theme/src/icons/InfoSmallIcon.tsx
@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+
+export default memo((props: Readonly<{ readonly className?: string }>) => (
+  <svg
+    aria-hidden="true"
+    className={props.className}
+    height="1em"
+    viewBox="0 0 16 16"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"
+      fill="currentColor"
+    />
+  </svg>
+));