diff --git a/.changeset/ninety-feet-flow.md b/.changeset/ninety-feet-flow.md
new file mode 100644
index 00000000000..24bb8d6d831
--- /dev/null
+++ b/.changeset/ninety-feet-flow.md
@@ -0,0 +1,6 @@
+---
+"@wso2is/admin.applications.v1": patch
+"@wso2is/i18n": patch
+---
+
+Introduce UI for legacy app token section.
diff --git a/features/admin.applications.v1/components/forms/inbound-oidc-form.tsx b/features/admin.applications.v1/components/forms/inbound-oidc-form.tsx
index 2193b5c171c..d696334e7b1 100644
--- a/features/admin.applications.v1/components/forms/inbound-oidc-form.tsx
+++ b/features/admin.applications.v1/components/forms/inbound-oidc-form.tsx
@@ -16,6 +16,8 @@
  * under the License.
  */
 
+import Alert from "@oxygen-ui/react/Alert";
+import AlertTitle from "@oxygen-ui/react/AlertTitle";
 import Box from "@oxygen-ui/react/Box";
 import Chip from "@oxygen-ui/react/Chip";
 import { AppState, ConfigReducerStateInterface } from "@wso2is/admin.core.v1";
@@ -215,6 +217,9 @@ export const InboundOIDCForm: FunctionComponent<InboundOIDCFormPropsInterface> =
     const { isOrganizationManagementEnabled } = useGlobalVariables();
     const [ isEncryptionEnabled, setEncryptionEnable ] = useState(false);
     const [ isPublicClient, setPublicClient ] = useState<boolean>(false);
+    const useClientIdAsSubClaimForAppTokens: boolean = initialValues.useClientIdAsSubClaimForAppTokens;
+    const omitUsernameInIntrospectionRespForAppTokens: boolean
+        = initialValues.omitUsernameInIntrospectionRespForAppTokens;
     const [ callBackUrls, setCallBackUrls ] = useState("");
     const [ audienceUrls, setAudienceUrls ] = useState("");
     const [ showURLError, setShowURLError ] = useState(false);
@@ -290,6 +295,8 @@ export const InboundOIDCForm: FunctionComponent<InboundOIDCFormPropsInterface> =
     const requestObjectEncryptionMethod: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
     const subjectToken: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
     const applicationSubjectTokenExpiryInSeconds: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
+    const useClientIdAsSubClaimForAppTokensElement: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
+    const omitUsernameInIntrospectionRespForAppTokensElement: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
 
     const [ isSPAApplication, setSPAApplication ] = useState<boolean>(false);
     const [ isOIDCWebApplication, setOIDCWebApplication ] = useState<boolean>(false);
@@ -1353,6 +1360,8 @@ export const InboundOIDCForm: FunctionComponent<InboundOIDCFormPropsInterface> =
             }
             inboundConfigFormValues = {
                 ...inboundConfigFormValues,
+                omitUsernameInIntrospectionRespForAppTokens:
+                    values.get("omitUsernameInIntrospectionRespForAppTokens")?.length > 0,
                 pushAuthorizationRequest: {
                     requirePushAuthorizationRequest: values.get("requirePushAuthorizationRequest")?.length > 0
                 },
@@ -1366,7 +1375,8 @@ export const InboundOIDCForm: FunctionComponent<InboundOIDCFormPropsInterface> =
                 subject: {
                     sectorIdentifierUri: initialValues?.subject?.sectorIdentifierUri,
                     subjectType: initialValues?.subject?.subjectType
-                }
+                },
+                useClientIdAsSubClaimForAppTokens: values.get("useClientIdAsSubClaimForAppTokens")?.length > 0
             };
 
             // If the app is not a newly created, add `clientId` & `clientSecret`.
@@ -2566,6 +2576,130 @@ export const InboundOIDCForm: FunctionComponent<InboundOIDCFormPropsInterface> =
                     </>
                 ) }
 
