diff --git a/assets/src/components/kubernetes/access/ClusterRole.tsx b/assets/src/components/kubernetes/access/ClusterRole.tsx
index 66e4f6001..b33e79fc4 100644
--- a/assets/src/components/kubernetes/access/ClusterRole.tsx
+++ b/assets/src/components/kubernetes/access/ClusterRole.tsx
@@ -1,5 +1,75 @@
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
+import { Outlet, useOutletContext, useParams } from 'react-router-dom'
+import { useSetBreadcrumbs } from '@pluralsh/design-system'
+
+import { KubernetesClient } from '../../../helpers/kubernetes.client'
+import {
+  ClusterRoleQueryVariables,
+  Clusterrole_ClusterRoleDetail as ClusterRoleT,
+  useClusterRoleQuery,
+} from '../../../generated/graphql-kubernetes'
+import { MetadataSidecar, useKubernetesCluster } from '../utils'
+
+import { getResourceDetailsAbsPath } from '../../../routes/kubernetesRoutesConsts'
+import LoadingIndicator from '../../utils/LoadingIndicator'
+import ResourceDetails, { TabEntry } from '../ResourceDetails'
+import PolicyRules from '../common/PolicyRules'
+
+import { FullHeightTableWrap } from '../../utils/layout/FullHeightTableWrap'
+
+import { getBreadcrumbs } from './ClusterRoles'
+
+const directory: Array<TabEntry> = [
+  { path: '', label: 'Policy rules' },
+  { path: 'raw', label: 'Raw' },
+] as const
 
 export default function ClusterRole(): ReactElement {
-  return <div>ClusterRole details</div>
+  const cluster = useKubernetesCluster()
+  const { clusterId, name = '' } = useParams()
+  const { data, loading } = useClusterRoleQuery({
+    client: KubernetesClient(clusterId ?? ''),
+    skip: !clusterId,
+    pollInterval: 30_000,
+    variables: {
+      name,
+    } as ClusterRoleQueryVariables,
+  })
+
+  const cr = data?.handleGetClusterRoleDetail
+
+  useSetBreadcrumbs(
+    useMemo(
+      () => [
+        ...getBreadcrumbs(cluster),
+
+        {
+          label: name ?? '',
+          url: getResourceDetailsAbsPath(clusterId, 'clusterrole', name),
+        },
+      ],
+      [cluster, clusterId, name]
+    )
+  )
+
+  if (loading) return <LoadingIndicator />
+
+  return (
+    <ResourceDetails
+      tabs={directory}
+      sidecar={<MetadataSidecar objectMeta={cr?.objectMeta} />}
+    >
+      <Outlet context={cr} />
+    </ResourceDetails>
+  )
+}
+
+export function RolePolicyRules(): ReactElement {
+  const cr = useOutletContext() as ClusterRoleT
+
+  return (
+    <FullHeightTableWrap>
+      <PolicyRules rules={cr.rules} />
+    </FullHeightTableWrap>
+  )
 }
