diff --git a/src/realm-roles/NoRealmRoles.tsx b/src/realm-roles/NoRealmRoles.tsx
deleted file mode 100644
index 1e28359f33..0000000000
--- a/src/realm-roles/NoRealmRoles.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import {
-  Button,
-  PageSection,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  Title,
-  EmptyStateBody,
-} from "@patternfly/react-core";
-import { useHistory } from "react-router-dom";
-
-import { PlusCircleIcon } from "@patternfly/react-icons";
-import { useTranslation } from "react-i18next";
-
-export const NoRealmRolesPage = () => {
-  const { t } = useTranslation("realm");
-  const history = useHistory();
-  return (
-    <>
-      <PageSection>
-        <EmptyState variant={EmptyStateVariant.large}>
-          <EmptyStateIcon icon={PlusCircleIcon} />
-          <Title headingLevel="h4" size="lg">
-            {t("noRealmRoles")}
-          </Title>
-          <EmptyStateBody>{t("emptyStateText")}</EmptyStateBody>
-          <Button variant="primary" onClick={() => history.push("/add-role")}>
-            {t("createRealm")}
-          </Button>
-        </EmptyState>
-      </PageSection>
-    </>
-  );
-};
diff --git a/src/realm-roles/RealmRolesSection.tsx b/src/realm-roles/RealmRolesSection.tsx
index c7729a5217..e6511ff236 100644
--- a/src/realm-roles/RealmRolesSection.tsx
+++ b/src/realm-roles/RealmRolesSection.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Bullseye, Button, PageSection, Spinner } from "@patternfly/react-core";
+import { Button, PageSection } from "@patternfly/react-core";
 
 import { HttpClientContext } from "../context/http-service/HttpClientContext";
 import { RoleRepresentation } from "../model/role-model";
@@ -9,6 +9,7 @@ import { RolesList } from "./RoleList";
 import { RealmContext } from "../context/realm-context/RealmContext";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { PaginatingTableToolbar } from "../components/table-toolbar/PaginatingTableToolbar";
+import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 
 export const RealmRolesSection = () => {
   const [max, setMax] = useState(10);
@@ -37,12 +38,7 @@ export const RealmRolesSection = () => {
     <>
       <ViewHeader titleKey="roles:title" subKey="roles:roleExplain" />
       <PageSection variant="light">
-        {!roles && (
-          <Bullseye>
-            <Spinner />
-          </Bullseye>
-        )}
-        {roles && (
+        {roles && roles.length > 0 ? (
           <PaginatingTableToolbar
             count={roles!.length}
             first={first}
@@ -63,6 +59,14 @@ export const RealmRolesSection = () => {
           >
             <RolesList roles={roles} refresh={loader} />
           </PaginatingTableToolbar>
+        ) : (
+          <ListEmptyState
+            hasIcon={true}
+            message={t("noRolesInThisRealm")}
+            instructions={t("noRolesInThisRealmInstructions")}
+            primaryActionText={t("createRole")}
+            onPrimaryAction={() => history.push("/add-role")}
+          />
         )}
       </PageSection>
     </>
diff --git a/src/realm-roles/messages.json b/src/realm-roles/messages.json
index 2611f4d273..e0bb3c2e22 100644
--- a/src/realm-roles/messages.json
+++ b/src/realm-roles/messages.json
@@ -21,6 +21,8 @@
     "roleDeleteConfirmDialog": "This action will permanently delete the role {{selectedRoleName}} and cannot be undone.",
     "roleDeletedSuccess": "The role has been deleted",
     "roleDeleteError": "Could not delete role:",
+    "noRolesInThisRealm": "No roles in this realm",
+    "noRolesInThisRealmInstructions": "You haven't created any roles in this realm. Create a role to get started.",
     "roleAuthentication": "Role authentication"
   }
 }