+            { /* Legacy Application Tokens */ }
+            {
+                (!omitUsernameInIntrospectionRespForAppTokens
+                || !useClientIdAsSubClaimForAppTokens)
+                && (
+                    <Grid.Row columns={ 2 }>
+                        <Grid.Column mobile={ 16 } tablet={ 16 } computer={ 16 }>
+                            <Divider />
+                            <Divider hidden />
+                        </Grid.Column>
+                        <Grid.Column mobile={ 16 } tablet={ 16 } computer={ 16 }>
+                            <Heading as="h4">
+                                { t("applications:forms.inboundOIDC.sections" +
+                                    ".legacyApplicationTokens.heading") }
+                            </Heading>
+                            <Divider hidden />
+                            {
+                                (
+                                    <Alert severity="warning">
+                                        <AlertTitle
+                                            className="alert-title">
+                                            <Trans components={ { strong: <strong/> } } >Note:</Trans>
+                                        </AlertTitle>
+                                        <Trans
+                                            i18nKey={ t("actions:fields.authentication.info.message") }
+                                        >
+                                            You are currently using an outdated behavior for application tokens.
+                                            Please follow the below guideline before migrating to the new behavior.
+                                            <ol>
+                                                <li>
+                                                    <strong>Client Application Changes:</strong>
+                                                    <p>Update your client application to no longer use the&nbsp;
+                                                        <code>sub</code> attribute to refer to the application
+                                                        owner&apos;s user ID in the application token.</p>
+                                                </li>
+                                                <li>
+                                                    <strong>Introspection Response Updates:</strong>
+                                                    <p>Modify your application to stop relying on the&nbsp;
+                                                        <code>username</code> field in the introspection endpoint
+                                                        response for application tokens, as this claim will no
+                                                        longer be included.</p>
+                                                </li>
+                                            </ol>
+                                        </Trans>
+                                    </Alert>
+                                )
+                            }
+                            {
+                                !useClientIdAsSubClaimForAppTokens && (
+                                    <>
+                                        <Field
+                                            ref={ useClientIdAsSubClaimForAppTokensElement }
+                                            name="useClientIdAsSubClaimForAppTokens"
+                                            required={ false }
+                                            type="checkbox"
+                                            disabled={ false }
+                                            value={
+                                                initialValues?.useClientIdAsSubClaimForAppTokens ?
+                                                    [ "useClientIdAsSubClaimForAppTokens" ]
+                                                    : [] }
+                                            readOnly={ readOnly }
+                                            data-componentId={
+                                                `${ componentId }-use-client-id-as-sub-claim-for-app-tokens` }
+                                            children={ [
+                                                {
+                                                    label: t("applications:forms.inboundOIDC.sections."
+                                                        + "legacyApplicationTokens.fields"
+                                                        + ".useClientIdAsSubClaimForAppTokens.label"),
+                                                    value: "useClientIdAsSubClaimForAppTokens"
+                                                }
+                                            ] }
+                                        />
+                                        <Hint>
+                                            { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens."
+                                                    + "fields.useClientIdAsSubClaimForAppTokens.hint") }
+                                        </Hint>
+                                    </>
+                                )
+                            }
+                            {
+                                (!omitUsernameInIntrospectionRespForAppTokens
+                                    && !useClientIdAsSubClaimForAppTokens) &&
+                                (
+                                    <Divider hidden />
+                                )
+                            }
+                            {
+                                (!omitUsernameInIntrospectionRespForAppTokens) &&
+                                (
+                                    <>
+                                        <Field
+                                            ref={ omitUsernameInIntrospectionRespForAppTokensElement }
+                                            name="omitUsernameInIntrospectionRespForAppTokens"
+                                            required={ false }
+                                            type="checkbox"
+                                            disabled={ false }
+                                            value={
+                                                initialValues?.omitUsernameInIntrospectionRespForAppTokens ?
+                                                    [ "omitUsernameInIntrospectionRespForAppTokens" ]
+                                                    : [] }
+                                            readOnly={ readOnly }
+                                            data-componentId={
+                                                `${ componentId }-omit-username-in-introspection-resp-for-app-tokens` }
+                                            children={ [
+                                                {
+                                                    label: t("applications:forms.inboundOIDC.sections"
+                                                    + ".legacyApplicationTokens.fields."
+                                                    + "omitUsernameInIntrospectionRespForAppTokens.label"),
+                                                    value: "omitUsernameInIntrospectionRespForAppTokens"
+                                                }
+                                            ] }
+                                        />
+                                        <Hint>
+                                            { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens."
+                                            + "fields.omitUsernameInIntrospectionRespForAppTokens.hint") }
+                                        </Hint>
+                                    </>
+                                )
+                            }
+                        </Grid.Column>
+                    </Grid.Row>
+                )
+            }
+
             { /* Access Token */ }
             {
                 !isSystemApplication
@@ -4377,6 +4511,7 @@ InboundOIDCForm.defaultProps = {
         },
         idToken: undefined,
         logout: undefined,
+        omitUsernameInIntrospectionRespForAppTokens: undefined,
         pkce: {
             mandatory: false,
             supportPlainTransformAlgorithm: false
@@ -4386,6 +4521,7 @@ InboundOIDCForm.defaultProps = {
         scopeValidators: [],
         state: undefined,
         subjectToken: undefined,
+        useClientIdAsSubClaimForAppTokens: undefined,
         validateRequestObjectSignature: undefined
     }
 };
diff --git a/features/admin.applications.v1/components/settings/attribute-management/advance-attribute-settings.test.tsx b/features/admin.applications.v1/components/settings/attribute-management/advance-attribute-settings.test.tsx
index 2cba74e7fb2..aa4e8885bac 100644
--- a/features/admin.applications.v1/components/settings/attribute-management/advance-attribute-settings.test.tsx
+++ b/features/admin.applications.v1/components/settings/attribute-management/advance-attribute-settings.test.tsx
@@ -127,6 +127,7 @@ describe("Advance attribute settings in the attributes tab of Application Edit v
                     },
                     isFAPIApplication: false,
                     logout: {},
+                    omitUsernameInIntrospectionRespForAppTokens: false,
                     pkce: { mandatory: true, supportPlainTransformAlgorithm: false },
                     publicClient: true,
                     pushAuthorizationRequest: { requirePushAuthorizationRequest: false },
@@ -139,6 +140,7 @@ describe("Advance attribute settings in the attributes tab of Application Edit v
                         applicationSubjectTokenExpiryInSeconds: 180,
                         enable: false
                     },
+                    useClientIdAsSubClaimForAppTokens: false,
                     validateRequestObjectSignature: false
                 } }
                 data-testid={ "advanced-attribute-settings-form" }