diff --git a/assets/src/components/kubernetes/access/Role.tsx b/assets/src/components/kubernetes/access/Role.tsx
index 20221dc4c..63ad6a80c 100644
--- a/assets/src/components/kubernetes/access/Role.tsx
+++ b/assets/src/components/kubernetes/access/Role.tsx
@@ -1,5 +1,89 @@
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
+import { Outlet, useOutletContext, useParams } from 'react-router-dom'
+import { useSetBreadcrumbs } from '@pluralsh/design-system'
+
+import { MetadataSidecar, useKubernetesCluster } from '../utils'
+import {
+  RoleQueryVariables,
+  Role_RoleDetail as RoleT,
+  useRoleQuery,
+} from '../../../generated/graphql-kubernetes'
+import { KubernetesClient } from '../../../helpers/kubernetes.client'
+
+import {
+  ROLES_REL_PATH,
+  getAccessAbsPath,
+  getResourceDetailsAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
+import { NAMESPACE_PARAM } from '../Kubernetes'
+import LoadingIndicator from '../../utils/LoadingIndicator'
+import ResourceDetails, { TabEntry } from '../ResourceDetails'
+
+import { SubTitle } from '../../cluster/nodes/SubTitle'
+
+import PolicyRules from '../common/PolicyRules'
+
+import { FullHeightTableWrap } from '../../utils/layout/FullHeightTableWrap'
+
+import { getBreadcrumbs } from './Roles'
+
+const directory: Array<TabEntry> = [
+  { path: '', label: 'Policy rules' },
+  { path: 'raw', label: 'Raw' },
+] as const
 
 export default function Role(): ReactElement {
-  return <div>Role details</div>
+  const cluster = useKubernetesCluster()
+  const { clusterId, name = '', namespace = '' } = useParams()
+  const { data, loading } = useRoleQuery({
+    client: KubernetesClient(clusterId ?? ''),
+    skip: !clusterId,
+    pollInterval: 30_000,
+    variables: {
+      name,
+      namespace,
+    } as RoleQueryVariables,
+  })
+
+  const role = data?.handleGetRoleDetail
+
+  useSetBreadcrumbs(
+    useMemo(
+      () => [
+        ...getBreadcrumbs(cluster),
+        {
+          label: namespace ?? '',
+          url: `${getAccessAbsPath(
+            cluster?.id
+          )}/${ROLES_REL_PATH}?${NAMESPACE_PARAM}=${namespace}`,
+        },
+        {
+          label: name ?? '',
+          url: getResourceDetailsAbsPath(clusterId, 'role', name, namespace),
+        },
+      ],
+      [cluster, clusterId, name, namespace]
+    )
+  )
+
+  if (loading) return <LoadingIndicator />
+
+  return (
+    <ResourceDetails
+      tabs={directory}
+      sidecar={<MetadataSidecar objectMeta={role?.objectMeta} />}
+    >
+      <Outlet context={role} />
+    </ResourceDetails>
+  )
+}
+
+export function RolePolicyRules(): ReactElement {
+  const role = useOutletContext() as RoleT
+
+  return (
+    <FullHeightTableWrap>
+      <PolicyRules rules={role.rules} />
+    </FullHeightTableWrap>
+  )
 }
diff --git a/assets/src/components/kubernetes/common/PolicyRules.tsx b/assets/src/components/kubernetes/common/PolicyRules.tsx
new file mode 100644
index 000000000..45bfe9b09
--- /dev/null
+++ b/assets/src/components/kubernetes/common/PolicyRules.tsx
@@ -0,0 +1,59 @@
+import { ReactElement } from 'react'
+import { Table } from '@pluralsh/design-system'
+import { createColumnHelper } from '@tanstack/react-table'
+
+import {
+  Maybe,
+  V1_PolicyRule as PolicyRuleT,
+} from '../../../generated/graphql-kubernetes'
+
+const columnHelper = createColumnHelper<PolicyRuleT>()
+
+const columns = [
+  columnHelper.accessor((rule) => rule?.resources, {
+    id: 'resources',
+    header: 'Resources',
+    cell: ({ getValue }) =>
+      getValue()?.map((resource) => <div>{resource}</div>),
+  }),
+  columnHelper.accessor((rule) => rule?.nonResourceURLs, {
+    id: 'nonResourceURLs',
+    header: 'Non-resource URL',
+    cell: ({ getValue }) =>
+      getValue()?.map((nonResourceURL) => <div>{nonResourceURL}</div>),
+  }),
+  columnHelper.accessor((rule) => rule?.resourceNames, {
+    id: 'resourceNames',
+    header: 'Resource names',
+    cell: ({ getValue }) =>
+      getValue()?.map((resourceName) => <div>{resourceName}</div>),
+  }),
+  columnHelper.accessor((rule) => rule?.verbs, {
+    id: 'verbs',
+    header: 'Verbs',
+    cell: ({ getValue }) => getValue()?.map((verb) => <div>{verb}</div>),
+  }),
+  columnHelper.accessor((rule) => rule?.apiGroups, {
+    id: 'apiGroups',
+    header: 'API groups',
+    cell: ({ getValue }) =>
+      getValue()?.map((apiGroup) => <div>{apiGroup}</div>),
+  }),
+]
+
+export default function PolicyRules({
+  rules,
+}: {
+  rules: Array<Maybe<PolicyRuleT>>
+}): ReactElement {
+  return (
+    <Table
+      data={rules}
+      columns={columns}
+      css={{
+        maxHeight: 'unset',
+        height: '100%',
+      }}
+    />
+  )
+}
diff --git a/assets/src/components/kubernetes/configuration/ConfigMap.tsx b/assets/src/components/kubernetes/configuration/ConfigMap.tsx
index eb54e466b..2a0db64d1 100644
--- a/assets/src/components/kubernetes/configuration/ConfigMap.tsx
+++ b/assets/src/components/kubernetes/configuration/ConfigMap.tsx
@@ -11,7 +11,6 @@ import {
 } from '../../../generated/graphql-kubernetes'
 import { KubernetesClient } from '../../../helpers/kubernetes.client'
 import LoadingIndicator from '../../utils/LoadingIndicator'
-import { SubTitle } from '../../cluster/nodes/SubTitle'
 import { MetadataSidecar, useKubernetesCluster } from '../utils'
 import { NAMESPACE_PARAM } from '../Kubernetes'
 import {
@@ -25,7 +24,7 @@ import ResourceDetails, { TabEntry } from '../ResourceDetails'
 import { getBreadcrumbs } from './ConfigMaps'
 
 const directory: Array<TabEntry> = [
-  { path: '', label: 'Info' },
+  { path: '', label: 'Data' },
   { path: 'raw', label: 'Raw' },
 ] as const
 
@@ -80,7 +79,7 @@ export default function ConfigMap(): ReactElement {
   )
 }
 
-export function ConfigMapInfo(): ReactElement {
+export function ConfigMapData(): ReactElement {
   const cm = useOutletContext() as ConfigMapT
   const tabs = useMemo(
     () => [
@@ -100,14 +99,9 @@ export function ConfigMapInfo(): ReactElement {
     [cm?.data]
   )
 
-  return (
-    <section>
-      <SubTitle>Data</SubTitle>
-      {!isEmpty(cm?.data) ? (
-        <Code tabs={tabs} />
-      ) : (
-        'There is no data to display.'
-      )}
-    </section>
+  return !isEmpty(cm?.data) ? (
+    <Code tabs={tabs} />
+  ) : (
+    <div>There is no data to display.</div>
   )
 }
diff --git a/assets/src/components/kubernetes/configuration/Secret.tsx b/assets/src/components/kubernetes/configuration/Secret.tsx
index 5d034929a..680c75720 100644
--- a/assets/src/components/kubernetes/configuration/Secret.tsx
+++ b/assets/src/components/kubernetes/configuration/Secret.tsx
@@ -32,7 +32,7 @@ import ResourceDetails, { TabEntry } from '../ResourceDetails'
 import { getBreadcrumbs } from './Secrets'
 
 const directory: Array<TabEntry> = [
-  { path: '', label: 'Info' },
+  { path: '', label: 'Data' },
   { path: 'raw', label: 'Raw' },
 ] as const
 
@@ -151,7 +151,7 @@ const columns = [
   }),
 ]
 
-export function SecretInfo(): ReactElement {
+export function SecretData(): ReactElement {
   const theme = useTheme()
   const secret = useOutletContext() as SecretT
   const [revealAll, setRevealAll] = useState(false)
@@ -169,13 +169,11 @@ export function SecretInfo(): ReactElement {
       <div
         css={{
           ...theme.partials.text.subtitle1,
-          alignItems: 'end',
-          justifyContent: 'space-between',
+          justifyContent: 'end',
           display: 'flex',
-          marginBottom: theme.spacing.medium,
+          marginBottom: theme.spacing.small,
         }}
       >
-        <span>Data</span>
         <Button
           floating
           startIcon={revealAll ? <EyeClosedIcon /> : <EyeIcon />}
diff --git a/assets/src/generated/graphql-kubernetes.ts b/assets/src/generated/graphql-kubernetes.ts
index a06523dfa..c9f89c839 100644
--- a/assets/src/generated/graphql-kubernetes.ts
+++ b/assets/src/generated/graphql-kubernetes.ts
@@ -4595,6 +4595,13 @@ export type ClusterRolesQueryVariables = Exact<{
 
 export type ClusterRolesQuery = { __typename?: 'Query', handleGetClusterRoleList?: { __typename?: 'clusterrole_ClusterRoleList', listMeta: { __typename?: 'types_ListMeta', totalItems: number }, items: Array<{ __typename?: 'clusterrole_ClusterRole', typeMeta: { __typename?: 'types_TypeMeta', kind?: string | null, restartable?: boolean | null, scalable?: boolean | null }, objectMeta: { __typename?: 'types_ObjectMeta', uid?: string | null, name?: string | null, namespace?: string | null, labels?: any | null, annotations?: any | null, creationTimestamp?: string | null } } | null> } | null };
 
+export type ClusterRoleQueryVariables = Exact<{
+  name: Scalars['String']['input'];
+}>;
+
+
+export type ClusterRoleQuery = { __typename?: 'Query', handleGetClusterRoleDetail?: { __typename?: 'clusterrole_ClusterRoleDetail', errors: Array<any | null>, typeMeta: { __typename?: 'types_TypeMeta', kind?: string | null, restartable?: boolean | null, scalable?: boolean | null }, objectMeta: { __typename?: 'types_ObjectMeta', uid?: string | null, name?: string | null, namespace?: string | null, labels?: any | null, annotations?: any | null, creationTimestamp?: string | null }, rules: Array<{ __typename?: 'v1_PolicyRule', apiGroups?: Array<string | null> | null, nonResourceURLs?: Array<string | null> | null, resourceNames?: Array<string | null> | null, verbs: Array<string | null>, resources?: Array<string | null> | null } | null> } | null };
+
 export type ClusterRoleBindingsQueryVariables = Exact<{
   namespace: Scalars['String']['input'];
   filterBy?: InputMaybe<Scalars['String']['input']>;
@@ -4617,6 +4624,14 @@ export type RolesQueryVariables = Exact<{
 
 export type RolesQuery = { __typename?: 'Query', handleGetRoleList?: { __typename?: 'role_RoleList', listMeta: { __typename?: 'types_ListMeta', totalItems: number }, items: Array<{ __typename?: 'role_Role', typeMeta: { __typename?: 'types_TypeMeta', kind?: string | null, restartable?: boolean | null, scalable?: boolean | null }, objectMeta: { __typename?: 'types_ObjectMeta', uid?: string | null, name?: string | null, namespace?: string | null, labels?: any | null, annotations?: any | null, creationTimestamp?: string | null } } | null> } | null };
 
+export type RoleQueryVariables = Exact<{
+  name: Scalars['String']['input'];
+  namespace: Scalars['String']['input'];
+}>;
+
+
+export type RoleQuery = { __typename?: 'Query', handleGetRoleDetail?: { __typename?: 'role_RoleDetail', errors: Array<any | null>, typeMeta: { __typename?: 'types_TypeMeta', kind?: string | null, restartable?: boolean | null, scalable?: boolean | null }, objectMeta: { __typename?: 'types_ObjectMeta', uid?: string | null, name?: string | null, namespace?: string | null, labels?: any | null, annotations?: any | null, creationTimestamp?: string | null }, rules: Array<{ __typename?: 'v1_PolicyRule', apiGroups?: Array<string | null> | null, nonResourceURLs?: Array<string | null> | null, resourceNames?: Array<string | null> | null, verbs: Array<string | null>, resources?: Array<string | null> | null } | null> } | null };
+
 export type RoleBindingsQueryVariables = Exact<{
   namespace: Scalars['String']['input'];
   filterBy?: InputMaybe<Scalars['String']['input']>;
@@ -4783,6 +4798,8 @@ export type ConditionFragment = { __typename?: 'common_Condition', message: stri
 
 export type ProbeFragment = { __typename?: 'v1_Probe', failureThreshold?: number | null, initialDelaySeconds?: number | null, periodSeconds?: number | null, successThreshold?: number | null, terminationGracePeriodSeconds?: any | null, timeoutSeconds?: number | null, exec?: { __typename?: 'v1_ExecAction', command?: Array<string | null> | null } | null };
 
+export type PolicyRuleFragment = { __typename?: 'v1_PolicyRule', apiGroups?: Array<string | null> | null, nonResourceURLs?: Array<string | null> | null, resourceNames?: Array<string | null> | null, verbs: Array<string | null>, resources?: Array<string | null> | null };
+
 export type PodInfoFragment = { __typename?: 'common_PodInfo', current: number, desired?: number | null, failed: number, pending: number, running: number, succeeded: number, warnings: Array<{ __typename?: 'common_Event', objectName?: string | null, objectNamespace?: string | null, reason: string, type: string, message: string, sourceComponent: string, sourceHost: string, count: number, firstSeen: string, lastSeen: string, typeMeta: { __typename?: 'types_TypeMeta', kind?: string | null, restartable?: boolean | null, scalable?: boolean | null }, objectMeta: { __typename?: 'types_ObjectMeta', uid?: string | null, name?: string | null, namespace?: string | null, labels?: any | null, annotations?: any | null, creationTimestamp?: string | null } } | null> };
 
 export type ResourceOwnerFragment = { __typename?: 'controller_ResourceOwner', containerImages: Array<string | null>, initContainerImages: Array<string | null>, typeMeta: { __typename?: 'types_TypeMeta', kind?: string | null, restartable?: boolean | null, scalable?: boolean | null }, objectMeta: { __typename?: 'types_ObjectMeta', uid?: string | null, name?: string | null, namespace?: string | null, labels?: any | null, annotations?: any | null, creationTimestamp?: string | null }, pods: { __typename?: 'common_PodInfo', current: number, desired?: number | null, failed: number, pending: number, running: number, succeeded: number, warnings: Array<{ __typename?: 'common_Event', objectName?: string | null, objectNamespace?: string | null, reason: string, type: string, message: string, sourceComponent: string, sourceHost: string, count: number, firstSeen: string, lastSeen: string, typeMeta: { __typename?: 'types_TypeMeta', kind?: string | null, restartable?: boolean | null, scalable?: boolean | null }, objectMeta: { __typename?: 'types_ObjectMeta', uid?: string | null, name?: string | null, namespace?: string | null, labels?: any | null, annotations?: any | null, creationTimestamp?: string | null } } | null> } };
@@ -5037,6 +5054,15 @@ export const ConditionFragmentDoc = gql`
   reason
 }
     `;
+export const PolicyRuleFragmentDoc = gql`
+    fragment PolicyRule on v1_PolicyRule {
+  apiGroups
+  nonResourceURLs
+  resourceNames
+  verbs
+  resources
+}
+    `;
 export const PodInfoFragmentDoc = gql`
     fragment PodInfo on common_PodInfo {
   current
@@ -5302,6 +5328,57 @@ export type ClusterRolesQueryHookResult = ReturnType<typeof useClusterRolesQuery
 export type ClusterRolesLazyQueryHookResult = ReturnType<typeof useClusterRolesLazyQuery>;
 export type ClusterRolesSuspenseQueryHookResult = ReturnType<typeof useClusterRolesSuspenseQuery>;
 export type ClusterRolesQueryResult = Apollo.QueryResult<ClusterRolesQuery, ClusterRolesQueryVariables>;
+export const ClusterRoleDocument = gql`
+    query ClusterRole($name: String!) {
+  handleGetClusterRoleDetail(name: $name) @rest(path: "clusterrole/{args.name}") {
+    typeMeta @type(name: "types_TypeMeta") {
+      ...TypeMeta
+    }
+    objectMeta @type(name: "types_ObjectMeta") {
+      ...ObjectMeta
+    }
+    rules @type(name: "v1_PolicyRule") {
+      ...PolicyRule
+    }
+    errors
+  }
+}
+    ${TypeMetaFragmentDoc}
+${ObjectMetaFragmentDoc}
+${PolicyRuleFragmentDoc}`;
+
+/**
+ * __useClusterRoleQuery__
+ *
+ * To run a query within a React component, call `useClusterRoleQuery` and pass it any options that fit your needs.
+ * When your component renders, `useClusterRoleQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useClusterRoleQuery({
+ *   variables: {
+ *      name: // value for 'name'
+ *   },
+ * });
+ */
+export function useClusterRoleQuery(baseOptions: Apollo.QueryHookOptions<ClusterRoleQuery, ClusterRoleQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ClusterRoleQuery, ClusterRoleQueryVariables>(ClusterRoleDocument, options);
+      }
+export function useClusterRoleLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ClusterRoleQuery, ClusterRoleQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ClusterRoleQuery, ClusterRoleQueryVariables>(ClusterRoleDocument, options);
+        }
+export function useClusterRoleSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<ClusterRoleQuery, ClusterRoleQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<ClusterRoleQuery, ClusterRoleQueryVariables>(ClusterRoleDocument, options);
+        }
+export type ClusterRoleQueryHookResult = ReturnType<typeof useClusterRoleQuery>;
+export type ClusterRoleLazyQueryHookResult = ReturnType<typeof useClusterRoleLazyQuery>;
+export type ClusterRoleSuspenseQueryHookResult = ReturnType<typeof useClusterRoleSuspenseQuery>;
+export type ClusterRoleQueryResult = Apollo.QueryResult<ClusterRoleQuery, ClusterRoleQueryVariables>;
 export const ClusterRoleBindingsDocument = gql`
     query ClusterRoleBindings($namespace: String!, $filterBy: String, $sortBy: String, $itemsPerPage: String, $page: String) {
   handleGetClusterRoleBindingList(
@@ -5425,6 +5502,58 @@ export type RolesQueryHookResult = ReturnType<typeof useRolesQuery>;
 export type RolesLazyQueryHookResult = ReturnType<typeof useRolesLazyQuery>;
 export type RolesSuspenseQueryHookResult = ReturnType<typeof useRolesSuspenseQuery>;
 export type RolesQueryResult = Apollo.QueryResult<RolesQuery, RolesQueryVariables>;
+export const RoleDocument = gql`
+    query Role($name: String!, $namespace: String!) {
+  handleGetRoleDetail(namespace: $namespace, name: $name) @rest(path: "role/{args.namespace}/{args.name}") {
+    typeMeta @type(name: "types_TypeMeta") {
+      ...TypeMeta
+    }
+    objectMeta @type(name: "types_ObjectMeta") {
+      ...ObjectMeta
+    }
+    rules @type(name: "v1_PolicyRule") {
+      ...PolicyRule
+    }
+    errors
+  }
+}
+    ${TypeMetaFragmentDoc}
+${ObjectMetaFragmentDoc}
+${PolicyRuleFragmentDoc}`;
+
+/**
+ * __useRoleQuery__
+ *
+ * To run a query within a React component, call `useRoleQuery` and pass it any options that fit your needs.
+ * When your component renders, `useRoleQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useRoleQuery({
+ *   variables: {
+ *      name: // value for 'name'
+ *      namespace: // value for 'namespace'
+ *   },
+ * });
+ */
+export function useRoleQuery(baseOptions: Apollo.QueryHookOptions<RoleQuery, RoleQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<RoleQuery, RoleQueryVariables>(RoleDocument, options);
+      }
+export function useRoleLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<RoleQuery, RoleQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<RoleQuery, RoleQueryVariables>(RoleDocument, options);
+        }
+export function useRoleSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<RoleQuery, RoleQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<RoleQuery, RoleQueryVariables>(RoleDocument, options);
+        }
+export type RoleQueryHookResult = ReturnType<typeof useRoleQuery>;
+export type RoleLazyQueryHookResult = ReturnType<typeof useRoleLazyQuery>;
+export type RoleSuspenseQueryHookResult = ReturnType<typeof useRoleSuspenseQuery>;
+export type RoleQueryResult = Apollo.QueryResult<RoleQuery, RoleQueryVariables>;
 export const RoleBindingsDocument = gql`
     query RoleBindings($namespace: String!, $filterBy: String, $sortBy: String, $itemsPerPage: String, $page: String) {
   handleGetRoleBindingList(
diff --git a/assets/src/graph-kubernetes/access/clusterrole.graphql b/assets/src/graph-kubernetes/access/clusterrole.graphql
index 8fb50c6cf..a924b7bdb 100644
--- a/assets/src/graph-kubernetes/access/clusterrole.graphql
+++ b/assets/src/graph-kubernetes/access/clusterrole.graphql
@@ -27,3 +27,20 @@ query ClusterRoles(
     }
   }
 }
+
+query ClusterRole($name: String!) {
+  handleGetClusterRoleDetail(name: $name)
+  @rest(path: "clusterrole/{args.name}") {
+    typeMeta @type(name: "types_TypeMeta") {
+      ...TypeMeta
+    }
+    objectMeta @type(name: "types_ObjectMeta") {
+      ...ObjectMeta
+    }
+    rules @type(name: "v1_PolicyRule") {
+      ...PolicyRule
+    }
+    errors
+  }
+}
+
diff --git a/assets/src/graph-kubernetes/access/role.graphql b/assets/src/graph-kubernetes/access/role.graphql
index ad182d008..af4840ed6 100644
--- a/assets/src/graph-kubernetes/access/role.graphql
+++ b/assets/src/graph-kubernetes/access/role.graphql
@@ -28,3 +28,19 @@ query Roles(
     }
   }
 }
+
+query Role($name: String!, $namespace: String!) {
+  handleGetRoleDetail(namespace: $namespace, name: $name)
+  @rest(path: "role/{args.namespace}/{args.name}") {
+    typeMeta @type(name: "types_TypeMeta") {
+      ...TypeMeta
+    }
+    objectMeta @type(name: "types_ObjectMeta") {
+      ...ObjectMeta
+    }
+    rules @type(name: "v1_PolicyRule") {
+      ...PolicyRule
+    }
+    errors
+  }
+}
diff --git a/assets/src/graph-kubernetes/fragments.graphql b/assets/src/graph-kubernetes/fragments.graphql
index 9866fd890..60e6a6962 100644
--- a/assets/src/graph-kubernetes/fragments.graphql
+++ b/assets/src/graph-kubernetes/fragments.graphql
@@ -38,6 +38,14 @@ fragment Probe on v1_Probe {
   timeoutSeconds
 }
 
+fragment PolicyRule on v1_PolicyRule {
+  apiGroups
+  nonResourceURLs
+  resourceNames
+  verbs
+  resources
+}
+
 fragment PodInfo on common_PodInfo {
   current
   desired
diff --git a/assets/src/routes/kubernetesRoutes.tsx b/assets/src/routes/kubernetesRoutes.tsx
index 5204a05ea..d2c9694c1 100644
--- a/assets/src/routes/kubernetesRoutes.tsx
+++ b/assets/src/routes/kubernetesRoutes.tsx
@@ -4,9 +4,9 @@ import Service from 'components/kubernetes/discovery/Service'
 import PersistentVolume, {
   PersistentVolumeInfo,
 } from 'components/kubernetes/storage/PersistentVolume'
-import Secret, { SecretInfo } from 'components/kubernetes/configuration/Secret'
+import Secret, { SecretData } from 'components/kubernetes/configuration/Secret'
 import RoleBinding from 'components/kubernetes/access/RoleBinding'
-import Role from 'components/kubernetes/access/Role'
+import Role, { RolePolicyRules } from 'components/kubernetes/access/Role'
 import ClusterRole from 'components/kubernetes/access/ClusterRole'
 import ClusterRoleBinding from 'components/kubernetes/access/ClusterRoleBinding'
 import CustomResourceDefinition from 'components/kubernetes/customresources/CustomResourceDefinition'
@@ -65,7 +65,7 @@ import StorageClass, {
   StorageClassPersistentVolumes,
 } from '../components/kubernetes/storage/StorageClass'
 import ConfigMap, {
-  ConfigMapInfo,
+  ConfigMapData,
 } from '../components/kubernetes/configuration/ConfigMap'
 import Namespace from '../components/kubernetes/cluster/Namespace'
 
@@ -433,7 +433,7 @@ export const kubernetesRoutes = [
     <Route
       index
       path=""
-      element={<ConfigMapInfo />}
+      element={<ConfigMapData />}
     />
     <Route
       path="raw"
@@ -447,7 +447,7 @@ export const kubernetesRoutes = [
     <Route
       index
       path=""
-      element={<SecretInfo />}
+      element={<SecretData />}
     />
     <Route
       path="raw"
@@ -467,20 +467,38 @@ export const kubernetesRoutes = [
   />,
   // Access
   <Route
-    index
     path={`${KUBERNETES_ABS_PATH}/${ROLES_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
     element={<Role />}
-  />,
+  >
+    <Route
+      index
+      path=""
+      element={<RolePolicyRules />}
+    />
+    <Route
+      path="raw"
+      element={<Raw />}
+    />
+  </Route>,
   <Route
     index
     path={`${KUBERNETES_ABS_PATH}/${ROLE_BINDINGS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
     element={<RoleBinding />}
   />,
   <Route
-    index
     path={`${KUBERNETES_ABS_PATH}/${CLUSTER_ROLES_REL_PATH}/${RESOURCE_DETAILS_REL_PATH}`}
     element={<ClusterRole />}
-  />,
+  >
+    <Route
+      index
+      path=""
+      element={<RolePolicyRules />}
+    />
+    <Route
+      path="raw"
+      element={<Raw />}
+    />
+  </Route>,
   <Route
     index
     path={`${KUBERNETES_ABS_PATH}/${CLUSTER_ROLE_BINDINGS_REL_PATH}/${RESOURCE_DETAILS_REL_PATH}`}