diff --git a/.changeset/ninety-mirrors-sip.md b/.changeset/ninety-mirrors-sip.md
new file mode 100644
index 00000000000..a92cd5e3570
--- /dev/null
+++ b/.changeset/ninety-mirrors-sip.md
@@ -0,0 +1,5 @@
+---
+"@wso2is/admin.roles.v2": patch
+---
+
+Fix alignment issues between application role option and the new application role button
diff --git a/features/admin.roles.v2/components/application-roles.tsx b/features/admin.roles.v2/components/application-roles.tsx
index 343bd38a543..efb11739552 100755
--- a/features/admin.roles.v2/components/application-roles.tsx
+++ b/features/admin.roles.v2/components/application-roles.tsx
@@ -25,6 +25,7 @@ import FormControlLabel from "@oxygen-ui/react/FormControlLabel";
 import FormGroup from "@oxygen-ui/react/FormGroup";
 import Radio from "@oxygen-ui/react/Radio";
 import TextField from "@oxygen-ui/react/TextField";
+import { useRequiredScopes } from "@wso2is/access-control";
 import { updateApplicationDetails } from "@wso2is/admin.applications.v1/api";
 import { useGetApplication } from "@wso2is/admin.applications.v1/api/use-get-application";
 import { ApplicationInterface } from "@wso2is/admin.applications.v1/models";
@@ -33,7 +34,6 @@ import { history } from "@wso2is/admin.core.v1/helpers/history";
 import { FeatureConfigInterface } from "@wso2is/admin.core.v1/models";
 import { AppState } from "@wso2is/admin.core.v1/store";
 import { useGetCurrentOrganizationType } from "@wso2is/admin.organizations.v1/hooks/use-get-organization-type";
-import { hasRequiredScopes } from "@wso2is/core/helpers";
 import { AlertLevels, IdentifiableComponentInterface } from "@wso2is/core/models";
 import { addAlert } from "@wso2is/core/store";
 import {
@@ -123,9 +123,10 @@ export const ApplicationRoles: FunctionComponent<ApplicationRolesSettingsInterfa
     const isReadOnly: boolean = readOnly || organizationType === OrganizationType.SUBORGANIZATION;
     const [ showWizard, setShowWizard ] = useState<boolean>(false);
 
-    const allowedScopes: string = useSelector((state: AppState) => state?.auth?.allowedScopes);
     const featureConfig: FeatureConfigInterface = useSelector((state: AppState) => state?.config?.ui?.features);
 
+    const hasRoleCreatePermissions: boolean = useRequiredScopes(featureConfig?.userRoles?.scopes?.create);
+
     /**
      * Fetch application roles on component load and audience switch.
      */
@@ -323,6 +324,7 @@ export const ApplicationRoles: FunctionComponent<ApplicationRolesSettingsInterfa
                                     <Grid.Row columns={ 2 } className="pb-0">
                                         <Grid.Column width={ 4 }>
                                             <FormControlLabel
+                                                className="mt-1"
                                                 checked={ roleAudience === RoleAudienceTypes.APPLICATION }
                                                 control={ <Radio size="small" /> }
                                                 onChange={ () =>
@@ -338,8 +340,7 @@ export const ApplicationRoles: FunctionComponent<ApplicationRolesSettingsInterfa
                                         <Grid.Column width={ 6 }>
                                             {
                                                 roleAudience === RoleAudienceTypes.APPLICATION &&
-                                                hasRequiredScopes(featureConfig?.userRoles,
-                                                    featureConfig?.userRoles?.scopes?.create, allowedScopes)
+                                                hasRoleCreatePermissions
                                                     && (
                                                         <LinkButton
                                                             fluid