diff --git a/features/admin.applications.v1/models/application-inbound.ts b/features/admin.applications.v1/models/application-inbound.ts
index ac4c4f8460d..e5a3a95f77c 100644
--- a/features/admin.applications.v1/models/application-inbound.ts
+++ b/features/admin.applications.v1/models/application-inbound.ts
@@ -193,6 +193,8 @@ export interface OIDCDataInterface {
     subject?: SubjectConfigInterface;
     isFAPIApplication?: boolean;
     hybridFlow?: HybridFlowConfigurationInterface;
+    useClientIdAsSubClaimForAppTokens?: boolean;
+    omitUsernameInIntrospectionRespForAppTokens?: boolean;
 }
 
 /**
diff --git a/features/admin.applications.v1/pages/application-edit.scss b/features/admin.applications.v1/pages/application-edit.scss
index 536ea9b575a..e1580820d43 100644
--- a/features/admin.applications.v1/pages/application-edit.scss
+++ b/features/admin.applications.v1/pages/application-edit.scss
@@ -19,3 +19,19 @@
 .application-branding-link {
     cursor: pointer;
 }
+
+.ignore-once-button {
+    color: #788997;
+}
+
+.banner-detail-card {
+    border: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    background: #fff;
+}
+
+.application-outdated-alert-expanded-view {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
diff --git a/features/admin.applications.v1/pages/application-edit.tsx b/features/admin.applications.v1/pages/application-edit.tsx
index ba0cb6ccdcd..8ebd818e257 100755
--- a/features/admin.applications.v1/pages/application-edit.tsx
+++ b/features/admin.applications.v1/pages/application-edit.tsx
@@ -16,6 +16,10 @@
  * under the License.
  */
 
+import Alert from "@oxygen-ui/react/Alert";
+import AlertTitle from "@oxygen-ui/react/AlertTitle";
+import Card from "@oxygen-ui/react/Card";
+import Grid from "@oxygen-ui/react/Grid";
 import { useRequiredScopes } from "@wso2is/access-control";
 import ApplicationTemplateMetadataProvider from
     "@wso2is/admin.application-templates.v1/provider/application-template-metadata-provider";
@@ -33,21 +37,27 @@ import { ExtensionTemplateListInterface } from "@wso2is/admin.template-core.v1/m
 import { isFeatureEnabled } from "@wso2is/core/helpers";
 import { AlertLevels, IdentifiableComponentInterface } from "@wso2is/core/models";
 import { addAlert } from "@wso2is/core/store";
+import { Field, Forms } from "@wso2is/forms";
 import {
     AnimatedAvatar,
     AppAvatar,
+    ConfirmationModal,
+    Hint,
     LabelWithPopup,
     Popup,
     TabPageLayout
 } from "@wso2is/react-components";
+import { AxiosError } from "axios";
 import cloneDeep from "lodash-es/cloneDeep";
-import React, { FunctionComponent, ReactElement, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { FunctionComponent, MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { RouteComponentProps } from "react-router";
 import { Dispatch } from "redux";
-import { Label } from "semantic-ui-react";
+import { CardContent, Divider, Label } from "semantic-ui-react";
+import { updateAuthProtocolConfig } from "../api/application";
 import { useGetApplication } from "../api/use-get-application";
+import useGetApplicationInboundConfigs from "../api/use-get-application-inbound-configs";
 import { EditApplication } from "../components/edit-application";
 import { InboundProtocolDefaultFallbackTemplates } from "../components/meta/inbound-protocols.meta";
 import { ApplicationManagementConstants } from "../constants";
@@ -57,6 +67,7 @@ import {
     ApplicationAccessTypes,
     ApplicationInterface,
     ApplicationTemplateListItemInterface,
+    OIDCDataInterface,
     State,
     SupportedAuthProtocolTypes,
     idpInfoTypeInterface
@@ -64,6 +75,9 @@ import {
 import { ApplicationManagementUtils } from "../utils/application-management-utils";
 import { ApplicationTemplateManagementUtils } from "../utils/application-template-management-utils";
 import "./application-edit.scss";
+import { Typography } from "@mui/material";
+import Button from "@oxygen-ui/react/Button";
+import classNames from "classnames";
 
 /**
  * Prop types for the applications edit page component.
@@ -129,6 +143,44 @@ const ApplicationEditPage: FunctionComponent<ApplicationEditPageInterface> = (
         error: applicationGetRequestError
     } = useGetApplication(applicationId, !!applicationId);
 
+    const [ viewBannerDetails, setViewBannerDetails ] = useState<boolean>(false);
+    const [ displayBanner, setDisplayBanner ] = useState<boolean>(false);
+    const {
+        data: applicationInboundConfigData,
+        isLoading: isBannerDataLoading
+    } = useGetApplicationInboundConfigs(application?.id, SupportedAuthProtocolTypes.OIDC, !!application?.id);
+    const [ applicationInboundConfig, setApplicationInboundConfig ] = useState<OIDCDataInterface>(undefined);
+    const [ useClientIdAsSubClaimForAppTokens, setUseClientIdAsSubClaimForAppTokens ] = useState<boolean>(false);
+    const [ omitUsernameInIntrospectionRespForAppTokens, setOmitUsernameInIntrospectionRespForAppTokens ]
+        = useState<boolean>(false);
+    const useClientIdAsSubClaimForAppTokensElement: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
+    const omitUsernameInIntrospectionRespForAppTokensElement: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
+    const [ bannerUpdateLoading, setBannerUpdateLoading ] = useState<boolean>(false);
+    const [ showConfirmationModal, setShowConfirmationModal ] = useState<boolean>(false);
+    const [ formData, setFormdata ] = useState<any>(undefined);
+
+    /**
+     * Loads banner data.
+     */
+    useEffect(() => {
+        if (!isBannerDataLoading) {
+            setApplicationInboundConfig(applicationInboundConfigData);
+        }
+    }, [ applicationInboundConfigData, isBannerDataLoading ]);
+
+    /**
+     * Assign loaded banner data into config states.
+     */
+    useEffect(() => {
+        if (applicationInboundConfig != undefined) {
+            setUseClientIdAsSubClaimForAppTokens(applicationInboundConfig.useClientIdAsSubClaimForAppTokens);
+            setOmitUsernameInIntrospectionRespForAppTokens(applicationInboundConfig
+                .omitUsernameInIntrospectionRespForAppTokens);
+            setDisplayBanner(!applicationInboundConfig.useClientIdAsSubClaimForAppTokens
+                || !applicationInboundConfig.omitUsernameInIntrospectionRespForAppTokens);
+        }
+    }, [ applicationInboundConfig ]);
+
     /**
      * Load the template that the application is built on.
      */
@@ -506,6 +558,354 @@ const ApplicationEditPage: FunctionComponent<ApplicationEditPageInterface> = (
         return null;
     };
 
+    /**
+     * Resolves the application banner content.
+     *
+     * @returns Alert banner.
+     */
+    const resolveAlertBanner = (): ReactElement => {
+
+        const classes: any = classNames( { "application-outdated-alert-expanded-view": viewBannerDetails } );
+
+        return (
+            !isBannerDataLoading && displayBanner &&
+                (
+                    <>
+                        {
+                            <>
+                                <Alert
+                                    className={ classes }
+                                    severity="warning"
+                                    action={
+                                        (
+                                            <>
+                                                <Button
+                                                    onClick={ () => setViewBannerDetails(!viewBannerDetails) }>
+                                                    { t("applications:forms.inboundOIDC.sections"
+                                                        + ".legacyApplicationTokens.alert.viewButton") }
+                                                </Button>
+                                                <Button
+                                                    className="ignore-once-button"
+                                                    onClick={ () => setDisplayBanner(false) }>
+                                                    { t("applications:forms.inboundOIDC.sections"
+                                                        + ".legacyApplicationTokens.alert.cancelButton") }
+                                                </Button>
+                                            </>
+                                        )
+                                    }
+                                >
+                                    <AlertTitle className="alert-title">
+                                        <Trans components={ { strong: <strong/> } } >
+                                            { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                                                + ".alert.title") }
+                                        </Trans>
+                                    </AlertTitle>
+                                    <Trans>
+                                        { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                                                    + ".alert.content") }
+                                    </Trans>
+                                </Alert>
+                                <Card
+                                    className="banner-detail-card"
+                                    hidden={ !viewBannerDetails }
+                                >
+                                    <CardContent>
+                                        { resolveBannerViewDetails() }
+                                    </CardContent>
+                                </Card>
+                            </>
+                        }
+                        <Divider hidden />
+                    </>
+                )
+        );
+    };
+
+    /**
+     * Resolves the application banner view details section.
+     *
+     * @returns Alert banner details.
+     */
+    const resolveBannerViewDetails = (): ReactElement => {
+
+        return (
+            <Forms onSubmit={ handleBannerCheckBoxUpdate }>
+                <Grid>
+                    <Typography component="div">
+                        <Trans
+                            i18nKey={
+                                t("applications:forms.inboundOIDC.sections"
+                                        + ".legacyApplicationTokens.fields."
+                                        + "commonInstruction")
+                            }>
+                            Change the customer-end applications accordingly to recieve the below updates.
+                        </Trans>
+                    </Typography>
+                    <ol>
+                        <li>
+                            <Trans
+                                i18nKey={
+                                    t("applications:forms.inboundOIDC.sections"
+                                        + ".legacyApplicationTokens.fields."
+                                        + "useClientIdAsSubClaimForAppTokens.label")
+                                }>
+                            </Trans>
+                            {
+                                !applicationInboundConfig
+                                    .useClientIdAsSubClaimForAppTokens && (
+                                    <>
+                                        <Field
+                                            ref={ useClientIdAsSubClaimForAppTokensElement }
+                                            name="useClientIdAsSubClaimForAppTokens"
+                                            required={ false }
+                                            type="checkbox"
+                                            disabled={ false }
+                                            value={ useClientIdAsSubClaimForAppTokens ?
+                                                [ "useClientIdAsSubClaimForAppTokens" ]
+                                                : [] }
+                                            readOnly={ false }
+                                            data-componentId={
+                                                `${ componentId }-use-client-id-as-sub-claim-for-app-tokens` }
+                                            children={ [
+                                                {
+                                                    label: t("applications:forms.inboundOIDC.sections."
+                                                    + "legacyApplicationTokens.fields"
+                                                    + ".useClientIdAsSubClaimForAppTokens.label"),
+                                                    value: "useClientIdAsSubClaimForAppTokens"
+                                                }
+                                            ] }
+                                            listen={ () =>
+                                                setUseClientIdAsSubClaimForAppTokens(
+                                                    !useClientIdAsSubClaimForAppTokens) }
+                                        />
+                                        <Hint>
+                                            { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens."
+                                                + "fields.useClientIdAsSubClaimForAppTokens.hint") }
+                                        </Hint>
+                                    </>
+                                )
+                            }
+                        </li>
+                        {
+                            (!omitUsernameInIntrospectionRespForAppTokens
+                            && !useClientIdAsSubClaimForAppTokens) &&
+                        (
+                            <Divider hidden />
+                        )
+                        }
+                        <li>
+                            <Trans
+                                i18nKey={
+                                    t("applications:forms.inboundOIDC.sections"
+                                        + ".legacyApplicationTokens.fields."
+                                        + "omitUsernameInIntrospectionRespForAppTokens.label")
+                                }>
+                                Application access token, Introspection response will not include
+                                the <code>username</code> attribute.
+                            </Trans>
+                            {
+                                (!applicationInboundConfig
+                                    .omitUsernameInIntrospectionRespForAppTokens) &&
+                                (
+                                    <>
+                                        <Field
+                                            ref={ omitUsernameInIntrospectionRespForAppTokensElement }
+                                            name="omitUsernameInIntrospectionRespForAppTokens"
+                                            required={ false }
+                                            type="checkbox"
+                                            disabled={ false }
+                                            value={ omitUsernameInIntrospectionRespForAppTokens ?
+                                                [ "omitUsernameInIntrospectionRespForAppTokens" ]
+                                                : [] }
+                                            readOnly={ false }
+                                            data-componentId={
+                                                `${ componentId }-omit-username-in-introspection-resp-for-app-tokens` }
+                                            children={ [
+                                                {
+                                                    label: t("applications:forms.inboundOIDC.sections"
+                                                    + ".legacyApplicationTokens.fields."
+                                                    + "omitUsernameInIntrospectionRespForAppTokens.label"),
+                                                    value: "omitUsernameInIntrospectionRespForAppTokens"
+                                                }
+                                            ] }
+                                            listen={ () => setOmitUsernameInIntrospectionRespForAppTokens(
+                                                !omitUsernameInIntrospectionRespForAppTokens)
+                                            }
+                                        />
+                                        <Hint>
+                                            { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens."
+                                            + "fields.omitUsernameInIntrospectionRespForAppTokens.hint") }
+                                        </Hint>
+                                    </>
+                                )
+                            }
+                        </li>
+                    </ol>
+                </Grid>
+                <Button
+                    variant="contained"
+                    disabled={ !useClientIdAsSubClaimForAppTokens && !omitUsernameInIntrospectionRespForAppTokens }
+                    type="submit"
+                    data-componentId={ `${componentId}-application-update-banner-button` }
+                >
+                    { t("common:update") }
+                </Button>
+                { showConfirmationModal && confirmationModal() }
+            </Forms>
+        );
+    };
+
+    /**
+     * Resolves the update confirmation modal.
+     *
+     * @returns Confirmation modal.
+     */
+    const confirmationModal = () => {
+
+        return (
+            <ConfirmationModal
+                primaryActionLoading={ bannerUpdateLoading }
+                data-testid={ `${ componentId }-confirmation-modal` }
+                onClose={ (): void => setShowConfirmationModal(false) }
+                type="negative"
+                open={ showConfirmationModal }
+                assertionHint={ t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                    + ".confirmationModal.assertionHint") }
+                assertionType="checkbox"
+                primaryAction="Confirm"
+                secondaryAction="Cancel"
+                onSecondaryActionClick={ (): void =>{
+                    setShowConfirmationModal(false);
+                } }
+                onPrimaryActionClick={ handleBannerCheckBoxUpdateConfirmation }
+                closeOnDimmerClick={ false }
+            >
+                <ConfirmationModal.Header data-testid={ `${ componentId }-confirmation-modal-header` }>
+                    { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                        + ".confirmationModal.header") }
+                </ConfirmationModal.Header>
+                <ConfirmationModal.Message
+                    data-testid={ `${ componentId }-confirmation-modal-message` }
+                    attached
+                    negative
+                >
+                    { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                        + ".confirmationModal.message") }
+                </ConfirmationModal.Message>
+                <ConfirmationModal.Content data-testid={ `${ componentId }-confirmation-modal-content` }>
+                    { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                        + ".confirmationModal.content") }
+                    <ol>
+                        { formData["useClientIdAsSubClaimForAppTokens"] && (
+                            <li>
+                                {
+                                    t("applications:forms.inboundOIDC.sections"
+                                        + ".legacyApplicationTokens.fields."
+                                        + "useClientIdAsSubClaimForAppTokens.label")
+                                }
+                            </li>
+                        )
+                        }
+                        { formData["omitUsernameInIntrospectionRespForAppTokens"] && (
+                            <li>
+                                {
+                                    t("applications:forms.inboundOIDC.sections"
+                                        + ".legacyApplicationTokens.fields."
+                                        + "omitUsernameInIntrospectionRespForAppTokens.label")
+                                }
+                            </li>
+                        )
+                        }
+                    </ol>
+                </ConfirmationModal.Content>
+            </ConfirmationModal>
+        );
+    };
+
+    /**
+     * Handles banner content update action which prepares data.
+     */
+    const handleBannerCheckBoxUpdate = (formDataValues: any) => {
+
+        // Todo: check if we need to send all configs. Though the method is PUT, it works as a PATCH.
+        let values: any = { ...applicationInboundConfig };
+
+        if (formDataValues.get("omitUsernameInIntrospectionRespForAppTokens")){
+            values = {
+                ...values,
+                omitUsernameInIntrospectionRespForAppTokens:
+                    formDataValues.get("omitUsernameInIntrospectionRespForAppTokens")?.length > 0
+            };
+        } else {
+            values = {
+                ...values,
+                omitUsernameInIntrospectionRespForAppTokens: omitUsernameInIntrospectionRespForAppTokens
+            };
+        }
+
+        if (formDataValues.get("useClientIdAsSubClaimForAppTokens")) {
+            values = {
+                ...values,
+                useClientIdAsSubClaimForAppTokens:
+                formDataValues.get("useClientIdAsSubClaimForAppTokens")?.length > 0
+            };
+        } else {
+            values = {
+                ...values,
+                useClientIdAsSubClaimForAppTokens: useClientIdAsSubClaimForAppTokens
+            };
+        }
+
+        setFormdata({ ...values });
+        setShowConfirmationModal(true);
+    };
+
+    /**
+     * Handles the banner data update action.
+     */
+    const handleBannerCheckBoxUpdateConfirmation = async (): Promise<void> => {
+
+        setBannerUpdateLoading(true);
+
+        return updateAuthProtocolConfig<OIDCDataInterface>(application?.id, formData, SupportedAuthProtocolTypes.OIDC)
+            .then(() => {
+                dispatch(addAlert({
+                    description: t("applications:notifications.updateInboundProtocolConfig" +
+                            ".success.description"),
+                    level: AlertLevels.SUCCESS,
+                    message: t("applications:notifications.updateInboundProtocolConfig" +
+                            ".success.message")
+                }));
+            })
+            .catch((error: AxiosError) => {
+                if (error?.response?.data?.description) {
+                    dispatch(addAlert({
+                        description: error.response.data.description,
+                        level: AlertLevels.ERROR,
+                        message: t("applications:notifications.updateInboundProtocolConfig" +
+                                ".error.message")
+                    }));
+
+                    return;
+                }
+
+                dispatch(addAlert({
+                    description: t("applications:notifications.updateInboundProtocolConfig" +
+                            ".genericError.description"),
+                    level: AlertLevels.ERROR,
+                    message: t("applications:notifications.updateInboundProtocolConfig" +
+                            ".genericError.message")
+                }));
+            }).finally(() => {
+                setUseClientIdAsSubClaimForAppTokens(formData.useClientIdAsSubClaimForAppTokens);
+                setOmitUsernameInIntrospectionRespForAppTokens(formData.omitUsernameInIntrospectionRespForAppTokens);
+                setDisplayBanner(!formData.useClientIdAsSubClaimForAppTokens ||
+                    !formData.omitUsernameInIntrospectionRespForAppTokens);
+                setShowConfirmationModal(false);
+                setBannerUpdateLoading(false);
+            });
+    };
+
     return (
         <TabPageLayout
             pageTitle="Edit Application"
@@ -575,6 +975,7 @@ const ApplicationEditPage: FunctionComponent<ApplicationEditPageInterface> = (
                 text: isConnectedAppsRedirect ? t("idp:connectedApps.applicationEdit.back",
                     { idpName: callBackIdpName }) : t("console:develop.pages.applicationsEdit.backButton")
             } }
+            alertBanner={ resolveAlertBanner() }
             titleTextAlign="left"
             bottomMargin={ false }
             pageHeaderMaxWidth={ true }
diff --git a/modules/i18n/src/models/namespaces/applications-ns.ts b/modules/i18n/src/models/namespaces/applications-ns.ts
index 575a05ba8f5..9625aa67087 100644
--- a/modules/i18n/src/models/namespaces/applications-ns.ts
+++ b/modules/i18n/src/models/namespaces/applications-ns.ts
@@ -1377,6 +1377,34 @@ export interface ApplicationsNS {
                         };
                     };
                 };
+                legacyApplicationTokens: {
+                    heading: string;
+                    alert : {
+                        title: string;
+                        content: string;
+                        viewButton: string;
+                        cancelButton: string;
+                    }
+                    confirmationModal: {
+                        assertionHint: string;
+                        header: string;
+                        message: string;
+                        content: string;
+                    },
+                    fields: {
+                        commonInstruction: string;
+                        useClientIdAsSubClaimForAppTokens: {
+                            instruction: string;
+                            label: string;
+                            hint: string;
+                        };
+                        omitUsernameInIntrospectionRespForAppTokens: {
+                            instruction: string;
+                            label: string;
+                            hint: string;
+                        };
+                    }
+                };
                 logoutURLs: {
                     heading: string;
                     fields: {
diff --git a/modules/i18n/src/translations/en-US/portals/applications.ts b/modules/i18n/src/translations/en-US/portals/applications.ts
index 3795c1d7c6b..53155c2ac96 100644
--- a/modules/i18n/src/translations/en-US/portals/applications.ts
+++ b/modules/i18n/src/translations/en-US/portals/applications.ts
@@ -1643,6 +1643,42 @@ export const applications: ApplicationsNS = {
                     },
                     heading: "ID Token"
                 },
+                legacyApplicationTokens: {
+                    heading: "Legacy Application Tokens",
+                    alert : {
+                        title: "Application is outdated.",
+                        content: "This application is using an outdated behavior for application tokens. "
+                            + "Please follow the below guideline before migrating to the new behavior.",
+                        viewButton: "View Details",
+                        cancelButton: "Ignore Once"
+                    },
+                    confirmationModal: {
+                        header: "Have you done the relevant changes?",
+                        message: "Proceeding the action without making relevant change will cause the client application behavior break.",
+                        content: "By confirming the action,",
+                        assertionHint: "Please confirm your action"
+                    },
+                    fields: {
+                        commonInstruction: "Change the customer-end applications accordingly to recieve the below updates.",
+                        useClientIdAsSubClaimForAppTokens: {
+                            instruction: "Application access token <code>sub</code> attribute will be"
+                                + "<code>client_id</code> generated for an application.",
+                            label: "Set client_id as the sub claim value for Application tokens",
+                            hint: "For application tokens, the sub claim was previosuly set to the "
+                            + "application owner's user_id. However, to support a more industry standard "
+                            + "solution, this value will be changed to the client ID for application tokens."
+                        },
+                        omitUsernameInIntrospectionRespForAppTokens: {
+                            instruction: "Application access token, Introspection response will not include"
+                                + "the <code>username</code> attribute.",
+                            label: "Omit sending username claim in the Introspection response for Application tokens",
+                            hint: "For access tokens, the previous behavior includes sending the username claim"
+                            + " in the introspection response. However, to support a more industry standard"
+                            + " solution, the introspection response for application tokens will no longer"
+                            + " include the username claim."
+                        }
+                    }
+                },
                 logoutURLs: {
                     fields: {
                         back: {
diff --git a/modules/react-components/src/components/page-header/page-header.tsx b/modules/react-components/src/components/page-header/page-header.tsx
index 7b446802d8e..a36cf5e8134 100644
--- a/modules/react-components/src/components/page-header/page-header.tsx
+++ b/modules/react-components/src/components/page-header/page-header.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -41,6 +41,10 @@ export interface PageHeaderPropsInterface extends LoadableComponentInterface, Te
      * Column width for the action container grid.
      */
     actionColumnWidth?: SemanticWIDTHS;
+    /**
+     * Alert component displayed in the page header.
+     */
+    alertBanner?: ReactNode;
     /**
      * Go back button.
      */
@@ -127,6 +131,7 @@ export const PageHeader: React.FunctionComponent<PageHeaderPropsInterface> = (
     const {
         action,
         actionColumnWidth,
+        alertBanner,
         backButton,
         bottomMargin,
         className,
@@ -301,6 +306,9 @@ export const PageHeader: React.FunctionComponent<PageHeaderPropsInterface> = (
                                 )
                         )
                     }
+                    {
+                        alertBanner
+                    }
                     {
                         action
                             ? (