From e062603ff266bda9b57d949e21a12d0bfcd96f0a Mon Sep 17 00:00:00 2001
From: Jon Koops <jonkoops@gmail.com>
Date: Thu, 26 Aug 2021 14:15:28 +0200
Subject: [PATCH] Remove useless React fragments (#1062)

---
 .eslintrc.js                                  |   2 +
 src/PageHeader.tsx                            |  50 +-
 src/client-scopes/ClientScopesSection.tsx     |  44 +-
 src/client-scopes/add/MapperDialog.tsx        |   4 +-
 src/client-scopes/details/MapperList.tsx      |   8 +-
 src/client-scopes/details/MappingDetails.tsx  |  54 +-
 src/clients/ClientSettings.tsx                | 418 +++++----
 src/clients/ClientsSection.tsx                |  32 +-
 src/clients/add/CapabilityConfig.tsx          | 500 ++++++-----
 src/clients/credentials/SignedJWT.tsx         |  90 +-
 src/clients/keys/Keys.tsx                     |  47 +-
 src/clients/scopes/ClientScopes.tsx           |  40 +-
 .../service-account/ServiceAccount.tsx        |  24 +-
 .../attribute-form/AttributeForm.tsx          | 194 ++---
 .../bread-crumb/GroupBreadCrumbs.tsx          |  58 +-
 .../bread-crumb/PageBreadCrumbs.tsx           |   2 +-
 src/components/error/ErrorRenderer.tsx        |   8 +-
 src/components/group/GroupPickerDialog.tsx    |   4 +-
 src/components/help-enabler/HelpItem.tsx      |  46 +-
 .../list-empty-state/ListEmptyState.tsx       |  72 +-
 .../table-toolbar/KeycloakDataTable.tsx       |   7 +-
 .../table-toolbar/PaginatingTableToolbar.tsx  |   2 +-
 src/components/table-toolbar/TableToolbar.tsx |  57 +-
 src/components/view-header/ViewHeader.tsx     |   2 +-
 src/dashboard/Dashboard.tsx                   |   8 +-
 src/events/AdminEvents.tsx                    | 302 ++++---
 src/groups/GroupTable.tsx                     |  20 +-
 src/groups/Members.tsx                        |   8 +-
 src/groups/SearchGroups.tsx                   |  20 +-
 .../IdentityProvidersSection.tsx              |  32 +-
 .../add/AdvancedSettings.tsx                  |   4 +
 .../add/ExtendedNonDiscoverySettings.tsx      | 167 ++--
 .../icons/FontAwesomeIcon.tsx                 |   2 +-
 src/realm-roles/AliasRendererComponent.tsx    |   2 +-
 src/realm-roles/AssociatedRolesTab.tsx        | 187 ++--
 src/realm-roles/RoleAttributes.tsx            | 192 ++---
 src/realm-roles/RolesList.tsx                 |   6 +-
 src/realm-roles/UsersInRoleTab.tsx            | 162 ++--
 src/realm-settings/GeneralTab.tsx             | 313 ++++---
 src/realm-settings/KeysListTab.tsx            | 234 +++--
 src/realm-settings/KeysProvidersTab.tsx       | 124 ++-
 src/realm-settings/LoginTab.tsx               | 365 ++++----
 src/realm-settings/RealmSettingsSection.tsx   |  24 +-
 src/realm-settings/SessionsTab.tsx            | 690 ++++++++-------
 src/realm-settings/ThemesTab.tsx              | 606 +++++++------
 src/realm-settings/TokensTab.tsx              | 812 +++++++++---------
 .../event-config/EventsTypeTable.tsx          |  16 +-
 .../aes-generated/AESGeneratedForm.tsx        |  26 +-
 .../ecdsa-generated/ECDSAGeneratedForm.tsx    |  26 +-
 .../hmac-generated/HMACGeneratedForm.tsx      |  26 +-
 .../java-keystore/JavaKeystoreForm.tsx        |  26 +-
 .../rsa-generated/RSAGeneratedForm.tsx        |  26 +-
 .../key-providers/rsa/RSAForm.tsx             |  26 +-
 .../kerberos/KerberosSettingsRequired.tsx     |   4 +-
 .../mappers/LdapMapperHardcodedLdapGroup.tsx  |  52 +-
 .../ldap/mappers/LdapMapperList.tsx           |   4 +-
 .../mappers/LdapMapperMsadUserAccount.tsx     |  56 +-
 .../ldap/mappers/LdapMapperUserAttribute.tsx  |  60 +-
 src/user-federation/shared/SettingsCache.tsx  |  12 +-
 src/user/UserForm.tsx                         |  42 +-
 src/user/UserGroups.tsx                       |  24 +-
 src/user/UsersSection.tsx                     |  14 +-
 62 files changed, 3157 insertions(+), 3328 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index f7cdd0c04e..d385f0e8ed 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -30,6 +30,8 @@ module.exports = {
     // react/prop-types cannot handle generic props, so we need to disable it.
     // https://github.com/yannickcr/eslint-plugin-react/issues/2777#issuecomment-814968432
     "react/prop-types": "off",
+    // Prevent fragments from being added that have only a single child.
+    "react/jsx-no-useless-fragment": "error"
   },
   overrides: [
     {
diff --git a/src/PageHeader.tsx b/src/PageHeader.tsx
index a235d816d9..d193c0d9ea 100644
--- a/src/PageHeader.tsx
+++ b/src/PageHeader.tsx
@@ -27,37 +27,27 @@ export const Header = () => {
   const adminClient = useAdminClient();
   const { t } = useTranslation();
 
-  const ManageAccountDropdownItem = () => {
-    return (
-      <>
-        {adminClient.keycloak && (
-          <DropdownItem
-            key="manage account"
-            id="manage-account"
-            onClick={() => adminClient.keycloak?.accountManagement()}
-          >
-            {t("manageAccount")}
-          </DropdownItem>
-        )}
-      </>
-    );
-  };
+  const ManageAccountDropdownItem = () =>
+    adminClient.keycloak ? (
+      <DropdownItem
+        key="manage account"
+        id="manage-account"
+        onClick={() => adminClient.keycloak?.accountManagement()}
+      >
+        {t("manageAccount")}
+      </DropdownItem>
+    ) : null;
 
-  const SignOutDropdownItem = () => {
-    return (
-      <>
-        {adminClient.keycloak && (
-          <DropdownItem
-            id="sign-out"
-            key="sign out"
-            onClick={() => adminClient.keycloak?.logout({ redirectUri: "" })}
-          >
-            {t("signOut")}
-          </DropdownItem>
-        )}
-      </>
-    );
-  };
+  const SignOutDropdownItem = () =>
+    adminClient.keycloak ? (
+      <DropdownItem
+        id="sign-out"
+        key="sign out"
+        onClick={() => adminClient.keycloak?.logout({ redirectUri: "" })}
+      >
+        {t("signOut")}
+      </DropdownItem>
+    ) : null;
 
   const ServerInfoDropdownItem = () => {
     const { realm } = useRealm();
diff --git a/src/client-scopes/ClientScopesSection.tsx b/src/client-scopes/ClientScopesSection.tsx
index 8e0ff6a0eb..637251ddd3 100644
--- a/src/client-scopes/ClientScopesSection.tsx
+++ b/src/client-scopes/ClientScopesSection.tsx
@@ -107,22 +107,20 @@ export const ClientScopesSection = () => {
   });
 
   const TypeSelector = (scope: ClientScopeDefaultOptionalType) => (
-    <>
-      <CellDropdown
-        clientScope={scope}
-        type={scope.type}
-        all
-        onSelect={async (value) => {
-          try {
-            await changeScope(adminClient, scope, value);
-            addAlert(t("clientScopeSuccess"), AlertVariant.success);
-            refresh();
-          } catch (error) {
-            addError("client-scopes:clientScopeError", error);
-          }
-        }}
-      />
-    </>
+    <CellDropdown
+      clientScope={scope}
+      type={scope.type}
+      all
+      onSelect={async (value) => {
+        try {
+          await changeScope(adminClient, scope, value);
+          addAlert(t("clientScopeSuccess"), AlertVariant.success);
+          refresh();
+        } catch (error) {
+          addError("client-scopes:clientScopeError", error);
+        }
+      }}
+    />
   );
 
   const ClientScopeDetailLink = ({
@@ -130,14 +128,12 @@ export const ClientScopesSection = () => {
     type,
     name,
   }: ClientScopeDefaultOptionalType) => (
-    <>
-      <Link
-        key={id}
-        to={toClientScope({ realm, id: id!, type, tab: "settings" })}
-      >
-        {name}
-      </Link>
-    </>
+    <Link
+      key={id}
+      to={toClientScope({ realm, id: id!, type, tab: "settings" })}
+    >
+      {name}
+    </Link>
   );
   return (
     <>
diff --git a/src/client-scopes/add/MapperDialog.tsx b/src/client-scopes/add/MapperDialog.tsx
index f0e8b4dbd6..17c8eb08b8 100644
--- a/src/client-scopes/add/MapperDialog.tsx
+++ b/src/client-scopes/add/MapperDialog.tsx
@@ -128,10 +128,10 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
                 <DataListItemCells
                   dataListCells={[
                     <DataListCell key={`name-${mapper.id}`}>
-                      <>{mapper.name}</>
+                      {mapper.name}
                     </DataListCell>,
                     <DataListCell key={`helpText-${mapper.id}`}>
-                      <>{mapper.helpText}</>
+                      {mapper.helpText}
                     </DataListCell>,
                   ]}
                 />
diff --git a/src/client-scopes/details/MapperList.tsx b/src/client-scopes/details/MapperList.tsx
index e7141ee709..66715979b6 100644
--- a/src/client-scopes/details/MapperList.tsx
+++ b/src/client-scopes/details/MapperList.tsx
@@ -99,11 +99,9 @@ export const MapperList = ({ clientScope, refresh }: MapperListProps) => {
     );
 
   const MapperLink = ({ id, name }: Row) => (
-    <>
-      <Link to={toMapper({ realm, id: clientScope.id!, mapperId: id! })}>
-        {name}
-      </Link>
-    </>
+    <Link to={toMapper({ realm, id: clientScope.id!, mapperId: id! })}>
+      {name}
+    </Link>
   );
 
   return (
diff --git a/src/client-scopes/details/MappingDetails.tsx b/src/client-scopes/details/MappingDetails.tsx
index eeebda7958..8cd2b010bd 100644
--- a/src/client-scopes/details/MappingDetails.tsx
+++ b/src/client-scopes/details/MappingDetails.tsx
@@ -164,40 +164,36 @@ export const MappingDetails = () => {
           onSubmit={handleSubmit(save)}
           role="manage-clients"
         >
-          <>
-            {!mapperId.match(isGuid) && (
-              <FormGroup
-                label={t("common:name")}
-                labelIcon={
-                  <HelpItem
-                    helpText="client-scopes-help:mapperName"
-                    forLabel={t("common:name")}
-                    forID="name"
-                  />
-                }
-                fieldId="name"
-                isRequired
+          {!mapperId.match(isGuid) && (
+            <FormGroup
+              label={t("common:name")}
+              labelIcon={
+                <HelpItem
+                  helpText="client-scopes-help:mapperName"
+                  forLabel={t("common:name")}
+                  forID="name"
+                />
+              }
+              fieldId="name"
+              isRequired
+              validated={
+                errors.name ? ValidatedOptions.error : ValidatedOptions.default
+              }
+              helperTextInvalid={t("common:required")}
+            >
+              <TextInput
+                ref={register({ required: true })}
+                type="text"
+                id="name"
+                name="name"
                 validated={
                   errors.name
                     ? ValidatedOptions.error
                     : ValidatedOptions.default
                 }
-                helperTextInvalid={t("common:required")}
-              >
-                <TextInput
-                  ref={register({ required: true })}
-                  type="text"
-                  id="name"
-                  name="name"
-                  validated={
-                    errors.name
-                      ? ValidatedOptions.error
-                      : ValidatedOptions.default
-                  }
-                />
-              </FormGroup>
-            )}
-          </>
+              />
+            </FormGroup>
+          )}
           <FormGroup
             label={t("realmRolePrefix")}
             labelIcon={
diff --git a/src/clients/ClientSettings.tsx b/src/clients/ClientSettings.tsx
index 311a013ccd..290d4daa98 100644
--- a/src/clients/ClientSettings.tsx
+++ b/src/clients/ClientSettings.tsx
@@ -38,217 +38,215 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
   );
 
   return (
-    <>
-      <ScrollForm
-        className="pf-u-px-lg"
-        sections={[
-          t("generalSettings"),
-          t("capabilityConfig"),
-          t("accessSettings"),
-          t("loginSettings"),
-        ]}
-      >
-        <Form isHorizontal>
-          <ClientDescription />
-        </Form>
-        <CapabilityConfig />
-        <FormAccess isHorizontal role="manage-clients">
-          <FormGroup
-            label={t("rootUrl")}
-            fieldId="kc-root-url"
-            labelIcon={
-              <HelpItem
-                helpText="clients-help:rootUrl"
-                forLabel={t("rootUrl")}
-                forID="kc-root-url"
-              />
-            }
-          >
-            <TextInput
-              type="text"
-              id="kc-root-url"
-              name="rootUrl"
-              ref={register}
+    <ScrollForm
+      className="pf-u-px-lg"
+      sections={[
+        t("generalSettings"),
+        t("capabilityConfig"),
+        t("accessSettings"),
+        t("loginSettings"),
+      ]}
+    >
+      <Form isHorizontal>
+        <ClientDescription />
+      </Form>
+      <CapabilityConfig />
+      <FormAccess isHorizontal role="manage-clients">
+        <FormGroup
+          label={t("rootUrl")}
+          fieldId="kc-root-url"
+          labelIcon={
+            <HelpItem
+              helpText="clients-help:rootUrl"
+              forLabel={t("rootUrl")}
+              forID="kc-root-url"
             />
-          </FormGroup>
-          <FormGroup
-            label={t("validRedirectUri")}
-            fieldId="kc-redirect"
-            labelIcon={
-              <HelpItem
-                helpText="clients-help:validRedirectURIs"
-                forLabel={t("validRedirectUri")}
-                forID={t(`common:helpLabel`, { label: t("validRedirectUri") })}
-              />
-            }
-          >
-            <MultiLineInput
-              name="redirectUris"
-              aria-label={t("validRedirectUri")}
-              addButtonLabel="clients:addRedirectUri"
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("homeURL")}
-            fieldId="kc-home-url"
-            labelIcon={
-              <HelpItem
-                helpText="clients-help:homeURL"
-                forLabel={t("homeURL")}
-                forID={t(`common:helpLabel`, { label: t("homeURL") })}
-              />
-            }
-          >
-            <TextInput
-              type="text"
-              id="kc-home-url"
-              name="baseUrl"
-              ref={register}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("webOrigins")}
-            fieldId="kc-web-origins"
-            labelIcon={
-              <HelpItem
-                helpText="clients-help:webOrigins"
-                forLabel={t("webOrigins")}
-                forID={t(`common:helpLabel`, { label: t("webOrigins") })}
-              />
-            }
-          >
-            <MultiLineInput
-              name="webOrigins"
-              aria-label={t("webOrigins")}
-              addButtonLabel="clients:addWebOrigins"
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("adminURL")}
-            fieldId="kc-admin-url"
-            labelIcon={
-              <HelpItem
-                helpText="clients-help:adminURL"
-                forLabel={t("adminURL")}
-                forID="kc-admin-url"
-              />
-            }
-          >
-            <TextInput
-              type="text"
-              id="kc-admin-url"
-              name="adminUrl"
-              ref={register}
-            />
-          </FormGroup>
-        </FormAccess>
-        <FormAccess isHorizontal role="manage-clients">
-          <FormGroup
-            label={t("loginTheme")}
-            labelIcon={
-              <HelpItem
-                helpText="clients-help:loginTheme"
-                forLabel={t("loginTheme")}
-                forID="loginTheme"
-              />
-            }
-            fieldId="loginTheme"
-          >
-            <Controller
-              name="attributes.login_theme"
-              defaultValue=""
-              control={control}
-              render={({ onChange, value }) => (
-                <Select
-                  toggleId="loginTheme"
-                  onToggle={() => setLoginThemeOpen(!loginThemeOpen)}
-                  onSelect={(_, value) => {
-                    onChange(value as string);
-                    setLoginThemeOpen(false);
-                  }}
-                  selections={value || t("common:choose")}
-                  variant={SelectVariant.single}
-                  aria-label={t("loginTheme")}
-                  isOpen={loginThemeOpen}
-                >
-                  <SelectOption key="empty" value="">
-                    {t("common:choose")}
-                  </SelectOption>
-                  <>
-                    {loginThemes?.map((theme) => (
-                      <SelectOption
-                        selected={theme.name === value}
-                        key={theme.name}
-                        value={theme.name}
-                      />
-                    ))}
-                  </>
-                </Select>
-              )}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("consentRequired")}
-            fieldId="kc-consent"
-            hasNoPaddingTop
-          >
-            <Controller
-              name="consentRequired"
-              defaultValue={false}
-              control={control}
-              render={({ onChange, value }) => (
-                <Switch
-                  id="kc-consent-switch"
-                  label={t("common:on")}
-                  labelOff={t("common:off")}
-                  isChecked={value}
-                  onChange={onChange}
-                />
-              )}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("displayOnClient")}
-            fieldId="kc-display-on-client"
-            hasNoPaddingTop
-          >
-            <Controller
-              name="attributes.display-on-consent-screen"
-              defaultValue={false}
-              control={control}
-              render={({ onChange, value }) => (
-                <Switch
-                  id="kc-display-on-client-switch"
-                  label={t("common:on")}
-                  labelOff={t("common:off")}
-                  isChecked={value === "true"}
-                  onChange={(value) => onChange("" + value)}
-                  isDisabled={!consentRequired}
-                />
-              )}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("consentScreenText")}
-            fieldId="kc-consent-screen-text"
-          >
-            <TextArea
-              id="kc-consent-screen-text"
-              name="attributes.consent-screen-text"
-              ref={register}
-              isDisabled={
-                !(consentRequired && displayOnConsentScreen === "true")
-              }
-            />
-          </FormGroup>
-          <SaveReset
-            className="keycloak__form_actions"
-            name="settings"
-            save={save}
-            reset={reset}
+          }
+        >
+          <TextInput
+            type="text"
+            id="kc-root-url"
+            name="rootUrl"
+            ref={register}
           />
-        </FormAccess>
-      </ScrollForm>
-    </>
+        </FormGroup>
+        <FormGroup
+          label={t("validRedirectUri")}
+          fieldId="kc-redirect"
+          labelIcon={
+            <HelpItem
+              helpText="clients-help:validRedirectURIs"
+              forLabel={t("validRedirectUri")}
+              forID={t(`common:helpLabel`, { label: t("validRedirectUri") })}
+            />
+          }
+        >
+          <MultiLineInput
+            name="redirectUris"
+            aria-label={t("validRedirectUri")}
+            addButtonLabel="clients:addRedirectUri"
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("homeURL")}
+          fieldId="kc-home-url"
+          labelIcon={
+            <HelpItem
+              helpText="clients-help:homeURL"
+              forLabel={t("homeURL")}
+              forID={t(`common:helpLabel`, { label: t("homeURL") })}
+            />
+          }
+        >
+          <TextInput
+            type="text"
+            id="kc-home-url"
+            name="baseUrl"
+            ref={register}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("webOrigins")}
+          fieldId="kc-web-origins"
+          labelIcon={
+            <HelpItem
+              helpText="clients-help:webOrigins"
+              forLabel={t("webOrigins")}
+              forID={t(`common:helpLabel`, { label: t("webOrigins") })}
+            />
+          }
+        >
+          <MultiLineInput
+            name="webOrigins"
+            aria-label={t("webOrigins")}
+            addButtonLabel="clients:addWebOrigins"
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("adminURL")}
+          fieldId="kc-admin-url"
+          labelIcon={
+            <HelpItem
+              helpText="clients-help:adminURL"
+              forLabel={t("adminURL")}
+              forID="kc-admin-url"
+            />
+          }
+        >
+          <TextInput
+            type="text"
+            id="kc-admin-url"
+            name="adminUrl"
+            ref={register}
+          />
+        </FormGroup>
+      </FormAccess>
+      <FormAccess isHorizontal role="manage-clients">
+        <FormGroup
+          label={t("loginTheme")}
+          labelIcon={
+            <HelpItem
+              helpText="clients-help:loginTheme"
+              forLabel={t("loginTheme")}
+              forID="loginTheme"
+            />
+          }
+          fieldId="loginTheme"
+        >
+          <Controller
+            name="attributes.login_theme"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="loginTheme"
+                onToggle={() => setLoginThemeOpen(!loginThemeOpen)}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setLoginThemeOpen(false);
+                }}
+                selections={value || t("common:choose")}
+                variant={SelectVariant.single}
+                aria-label={t("loginTheme")}
+                isOpen={loginThemeOpen}
+              >
+                <SelectOption key="empty" value="">
+                  {t("common:choose")}
+                </SelectOption>
+                {/* The type for the children of Select are incorrect, so we need a fragment here. */}
+                {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
+                <>
+                  {loginThemes?.map((theme) => (
+                    <SelectOption
+                      selected={theme.name === value}
+                      key={theme.name}
+                      value={theme.name}
+                    />
+                  ))}
+                </>
+              </Select>
+            )}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("consentRequired")}
+          fieldId="kc-consent"
+          hasNoPaddingTop
+        >
+          <Controller
+            name="consentRequired"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id="kc-consent-switch"
+                label={t("common:on")}
+                labelOff={t("common:off")}
+                isChecked={value}
+                onChange={onChange}
+              />
+            )}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("displayOnClient")}
+          fieldId="kc-display-on-client"
+          hasNoPaddingTop
+        >
+          <Controller
+            name="attributes.display-on-consent-screen"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id="kc-display-on-client-switch"
+                label={t("common:on")}
+                labelOff={t("common:off")}
+                isChecked={value === "true"}
+                onChange={(value) => onChange("" + value)}
+                isDisabled={!consentRequired}
+              />
+            )}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("consentScreenText")}
+          fieldId="kc-consent-screen-text"
+        >
+          <TextArea
+            id="kc-consent-screen-text"
+            name="attributes.consent-screen-text"
+            ref={register}
+            isDisabled={!(consentRequired && displayOnConsentScreen === "true")}
+          />
+        </FormGroup>
+        <SaveReset
+          className="keycloak__form_actions"
+          name="settings"
+          save={save}
+          reset={reset}
+        />
+      </FormAccess>
+    </ScrollForm>
   );
 };
diff --git a/src/clients/ClientsSection.tsx b/src/clients/ClientsSection.tsx
index ee0cedd159..cb5fc0ead5 100644
--- a/src/clients/ClientsSection.tsx
+++ b/src/clients/ClientsSection.tsx
@@ -70,27 +70,23 @@ export const ClientsSection = () => {
   });
 
   const ClientDetailLink = (client: ClientRepresentation) => (
-    <>
-      <Link
-        key={client.id}
-        to={toClient({ realm, clientId: client.id!, tab: "settings" })}
-      >
-        {client.clientId}
-        {!client.enabled && (
-          <Badge key={`${client.id}-disabled`} isRead className="pf-u-ml-sm">
-            {t("common:disabled")}
-          </Badge>
-        )}
-      </Link>
-    </>
+    <Link
+      key={client.id}
+      to={toClient({ realm, clientId: client.id!, tab: "settings" })}
+    >
+      {client.clientId}
+      {!client.enabled && (
+        <Badge key={`${client.id}-disabled`} isRead className="pf-u-ml-sm">
+          {t("common:disabled")}
+        </Badge>
+      )}
+    </Link>
   );
 
   const ClientDescription = (client: ClientRepresentation) => (
-    <>
-      <TableText wrapModifier="truncate">
-        {emptyFormatter()(client.description)}
-      </TableText>
-    </>
+    <TableText wrapModifier="truncate">
+      {emptyFormatter()(client.description)}
+    </TableText>
   );
 
   return (
diff --git a/src/clients/add/CapabilityConfig.tsx b/src/clients/add/CapabilityConfig.tsx
index 10816fd099..531116cdd0 100644
--- a/src/clients/add/CapabilityConfig.tsx
+++ b/src/clients/add/CapabilityConfig.tsx
@@ -38,264 +38,260 @@ export const CapabilityConfig = ({
       unWrap={unWrap}
       className="keycloak__capability-config__form"
     >
-      <>
-        {protocol === "openid-connect" && (
-          <>
-            <FormGroup
-              hasNoPaddingTop
-              label={t("clientAuthentication")}
-              fieldId="kc-authentication"
-              labelIcon={
-                <HelpItem
-                  helpText="clients-help:authentication"
-                  forLabel={t("authentication")}
-                  forID={t(`common:helpLabel`, { label: t("authentication") })}
-                />
-              }
-            >
-              <Controller
-                name="publicClient"
-                defaultValue={false}
-                control={control}
-                render={({ onChange, value }) => (
-                  <Switch
-                    data-testid="authentication"
-                    id="kc-authentication-switch"
-                    name="publicClient"
-                    label={t("common:on")}
-                    labelOff={t("common:off")}
-                    isChecked={!value}
-                    onChange={(value) => {
-                      onChange(!value);
-                      if (!value) {
-                        setValue("authorizationServicesEnabled", false);
-                        setValue("serviceAccountsEnabled", false);
-                      }
-                    }}
-                  />
-                )}
+      {protocol === "openid-connect" && (
+        <>
+          <FormGroup
+            hasNoPaddingTop
+            label={t("clientAuthentication")}
+            fieldId="kc-authentication"
+            labelIcon={
+              <HelpItem
+                helpText="clients-help:authentication"
+                forLabel={t("authentication")}
+                forID={t(`common:helpLabel`, { label: t("authentication") })}
               />
-            </FormGroup>
-            <FormGroup
-              hasNoPaddingTop
-              label={t("clientAuthorization")}
-              fieldId="kc-authorization"
-              labelIcon={
-                <HelpItem
-                  helpText="clients-help:authorization"
-                  forLabel={t("authorization")}
-                  forID={t(`common:helpLabel`, { label: t("authorization") })}
+            }
+          >
+            <Controller
+              name="publicClient"
+              defaultValue={false}
+              control={control}
+              render={({ onChange, value }) => (
+                <Switch
+                  data-testid="authentication"
+                  id="kc-authentication-switch"
+                  name="publicClient"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={!value}
+                  onChange={(value) => {
+                    onChange(!value);
+                    if (!value) {
+                      setValue("authorizationServicesEnabled", false);
+                      setValue("serviceAccountsEnabled", false);
+                    }
+                  }}
                 />
-              }
-            >
-              <Controller
-                name="authorizationServicesEnabled"
-                defaultValue={false}
-                control={control}
-                render={({ onChange, value }) => (
-                  <Switch
-                    data-testid="authorization"
-                    id="kc-authorization-switch"
-                    name="authorizationServicesEnabled"
-                    label={t("common:on")}
-                    labelOff={t("common:off")}
-                    isChecked={value && !clientAuthentication}
-                    onChange={(value) => {
-                      onChange(value);
-                      if (value) {
-                        setValue("serviceAccountsEnabled", true);
-                      }
-                    }}
-                    isDisabled={clientAuthentication}
-                  />
-                )}
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            hasNoPaddingTop
+            label={t("clientAuthorization")}
+            fieldId="kc-authorization"
+            labelIcon={
+              <HelpItem
+                helpText="clients-help:authorization"
+                forLabel={t("authorization")}
+                forID={t(`common:helpLabel`, { label: t("authorization") })}
               />
-            </FormGroup>
-            <FormGroup
-              hasNoPaddingTop
-              label={t("authenticationFlow")}
-              fieldId="kc-flow"
-            >
-              <Grid>
-                <GridItem lg={4} sm={6}>
-                  <Controller
-                    name="standardFlowEnabled"
-                    defaultValue={true}
-                    control={control}
-                    render={({ onChange, value }) => (
-                      <InputGroup>
-                        <Checkbox
-                          data-testid="standard"
-                          label={t("standardFlow")}
-                          id="kc-flow-standard"
-                          name="standardFlowEnabled"
-                          isChecked={value}
-                          onChange={onChange}
-                        />
-                        <HelpItem
-                          helpText="clients-help:standardFlow"
-                          forLabel={t("standardFlow")}
-                          forID={t(`common:helpLabel`, {
-                            label: t("standardFlow"),
-                          })}
-                        />
-                      </InputGroup>
-                    )}
-                  />
-                </GridItem>
-                <GridItem lg={8} sm={6}>
-                  <Controller
-                    name="directAccessGrantsEnabled"
-                    defaultValue={true}
-                    control={control}
-                    render={({ onChange, value }) => (
-                      <InputGroup>
-                        <Checkbox
-                          data-testid="direct"
-                          label={t("directAccess")}
-                          id="kc-flow-direct"
-                          name="directAccessGrantsEnabled"
-                          isChecked={value}
-                          onChange={onChange}
-                        />
-                        <HelpItem
-                          helpText="clients-help:directAccess"
-                          forLabel={t("directAccess")}
-                          forID={t(`common:helpLabel`, {
-                            label: t("directAccess"),
-                          })}
-                        />
-                      </InputGroup>
-                    )}
-                  />
-                </GridItem>
-                <GridItem lg={4} sm={6}>
-                  <Controller
-                    name="implicitFlowEnabled"
-                    defaultValue={false}
-                    control={control}
-                    render={({ onChange, value }) => (
-                      <InputGroup>
-                        <Checkbox
-                          data-testid="implicit"
-                          label={t("implicitFlow")}
-                          id="kc-flow-implicit"
-                          name="implicitFlowEnabled"
-                          isChecked={value}
-                          onChange={onChange}
-                        />
-                        <HelpItem
-                          helpText="clients-help:implicitFlow"
-                          forLabel={t("implicitFlow")}
-                          forID={t(`common:helpLabel`, {
-                            label: t("implicitFlow"),
-                          })}
-                        />
-                      </InputGroup>
-                    )}
-                  />
-                </GridItem>
-                <GridItem lg={8} sm={6}>
-                  <Controller
-                    name="serviceAccountsEnabled"
-                    defaultValue={false}
-                    control={control}
-                    render={({ onChange, value }) => (
-                      <InputGroup>
-                        <Checkbox
-                          data-testid="service-account"
-                          label={t("serviceAccount")}
-                          id="kc-flow-service-account"
-                          name="serviceAccountsEnabled"
-                          isChecked={
-                            value || (clientAuthentication && authorization)
-                          }
-                          onChange={onChange}
-                          isDisabled={
-                            (clientAuthentication && !authorization) ||
-                            (!clientAuthentication && authorization)
-                          }
-                        />
-                        <HelpItem
-                          helpText="clients-help:serviceAccount"
-                          forLabel={t("serviceAccount")}
-                          forID={t(`common:helpLabel`, {
-                            label: t("serviceAccount"),
-                          })}
-                        />
-                      </InputGroup>
-                    )}
-                  />
-                </GridItem>
-              </Grid>
-            </FormGroup>
-          </>
-        )}
-      </>
-      <>
-        {protocol === "saml" && (
-          <>
-            <FormGroup
-              labelIcon={
-                <HelpItem
-                  helpText="clients-help:encryptAssertions"
-                  forLabel={t("encryptAssertions")}
-                  forID={t(`common:helpLabel`, {
-                    label: t("encryptAssertions"),
-                  })}
+            }
+          >
+            <Controller
+              name="authorizationServicesEnabled"
+              defaultValue={false}
+              control={control}
+              render={({ onChange, value }) => (
+                <Switch
+                  data-testid="authorization"
+                  id="kc-authorization-switch"
+                  name="authorizationServicesEnabled"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value && !clientAuthentication}
+                  onChange={(value) => {
+                    onChange(value);
+                    if (value) {
+                      setValue("serviceAccountsEnabled", true);
+                    }
+                  }}
+                  isDisabled={clientAuthentication}
                 />
-              }
-              label={t("encryptAssertions")}
-              fieldId="kc-encrypt"
-              hasNoPaddingTop
-            >
-              <Controller
-                name="attributes.saml_encrypt"
-                control={control}
-                defaultValue="false"
-                render={({ onChange, value }) => (
-                  <Switch
-                    data-testid="encrypt"
-                    id="kc-encrypt"
-                    label={t("common:on")}
-                    labelOff={t("common:off")}
-                    isChecked={value === "true"}
-                    onChange={(value) => onChange("" + value)}
-                  />
-                )}
-              />
-            </FormGroup>
-            <FormGroup
-              labelIcon={
-                <HelpItem
-                  helpText="clients-help:clientSignature"
-                  forLabel={t("clientSignature")}
-                  forID={t(`common:helpLabel`, { label: t("clientSignature") })}
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            hasNoPaddingTop
+            label={t("authenticationFlow")}
+            fieldId="kc-flow"
+          >
+            <Grid>
+              <GridItem lg={4} sm={6}>
+                <Controller
+                  name="standardFlowEnabled"
+                  defaultValue={true}
+                  control={control}
+                  render={({ onChange, value }) => (
+                    <InputGroup>
+                      <Checkbox
+                        data-testid="standard"
+                        label={t("standardFlow")}
+                        id="kc-flow-standard"
+                        name="standardFlowEnabled"
+                        isChecked={value}
+                        onChange={onChange}
+                      />
+                      <HelpItem
+                        helpText="clients-help:standardFlow"
+                        forLabel={t("standardFlow")}
+                        forID={t(`common:helpLabel`, {
+                          label: t("standardFlow"),
+                        })}
+                      />
+                    </InputGroup>
+                  )}
                 />
-              }
-              label={t("clientSignature")}
-              fieldId="kc-client-signature"
-              hasNoPaddingTop
-            >
-              <Controller
-                name="attributes.saml_client_signature"
-                control={control}
-                defaultValue="false"
-                render={({ onChange, value }) => (
-                  <Switch
-                    data-testid="client-signature"
-                    id="kc-client-signature"
-                    label={t("common:on")}
-                    labelOff={t("common:off")}
-                    isChecked={value === "true"}
-                    onChange={(value) => onChange("" + value)}
-                  />
-                )}
+              </GridItem>
+              <GridItem lg={8} sm={6}>
+                <Controller
+                  name="directAccessGrantsEnabled"
+                  defaultValue={true}
+                  control={control}
+                  render={({ onChange, value }) => (
+                    <InputGroup>
+                      <Checkbox
+                        data-testid="direct"
+                        label={t("directAccess")}
+                        id="kc-flow-direct"
+                        name="directAccessGrantsEnabled"
+                        isChecked={value}
+                        onChange={onChange}
+                      />
+                      <HelpItem
+                        helpText="clients-help:directAccess"
+                        forLabel={t("directAccess")}
+                        forID={t(`common:helpLabel`, {
+                          label: t("directAccess"),
+                        })}
+                      />
+                    </InputGroup>
+                  )}
+                />
+              </GridItem>
+              <GridItem lg={4} sm={6}>
+                <Controller
+                  name="implicitFlowEnabled"
+                  defaultValue={false}
+                  control={control}
+                  render={({ onChange, value }) => (
+                    <InputGroup>
+                      <Checkbox
+                        data-testid="implicit"
+                        label={t("implicitFlow")}
+                        id="kc-flow-implicit"
+                        name="implicitFlowEnabled"
+                        isChecked={value}
+                        onChange={onChange}
+                      />
+                      <HelpItem
+                        helpText="clients-help:implicitFlow"
+                        forLabel={t("implicitFlow")}
+                        forID={t(`common:helpLabel`, {
+                          label: t("implicitFlow"),
+                        })}
+                      />
+                    </InputGroup>
+                  )}
+                />
+              </GridItem>
+              <GridItem lg={8} sm={6}>
+                <Controller
+                  name="serviceAccountsEnabled"
+                  defaultValue={false}
+                  control={control}
+                  render={({ onChange, value }) => (
+                    <InputGroup>
+                      <Checkbox
+                        data-testid="service-account"
+                        label={t("serviceAccount")}
+                        id="kc-flow-service-account"
+                        name="serviceAccountsEnabled"
+                        isChecked={
+                          value || (clientAuthentication && authorization)
+                        }
+                        onChange={onChange}
+                        isDisabled={
+                          (clientAuthentication && !authorization) ||
+                          (!clientAuthentication && authorization)
+                        }
+                      />
+                      <HelpItem
+                        helpText="clients-help:serviceAccount"
+                        forLabel={t("serviceAccount")}
+                        forID={t(`common:helpLabel`, {
+                          label: t("serviceAccount"),
+                        })}
+                      />
+                    </InputGroup>
+                  )}
+                />
+              </GridItem>
+            </Grid>
+          </FormGroup>
+        </>
+      )}
+      {protocol === "saml" && (
+        <>
+          <FormGroup
+            labelIcon={
+              <HelpItem
+                helpText="clients-help:encryptAssertions"
+                forLabel={t("encryptAssertions")}
+                forID={t(`common:helpLabel`, {
+                  label: t("encryptAssertions"),
+                })}
               />
-            </FormGroup>
-          </>
-        )}
-      </>
+            }
+            label={t("encryptAssertions")}
+            fieldId="kc-encrypt"
+            hasNoPaddingTop
+          >
+            <Controller
+              name="attributes.saml_encrypt"
+              control={control}
+              defaultValue="false"
+              render={({ onChange, value }) => (
+                <Switch
+                  data-testid="encrypt"
+                  id="kc-encrypt"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value === "true"}
+                  onChange={(value) => onChange("" + value)}
+                />
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            labelIcon={
+              <HelpItem
+                helpText="clients-help:clientSignature"
+                forLabel={t("clientSignature")}
+                forID={t(`common:helpLabel`, { label: t("clientSignature") })}
+              />
+            }
+            label={t("clientSignature")}
+            fieldId="kc-client-signature"
+            hasNoPaddingTop
+          >
+            <Controller
+              name="attributes.saml_client_signature"
+              control={control}
+              defaultValue="false"
+              render={({ onChange, value }) => (
+                <Switch
+                  data-testid="client-signature"
+                  id="kc-client-signature"
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value === "true"}
+                  onChange={(value) => onChange("" + value)}
+                />
+              )}
+            />
+          </FormGroup>
+        </>
+      )}
     </FormAccess>
   );
 };
diff --git a/src/clients/credentials/SignedJWT.tsx b/src/clients/credentials/SignedJWT.tsx
index 78be9c4863..4e57b8e2f1 100644
--- a/src/clients/credentials/SignedJWT.tsx
+++ b/src/clients/credentials/SignedJWT.tsx
@@ -21,52 +21,50 @@ export const SignedJWT = () => {
 
   const [open, isOpen] = useState(false);
   return (
-    <>
-      <FormGroup
-        label={t("signatureAlgorithm")}
-        fieldId="kc-signature-algorithm"
-        labelIcon={
-          <HelpItem
-            helpText="clients-help:signature-algorithm"
-            forLabel={t("signatureAlgorithm")}
-            forID="kc-signature-algorithm"
-          />
-        }
-      >
-        <Controller
-          name="attributes.token-endpoint-auth-signing-alg"
-          defaultValue=""
-          control={control}
-          render={({ onChange, value }) => (
-            <Select
-              maxHeight={200}
-              toggleId="kc-signature-algorithm"
-              onToggle={() => isOpen(!open)}
-              onSelect={(_, value) => {
-                onChange(value as string);
-                isOpen(false);
-              }}
-              selections={value || t("anyAlgorithm")}
-              variant={SelectVariant.single}
-              aria-label={t("signatureAlgorithm")}
-              isOpen={open}
-            >
-              <SelectOption selected={value === ""} key="any" value="">
-                {t("anyAlgorithm")}
-              </SelectOption>
-              <>
-                {providers.map((option) => (
-                  <SelectOption
-                    selected={option === value}
-                    key={option}
-                    value={option}
-                  />
-                ))}
-              </>
-            </Select>
-          )}
+    <FormGroup
+      label={t("signatureAlgorithm")}
+      fieldId="kc-signature-algorithm"
+      labelIcon={
+        <HelpItem
+          helpText="clients-help:signature-algorithm"
+          forLabel={t("signatureAlgorithm")}
+          forID="kc-signature-algorithm"
         />
-      </FormGroup>
-    </>
+      }
+    >
+      <Controller
+        name="attributes.token-endpoint-auth-signing-alg"
+        defaultValue=""
+        control={control}
+        render={({ onChange, value }) => (
+          <Select
+            maxHeight={200}
+            toggleId="kc-signature-algorithm"
+            onToggle={() => isOpen(!open)}
+            onSelect={(_, value) => {
+              onChange(value as string);
+              isOpen(false);
+            }}
+            selections={value || t("anyAlgorithm")}
+            variant={SelectVariant.single}
+            aria-label={t("signatureAlgorithm")}
+            isOpen={open}
+          >
+            <SelectOption selected={value === ""} key="any" value="">
+              {t("anyAlgorithm")}
+            </SelectOption>
+            <>
+              {providers.map((option) => (
+                <SelectOption
+                  selected={option === value}
+                  key={option}
+                  value={option}
+                />
+              ))}
+            </>
+          </Select>
+        )}
+      />
+    </FormGroup>
   );
 };
diff --git a/src/clients/keys/Keys.tsx b/src/clients/keys/Keys.tsx
index e1bdfc4c88..7f8edf593f 100644
--- a/src/clients/keys/Keys.tsx
+++ b/src/clients/keys/Keys.tsx
@@ -153,32 +153,29 @@ export const Keys = ({ clientId, save }: KeysProps) => {
                 )}
               />
             </FormGroup>
-            {useJwksUrl !== "true" && (
-              <>
-                {keyInfo ? (
-                  <FormGroup
-                    label={t("certificate")}
-                    fieldId="certificate"
-                    labelIcon={
-                      <HelpItem
-                        helpText="clients-help:certificate"
-                        forLabel={t("certificate")}
-                        forID="certificate"
-                      />
-                    }
-                  >
-                    <TextArea
-                      readOnly
-                      rows={5}
-                      id="certificate"
-                      value={keyInfo.certificate}
+            {useJwksUrl !== "true" &&
+              (keyInfo ? (
+                <FormGroup
+                  label={t("certificate")}
+                  fieldId="certificate"
+                  labelIcon={
+                    <HelpItem
+                      helpText="clients-help:certificate"
+                      forLabel={t("certificate")}
+                      forID="certificate"
                     />
-                  </FormGroup>
-                ) : (
-                  "No client certificate configured"
-                )}
-              </>
-            )}
+                  }
+                >
+                  <TextArea
+                    readOnly
+                    rows={5}
+                    id="certificate"
+                    value={keyInfo.certificate}
+                  />
+                </FormGroup>
+              ) : (
+                "No client certificate configured"
+              ))}
             {useJwksUrl === "true" && (
               <FormGroup
                 label={t("jwksUrl")}
diff --git a/src/clients/scopes/ClientScopes.tsx b/src/clients/scopes/ClientScopes.tsx
index c39eba25bf..021d10fbeb 100644
--- a/src/clients/scopes/ClientScopes.tsx
+++ b/src/clients/scopes/ClientScopes.tsx
@@ -140,27 +140,25 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
   };
 
   const TypeSelector = (scope: Row) => (
-    <>
-      <CellDropdown
-        clientScope={scope}
-        type={scope.type}
-        onSelect={async (value) => {
-          try {
-            await changeScope(
-              adminClient,
-              clientId,
-              scope,
-              scope.type,
-              value as ClientScope
-            );
-            addAlert(t("clientScopeSuccess"), AlertVariant.success);
-            refresh();
-          } catch (error) {
-            addError("clients:clientScopeError", error);
-          }
-        }}
-      />
-    </>
+    <CellDropdown
+      clientScope={scope}
+      type={scope.type}
+      onSelect={async (value) => {
+        try {
+          await changeScope(
+            adminClient,
+            clientId,
+            scope,
+            scope.type,
+            value as ClientScope
+          );
+          addAlert(t("clientScopeSuccess"), AlertVariant.success);
+          refresh();
+        } catch (error) {
+          addError("clients:clientScopeError", error);
+        }
+      }}
+    />
   );
 
   return (
diff --git a/src/clients/service-account/ServiceAccount.tsx b/src/clients/service-account/ServiceAccount.tsx
index 46073a02d4..0bf745652f 100644
--- a/src/clients/service-account/ServiceAccount.tsx
+++ b/src/clients/service-account/ServiceAccount.tsx
@@ -97,18 +97,14 @@ export const ServiceAccount = ({ client }: ServiceAccountProps) => {
       addError("clients:roleMappingUpdatedError", error);
     }
   };
-  return (
-    <>
-      {serviceAccount && (
-        <RoleMapping
-          name={client.clientId!}
-          id={serviceAccount.id!}
-          type="service-account"
-          loader={loader}
-          save={assignRoles}
-          onHideRolesToggle={() => setHide(!hide)}
-        />
-      )}
-    </>
-  );
+  return serviceAccount ? (
+    <RoleMapping
+      name={client.clientId!}
+      id={serviceAccount.id!}
+      type="service-account"
+      loader={loader}
+      save={assignRoles}
+      onHideRolesToggle={() => setHide(!hide)}
+    />
+  ) : null;
 };
diff --git a/src/components/attribute-form/AttributeForm.tsx b/src/components/attribute-form/AttributeForm.tsx
index 34f91c7731..f56f38c308 100644
--- a/src/components/attribute-form/AttributeForm.tsx
+++ b/src/components/attribute-form/AttributeForm.tsx
@@ -75,60 +75,73 @@ export const AttributesForm = ({
   }, [fields]);
 
   return (
-    <>
-      <FormAccess role="manage-realm" onSubmit={handleSubmit(save)}>
-        <TableComposable
-          className="kc-attributes__table"
-          aria-label="Role attribute keys and values"
-          variant="compact"
-          borders={false}
-        >
-          <Thead>
-            <Tr>
-              <Th id="key" width={40}>
-                {columns[0]}
-              </Th>
-              <Th id="value" width={40}>
-                {columns[1]}
-              </Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {fields.map((attribute, rowIndex) => (
-              <Tr key={attribute.id}>
+    <FormAccess role="manage-realm" onSubmit={handleSubmit(save)}>
+      <TableComposable
+        className="kc-attributes__table"
+        aria-label="Role attribute keys and values"
+        variant="compact"
+        borders={false}
+      >
+        <Thead>
+          <Tr>
+            <Th id="key" width={40}>
+              {columns[0]}
+            </Th>
+            <Th id="value" width={40}>
+              {columns[1]}
+            </Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {fields.map((attribute, rowIndex) => (
+            <Tr key={attribute.id}>
+              <Td
+                key={`${attribute.id}-key`}
+                id={`text-input-${rowIndex}-key`}
+                dataLabel={columns[0]}
+              >
+                <TextInput
+                  name={`attributes[${rowIndex}].key`}
+                  ref={register()}
+                  aria-label="key-input"
+                  defaultValue={attribute.key}
+                  validated={
+                    errors.attributes?.[rowIndex] ? "error" : "default"
+                  }
+                />
+              </Td>
+              <Td
+                key={`${attribute}-value`}
+                id={`text-input-${rowIndex}-value`}
+                dataLabel={columns[1]}
+              >
+                <TextInput
+                  name={`attributes[${rowIndex}].value`}
+                  ref={register()}
+                  aria-label="value-input"
+                  defaultValue={attribute.value}
+                />
+              </Td>
+              {rowIndex !== fields.length - 1 && fields.length - 1 !== 0 && (
                 <Td
-                  key={`${attribute.id}-key`}
-                  id={`text-input-${rowIndex}-key`}
-                  dataLabel={columns[0]}
+                  key="minus-button"
+                  id={`kc-minus-button-${rowIndex}`}
+                  dataLabel={columns[2]}
                 >
-                  <TextInput
-                    name={`attributes[${rowIndex}].key`}
-                    ref={register()}
-                    aria-label="key-input"
-                    defaultValue={attribute.key}
-                    validated={
-                      errors.attributes?.[rowIndex] ? "error" : "default"
-                    }
-                  />
-                </Td>
-                <Td
-                  key={`${attribute}-value`}
-                  id={`text-input-${rowIndex}-value`}
-                  dataLabel={columns[1]}
-                >
-                  <TextInput
-                    name={`attributes[${rowIndex}].value`}
-                    ref={register()}
-                    aria-label="value-input"
-                    defaultValue={attribute.value}
-                  />
-                </Td>
-                {rowIndex !== fields.length - 1 && fields.length - 1 !== 0 && (
-                  <Td
-                    key="minus-button"
-                    id={`kc-minus-button-${rowIndex}`}
-                    dataLabel={columns[2]}
+                  <Button
+                    id={`minus-button-${rowIndex}`}
+                    aria-label={`remove ${attribute.key} with value ${attribute.value} `}
+                    variant="link"
+                    className="kc-attributes__minus-icon"
+                    onClick={() => remove(rowIndex)}
                   >
+                    <MinusCircleIcon />
+                  </Button>
+                </Td>
+              )}
+              {rowIndex === fields.length - 1 && (
+                <Td key="add-button" id="add-button" dataLabel={columns[2]}>
+                  {fields.length !== 1 && (
                     <Button
                       id={`minus-button-${rowIndex}`}
                       aria-label={`remove ${attribute.key} with value ${attribute.value} `}
@@ -138,55 +151,36 @@ export const AttributesForm = ({
                     >
                       <MinusCircleIcon />
                     </Button>
-                  </Td>
-                )}
-                {rowIndex === fields.length - 1 && (
-                  <Td key="add-button" id="add-button" dataLabel={columns[2]}>
-                    {fields.length !== 1 && (
-                      <Button
-                        id={`minus-button-${rowIndex}`}
-                        aria-label={`remove ${attribute.key} with value ${attribute.value} `}
-                        variant="link"
-                        className="kc-attributes__minus-icon"
-                        onClick={() => remove(rowIndex)}
-                      >
-                        <MinusCircleIcon />
-                      </Button>
-                    )}
-                  </Td>
-                )}
-              </Tr>
-            ))}
-            <Tr>
-              <Td>
-                <Button
-                  aria-label={t("roles:addAttributeText")}
-                  id="plus-icon"
-                  variant="link"
-                  className="kc-attributes__plus-icon"
-                  onClick={() => append({ key: "", value: "" })}
-                  icon={<PlusCircleIcon />}
-                  isDisabled={!watchLast}
-                >
-                  {t("roles:addAttributeText")}
-                </Button>
-              </Td>
+                  )}
+                </Td>
+              )}
             </Tr>
-          </Tbody>
-        </TableComposable>
-        <ActionGroup className="kc-attributes__action-group">
-          <Button variant="primary" type="submit" isDisabled={!watchLast}>
-            {t("common:save")}
-          </Button>
-          <Button
-            onClick={reset}
-            variant="link"
-            isDisabled={!formState.isDirty}
-          >
-            {t("common:revert")}
-          </Button>
-        </ActionGroup>
-      </FormAccess>
-    </>
+          ))}
+          <Tr>
+            <Td>
+              <Button
+                aria-label={t("roles:addAttributeText")}
+                id="plus-icon"
+                variant="link"
+                className="kc-attributes__plus-icon"
+                onClick={() => append({ key: "", value: "" })}
+                icon={<PlusCircleIcon />}
+                isDisabled={!watchLast}
+              >
+                {t("roles:addAttributeText")}
+              </Button>
+            </Td>
+          </Tr>
+        </Tbody>
+      </TableComposable>
+      <ActionGroup className="kc-attributes__action-group">
+        <Button variant="primary" type="submit" isDisabled={!watchLast}>
+          {t("common:save")}
+        </Button>
+        <Button onClick={reset} variant="link" isDisabled={!formState.isDirty}>
+          {t("common:revert")}
+        </Button>
+      </ActionGroup>
+    </FormAccess>
   );
 };
diff --git a/src/components/bread-crumb/GroupBreadCrumbs.tsx b/src/components/bread-crumb/GroupBreadCrumbs.tsx
index 1791439942..217f83a6c5 100644
--- a/src/components/bread-crumb/GroupBreadCrumbs.tsx
+++ b/src/components/bread-crumb/GroupBreadCrumbs.tsx
@@ -22,37 +22,31 @@ export const GroupBreadCrumbs = () => {
     });
   }, [history]);
 
-  return (
-    <>
-      {subGroups.length !== 0 && (
-        <Breadcrumb>
-          <BreadcrumbItem key="home">
-            <Link to={`/${realm}/groups`}>{t("groups")}</Link>
-          </BreadcrumbItem>
-          {subGroups.map((group, i) => {
-            const isLastGroup = i === subGroups.length - 1;
-            return (
-              <BreadcrumbItem key={group.id} isActive={isLastGroup}>
-                {!isLastGroup && (
-                  <Link
-                    to={location.pathname.substr(
-                      0,
-                      location.pathname.indexOf(group.id!) + group.id!.length
-                    )}
-                    onClick={() => remove(group)}
-                  >
-                    {group.name}
-                  </Link>
+  return subGroups.length !== 0 ? (
+    <Breadcrumb>
+      <BreadcrumbItem key="home">
+        <Link to={`/${realm}/groups`}>{t("groups")}</Link>
+      </BreadcrumbItem>
+      {subGroups.map((group, i) => {
+        const isLastGroup = i === subGroups.length - 1;
+        return (
+          <BreadcrumbItem key={group.id} isActive={isLastGroup}>
+            {!isLastGroup && (
+              <Link
+                to={location.pathname.substr(
+                  0,
+                  location.pathname.indexOf(group.id!) + group.id!.length
                 )}
-                {isLastGroup &&
-                  (group.id === "search"
-                    ? group.name
-                    : t("groups:groupDetails"))}
-              </BreadcrumbItem>
-            );
-          })}
-        </Breadcrumb>
-      )}
-    </>
-  );
+                onClick={() => remove(group)}
+              >
+                {group.name}
+              </Link>
+            )}
+            {isLastGroup &&
+              (group.id === "search" ? group.name : t("groups:groupDetails"))}
+          </BreadcrumbItem>
+        );
+      })}
+    </Breadcrumb>
+  ) : null;
 };
diff --git a/src/components/bread-crumb/PageBreadCrumbs.tsx b/src/components/bread-crumb/PageBreadCrumbs.tsx
index 70d13c2f5b..54f33a59b6 100644
--- a/src/components/bread-crumb/PageBreadCrumbs.tsx
+++ b/src/components/bread-crumb/PageBreadCrumbs.tsx
@@ -37,7 +37,7 @@ export const PageBreadCrumbs = () => {
           {crumbs.map(({ match, breadcrumb: crumb }, i) => (
             <BreadcrumbItem key={i} isActive={crumbs.length - 1 === i}>
               {crumbs.length - 1 !== i && <Link to={match.url}>{crumb}</Link>}
-              {crumbs.length - 1 === i && <>{crumb}</>}
+              {crumbs.length - 1 === i && crumb}
             </BreadcrumbItem>
           ))}
         </Breadcrumb>
diff --git a/src/components/error/ErrorRenderer.tsx b/src/components/error/ErrorRenderer.tsx
index 5d67848039..5fb2f47565 100644
--- a/src/components/error/ErrorRenderer.tsx
+++ b/src/components/error/ErrorRenderer.tsx
@@ -24,11 +24,9 @@ export const ErrorRenderer = ({ error, resetErrorBoundary }: FallbackProps) => {
           />
         }
         actionLinks={
-          <React.Fragment>
-            <AlertActionLink onClick={resetErrorBoundary}>
-              {t("retry")}
-            </AlertActionLink>
-          </React.Fragment>
+          <AlertActionLink onClick={resetErrorBoundary}>
+            {t("retry")}
+          </AlertActionLink>
         }
       ></Alert>
     </PageSection>
diff --git a/src/components/group/GroupPickerDialog.tsx b/src/components/group/GroupPickerDialog.tsx
index de15a82e1f..7154551def 100644
--- a/src/components/group/GroupPickerDialog.tsx
+++ b/src/components/group/GroupPickerDialog.tsx
@@ -192,7 +192,7 @@ export const GroupPickerDialog = ({
                   {group.name}
                 </Button>
               )}
-              {navigation.length - 1 === i && <>{group.name}</>}
+              {navigation.length - 1 === i && group.name}
             </BreadcrumbItem>
           ))}
         </Breadcrumb>
@@ -255,7 +255,7 @@ export const GroupPickerDialog = ({
                   dataListCells={[
                     <DataListCell key={`name-${group.id}`}>
                       {filter === "" ? (
-                        <>{group.name}</>
+                        group.name
                       ) : (
                         <GroupPath group={findSubGroup(group, filter)} />
                       )}
diff --git a/src/components/help-enabler/HelpItem.tsx b/src/components/help-enabler/HelpItem.tsx
index bc8383ca86..1e6df18d91 100644
--- a/src/components/help-enabler/HelpItem.tsx
+++ b/src/components/help-enabler/HelpItem.tsx
@@ -23,30 +23,24 @@ export const HelpItem = ({
 }: HelpItemProps) => {
   const { t } = useTranslation();
   const { enabled } = useHelp();
-  return (
-    <>
-      {enabled && (
-        <Popover
-          bodyContent={
-            isValidElement(helpText) ? helpText : t(helpText as string)
-          }
-        >
-          <>
-            {!unWrap && (
-              <button
-                id={id}
-                aria-label={t(`helpLabel`, { label: forLabel })}
-                onClick={(e) => e.preventDefault()}
-                aria-describedby={forID}
-                className="pf-c-form__group-label-help"
-              >
-                <HelpIcon noVerticalAlign={noVerticalAlign} />
-              </button>
-            )}
-            {unWrap && <HelpIcon noVerticalAlign={noVerticalAlign} />}
-          </>
-        </Popover>
-      )}
-    </>
-  );
+  return enabled ? (
+    <Popover
+      bodyContent={isValidElement(helpText) ? helpText : t(helpText as string)}
+    >
+      <>
+        {!unWrap && (
+          <button
+            id={id}
+            aria-label={t(`helpLabel`, { label: forLabel })}
+            onClick={(e) => e.preventDefault()}
+            aria-describedby={forID}
+            className="pf-c-form__group-label-help"
+          >
+            <HelpIcon noVerticalAlign={noVerticalAlign} />
+          </button>
+        )}
+        {unWrap && <HelpIcon noVerticalAlign={noVerticalAlign} />}
+      </>
+    </Popover>
+  ) : null;
 };
diff --git a/src/components/list-empty-state/ListEmptyState.tsx b/src/components/list-empty-state/ListEmptyState.tsx
index d13337813f..ef7ea17b74 100644
--- a/src/components/list-empty-state/ListEmptyState.tsx
+++ b/src/components/list-empty-state/ListEmptyState.tsx
@@ -40,42 +40,40 @@ export const ListEmptyState = ({
   icon,
 }: ListEmptyStateProps) => {
   return (
-    <>
-      <EmptyState data-testid="empty-state" variant="large">
-        {hasIcon && isSearchVariant ? (
-          <EmptyStateIcon icon={SearchIcon} />
-        ) : (
-          hasIcon && <EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />
-        )}
-        <Title headingLevel="h1" size="lg">
-          {message}
-        </Title>
-        <EmptyStateBody>{instructions}</EmptyStateBody>
-        {primaryActionText && (
-          <Button
-            data-testid={`${message
-              .replace(/\W+/g, "-")
-              .toLowerCase()}-empty-action`}
-            variant="primary"
-            onClick={onPrimaryAction}
-          >
-            {primaryActionText}
-          </Button>
-        )}
-        {secondaryActions && (
-          <EmptyStateSecondaryActions>
-            {secondaryActions.map((action) => (
-              <Button
-                key={action.text}
-                variant={action.type || ButtonVariant.secondary}
-                onClick={action.onClick}
-              >
-                {action.text}
-              </Button>
-            ))}
-          </EmptyStateSecondaryActions>
-        )}
-      </EmptyState>
-    </>
+    <EmptyState data-testid="empty-state" variant="large">
+      {hasIcon && isSearchVariant ? (
+        <EmptyStateIcon icon={SearchIcon} />
+      ) : (
+        hasIcon && <EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />
+      )}
+      <Title headingLevel="h1" size="lg">
+        {message}
+      </Title>
+      <EmptyStateBody>{instructions}</EmptyStateBody>
+      {primaryActionText && (
+        <Button
+          data-testid={`${message
+            .replace(/\W+/g, "-")
+            .toLowerCase()}-empty-action`}
+          variant="primary"
+          onClick={onPrimaryAction}
+        >
+          {primaryActionText}
+        </Button>
+      )}
+      {secondaryActions && (
+        <EmptyStateSecondaryActions>
+          {secondaryActions.map((action) => (
+            <Button
+              key={action.text}
+              variant={action.type || ButtonVariant.secondary}
+              onClick={action.onClick}
+            >
+              {action.text}
+            </Button>
+          ))}
+        </EmptyStateSecondaryActions>
+      )}
+    </EmptyState>
   );
 };
diff --git a/src/components/table-toolbar/KeycloakDataTable.tsx b/src/components/table-toolbar/KeycloakDataTable.tsx
index 10c4549340..22fb82390e 100644
--- a/src/components/table-toolbar/KeycloakDataTable.tsx
+++ b/src/components/table-toolbar/KeycloakDataTable.tsx
@@ -427,12 +427,7 @@ export function KeycloakDataTable<T>({
           {loading && <Loading />}
         </PaginatingTableToolbar>
       )}
-      <>
-        {!loading &&
-          (!data || data?.length === 0) &&
-          search === "" &&
-          emptyState}
-      </>
+      {!loading && (!data || data?.length === 0) && search === "" && emptyState}
     </>
   );
 }
diff --git a/src/components/table-toolbar/PaginatingTableToolbar.tsx b/src/components/table-toolbar/PaginatingTableToolbar.tsx
index 4746072588..5d191aa8a1 100644
--- a/src/components/table-toolbar/PaginatingTableToolbar.tsx
+++ b/src/components/table-toolbar/PaginatingTableToolbar.tsx
@@ -73,7 +73,7 @@ export const PaginatingTableToolbar: FunctionComponent<TableToolbarProps> = ({
       }
       subToolbar={subToolbar}
       toolbarItemFooter={
-        count !== 0 ? <ToolbarItem>{pagination("bottom")}</ToolbarItem> : <></>
+        count !== 0 ? <ToolbarItem>{pagination("bottom")}</ToolbarItem> : null
       }
       inputGroupName={inputGroupName}
       inputGroupPlaceholder={inputGroupPlaceholder}
diff --git a/src/components/table-toolbar/TableToolbar.tsx b/src/components/table-toolbar/TableToolbar.tsx
index a93756808b..daa9289c57 100644
--- a/src/components/table-toolbar/TableToolbar.tsx
+++ b/src/components/table-toolbar/TableToolbar.tsx
@@ -1,6 +1,5 @@
 import React, {
   FormEvent,
-  Fragment,
   FunctionComponent,
   ReactNode,
   useState,
@@ -74,35 +73,33 @@ export const TableToolbar: FunctionComponent<TableToolbarProps> = ({
     <>
       <Toolbar>
         <ToolbarContent>
-          <Fragment>
-            {inputGroupName && (
-              <ToolbarItem>
-                <InputGroup>
-                  {searchTypeComponent}
-                  {inputGroupPlaceholder && (
-                    <>
-                      <TextInput
-                        name={inputGroupName}
-                        id={inputGroupName}
-                        type="search"
-                        aria-label={t("search")}
-                        placeholder={inputGroupPlaceholder}
-                        onChange={handleInputChange}
-                        onKeyDown={handleKeyDown}
-                      />
-                      <Button
-                        variant={ButtonVariant.control}
-                        aria-label={t("search")}
-                        onClick={onSearch}
-                      >
-                        <SearchIcon />
-                      </Button>
-                    </>
-                  )}
-                </InputGroup>
-              </ToolbarItem>
-            )}
-          </Fragment>
+          {inputGroupName && (
+            <ToolbarItem>
+              <InputGroup>
+                {searchTypeComponent}
+                {inputGroupPlaceholder && (
+                  <>
+                    <TextInput
+                      name={inputGroupName}
+                      id={inputGroupName}
+                      type="search"
+                      aria-label={t("search")}
+                      placeholder={inputGroupPlaceholder}
+                      onChange={handleInputChange}
+                      onKeyDown={handleKeyDown}
+                    />
+                    <Button
+                      variant={ButtonVariant.control}
+                      aria-label={t("search")}
+                      onClick={onSearch}
+                    >
+                      <SearchIcon />
+                    </Button>
+                  </>
+                )}
+              </InputGroup>
+            </ToolbarItem>
+          )}
           {toolbarItem}
         </ToolbarContent>
       </Toolbar>
diff --git a/src/components/view-header/ViewHeader.tsx b/src/components/view-header/ViewHeader.tsx
index a0c4c33713..2e1b078eb2 100644
--- a/src/components/view-header/ViewHeader.tsx
+++ b/src/components/view-header/ViewHeader.tsx
@@ -101,7 +101,7 @@ export const ViewHeader = ({
                           </Badge>{" "}
                         </Fragment>
                       )}
-                      {isValidElement(badge.text) && <>{badge.text}</>}{" "}
+                      {isValidElement(badge.text) && badge.text}{" "}
                     </Fragment>
                   ))}
                 </LevelItem>
diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx
index 80bff5a128..7b9018ea3b 100644
--- a/src/dashboard/Dashboard.tsx
+++ b/src/dashboard/Dashboard.tsx
@@ -125,14 +125,10 @@ const Dashboard = () => {
                             {feature}{" "}
                             {isExperimentalFeature(feature) ? (
                               <Label color="orange">{t("experimental")}</Label>
-                            ) : (
-                              <></>
-                            )}
+                            ) : null}
                             {isPreviewFeature(feature) ? (
                               <Label color="blue">{t("preview")}</Label>
-                            ) : (
-                              <></>
-                            )}
+                            ) : null}
                           </ListItem>
                         ))}
                       </List>
diff --git a/src/events/AdminEvents.tsx b/src/events/AdminEvents.tsx
index e98405993d..e327684f31 100644
--- a/src/events/AdminEvents.tsx
+++ b/src/events/AdminEvents.tsx
@@ -137,165 +137,161 @@ export const AdminEvents = () => {
   };
 
   const LinkResource = (row: AdminEventRepresentation) => (
-    <>
-      <Truncate text={row.resourcePath}>
-        {(text) => (
-          <>
-            {row.resourceType !== "COMPONENT" && (
-              <Link
-                to={`/${realm}/${row.resourcePath}${
-                  row.resourceType !== "GROUP" ? "/settings" : ""
-                }`}
-              >
-                {text}
-              </Link>
-            )}
-            {row.resourceType === "COMPONENT" && <span>{text}</span>}
-          </>
-        )}
-      </Truncate>
-    </>
+    <Truncate text={row.resourcePath}>
+      {(text) => (
+        <>
+          {row.resourceType !== "COMPONENT" && (
+            <Link
+              to={`/${realm}/${row.resourcePath}${
+                row.resourceType !== "GROUP" ? "/settings" : ""
+              }`}
+            >
+              {text}
+            </Link>
+          )}
+          {row.resourceType === "COMPONENT" && <span>{text}</span>}
+        </>
+      )}
+    </Truncate>
   );
 
   const adminEventSearchFormDisplay = () => {
     return (
-      <>
-        <Flex
-          direction={{ default: "column" }}
-          spaceItems={{ default: "spaceItemsNone" }}
-        >
-          <FlexItem>
-            <Dropdown
-              id="admin-events-search-select"
-              data-testid="AdminEventsSearchSelector"
-              className="pf-u-ml-md"
-              toggle={
-                <DropdownToggle
-                  data-testid="adminEventsSearchSelectorToggle"
-                  onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
-                  className="keycloak__events_search_selector_dropdown__toggle"
-                >
-                  {t("searchForAdminEvent")}
-                </DropdownToggle>
-              }
-              isOpen={searchDropdownOpen}
-            >
-              <Form
-                isHorizontal
-                className="keycloak__admin_events_search__form"
-                data-testid="searchForm"
+      <Flex
+        direction={{ default: "column" }}
+        spaceItems={{ default: "spaceItemsNone" }}
+      >
+        <FlexItem>
+          <Dropdown
+            id="admin-events-search-select"
+            data-testid="AdminEventsSearchSelector"
+            className="pf-u-ml-md"
+            toggle={
+              <DropdownToggle
+                data-testid="adminEventsSearchSelectorToggle"
+                onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
+                className="keycloak__events_search_selector_dropdown__toggle"
               >
-                <FormGroup
-                  label={t("resourceType")}
-                  fieldId="kc-resourceType"
-                  className="keycloak__events_search__form_multiline_label"
-                >
-                  <Select
-                    variant={SelectVariant.single}
-                    onToggle={(isOpen) => setSelectOpen(isOpen)}
-                    isOpen={selectOpen}
-                  ></Select>
-                </FormGroup>
-                <FormGroup
-                  label={t("operationType")}
-                  fieldId="kc-operationType"
-                  className="keycloak__events_search__form_multiline_label"
-                >
-                  <Select
-                    variant={SelectVariant.single}
-                    onToggle={(isOpen) => setSelectOpen(isOpen)}
-                    isOpen={selectOpen}
-                  ></Select>
-                </FormGroup>
-                <FormGroup
-                  label={t("user")}
-                  fieldId="kc-user"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-user"
-                    name="user"
-                    data-testid="user-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("realm")}
-                  fieldId="kc-realm"
-                  className="keycloak__events_search__form_label"
-                >
-                  <Select
-                    variant={SelectVariant.single}
-                    onToggle={(isOpen) => setSelectOpen(isOpen)}
-                    isOpen={selectOpen}
-                  ></Select>
-                </FormGroup>
-                <FormGroup
-                  label={t("ipAddress")}
-                  fieldId="kc-ipAddress"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-ipAddress"
-                    name="ipAddress"
-                    data-testid="ipAddress-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("dateFrom")}
-                  fieldId="kc-dateFrom"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-dateFrom"
-                    name="dateFrom"
-                    className="pf-c-form-control pf-m-icon pf-m-calendar"
-                    placeholder="yyyy-MM-dd"
-                    data-testid="dateFrom-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("dateTo")}
-                  fieldId="kc-dateTo"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-dateTo"
-                    name="dateTo"
-                    className="pf-c-form-control pf-m-icon pf-m-calendar"
-                    placeholder="yyyy-MM-dd"
-                    data-testid="dateTo-searchField"
-                  />
-                </FormGroup>
-                <ActionGroup>
-                  <Button
-                    className="keycloak__admin_events_search__form_btn"
-                    variant={"primary"}
-                    data-testid="search-events-btn"
-                    isDisabled={!isDirty}
-                  >
-                    {t("searchAdminEventsBtn")}
-                  </Button>
-                </ActionGroup>
-              </Form>
-            </Dropdown>
-            <Button
-              className="pf-u-ml-md"
-              onClick={refresh}
-              data-testid="refresh-btn"
+                {t("searchForAdminEvent")}
+              </DropdownToggle>
+            }
+            isOpen={searchDropdownOpen}
+          >
+            <Form
+              isHorizontal
+              className="keycloak__admin_events_search__form"
+              data-testid="searchForm"
             >
-              {t("refresh")}
-            </Button>
-          </FlexItem>
-        </Flex>
-      </>
+              <FormGroup
+                label={t("resourceType")}
+                fieldId="kc-resourceType"
+                className="keycloak__events_search__form_multiline_label"
+              >
+                <Select
+                  variant={SelectVariant.single}
+                  onToggle={(isOpen) => setSelectOpen(isOpen)}
+                  isOpen={selectOpen}
+                ></Select>
+              </FormGroup>
+              <FormGroup
+                label={t("operationType")}
+                fieldId="kc-operationType"
+                className="keycloak__events_search__form_multiline_label"
+              >
+                <Select
+                  variant={SelectVariant.single}
+                  onToggle={(isOpen) => setSelectOpen(isOpen)}
+                  isOpen={selectOpen}
+                ></Select>
+              </FormGroup>
+              <FormGroup
+                label={t("user")}
+                fieldId="kc-user"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-user"
+                  name="user"
+                  data-testid="user-searchField"
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("realm")}
+                fieldId="kc-realm"
+                className="keycloak__events_search__form_label"
+              >
+                <Select
+                  variant={SelectVariant.single}
+                  onToggle={(isOpen) => setSelectOpen(isOpen)}
+                  isOpen={selectOpen}
+                ></Select>
+              </FormGroup>
+              <FormGroup
+                label={t("ipAddress")}
+                fieldId="kc-ipAddress"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-ipAddress"
+                  name="ipAddress"
+                  data-testid="ipAddress-searchField"
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("dateFrom")}
+                fieldId="kc-dateFrom"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-dateFrom"
+                  name="dateFrom"
+                  className="pf-c-form-control pf-m-icon pf-m-calendar"
+                  placeholder="yyyy-MM-dd"
+                  data-testid="dateFrom-searchField"
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("dateTo")}
+                fieldId="kc-dateTo"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-dateTo"
+                  name="dateTo"
+                  className="pf-c-form-control pf-m-icon pf-m-calendar"
+                  placeholder="yyyy-MM-dd"
+                  data-testid="dateTo-searchField"
+                />
+              </FormGroup>
+              <ActionGroup>
+                <Button
+                  className="keycloak__admin_events_search__form_btn"
+                  variant={"primary"}
+                  data-testid="search-events-btn"
+                  isDisabled={!isDirty}
+                >
+                  {t("searchAdminEventsBtn")}
+                </Button>
+              </ActionGroup>
+            </Form>
+          </Dropdown>
+          <Button
+            className="pf-u-ml-md"
+            onClick={refresh}
+            data-testid="refresh-btn"
+          >
+            {t("refresh")}
+          </Button>
+        </FlexItem>
+      </Flex>
     );
   };
 
diff --git a/src/groups/GroupTable.tsx b/src/groups/GroupTable.tsx
index ce46ff5237..c35ecb94f6 100644
--- a/src/groups/GroupTable.tsx
+++ b/src/groups/GroupTable.tsx
@@ -77,17 +77,15 @@ export const GroupTable = () => {
   };
 
   const GroupNameCell = (group: GroupRepresentation) => (
-    <>
-      <Link
-        key={group.id}
-        to={`${location.pathname}/${group.id}`}
-        onClick={() => {
-          setSubGroups([...subGroups, group]);
-        }}
-      >
-        {group.name}
-      </Link>
-    </>
+    <Link
+      key={group.id}
+      to={`${location.pathname}/${group.id}`}
+      onClick={() => {
+        setSubGroups([...subGroups, group]);
+      }}
+    >
+      {group.name}
+    </Link>
   );
 
   const handleModalToggle = () => {
diff --git a/src/groups/Members.tsx b/src/groups/Members.tsx
index e9c69c1ff7..2ef80c396b 100644
--- a/src/groups/Members.tsx
+++ b/src/groups/Members.tsx
@@ -99,11 +99,9 @@ export const Members = () => {
   };
 
   const UserDetailLink = (user: MembersOf) => (
-    <>
-      <Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
-        {user.username}
-      </Link>
-    </>
+    <Link key={user.id} to={toUser({ realm, id: user.id!, tab: "settings" })}>
+      {user.username}
+    </Link>
   );
   return (
     <>
diff --git a/src/groups/SearchGroups.tsx b/src/groups/SearchGroups.tsx
index a16a8251e6..d4517e79e3 100644
--- a/src/groups/SearchGroups.tsx
+++ b/src/groups/SearchGroups.tsx
@@ -62,17 +62,15 @@ export const SearchGroups = () => {
   };
 
   const GroupNameCell = (group: SearchGroup) => (
-    <>
-      <Link
-        key={group.id}
-        to={`/${realm}/groups/search/${group.link}`}
-        onClick={() =>
-          setSubGroups([{ name: t("searchGroups"), id: "search" }, group])
-        }
-      >
-        {group.name}
-      </Link>
-    </>
+    <Link
+      key={group.id}
+      to={`/${realm}/groups/search/${group.link}`}
+      onClick={() =>
+        setSubGroups([{ name: t("searchGroups"), id: "search" }, group])
+      }
+    >
+      {group.name}
+    </Link>
   );
 
   const flatten = (
diff --git a/src/identity-providers/IdentityProvidersSection.tsx b/src/identity-providers/IdentityProvidersSection.tsx
index d8b864e774..d44ead3265 100644
--- a/src/identity-providers/IdentityProvidersSection.tsx
+++ b/src/identity-providers/IdentityProvidersSection.tsx
@@ -70,23 +70,21 @@ export const IdentityProvidersSection = () => {
   const loader = () => Promise.resolve(_.sortBy(providers, "alias"));
 
   const DetailLink = (identityProvider: IdentityProviderRepresentation) => (
-    <>
-      <Link
-        key={identityProvider.providerId}
-        to={`/${realm}/identity-providers/${identityProvider.providerId}/settings`}
-      >
-        {identityProvider.alias}
-        {!identityProvider.enabled && (
-          <Badge
-            key={`${identityProvider.providerId}-disabled`}
-            isRead
-            className="pf-u-ml-sm"
-          >
-            {t("common:disabled")}
-          </Badge>
-        )}
-      </Link>
-    </>
+    <Link
+      key={identityProvider.providerId}
+      to={`/${realm}/identity-providers/${identityProvider.providerId}/settings`}
+    >
+      {identityProvider.alias}
+      {!identityProvider.enabled && (
+        <Badge
+          key={`${identityProvider.providerId}-disabled`}
+          isRead
+          className="pf-u-ml-sm"
+        >
+          {t("common:disabled")}
+        </Badge>
+      )}
+    </Link>
   );
 
   const navigateToCreate = (providerId: string) =>
diff --git a/src/identity-providers/add/AdvancedSettings.tsx b/src/identity-providers/add/AdvancedSettings.tsx
index 4f43393845..bc01dc9243 100644
--- a/src/identity-providers/add/AdvancedSettings.tsx
+++ b/src/identity-providers/add/AdvancedSettings.tsx
@@ -64,6 +64,8 @@ const LoginFlow = ({
             aria-label={t(label)}
             isOpen={open}
           >
+            {/* The type for the children of Select are incorrect, so we need a fragment here. */}
+            {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
             <>
               {defaultValue === "" && (
                 <SelectOption key="empty" value={defaultValue}>
@@ -71,6 +73,8 @@ const LoginFlow = ({
                 </SelectOption>
               )}
             </>
+            {/* The type for the children of Select are incorrect, so we need a fragment here. */}
+            {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
             <>
               {flows?.map((option) => (
                 <SelectOption
diff --git a/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx b/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx
index 360661494e..bfea91f209 100644
--- a/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx
+++ b/src/identity-providers/add/ExtendedNonDiscoverySettings.tsx
@@ -32,95 +32,90 @@ export const ExtendedNonDiscoverySettings = () => {
   const [promptOpen, setPromptOpen] = useState(false);
 
   return (
-    <>
-      <ExpandableSection
-        toggleText={t("advanced")}
-        onToggle={() => setIsExpanded(!isExpanded)}
-        isExpanded={isExpanded}
-      >
-        <Form isHorizontal>
-          <SwitchField label="passLoginHint" field="config.loginHint" />
-          <SwitchField label="passCurrentLocale" field="config.uiLocales" />
-          <SwitchField
-            field="config.backchannelSupported"
-            label="backchannelLogout"
+    <ExpandableSection
+      toggleText={t("advanced")}
+      onToggle={() => setIsExpanded(!isExpanded)}
+      isExpanded={isExpanded}
+    >
+      <Form isHorizontal>
+        <SwitchField label="passLoginHint" field="config.loginHint" />
+        <SwitchField label="passCurrentLocale" field="config.uiLocales" />
+        <SwitchField
+          field="config.backchannelSupported"
+          label="backchannelLogout"
+        />
+        <SwitchField field="config.disableUserInfo" label="disableUserInfo" />
+        <TextField field="config.defaultScope" label="scopes" />
+        <FormGroupField label="prompt">
+          <Controller
+            name="config.prompt"
+            defaultValue={promptOptions[0]}
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="prompt"
+                required
+                onToggle={() => setPromptOpen(!promptOpen)}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setPromptOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+                aria-label={t("prompt")}
+                isOpen={promptOpen}
+              >
+                {promptOptions.map((option) => (
+                  <SelectOption
+                    selected={option === value}
+                    key={option}
+                    value={option}
+                  >
+                    {t(`prompts.${option}`)}
+                  </SelectOption>
+                ))}
+              </Select>
+            )}
           />
-          <SwitchField field="config.disableUserInfo" label="disableUserInfo" />
-          <TextField field="config.defaultScope" label="scopes" />
-          <FormGroupField label="prompt">
-            <Controller
-              name="config.prompt"
-              defaultValue={promptOptions[0]}
-              control={control}
-              render={({ onChange, value }) => (
-                <Select
-                  toggleId="prompt"
-                  required
-                  onToggle={() => setPromptOpen(!promptOpen)}
-                  onSelect={(_, value) => {
-                    onChange(value as string);
-                    setPromptOpen(false);
-                  }}
-                  selections={value}
-                  variant={SelectVariant.single}
-                  aria-label={t("prompt")}
-                  isOpen={promptOpen}
-                >
-                  {promptOptions.map((option) => (
-                    <SelectOption
-                      selected={option === value}
-                      key={option}
-                      value={option}
-                    >
-                      {t(`prompts.${option}`)}
-                    </SelectOption>
-                  ))}
-                </Select>
-              )}
+        </FormGroupField>
+        <SwitchField
+          field="config.acceptsPromptNoneForwardFromClient"
+          label="acceptsPromptNone"
+        />
+        <FormGroup
+          label={t("allowedClockSkew")}
+          labelIcon={
+            <HelpItem
+              helpText={"identity-providers-help:allowedClockSkew"}
+              forLabel={t("allowedClockSkew")}
+              forID="allowedClockSkew"
             />
-          </FormGroupField>
-          <SwitchField
-            field="config.acceptsPromptNoneForwardFromClient"
-            label="acceptsPromptNone"
-          />
-          <FormGroup
-            label={t("allowedClockSkew")}
-            labelIcon={
-              <HelpItem
-                helpText={"identity-providers-help:allowedClockSkew"}
-                forLabel={t("allowedClockSkew")}
-                forID="allowedClockSkew"
+          }
+          fieldId="allowedClockSkew"
+        >
+          <Controller
+            name="config.allowedClockSkew"
+            control={control}
+            defaultValue={0}
+            render={({ onChange, value }) => (
+              <NumberInput
+                value={value}
+                data-testid="allowedClockSkew"
+                onMinus={() => onChange(value - 1)}
+                onChange={onChange}
+                onPlus={() => onChange(value + 1)}
+                inputName="input"
+                inputAriaLabel={t("allowedClockSkew")}
+                minusBtnAriaLabel={t("common:minus")}
+                plusBtnAriaLabel={t("common:plus")}
+                min={0}
+                unit={t("common:times.seconds")}
               />
-            }
-            fieldId="allowedClockSkew"
-          >
-            <Controller
-              name="config.allowedClockSkew"
-              control={control}
-              defaultValue={0}
-              render={({ onChange, value }) => (
-                <NumberInput
-                  value={value}
-                  data-testid="allowedClockSkew"
-                  onMinus={() => onChange(value - 1)}
-                  onChange={onChange}
-                  onPlus={() => onChange(value + 1)}
-                  inputName="input"
-                  inputAriaLabel={t("allowedClockSkew")}
-                  minusBtnAriaLabel={t("common:minus")}
-                  plusBtnAriaLabel={t("common:plus")}
-                  min={0}
-                  unit={t("common:times.seconds")}
-                />
-              )}
-            />
-          </FormGroup>
-          <TextField
-            field="config.forwardParameters"
-            label="forwardParameters"
+            )}
           />
-        </Form>
-      </ExpandableSection>
-    </>
+        </FormGroup>
+        <TextField field="config.forwardParameters" label="forwardParameters" />
+      </Form>
+    </ExpandableSection>
   );
 };
diff --git a/src/identity-providers/icons/FontAwesomeIcon.tsx b/src/identity-providers/icons/FontAwesomeIcon.tsx
index d198edc6c8..0c887c110f 100644
--- a/src/identity-providers/icons/FontAwesomeIcon.tsx
+++ b/src/identity-providers/icons/FontAwesomeIcon.tsx
@@ -41,6 +41,6 @@ export const FontAwesomeIcon = ({ icon }: FontAwesomeIconProps) => {
         />
       );
     default:
-      return <></>;
+      return null;
   }
 };
diff --git a/src/realm-roles/AliasRendererComponent.tsx b/src/realm-roles/AliasRendererComponent.tsx
index fbe56cd5a1..52108a934b 100644
--- a/src/realm-roles/AliasRendererComponent.tsx
+++ b/src/realm-roles/AliasRendererComponent.tsx
@@ -28,7 +28,7 @@ export const AliasRendererComponent = ({
   }, [containerId]);
 
   if (filterType === "roles" || !containerName) {
-    return <>{name}</>;
+    return name;
   }
 
   if (filterType === "clients" || containerName) {
diff --git a/src/realm-roles/AssociatedRolesTab.tsx b/src/realm-roles/AssociatedRolesTab.tsx
index d8236f432f..b23bf8cbbc 100644
--- a/src/realm-roles/AssociatedRolesTab.tsx
+++ b/src/realm-roles/AssociatedRolesTab.tsx
@@ -134,9 +134,8 @@ export const AssociatedRolesTab = ({
     refresh();
   }, [additionalRoles, isInheritedHidden]);
 
-  const InheritedRoleName = (role: RoleRepresentation) => {
-    return <>{inheritanceMap.current[role.id!]}</>;
-  };
+  const InheritedRoleName = (role: RoleRepresentation) =>
+    inheritanceMap.current[role.id!];
 
   const AliasRenderer = ({ id, name, clientId }: Role) => {
     return (
@@ -201,98 +200,96 @@ export const AssociatedRolesTab = ({
 
   const goToCreate = () => history.push(`${url}/add-role`);
   return (
-    <>
-      <PageSection variant="light" padding={{ default: "noPadding" }}>
-        <DeleteConfirm />
-        <DeleteAssociatedRolesConfirm />
-        <AssociatedRolesModal
-          onConfirm={addComposites}
-          existingCompositeRoles={additionalRoles}
-          open={open}
-          toggleDialog={() => setOpen(!open)}
-        />
-        <KeycloakDataTable
-          key={key}
-          loader={loader}
-          ariaLabelKey="roles:roleList"
-          searchPlaceholderKey="roles:searchFor"
-          canSelectAll
-          onSelect={(rows) => {
-            setSelectedRows([...rows]);
-          }}
-          toolbarItem={
-            <>
-              <ToolbarItem>
-                <Checkbox
-                  label="Hide inherited roles"
-                  key="associated-roles-check"
-                  id="kc-hide-inherited-roles-checkbox"
-                  onChange={() => setIsInheritedHidden(!isInheritedHidden)}
-                  isChecked={isInheritedHidden}
-                />
-              </ToolbarItem>
-              <ToolbarItem>
-                <Button
-                  key="add-role-button"
-                  onClick={() => toggleModal()}
-                  data-testid="add-role-button"
-                >
-                  {t("addRole")}
-                </Button>
-              </ToolbarItem>
-              <ToolbarItem>
-                <Button
-                  variant="link"
-                  isDisabled={selectedRows.length === 0}
-                  key="remove-role-button"
-                  onClick={() => {
-                    toggleDeleteAssociatedRolesDialog();
-                  }}
-                >
-                  {t("removeRoles")}
-                </Button>
-              </ToolbarItem>
-            </>
-          }
-          actions={[
-            {
-              title: t("common:remove"),
-              onRowClick: (role) => {
-                setSelectedRows([role]);
-                toggleDeleteDialog();
-              },
+    <PageSection variant="light" padding={{ default: "noPadding" }}>
+      <DeleteConfirm />
+      <DeleteAssociatedRolesConfirm />
+      <AssociatedRolesModal
+        onConfirm={addComposites}
+        existingCompositeRoles={additionalRoles}
+        open={open}
+        toggleDialog={() => setOpen(!open)}
+      />
+      <KeycloakDataTable
+        key={key}
+        loader={loader}
+        ariaLabelKey="roles:roleList"
+        searchPlaceholderKey="roles:searchFor"
+        canSelectAll
+        onSelect={(rows) => {
+          setSelectedRows([...rows]);
+        }}
+        toolbarItem={
+          <>
+            <ToolbarItem>
+              <Checkbox
+                label="Hide inherited roles"
+                key="associated-roles-check"
+                id="kc-hide-inherited-roles-checkbox"
+                onChange={() => setIsInheritedHidden(!isInheritedHidden)}
+                isChecked={isInheritedHidden}
+              />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button
+                key="add-role-button"
+                onClick={() => toggleModal()}
+                data-testid="add-role-button"
+              >
+                {t("addRole")}
+              </Button>
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button
+                variant="link"
+                isDisabled={selectedRows.length === 0}
+                key="remove-role-button"
+                onClick={() => {
+                  toggleDeleteAssociatedRolesDialog();
+                }}
+              >
+                {t("removeRoles")}
+              </Button>
+            </ToolbarItem>
+          </>
+        }
+        actions={[
+          {
+            title: t("common:remove"),
+            onRowClick: (role) => {
+              setSelectedRows([role]);
+              toggleDeleteDialog();
             },
-          ]}
-          columns={[
-            {
-              name: "name",
-              displayKey: "roles:roleName",
-              cellRenderer: AliasRenderer,
-              cellFormatters: [emptyFormatter()],
-            },
-            {
-              name: "containerId",
-              displayKey: "roles:inheritedFrom",
-              cellRenderer: InheritedRoleName,
-              cellFormatters: [emptyFormatter()],
-            },
-            {
-              name: "description",
-              displayKey: "common:description",
-              cellFormatters: [emptyFormatter()],
-            },
-          ]}
-          emptyState={
-            <ListEmptyState
-              hasIcon={true}
-              message={t("noRoles")}
-              instructions={t("noRolesInstructions")}
-              primaryActionText={t("createRole")}
-              onPrimaryAction={goToCreate}
-            />
-          }
-        />
-      </PageSection>
-    </>
+          },
+        ]}
+        columns={[
+          {
+            name: "name",
+            displayKey: "roles:roleName",
+            cellRenderer: AliasRenderer,
+            cellFormatters: [emptyFormatter()],
+          },
+          {
+            name: "containerId",
+            displayKey: "roles:inheritedFrom",
+            cellRenderer: InheritedRoleName,
+            cellFormatters: [emptyFormatter()],
+          },
+          {
+            name: "description",
+            displayKey: "common:description",
+            cellFormatters: [emptyFormatter()],
+          },
+        ]}
+        emptyState={
+          <ListEmptyState
+            hasIcon={true}
+            message={t("noRoles")}
+            instructions={t("noRolesInstructions")}
+            primaryActionText={t("createRole")}
+            onPrimaryAction={goToCreate}
+          />
+        }
+      />
+    </PageSection>
   );
 };
diff --git a/src/realm-roles/RoleAttributes.tsx b/src/realm-roles/RoleAttributes.tsx
index c6dba5fd1c..82f76c6d9c 100644
--- a/src/realm-roles/RoleAttributes.tsx
+++ b/src/realm-roles/RoleAttributes.tsx
@@ -45,61 +45,74 @@ export const RoleAttributes = ({
   const watchFirstKey = watch("attributes[0].key", "");
 
   return (
-    <>
-      <FormAccess role="manage-realm">
-        <TableComposable
-          className="kc-role-attributes__table"
-          aria-label="Role attribute keys and values"
-          variant="compact"
-          borders={false}
-        >
-          <Thead>
-            <Tr>
-              <Th id="key" width={40}>
-                {columns[0]}
-              </Th>
-              <Th id="value" width={40}>
-                {columns[1]}
-              </Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {fields.map((attribute, rowIndex) => (
-              <Tr key={attribute.id}>
+    <FormAccess role="manage-realm">
+      <TableComposable
+        className="kc-role-attributes__table"
+        aria-label="Role attribute keys and values"
+        variant="compact"
+        borders={false}
+      >
+        <Thead>
+          <Tr>
+            <Th id="key" width={40}>
+              {columns[0]}
+            </Th>
+            <Th id="value" width={40}>
+              {columns[1]}
+            </Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {fields.map((attribute, rowIndex) => (
+            <Tr key={attribute.id}>
+              <Td
+                key={`${attribute.id}-key`}
+                id={`text-input-${rowIndex}-key`}
+                dataLabel={columns[0]}
+              >
+                <TextInput
+                  name={`attributes[${rowIndex}].key`}
+                  ref={register()}
+                  aria-label="key-input"
+                  defaultValue={attribute.key}
+                  validated={
+                    errors.attributes?.[rowIndex] ? "error" : "default"
+                  }
+                />
+              </Td>
+              <Td
+                key={`${attribute}-value`}
+                id={`text-input-${rowIndex}-value`}
+                dataLabel={columns[1]}
+              >
+                <TextInput
+                  name={`attributes[${rowIndex}].value`}
+                  ref={register()}
+                  aria-label="value-input"
+                  defaultValue={attribute.value}
+                  validated={errors.description ? "error" : "default"}
+                />
+              </Td>
+              {rowIndex !== fields.length - 1 && fields.length - 1 !== 0 && (
                 <Td
-                  key={`${attribute.id}-key`}
-                  id={`text-input-${rowIndex}-key`}
-                  dataLabel={columns[0]}
+                  key="minus-button"
+                  id={`kc-minus-button-${rowIndex}`}
+                  dataLabel={columns[2]}
                 >
-                  <TextInput
-                    name={`attributes[${rowIndex}].key`}
-                    ref={register()}
-                    aria-label="key-input"
-                    defaultValue={attribute.key}
-                    validated={
-                      errors.attributes?.[rowIndex] ? "error" : "default"
-                    }
-                  />
-                </Td>
-                <Td
-                  key={`${attribute}-value`}
-                  id={`text-input-${rowIndex}-value`}
-                  dataLabel={columns[1]}
-                >
-                  <TextInput
-                    name={`attributes[${rowIndex}].value`}
-                    ref={register()}
-                    aria-label="value-input"
-                    defaultValue={attribute.value}
-                    validated={errors.description ? "error" : "default"}
-                  />
-                </Td>
-                {rowIndex !== fields.length - 1 && fields.length - 1 !== 0 && (
-                  <Td
-                    key="minus-button"
-                    id={`kc-minus-button-${rowIndex}`}
-                    dataLabel={columns[2]}
+                  <Button
+                    id={`minus-button-${rowIndex}`}
+                    aria-label={`remove ${attribute.key} with value ${attribute.value} `}
+                    variant="link"
+                    className="kc-role-attributes__minus-icon"
+                    onClick={() => remove(rowIndex)}
                   >
+                    <MinusCircleIcon />
+                  </Button>
+                </Td>
+              )}
+              {rowIndex === fields.length - 1 && (
+                <Td key="add-button" id="add-button" dataLabel={columns[2]}>
+                  {fields[rowIndex].key === "" && (
                     <Button
                       id={`minus-button-${rowIndex}`}
                       aria-label={`remove ${attribute.key} with value ${attribute.value} `}
@@ -109,50 +122,35 @@ export const RoleAttributes = ({
                     >
                       <MinusCircleIcon />
                     </Button>
-                  </Td>
-                )}
-                {rowIndex === fields.length - 1 && (
-                  <Td key="add-button" id="add-button" dataLabel={columns[2]}>
-                    {fields[rowIndex].key === "" && (
-                      <Button
-                        id={`minus-button-${rowIndex}`}
-                        aria-label={`remove ${attribute.key} with value ${attribute.value} `}
-                        variant="link"
-                        className="kc-role-attributes__minus-icon"
-                        onClick={() => remove(rowIndex)}
-                      >
-                        <MinusCircleIcon />
-                      </Button>
-                    )}
-                    <Button
-                      aria-label={t("roles:addAttributeText")}
-                      id="plus-icon"
-                      variant="link"
-                      className="kc-role-attributes__plus-icon"
-                      onClick={() => append({ key: "", value: "" })}
-                      icon={<PlusCircleIcon />}
-                      isDisabled={!formState.isValid}
-                    />
-                  </Td>
-                )}
-              </Tr>
-            ))}
-          </Tbody>
-        </TableComposable>
-        <ActionGroup className="kc-role-attributes__action-group">
-          <Button
-            data-testid="realm-roles-save-button"
-            variant="primary"
-            isDisabled={!watchFirstKey}
-            onClick={save}
-          >
-            {t("common:save")}
-          </Button>
-          <Button onClick={reset} variant="link">
-            {t("common:reload")}
-          </Button>
-        </ActionGroup>
-      </FormAccess>
-    </>
+                  )}
+                  <Button
+                    aria-label={t("roles:addAttributeText")}
+                    id="plus-icon"
+                    variant="link"
+                    className="kc-role-attributes__plus-icon"
+                    onClick={() => append({ key: "", value: "" })}
+                    icon={<PlusCircleIcon />}
+                    isDisabled={!formState.isValid}
+                  />
+                </Td>
+              )}
+            </Tr>
+          ))}
+        </Tbody>
+      </TableComposable>
+      <ActionGroup className="kc-role-attributes__action-group">
+        <Button
+          data-testid="realm-roles-save-button"
+          variant="primary"
+          isDisabled={!watchFirstKey}
+          onClick={save}
+        >
+          {t("common:save")}
+        </Button>
+        <Button onClick={reset} variant="link">
+          {t("common:reload")}
+        </Button>
+      </ActionGroup>
+    </FormAccess>
   );
 };
diff --git a/src/realm-roles/RolesList.tsx b/src/realm-roles/RolesList.tsx
index 7206992739..f9e772ce63 100644
--- a/src/realm-roles/RolesList.tsx
+++ b/src/realm-roles/RolesList.tsx
@@ -126,11 +126,7 @@ export const RolesList = ({
         ariaLabelKey="roles:roleList"
         searchPlaceholderKey="roles:searchFor"
         isPaginated={paginated}
-        toolbarItem={
-          <>
-            <Button onClick={goToCreate}>{t("createRole")}</Button>
-          </>
-        }
+        toolbarItem={<Button onClick={goToCreate}>{t("createRole")}</Button>}
         actions={[
           {
             title: t("common:delete"),
diff --git a/src/realm-roles/UsersInRoleTab.tsx b/src/realm-roles/UsersInRoleTab.tsx
index 5021963dec..2b052a7725 100644
--- a/src/realm-roles/UsersInRoleTab.tsx
+++ b/src/realm-roles/UsersInRoleTab.tsx
@@ -42,60 +42,22 @@ export const UsersInRoleTab = () => {
   const { enabled } = useHelp();
 
   return (
-    <>
-      <PageSection data-testid="users-page" variant="light">
-        <KeycloakDataTable
-          isPaginated
-          loader={loader}
-          ariaLabelKey="roles:roleList"
-          searchPlaceholderKey=""
-          toolbarItem={
-            enabled && (
-              <Popover
-                aria-label="Basic popover"
-                position="bottom"
-                bodyContent={
-                  <div>
-                    {t("roles:whoWillAppearPopoverText")}
-                    <Button
-                      className="kc-groups-link"
-                      variant="link"
-                      onClick={() => history.push(`/${realm}/groups`)}
-                    >
-                      {t("groups")}
-                    </Button>
-                    {t("or")}
-                    <Button
-                      className="kc-users-link"
-                      variant="link"
-                      onClick={() => history.push(`/${realm}/users`)}
-                    >
-                      {t("users")}.
-                    </Button>
-                  </div>
-                }
-                footerContent={t("roles:whoWillAppearPopoverFooterText")}
-              >
-                <Button
-                  variant="link"
-                  className="kc-who-will-appear-button"
-                  key="who-will-appear-button"
-                  icon={<QuestionCircleIcon />}
-                >
-                  {t("roles:whoWillAppearLinkText")}
-                </Button>
-              </Popover>
-            )
-          }
-          emptyState={
-            <ListEmptyState
-              hasIcon={true}
-              message={t("noDirectUsers")}
-              instructions={
+    <PageSection data-testid="users-page" variant="light">
+      <KeycloakDataTable
+        isPaginated
+        loader={loader}
+        ariaLabelKey="roles:roleList"
+        searchPlaceholderKey=""
+        toolbarItem={
+          enabled && (
+            <Popover
+              aria-label="Basic popover"
+              position="bottom"
+              bodyContent={
                 <div>
-                  {t("noUsersEmptyStateDescription")}
+                  {t("roles:whoWillAppearPopoverText")}
                   <Button
-                    className="kc-groups-link-empty-state"
+                    className="kc-groups-link"
                     variant="link"
                     onClick={() => history.push(`/${realm}/groups`)}
                   >
@@ -103,41 +65,77 @@ export const UsersInRoleTab = () => {
                   </Button>
                   {t("or")}
                   <Button
-                    className="kc-users-link-empty-state"
+                    className="kc-users-link"
                     variant="link"
                     onClick={() => history.push(`/${realm}/users`)}
                   >
-                    {t("users")}
+                    {t("users")}.
                   </Button>
-                  {t("noUsersEmptyStateDescriptionContinued")}
                 </div>
               }
-            />
-          }
-          columns={[
-            {
-              name: "username",
-              displayKey: "roles:userName",
-              cellFormatters: [emptyFormatter()],
-            },
-            {
-              name: "email",
-              displayKey: "roles:email",
-              cellFormatters: [emptyFormatter()],
-            },
-            {
-              name: "lastName",
-              displayKey: "roles:lastName",
-              cellFormatters: [emptyFormatter()],
-            },
-            {
-              name: "firstName",
-              displayKey: "roles:firstName",
-              cellFormatters: [upperCaseFormatter(), emptyFormatter()],
-            },
-          ]}
-        />
-      </PageSection>
-    </>
+              footerContent={t("roles:whoWillAppearPopoverFooterText")}
+            >
+              <Button
+                variant="link"
+                className="kc-who-will-appear-button"
+                key="who-will-appear-button"
+                icon={<QuestionCircleIcon />}
+              >
+                {t("roles:whoWillAppearLinkText")}
+              </Button>
+            </Popover>
+          )
+        }
+        emptyState={
+          <ListEmptyState
+            hasIcon={true}
+            message={t("noDirectUsers")}
+            instructions={
+              <div>
+                {t("noUsersEmptyStateDescription")}
+                <Button
+                  className="kc-groups-link-empty-state"
+                  variant="link"
+                  onClick={() => history.push(`/${realm}/groups`)}
+                >
+                  {t("groups")}
+                </Button>
+                {t("or")}
+                <Button
+                  className="kc-users-link-empty-state"
+                  variant="link"
+                  onClick={() => history.push(`/${realm}/users`)}
+                >
+                  {t("users")}
+                </Button>
+                {t("noUsersEmptyStateDescriptionContinued")}
+              </div>
+            }
+          />
+        }
+        columns={[
+          {
+            name: "username",
+            displayKey: "roles:userName",
+            cellFormatters: [emptyFormatter()],
+          },
+          {
+            name: "email",
+            displayKey: "roles:email",
+            cellFormatters: [emptyFormatter()],
+          },
+          {
+            name: "lastName",
+            displayKey: "roles:lastName",
+            cellFormatters: [emptyFormatter()],
+          },
+          {
+            name: "firstName",
+            displayKey: "roles:firstName",
+            cellFormatters: [upperCaseFormatter(), emptyFormatter()],
+          },
+        ]}
+      />
+    </PageSection>
   );
 };
diff --git a/src/realm-settings/GeneralTab.tsx b/src/realm-settings/GeneralTab.tsx
index 85dff589cc..d69b3210c8 100644
--- a/src/realm-settings/GeneralTab.tsx
+++ b/src/realm-settings/GeneralTab.tsx
@@ -49,172 +49,167 @@ export const RealmSettingsGeneralTab = ({
   const requireSslTypes = ["all", "external", "none"];
 
   return (
-    <>
-      <PageSection variant="light">
-        <FormAccess
-          isHorizontal
-          role="manage-realm"
-          className="pf-u-mt-lg"
-          onSubmit={handleSubmit(save)}
+    <PageSection variant="light">
+      <FormAccess
+        isHorizontal
+        role="manage-realm"
+        className="pf-u-mt-lg"
+        onSubmit={handleSubmit(save)}
+      >
+        <FormGroup label={t("realmId")} fieldId="kc-realm-id" isRequired>
+          <Controller
+            name="realm"
+            control={control}
+            defaultValue=""
+            render={({ onChange, value }) => (
+              <ClipboardCopy onChange={onChange}>{value}</ClipboardCopy>
+            )}
+          />
+        </FormGroup>
+        <FormGroup label={t("displayName")} fieldId="kc-display-name">
+          <TextInput
+            type="text"
+            id="kc-display-name"
+            name="displayName"
+            ref={register}
+          />
+        </FormGroup>
+        <FormGroup label={t("htmlDisplayName")} fieldId="kc-html-display-name">
+          <TextInput
+            type="text"
+            id="kc-html-display-name"
+            name="displayNameHtml"
+            ref={register}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("frontendUrl")}
+          fieldId="kc-frontend-url"
+          labelIcon={
+            <HelpItem
+              helpText="realm-settings-help:frontendUrl"
+              forLabel={t("frontendUrl")}
+              forID={t(`common:helpLabel`, { label: t("frontendUrl") })}
+            />
+          }
         >
-          <FormGroup label={t("realmId")} fieldId="kc-realm-id" isRequired>
-            <Controller
-              name="realm"
-              control={control}
-              defaultValue=""
-              render={({ onChange, value }) => (
-                <ClipboardCopy onChange={onChange}>{value}</ClipboardCopy>
-              )}
+          <TextInput
+            type="text"
+            id="kc-frontend-url"
+            name="attributes.frontendUrl"
+            ref={register}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("requireSsl")}
+          fieldId="kc-require-ssl"
+          labelIcon={
+            <HelpItem
+              helpText="realm-settings-help:requireSsl"
+              forLabel={t("requireSsl")}
+              forID={t(`common:helpLabel`, { label: t("requireSsl") })}
             />
-          </FormGroup>
-          <FormGroup label={t("displayName")} fieldId="kc-display-name">
-            <TextInput
-              type="text"
-              id="kc-display-name"
-              name="displayName"
-              ref={register}
+          }
+        >
+          <Controller
+            name="sslRequired"
+            defaultValue="none"
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-require-ssl"
+                onToggle={() => setOpen(!open)}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+                aria-label={t("requireSsl")}
+                isOpen={open}
+              >
+                {requireSslTypes.map((sslType) => (
+                  <SelectOption
+                    selected={sslType === value}
+                    key={sslType}
+                    value={sslType}
+                  >
+                    {t(`sslType.${sslType}`)}
+                  </SelectOption>
+                ))}
+              </Select>
+            )}
+          />
+        </FormGroup>
+        <FormGroup
+          hasNoPaddingTop
+          label={t("userManagedAccess")}
+          labelIcon={
+            <HelpItem
+              helpText="realm-settings-help:userManagedAccess"
+              forLabel={t("userManagedAccess")}
+              forID={t(`common:helpLabel`, { label: t("userManagedAccess") })}
             />
-          </FormGroup>
-          <FormGroup
-            label={t("htmlDisplayName")}
-            fieldId="kc-html-display-name"
-          >
-            <TextInput
-              type="text"
-              id="kc-html-display-name"
-              name="displayNameHtml"
-              ref={register}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("frontendUrl")}
-            fieldId="kc-frontend-url"
-            labelIcon={
-              <HelpItem
-                helpText="realm-settings-help:frontendUrl"
-                forLabel={t("frontendUrl")}
-                forID={t(`common:helpLabel`, { label: t("frontendUrl") })}
+          }
+          fieldId="kc-user-manged-access"
+        >
+          <Controller
+            name="userManagedAccessAllowed"
+            control={control}
+            defaultValue={false}
+            render={({ onChange, value }) => (
+              <Switch
+                id="kc-user-managed-access"
+                data-testid="user-managed-access-switch"
+                label={t("common:on")}
+                labelOff={t("common:off")}
+                isChecked={value}
+                onChange={onChange}
               />
-            }
-          >
-            <TextInput
-              type="text"
-              id="kc-frontend-url"
-              name="attributes.frontendUrl"
-              ref={register}
+            )}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("endpoints")}
+          labelIcon={
+            <HelpItem
+              helpText="realm-settings-help:endpoints"
+              forLabel={t("endpoints")}
+              forID={t(`common:helpLabel`, { label: t("endpoints") })}
             />
-          </FormGroup>
-          <FormGroup
-            label={t("requireSsl")}
-            fieldId="kc-require-ssl"
-            labelIcon={
-              <HelpItem
-                helpText="realm-settings-help:requireSsl"
-                forLabel={t("requireSsl")}
-                forID={t(`common:helpLabel`, { label: t("requireSsl") })}
+          }
+          fieldId="kc-endpoints"
+        >
+          <Stack>
+            <StackItem>
+              <FormattedLink
+                href={`${baseUrl}realms/${realmName}/.well-known/openid-configuration`}
+                title={t("openIDEndpointConfiguration")}
               />
-            }
-          >
-            <Controller
-              name="sslRequired"
-              defaultValue="none"
-              control={control}
-              render={({ onChange, value }) => (
-                <Select
-                  toggleId="kc-require-ssl"
-                  onToggle={() => setOpen(!open)}
-                  onSelect={(_, value) => {
-                    onChange(value as string);
-                    setOpen(false);
-                  }}
-                  selections={value}
-                  variant={SelectVariant.single}
-                  aria-label={t("requireSsl")}
-                  isOpen={open}
-                >
-                  {requireSslTypes.map((sslType) => (
-                    <SelectOption
-                      selected={sslType === value}
-                      key={sslType}
-                      value={sslType}
-                    >
-                      {t(`sslType.${sslType}`)}
-                    </SelectOption>
-                  ))}
-                </Select>
-              )}
-            />
-          </FormGroup>
-          <FormGroup
-            hasNoPaddingTop
-            label={t("userManagedAccess")}
-            labelIcon={
-              <HelpItem
-                helpText="realm-settings-help:userManagedAccess"
-                forLabel={t("userManagedAccess")}
-                forID={t(`common:helpLabel`, { label: t("userManagedAccess") })}
+            </StackItem>
+            <StackItem>
+              <FormattedLink
+                href={`${baseUrl}realms/${realmName}/protocol/saml/descriptor`}
+                title={t("samlIdentityProviderMetadata")}
               />
-            }
-            fieldId="kc-user-manged-access"
-          >
-            <Controller
-              name="userManagedAccessAllowed"
-              control={control}
-              defaultValue={false}
-              render={({ onChange, value }) => (
-                <Switch
-                  id="kc-user-managed-access"
-                  data-testid="user-managed-access-switch"
-                  label={t("common:on")}
-                  labelOff={t("common:off")}
-                  isChecked={value}
-                  onChange={onChange}
-                />
-              )}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("endpoints")}
-            labelIcon={
-              <HelpItem
-                helpText="realm-settings-help:endpoints"
-                forLabel={t("endpoints")}
-                forID={t(`common:helpLabel`, { label: t("endpoints") })}
-              />
-            }
-            fieldId="kc-endpoints"
-          >
-            <Stack>
-              <StackItem>
-                <FormattedLink
-                  href={`${baseUrl}realms/${realmName}/.well-known/openid-configuration`}
-                  title={t("openIDEndpointConfiguration")}
-                />
-              </StackItem>
-              <StackItem>
-                <FormattedLink
-                  href={`${baseUrl}realms/${realmName}/protocol/saml/descriptor`}
-                  title={t("samlIdentityProviderMetadata")}
-                />
-              </StackItem>
-            </Stack>
-          </FormGroup>
+            </StackItem>
+          </Stack>
+        </FormGroup>
 
-          <ActionGroup>
-            <Button
-              variant="primary"
-              type="submit"
-              data-testid="general-tab-save"
-              isDisabled={!isDirty}
-            >
-              {t("common:save")}
-            </Button>
-            <Button variant="link" onClick={reset}>
-              {t("common:revert")}
-            </Button>
-          </ActionGroup>
-        </FormAccess>
-      </PageSection>
-    </>
+        <ActionGroup>
+          <Button
+            variant="primary"
+            type="submit"
+            data-testid="general-tab-save"
+            isDisabled={!isDirty}
+          >
+            {t("common:save")}
+          </Button>
+          <Button variant="link" onClick={reset}>
+            {t("common:revert")}
+          </Button>
+        </ActionGroup>
+      </FormAccess>
+    </PageSection>
   );
 };
diff --git a/src/realm-settings/KeysListTab.tsx b/src/realm-settings/KeysListTab.tsx
index d9e44d8409..fda98db802 100644
--- a/src/realm-settings/KeysListTab.tsx
+++ b/src/realm-settings/KeysListTab.tsx
@@ -130,52 +130,46 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
 
   const goToCreate = () => history.push(`${url}/add-role`);
 
-  const ProviderRenderer = ({ provider }: KeyData) => {
-    return <>{provider}</>;
-  };
+  const ProviderRenderer = ({ provider }: KeyData) => provider;
 
   const ButtonRenderer = ({ type, publicKey, certificate }: KeyData) => {
     if (type === "EC") {
       return (
-        <>
+        <Button
+          onClick={() => {
+            togglePublicKeyDialog();
+            setPublicKey(publicKey!);
+          }}
+          variant="secondary"
+          id="kc-public-key"
+        >
+          {t("realm-settings:publicKeys").slice(0, -1)}
+        </Button>
+      );
+    } else if (type === "RSA") {
+      return (
+        <div className="button-wrapper">
           <Button
             onClick={() => {
               togglePublicKeyDialog();
               setPublicKey(publicKey!);
             }}
             variant="secondary"
-            id="kc-public-key"
+            id="kc-rsa-public-key"
           >
             {t("realm-settings:publicKeys").slice(0, -1)}
           </Button>
-        </>
-      );
-    } else if (type === "RSA") {
-      return (
-        <>
-          <div className="button-wrapper">
-            <Button
-              onClick={() => {
-                togglePublicKeyDialog();
-                setPublicKey(publicKey!);
-              }}
-              variant="secondary"
-              id="kc-rsa-public-key"
-            >
-              {t("realm-settings:publicKeys").slice(0, -1)}
-            </Button>
-            <Button
-              onClick={() => {
-                toggleCertificateDialog();
-                setCertificate(certificate!);
-              }}
-              variant="secondary"
-              id="kc-certificate"
-            >
-              {t("realm-settings:certificate")}
-            </Button>
-          </div>
-        </>
+          <Button
+            onClick={() => {
+              toggleCertificateDialog();
+              setCertificate(certificate!);
+            }}
+            variant="secondary"
+            id="kc-certificate"
+          >
+            {t("realm-settings:certificate")}
+          </Button>
+        </div>
       );
     }
   };
@@ -200,93 +194,91 @@ export const KeysListTab = ({ realmComponents }: KeysListTabProps) => {
   ];
 
   return (
-    <>
-      <PageSection variant="light" padding={{ default: "noPadding" }}>
-        <PublicKeyDialog />
-        <CertificateDialog />
-        <KeycloakDataTable
-          isNotCompact={true}
-          key={key}
-          loader={
-            filterType === "Active keys"
-              ? activeKeysLoader
-              : filterType === "Passive keys"
-              ? passiveKeysLoader
-              : filterType === "Disabled keys"
-              ? disabledKeysLoader
-              : loader
-          }
-          ariaLabelKey="realm-settings:keysList"
-          searchPlaceholderKey="realm-settings:searchKey"
-          searchTypeComponent={
-            <Select
-              width={300}
-              data-testid="filter-type-select"
-              isOpen={filterDropdownOpen}
-              className="kc-filter-type-select"
-              variant={SelectVariant.single}
-              onToggle={() => setFilterDropdownOpen(!filterDropdownOpen)}
-              toggleIcon={<FilterIcon />}
-              onSelect={(_, value) => {
-                setFilterType(value as string);
-                refresh();
-                setFilterDropdownOpen(false);
-              }}
-              selections={filterType}
-            >
-              {options}
-            </Select>
-          }
-          canSelectAll
-          columns={[
-            {
-              name: "algorithm",
-              displayKey: "realm-settings:algorithm",
-              cellFormatters: [emptyFormatter()],
-              transforms: [cellWidth(15)],
-            },
-            {
-              name: "type",
-              displayKey: "realm-settings:type",
-              cellFormatters: [emptyFormatter()],
-              transforms: [cellWidth(10)],
-            },
-            {
-              name: "kid",
-              displayKey: "realm-settings:kid",
-              cellFormatters: [emptyFormatter()],
-              transforms: [cellWidth(10)],
-            },
-            {
-              name: "provider",
-              displayKey: "realm-settings:provider",
-              cellRenderer: ProviderRenderer,
-              cellFormatters: [emptyFormatter()],
-              transforms: [cellWidth(10)],
-            },
-            {
-              name: "publicKeys",
-              displayKey: "realm-settings:publicKeys",
-              cellRenderer: ButtonRenderer,
-              cellFormatters: [],
-              transforms: [cellWidth(20)],
-            },
-          ]}
-          isSearching={!!filterType}
-          emptyState={
-            <ListEmptyState
-              hasIcon={true}
-              message={t("realm-settings:noKeys")}
-              instructions={
-                t(`realm-settings:noKeysDescription`) +
-                `${filterType.toLocaleLowerCase()}.`
-              }
-              primaryActionText={t("createRole")}
-              onPrimaryAction={goToCreate}
-            />
-          }
-        />
-      </PageSection>
-    </>
+    <PageSection variant="light" padding={{ default: "noPadding" }}>
+      <PublicKeyDialog />
+      <CertificateDialog />
+      <KeycloakDataTable
+        isNotCompact={true}
+        key={key}
+        loader={
+          filterType === "Active keys"
+            ? activeKeysLoader
+            : filterType === "Passive keys"
+            ? passiveKeysLoader
+            : filterType === "Disabled keys"
+            ? disabledKeysLoader
+            : loader
+        }
+        ariaLabelKey="realm-settings:keysList"
+        searchPlaceholderKey="realm-settings:searchKey"
+        searchTypeComponent={
+          <Select
+            width={300}
+            data-testid="filter-type-select"
+            isOpen={filterDropdownOpen}
+            className="kc-filter-type-select"
+            variant={SelectVariant.single}
+            onToggle={() => setFilterDropdownOpen(!filterDropdownOpen)}
+            toggleIcon={<FilterIcon />}
+            onSelect={(_, value) => {
+              setFilterType(value as string);
+              refresh();
+              setFilterDropdownOpen(false);
+            }}
+            selections={filterType}
+          >
+            {options}
+          </Select>
+        }
+        canSelectAll
+        columns={[
+          {
+            name: "algorithm",
+            displayKey: "realm-settings:algorithm",
+            cellFormatters: [emptyFormatter()],
+            transforms: [cellWidth(15)],
+          },
+          {
+            name: "type",
+            displayKey: "realm-settings:type",
+            cellFormatters: [emptyFormatter()],
+            transforms: [cellWidth(10)],
+          },
+          {
+            name: "kid",
+            displayKey: "realm-settings:kid",
+            cellFormatters: [emptyFormatter()],
+            transforms: [cellWidth(10)],
+          },
+          {
+            name: "provider",
+            displayKey: "realm-settings:provider",
+            cellRenderer: ProviderRenderer,
+            cellFormatters: [emptyFormatter()],
+            transforms: [cellWidth(10)],
+          },
+          {
+            name: "publicKeys",
+            displayKey: "realm-settings:publicKeys",
+            cellRenderer: ButtonRenderer,
+            cellFormatters: [],
+            transforms: [cellWidth(20)],
+          },
+        ]}
+        isSearching={!!filterType}
+        emptyState={
+          <ListEmptyState
+            hasIcon={true}
+            message={t("realm-settings:noKeys")}
+            instructions={
+              t(`realm-settings:noKeysDescription`) +
+              `${filterType.toLocaleLowerCase()}.`
+            }
+            primaryActionText={t("createRole")}
+            onPrimaryAction={goToCreate}
+          />
+        }
+      />
+    </PageSection>
   );
 };
diff --git a/src/realm-settings/KeysProvidersTab.tsx b/src/realm-settings/KeysProvidersTab.tsx
index d1887c2bcc..fee0737874 100644
--- a/src/realm-settings/KeysProvidersTab.tsx
+++ b/src/realm-settings/KeysProvidersTab.tsx
@@ -256,60 +256,58 @@ export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {
       <DeleteConfirm />
       <PageSection variant="light" padding={{ default: "noPadding" }}>
         <Toolbar>
-          <>
-            <ToolbarGroup className="providers-toolbar">
-              <ToolbarItem>
-                <InputGroup>
-                  <TextInput
-                    name={"inputGroupName"}
-                    id={"inputGroupName"}
-                    type="search"
-                    aria-label={t("common:search")}
-                    placeholder={t("common:search")}
-                    onChange={handleInputChange}
-                    onKeyDown={handleKeyDown}
-                  />
-                  <Button
-                    variant={ButtonVariant.control}
-                    aria-label={t("common:search")}
-                  >
-                    <SearchIcon />
-                  </Button>
-                </InputGroup>
-              </ToolbarItem>
-              <ToolbarItem>
-                <Dropdown
-                  data-testid="addProviderDropdown"
-                  className="add-provider-dropdown"
-                  isOpen={providerDropdownOpen}
-                  toggle={
-                    <DropdownToggle
-                      onToggle={(val) => setProviderDropdownOpen(val)}
-                      isPrimary
-                    >
-                      {t("realm-settings:addProvider")}
-                    </DropdownToggle>
-                  }
-                  dropdownItems={[
-                    providerTypes.map((item) => (
-                      <DropdownItem
-                        onClick={() => {
-                          handleModalToggle();
-
-                          setProviderDropdownOpen(false);
-                          setDefaultConsoleDisplayName(item);
-                        }}
-                        data-testid={`option-${item}`}
-                        key={item}
-                      >
-                        {item}
-                      </DropdownItem>
-                    )),
-                  ]}
+          <ToolbarGroup className="providers-toolbar">
+            <ToolbarItem>
+              <InputGroup>
+                <TextInput
+                  name={"inputGroupName"}
+                  id={"inputGroupName"}
+                  type="search"
+                  aria-label={t("common:search")}
+                  placeholder={t("common:search")}
+                  onChange={handleInputChange}
+                  onKeyDown={handleKeyDown}
                 />
-              </ToolbarItem>
-            </ToolbarGroup>
-          </>
+                <Button
+                  variant={ButtonVariant.control}
+                  aria-label={t("common:search")}
+                >
+                  <SearchIcon />
+                </Button>
+              </InputGroup>
+            </ToolbarItem>
+            <ToolbarItem>
+              <Dropdown
+                data-testid="addProviderDropdown"
+                className="add-provider-dropdown"
+                isOpen={providerDropdownOpen}
+                toggle={
+                  <DropdownToggle
+                    onToggle={(val) => setProviderDropdownOpen(val)}
+                    isPrimary
+                  >
+                    {t("realm-settings:addProvider")}
+                  </DropdownToggle>
+                }
+                dropdownItems={[
+                  providerTypes.map((item) => (
+                    <DropdownItem
+                      onClick={() => {
+                        handleModalToggle();
+
+                        setProviderDropdownOpen(false);
+                        setDefaultConsoleDisplayName(item);
+                      }}
+                      data-testid={`option-${item}`}
+                      key={item}
+                    >
+                      {item}
+                    </DropdownItem>
+                  )),
+                ]}
+              />
+            </ToolbarItem>
+          </ToolbarGroup>
         </Toolbar>
         <DataList
           aria-label={t("groups")}
@@ -375,21 +373,19 @@ export const KeysTabInner = ({ components, refresh }: KeysTabInnerProps) => {
                       data-testid="provider-name"
                       key={`name-${idx}`}
                     >
-                      <>
-                        <Link
-                          key={component.name}
-                          data-testid="provider-name-link"
-                          to={`${url}/${component.id}/${component.providerId}/settings`}
-                        >
-                          {component.name}
-                        </Link>
-                      </>
+                      <Link
+                        key={component.name}
+                        data-testid="provider-name-link"
+                        to={`${url}/${component.id}/${component.providerId}/settings`}
+                      >
+                        {component.name}
+                      </Link>
                     </DataListCell>,
                     <DataListCell key={`providerId-${idx}`}>
-                      <>{component.providerId}</>
+                      {component.providerId}
                     </DataListCell>,
                     <DataListCell key={`providerDescription-${idx}`}>
-                      <>{component.providerDescription}</>
+                      {component.providerDescription}
                     </DataListCell>,
                     <DataListAction
                       aria-labelledby="data-list-action"
diff --git a/src/realm-settings/LoginTab.tsx b/src/realm-settings/LoginTab.tsx
index aafe26b45e..12cc78cc5c 100644
--- a/src/realm-settings/LoginTab.tsx
+++ b/src/realm-settings/LoginTab.tsx
@@ -18,198 +18,193 @@ export const RealmSettingsLoginTab = ({
   const { t } = useTranslation("realm-settings");
 
   return (
-    <>
-      <PageSection variant="light">
-        <FormPanel
-          className="kc-login-screen"
-          title="Login screen customization"
-        >
-          <FormAccess isHorizontal role="manage-realm">
-            <FormGroup
-              label={t("userRegistration")}
-              fieldId="kc-user-reg"
-              labelIcon={
-                <HelpItem
-                  helpText={t("userRegistrationHelpText")}
-                  forLabel={t("userRegistration")}
-                  forID={t(`common:helpLabel`, {
-                    label: t("userRegistration"),
-                  })}
-                />
-              }
-              hasNoPaddingTop
-            >
-              <Switch
-                id="kc-user-reg-switch"
-                data-testid="user-reg-switch"
-                name="registrationAllowed"
-                label={t("common:on")}
-                labelOff={t("common:off")}
-                isChecked={realm?.registrationAllowed}
-                onChange={(value) => {
-                  save({ ...realm, registrationAllowed: value });
-                }}
+    <PageSection variant="light">
+      <FormPanel className="kc-login-screen" title="Login screen customization">
+        <FormAccess isHorizontal role="manage-realm">
+          <FormGroup
+            label={t("userRegistration")}
+            fieldId="kc-user-reg"
+            labelIcon={
+              <HelpItem
+                helpText={t("userRegistrationHelpText")}
+                forLabel={t("userRegistration")}
+                forID={t(`common:helpLabel`, {
+                  label: t("userRegistration"),
+                })}
               />
-            </FormGroup>
-            <FormGroup
-              label={t("forgotPassword")}
-              fieldId="kc-forgot-pw"
-              labelIcon={
-                <HelpItem
-                  helpText={t("forgotPasswordHelpText")}
-                  forLabel={t("forgotPassword")}
-                  forID={t(`common:helpLabel`, { label: t("forgotPassword") })}
-                />
-              }
-              hasNoPaddingTop
-            >
-              <Switch
-                id="kc-forgot-pw-switch"
-                data-testid="forgot-pw-switch"
-                name="resetPasswordAllowed"
-                label={t("common:on")}
-                labelOff={t("common:off")}
-                isChecked={realm?.resetPasswordAllowed}
-                onChange={(value) => {
-                  save({ ...realm, resetPasswordAllowed: value });
-                }}
+            }
+            hasNoPaddingTop
+          >
+            <Switch
+              id="kc-user-reg-switch"
+              data-testid="user-reg-switch"
+              name="registrationAllowed"
+              label={t("common:on")}
+              labelOff={t("common:off")}
+              isChecked={realm?.registrationAllowed}
+              onChange={(value) => {
+                save({ ...realm, registrationAllowed: value });
+              }}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("forgotPassword")}
+            fieldId="kc-forgot-pw"
+            labelIcon={
+              <HelpItem
+                helpText={t("forgotPasswordHelpText")}
+                forLabel={t("forgotPassword")}
+                forID={t(`common:helpLabel`, { label: t("forgotPassword") })}
               />
-            </FormGroup>
-            <FormGroup
-              label={t("rememberMe")}
-              fieldId="kc-remember-me"
-              labelIcon={
-                <HelpItem
-                  helpText={t("rememberMeHelpText")}
-                  forLabel={t("rememberMe")}
-                  forID={t(`common:helpLabel`, { label: t("rememberMe") })}
-                />
-              }
-              hasNoPaddingTop
-            >
-              <Switch
-                id="kc-remember-me-switch"
-                data-testid="remember-me-switch"
-                name="rememberMe"
-                label={t("common:on")}
-                labelOff={t("common:off")}
-                isChecked={realm?.rememberMe}
-                onChange={(value) => {
-                  save({ ...realm, rememberMe: value });
-                }}
+            }
+            hasNoPaddingTop
+          >
+            <Switch
+              id="kc-forgot-pw-switch"
+              data-testid="forgot-pw-switch"
+              name="resetPasswordAllowed"
+              label={t("common:on")}
+              labelOff={t("common:off")}
+              isChecked={realm?.resetPasswordAllowed}
+              onChange={(value) => {
+                save({ ...realm, resetPasswordAllowed: value });
+              }}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("rememberMe")}
+            fieldId="kc-remember-me"
+            labelIcon={
+              <HelpItem
+                helpText={t("rememberMeHelpText")}
+                forLabel={t("rememberMe")}
+                forID={t(`common:helpLabel`, { label: t("rememberMe") })}
               />
-            </FormGroup>
-          </FormAccess>
-        </FormPanel>
-        <FormPanel className="kc-email-settings" title="Email settings">
-          <FormAccess isHorizontal role="manage-realm">
-            <FormGroup
-              label={t("emailAsUsername")}
-              fieldId="kc-email-as-username"
-              labelIcon={
-                <HelpItem
-                  helpText={t("emailAsUsernameHelpText")}
-                  forLabel={t("emailAsUsername")}
-                  forID={t(`common:helpLabel`, { label: t("emailAsUsername") })}
-                />
-              }
-              hasNoPaddingTop
-            >
-              <Switch
-                id="kc-email-as-username-switch"
-                data-testid="email-as-username-switch"
-                name="registrationEmailAsUsername"
-                label={t("common:on")}
-                labelOff={t("common:off")}
-                isChecked={realm?.registrationEmailAsUsername}
-                onChange={(value) => {
-                  save({ ...realm, registrationEmailAsUsername: value });
-                }}
+            }
+            hasNoPaddingTop
+          >
+            <Switch
+              id="kc-remember-me-switch"
+              data-testid="remember-me-switch"
+              name="rememberMe"
+              label={t("common:on")}
+              labelOff={t("common:off")}
+              isChecked={realm?.rememberMe}
+              onChange={(value) => {
+                save({ ...realm, rememberMe: value });
+              }}
+            />
+          </FormGroup>
+        </FormAccess>
+      </FormPanel>
+      <FormPanel className="kc-email-settings" title="Email settings">
+        <FormAccess isHorizontal role="manage-realm">
+          <FormGroup
+            label={t("emailAsUsername")}
+            fieldId="kc-email-as-username"
+            labelIcon={
+              <HelpItem
+                helpText={t("emailAsUsernameHelpText")}
+                forLabel={t("emailAsUsername")}
+                forID={t(`common:helpLabel`, { label: t("emailAsUsername") })}
               />
-            </FormGroup>
-            <FormGroup
-              label={t("loginWithEmail")}
-              fieldId="kc-login-with-email"
-              labelIcon={
-                <HelpItem
-                  helpText={t("loginWithEmailHelpText")}
-                  forLabel={t("loginWithEmail")}
-                  forID={t(`common:helpLabel`, { label: t("loginWithEmail") })}
-                />
-              }
-              hasNoPaddingTop
-            >
-              <Switch
-                id="kc-login-with-email-switch"
-                data-testid="login-with-email-switch"
-                name="loginWithEmailAllowed"
-                label={t("common:on")}
-                labelOff={t("common:off")}
-                isChecked={realm?.loginWithEmailAllowed}
-                onChange={(value) => {
-                  save({ ...realm, loginWithEmailAllowed: value });
-                }}
+            }
+            hasNoPaddingTop
+          >
+            <Switch
+              id="kc-email-as-username-switch"
+              data-testid="email-as-username-switch"
+              name="registrationEmailAsUsername"
+              label={t("common:on")}
+              labelOff={t("common:off")}
+              isChecked={realm?.registrationEmailAsUsername}
+              onChange={(value) => {
+                save({ ...realm, registrationEmailAsUsername: value });
+              }}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("loginWithEmail")}
+            fieldId="kc-login-with-email"
+            labelIcon={
+              <HelpItem
+                helpText={t("loginWithEmailHelpText")}
+                forLabel={t("loginWithEmail")}
+                forID={t(`common:helpLabel`, { label: t("loginWithEmail") })}
               />
-            </FormGroup>
-            <FormGroup
-              label={t("duplicateEmails")}
-              fieldId="kc-duplicate-emails"
-              labelIcon={
-                <HelpItem
-                  helpText={t("duplicateEmailsHelpText")}
-                  forLabel={t("duplicateEmails")}
-                  forID={t(`common:helpLabel`, { label: t("duplicateEmails") })}
-                />
-              }
-              hasNoPaddingTop
-            >
-              <Switch
-                id="kc-duplicate-emails-switch"
-                data-testid="duplicate-emails-switch"
-                label={t("common:on")}
-                labelOff={t("common:off")}
-                name="duplicateEmailsAllowed"
-                isChecked={
-                  realm?.duplicateEmailsAllowed &&
-                  !realm?.loginWithEmailAllowed &&
-                  !realm?.registrationEmailAsUsername
-                }
-                onChange={(value) => {
-                  save({ ...realm, duplicateEmailsAllowed: value });
-                }}
-                isDisabled={
-                  realm?.loginWithEmailAllowed ||
-                  realm?.registrationEmailAsUsername
-                }
+            }
+            hasNoPaddingTop
+          >
+            <Switch
+              id="kc-login-with-email-switch"
+              data-testid="login-with-email-switch"
+              name="loginWithEmailAllowed"
+              label={t("common:on")}
+              labelOff={t("common:off")}
+              isChecked={realm?.loginWithEmailAllowed}
+              onChange={(value) => {
+                save({ ...realm, loginWithEmailAllowed: value });
+              }}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("duplicateEmails")}
+            fieldId="kc-duplicate-emails"
+            labelIcon={
+              <HelpItem
+                helpText={t("duplicateEmailsHelpText")}
+                forLabel={t("duplicateEmails")}
+                forID={t(`common:helpLabel`, { label: t("duplicateEmails") })}
               />
-            </FormGroup>
-            <FormGroup
-              label={t("verifyEmail")}
-              fieldId="kc-verify-email"
-              labelIcon={
-                <HelpItem
-                  helpText={t("verifyEmailHelpText")}
-                  forLabel={t("verifyEmail")}
-                  forID={t(`common:helpLabel`, { label: t("verifyEmail") })}
-                />
+            }
+            hasNoPaddingTop
+          >
+            <Switch
+              id="kc-duplicate-emails-switch"
+              data-testid="duplicate-emails-switch"
+              label={t("common:on")}
+              labelOff={t("common:off")}
+              name="duplicateEmailsAllowed"
+              isChecked={
+                realm?.duplicateEmailsAllowed &&
+                !realm?.loginWithEmailAllowed &&
+                !realm?.registrationEmailAsUsername
               }
-              hasNoPaddingTop
-            >
-              <Switch
-                id="kc-verify-email-switch"
-                data-testid="verify-email-switch"
-                name="verifyEmail"
-                label={t("common:on")}
-                labelOff={t("common:off")}
-                isChecked={realm?.verifyEmail}
-                onChange={(value) => {
-                  save({ ...realm, verifyEmail: value });
-                }}
+              onChange={(value) => {
+                save({ ...realm, duplicateEmailsAllowed: value });
+              }}
+              isDisabled={
+                realm?.loginWithEmailAllowed ||
+                realm?.registrationEmailAsUsername
+              }
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("verifyEmail")}
+            fieldId="kc-verify-email"
+            labelIcon={
+              <HelpItem
+                helpText={t("verifyEmailHelpText")}
+                forLabel={t("verifyEmail")}
+                forID={t(`common:helpLabel`, { label: t("verifyEmail") })}
               />
-            </FormGroup>
-          </FormAccess>
-        </FormPanel>
-      </PageSection>
-    </>
+            }
+            hasNoPaddingTop
+          >
+            <Switch
+              id="kc-verify-email-switch"
+              data-testid="verify-email-switch"
+              name="verifyEmail"
+              label={t("common:on")}
+              labelOff={t("common:off")}
+              isChecked={realm?.verifyEmail}
+              onChange={(value) => {
+                save({ ...realm, verifyEmail: value });
+              }}
+            />
+          </FormGroup>
+        </FormAccess>
+      </FormPanel>
+    </PageSection>
   );
 };
diff --git a/src/realm-settings/RealmSettingsSection.tsx b/src/realm-settings/RealmSettingsSection.tsx
index b03d5e0021..a6d4081886 100644
--- a/src/realm-settings/RealmSettingsSection.tsx
+++ b/src/realm-settings/RealmSettingsSection.tsx
@@ -53,19 +53,17 @@ export const EditProviderCrumb = () => {
   const { realm } = useRealm();
 
   return (
-    <>
-      <Breadcrumb>
-        <BreadcrumbItem
-          render={(props) => (
-            <Link {...props} to={toRealmSettings({ realm, tab: "keys" })}>
-              {t("keys")}
-            </Link>
-          )}
-        />
-        <BreadcrumbItem>{t("providers")}</BreadcrumbItem>
-        <BreadcrumbItem isActive>{t("editProvider")}</BreadcrumbItem>
-      </Breadcrumb>
-    </>
+    <Breadcrumb>
+      <BreadcrumbItem
+        render={(props) => (
+          <Link {...props} to={toRealmSettings({ realm, tab: "keys" })}>
+            {t("keys")}
+          </Link>
+        )}
+      />
+      <BreadcrumbItem>{t("providers")}</BreadcrumbItem>
+      <BreadcrumbItem isActive>{t("editProvider")}</BreadcrumbItem>
+    </Breadcrumb>
   );
 };
 
diff --git a/src/realm-settings/SessionsTab.tsx b/src/realm-settings/SessionsTab.tsx
index ed1f730afc..fc8ece9592 100644
--- a/src/realm-settings/SessionsTab.tsx
+++ b/src/realm-settings/SessionsTab.tsx
@@ -70,337 +70,294 @@ export const RealmSettingsSessionsTab = ({
   };
 
   return (
-    <>
-      <PageSection variant="light">
-        <FormPanel
-          title={t("SSOSessionSettings")}
-          className="kc-sso-session-template"
+    <PageSection variant="light">
+      <FormPanel
+        title={t("SSOSessionSettings")}
+        className="kc-sso-session-template"
+      >
+        <FormAccess
+          isHorizontal
+          role="manage-realm"
+          onSubmit={handleSubmit(save)}
         >
-          <FormAccess
-            isHorizontal
-            role="manage-realm"
-            onSubmit={handleSubmit(save)}
+          <FormGroup
+            label={t("SSOSessionIdle")}
+            fieldId="SSOSessionIdle"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:ssoSessionIdle"
+                forLabel={t("SSOSessionIdle")}
+                forID="SSOSessionIdle"
+                id="SSOSessionIdle"
+              />
+            }
           >
-            <FormGroup
-              label={t("SSOSessionIdle")}
-              fieldId="SSOSessionIdle"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:ssoSessionIdle"
-                  forLabel={t("SSOSessionIdle")}
-                  forID="SSOSessionIdle"
-                  id="SSOSessionIdle"
+            <Controller
+              name="ssoSessionIdleTimeout"
+              defaultValue={realm?.ssoSessionIdleTimeout}
+              control={control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-sso-session-idle"
+                  data-testid="sso-session-idle-input"
+                  aria-label="sso-session-idle-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
                 />
-              }
-            >
-              <Controller
-                name="ssoSessionIdleTimeout"
-                defaultValue={realm?.ssoSessionIdleTimeout}
-                control={control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-sso-session-idle"
-                    data-testid="sso-session-idle-input"
-                    aria-label="sso-session-idle-input"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
-              />
-            </FormGroup>
+              )}
+            />
+          </FormGroup>
 
-            <FormGroup
-              label={t("SSOSessionMax")}
-              fieldId="SSOSessionMax"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:ssoSessionMax"
-                  forLabel={t("SSOSessionMax")}
-                  forID="SSOSessionMax"
-                  id="SSOSessionMax"
-                />
-              }
-            >
-              <Controller
-                name="ssoSessionMaxLifespan"
-                defaultValue=""
-                control={control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-sso-session-max"
-                    data-testid="sso-session-max-input"
-                    aria-label="sso-session-max-input"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
+          <FormGroup
+            label={t("SSOSessionMax")}
+            fieldId="SSOSessionMax"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:ssoSessionMax"
+                forLabel={t("SSOSessionMax")}
+                forID="SSOSessionMax"
+                id="SSOSessionMax"
               />
-            </FormGroup>
+            }
+          >
+            <Controller
+              name="ssoSessionMaxLifespan"
+              defaultValue=""
+              control={control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-sso-session-max"
+                  data-testid="sso-session-max-input"
+                  aria-label="sso-session-max-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
 
-            <FormGroup
-              label={t("SSOSessionIdleRememberMe")}
-              fieldId="SSOSessionIdleRememberMe"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:ssoSessionIdleRememberMe"
-                  forLabel={t("SSOSessionIdleRememberMe")}
-                  forID="SSOSessionIdleRememberMe"
-                  id="SSOSessionIdleRememberMe"
-                />
-              }
-            >
-              <Controller
-                name="ssoSessionIdleTimeoutRememberMe"
-                defaultValue=""
-                control={control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-sso-session-idle-remember-me"
-                    data-testid="sso-session-idle-remember-me-input"
-                    aria-label="sso-session-idle-remember-me-input"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
+          <FormGroup
+            label={t("SSOSessionIdleRememberMe")}
+            fieldId="SSOSessionIdleRememberMe"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:ssoSessionIdleRememberMe"
+                forLabel={t("SSOSessionIdleRememberMe")}
+                forID="SSOSessionIdleRememberMe"
+                id="SSOSessionIdleRememberMe"
               />
-            </FormGroup>
+            }
+          >
+            <Controller
+              name="ssoSessionIdleTimeoutRememberMe"
+              defaultValue=""
+              control={control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-sso-session-idle-remember-me"
+                  data-testid="sso-session-idle-remember-me-input"
+                  aria-label="sso-session-idle-remember-me-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
 
-            <FormGroup
-              label={t("SSOSessionMaxRememberMe")}
-              fieldId="SSOSessionMaxRememberMe"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:ssoSessionMaxRememberMe"
-                  forLabel={t("SSOSessionMaxRememberMe")}
-                  forID="SSOSessionMaxRememberMe"
-                  id="SSOSessionMaxRememberMe"
-                />
-              }
-            >
-              <Controller
-                name="ssoSessionMaxLifespanRememberMe"
-                defaultValue=""
-                control={control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-sso-session-max-remember-me"
-                    aria-label="sso-session-max-remember-me-input"
-                    data-testid="sso-session-max-remember-me-input"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
+          <FormGroup
+            label={t("SSOSessionMaxRememberMe")}
+            fieldId="SSOSessionMaxRememberMe"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:ssoSessionMaxRememberMe"
+                forLabel={t("SSOSessionMaxRememberMe")}
+                forID="SSOSessionMaxRememberMe"
+                id="SSOSessionMaxRememberMe"
               />
-            </FormGroup>
-          </FormAccess>
-        </FormPanel>
-        <FormPanel
-          title={t("clientSessionSettings")}
-          className="kc-client-session-template"
+            }
+          >
+            <Controller
+              name="ssoSessionMaxLifespanRememberMe"
+              defaultValue=""
+              control={control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-sso-session-max-remember-me"
+                  aria-label="sso-session-max-remember-me-input"
+                  data-testid="sso-session-max-remember-me-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
+        </FormAccess>
+      </FormPanel>
+      <FormPanel
+        title={t("clientSessionSettings")}
+        className="kc-client-session-template"
+      >
+        <FormAccess
+          isHorizontal
+          role="manage-realm"
+          className="pf-u-mt-lg"
+          onSubmit={handleSubmit(save)}
         >
-          <FormAccess
-            isHorizontal
-            role="manage-realm"
-            className="pf-u-mt-lg"
-            onSubmit={handleSubmit(save)}
-          >
-            <FormGroup
-              label={t("clientSessionIdle")}
-              fieldId="clientSessionIdle"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:clientSessionIdle"
-                  forLabel={t("clientSessionIdle")}
-                  forID="clientSessionIdle"
-                  id="clientSessionIdle"
-                />
-              }
-            >
-              <Controller
-                name="clientSessionIdleTimeout"
-                defaultValue=""
-                control={control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-client-session-idle"
-                    data-testid="client-session-idle-input"
-                    aria-label="client-session-idle-input"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
+          <FormGroup
+            label={t("clientSessionIdle")}
+            fieldId="clientSessionIdle"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:clientSessionIdle"
+                forLabel={t("clientSessionIdle")}
+                forID="clientSessionIdle"
+                id="clientSessionIdle"
               />
-            </FormGroup>
+            }
+          >
+            <Controller
+              name="clientSessionIdleTimeout"
+              defaultValue=""
+              control={control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-client-session-idle"
+                  data-testid="client-session-idle-input"
+                  aria-label="client-session-idle-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
 
-            <FormGroup
-              label={t("clientSessionMax")}
-              fieldId="clientSessionMax"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:clientSessionMax"
-                  forLabel={t("clientSessionMax")}
-                  forID="clientSessionMax"
-                  id="clientSessionMax"
-                />
-              }
-            >
-              <Controller
-                name="clientSessionMaxLifespan"
-                defaultValue=""
-                control={control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-client-session-max"
-                    data-testid="client-session-max-input"
-                    aria-label="client-session-max-input"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
+          <FormGroup
+            label={t("clientSessionMax")}
+            fieldId="clientSessionMax"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:clientSessionMax"
+                forLabel={t("clientSessionMax")}
+                forID="clientSessionMax"
+                id="clientSessionMax"
               />
-            </FormGroup>
-          </FormAccess>
-        </FormPanel>
-        <FormPanel
-          title={t("offlineSessionSettings")}
-          className="kc-offline-session-template"
-        >
-          <FormAccess
-            isHorizontal
-            role="manage-realm"
-            className="pf-u-mt-lg"
-            onSubmit={handleSubmit(save)}
+            }
           >
-            <FormGroup
-              label={t("offlineSessionIdle")}
-              fieldId="offlineSessionIdle"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:offlineSessionIdle"
-                  forLabel={t("offlineSessionIdle")}
-                  forID="offlineSessionIdle"
-                  id="offlineSessionIdle"
+            <Controller
+              name="clientSessionMaxLifespan"
+              defaultValue=""
+              control={control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-client-session-max"
+                  data-testid="client-session-max-input"
+                  aria-label="client-session-max-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
                 />
-              }
-            >
-              <Controller
-                name="offlineSessionIdleTimeout"
-                defaultValue=""
-                control={control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-offline-session-idle"
-                    data-testid="offline-session-idle-input"
-                    aria-label="offline-session-idle-input"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
+              )}
+            />
+          </FormGroup>
+        </FormAccess>
+      </FormPanel>
+      <FormPanel
+        title={t("offlineSessionSettings")}
+        className="kc-offline-session-template"
+      >
+        <FormAccess
+          isHorizontal
+          role="manage-realm"
+          className="pf-u-mt-lg"
+          onSubmit={handleSubmit(save)}
+        >
+          <FormGroup
+            label={t("offlineSessionIdle")}
+            fieldId="offlineSessionIdle"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:offlineSessionIdle"
+                forLabel={t("offlineSessionIdle")}
+                forID="offlineSessionIdle"
+                id="offlineSessionIdle"
               />
-            </FormGroup>
+            }
+          >
+            <Controller
+              name="offlineSessionIdleTimeout"
+              defaultValue=""
+              control={control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-offline-session-idle"
+                  data-testid="offline-session-idle-input"
+                  aria-label="offline-session-idle-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
 
-            <FormGroup
-              hasNoPaddingTop
-              label={t("offlineSessionMaxLimited")}
-              fieldId="kc-offlineSessionMaxLimited"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:offlineSessionMaxLimited"
-                  forLabel={t("offlineSessionMaxLimited")}
-                  forID="offlineSessionMaxLimited"
-                  id="offlineSessionMaxLimited"
-                />
-              }
-            >
-              <Controller
-                name="offlineSessionMaxLifespanEnabled"
-                control={control}
-                defaultValue={false}
-                render={({ onChange, value }) => (
-                  <Switch
-                    id="kc-offline-session-max"
-                    data-testid="offline-session-max-switch"
-                    aria-label="offline-session-max-switch"
-                    label={t("common:enabled")}
-                    labelOff={t("common:disabled")}
-                    isChecked={value}
-                    onChange={(value) => onChange(value.toString())}
-                  />
-                )}
+          <FormGroup
+            hasNoPaddingTop
+            label={t("offlineSessionMaxLimited")}
+            fieldId="kc-offlineSessionMaxLimited"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:offlineSessionMaxLimited"
+                forLabel={t("offlineSessionMaxLimited")}
+                forID="offlineSessionMaxLimited"
+                id="offlineSessionMaxLimited"
               />
-            </FormGroup>
-            {offlineSessionMaxEnabled && (
-              <FormGroup
-                label={t("offlineSessionMax")}
-                fieldId="offlineSessionMax"
-                id="offline-session-max-label"
-                labelIcon={
-                  <HelpItem
-                    helpText="realm-settings-help:offlineSessionMax"
-                    forLabel={t("offlineSessionMax")}
-                    forID="offlineSessionMax"
-                    id="offlineSessionMax"
-                  />
-                }
-              >
-                <Controller
-                  name="offlineSessionMaxLifespan"
-                  defaultValue=""
-                  control={control}
-                  render={({ onChange, value }) => (
-                    <TimeSelector
-                      className="kc-offline-session-max"
-                      data-testid="offline-session-max-input"
-                      aria-label="offline-session-max-input"
-                      value={value}
-                      onChange={onChange}
-                      units={["minutes", "hours", "days"]}
-                    />
-                  )}
-                />
-              </FormGroup>
-            )}
-          </FormAccess>
-        </FormPanel>
-        <FormPanel
-          className="kc-login-settings-template"
-          title={t("loginSettings")}
-        >
-          <FormAccess
-            isHorizontal
-            role="manage-realm"
-            className="pf-u-mt-lg"
-            onSubmit={handleSubmit(save)}
+            }
           >
+            <Controller
+              name="offlineSessionMaxLifespanEnabled"
+              control={control}
+              defaultValue={false}
+              render={({ onChange, value }) => (
+                <Switch
+                  id="kc-offline-session-max"
+                  data-testid="offline-session-max-switch"
+                  aria-label="offline-session-max-switch"
+                  label={t("common:enabled")}
+                  labelOff={t("common:disabled")}
+                  isChecked={value}
+                  onChange={(value) => onChange(value.toString())}
+                />
+              )}
+            />
+          </FormGroup>
+          {offlineSessionMaxEnabled && (
             <FormGroup
-              label={t("loginTimeout")}
-              id="kc-login-timeout-label"
-              fieldId="offlineSessionIdle"
+              label={t("offlineSessionMax")}
+              fieldId="offlineSessionMax"
+              id="offline-session-max-label"
               labelIcon={
                 <HelpItem
-                  helpText="realm-settings-help:loginTimeout"
-                  forLabel={t("loginTimeout")}
-                  forID="loginTimeout"
-                  id="loginTimeout"
+                  helpText="realm-settings-help:offlineSessionMax"
+                  forLabel={t("offlineSessionMax")}
+                  forID="offlineSessionMax"
+                  id="offlineSessionMax"
                 />
               }
             >
               <Controller
-                name="accessCodeLifespanLogin"
+                name="offlineSessionMaxLifespan"
                 defaultValue=""
                 control={control}
                 render={({ onChange, value }) => (
                   <TimeSelector
-                    className="kc-login-timeout"
-                    data-testid="login-timeout-input"
-                    aria-label="login-timeout-input"
+                    className="kc-offline-session-max"
+                    data-testid="offline-session-max-input"
+                    aria-label="offline-session-max-input"
                     value={value}
                     onChange={onChange}
                     units={["minutes", "hours", "days"]}
@@ -408,51 +365,92 @@ export const RealmSettingsSessionsTab = ({
                 )}
               />
             </FormGroup>
-            <FormGroup
-              label={t("loginActionTimeout")}
-              fieldId="loginActionTimeout"
-              id="login-action-timeout-label"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:loginActionTimeout"
-                  forLabel={t("loginActionTimeout")}
-                  forID="loginActionTimeout"
-                  id="loginActionTimeout"
-                />
-              }
-            >
-              <Controller
-                name="accessCodeLifespanUserAction"
-                defaultValue=""
-                control={control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-login-action-timeout"
-                    data-testid="login-action-timeout-input"
-                    aria-label="login-action-timeout-input"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
+          )}
+        </FormAccess>
+      </FormPanel>
+      <FormPanel
+        className="kc-login-settings-template"
+        title={t("loginSettings")}
+      >
+        <FormAccess
+          isHorizontal
+          role="manage-realm"
+          className="pf-u-mt-lg"
+          onSubmit={handleSubmit(save)}
+        >
+          <FormGroup
+            label={t("loginTimeout")}
+            id="kc-login-timeout-label"
+            fieldId="offlineSessionIdle"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:loginTimeout"
+                forLabel={t("loginTimeout")}
+                forID="loginTimeout"
+                id="loginTimeout"
               />
-            </FormGroup>
-            <ActionGroup>
-              <Button
-                variant="primary"
-                type="submit"
-                data-testid="sessions-tab-save"
-                isDisabled={!formState.isDirty}
-              >
-                {t("common:save")}
-              </Button>
-              <Button variant="link" onClick={reset}>
-                {t("common:revert")}
-              </Button>
-            </ActionGroup>
-          </FormAccess>
-        </FormPanel>
-      </PageSection>
-    </>
+            }
+          >
+            <Controller
+              name="accessCodeLifespanLogin"
+              defaultValue=""
+              control={control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-login-timeout"
+                  data-testid="login-timeout-input"
+                  aria-label="login-timeout-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("loginActionTimeout")}
+            fieldId="loginActionTimeout"
+            id="login-action-timeout-label"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:loginActionTimeout"
+                forLabel={t("loginActionTimeout")}
+                forID="loginActionTimeout"
+                id="loginActionTimeout"
+              />
+            }
+          >
+            <Controller
+              name="accessCodeLifespanUserAction"
+              defaultValue=""
+              control={control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-login-action-timeout"
+                  data-testid="login-action-timeout-input"
+                  aria-label="login-action-timeout-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
+          <ActionGroup>
+            <Button
+              variant="primary"
+              type="submit"
+              data-testid="sessions-tab-save"
+              isDisabled={!formState.isDirty}
+            >
+              {t("common:save")}
+            </Button>
+            <Button variant="link" onClick={reset}>
+              {t("common:revert")}
+            </Button>
+          </ActionGroup>
+        </FormAccess>
+      </FormPanel>
+    </PageSection>
   );
 };
diff --git a/src/realm-settings/ThemesTab.tsx b/src/realm-settings/ThemesTab.tsx
index 55a67988ee..56ebb70582 100644
--- a/src/realm-settings/ThemesTab.tsx
+++ b/src/realm-settings/ThemesTab.tsx
@@ -55,314 +55,308 @@ export const RealmSettingsThemesTab = ({
   });
 
   return (
-    <>
-      <PageSection variant="light">
-        <FormAccess
-          isHorizontal
-          role="manage-realm"
-          className="pf-u-mt-lg"
-          onSubmit={handleSubmit(save)}
+    <PageSection variant="light">
+      <FormAccess
+        isHorizontal
+        role="manage-realm"
+        className="pf-u-mt-lg"
+        onSubmit={handleSubmit(save)}
+      >
+        <FormGroup
+          label={t("loginTheme")}
+          fieldId="kc-login-theme"
+          labelIcon={
+            <HelpItem
+              helpText="realm-settings-help:loginTheme"
+              forLabel={t("loginTheme")}
+              forID="kc-login-theme"
+            />
+          }
         >
-          <FormGroup
-            label={t("loginTheme")}
-            fieldId="kc-login-theme"
-            labelIcon={
-              <HelpItem
-                helpText="realm-settings-help:loginTheme"
-                forLabel={t("loginTheme")}
-                forID="kc-login-theme"
-              />
-            }
-          >
-            <Controller
-              name="loginTheme"
-              control={control}
-              defaultValue=""
-              render={({ onChange, value }) => (
-                <Select
-                  toggleId="kc-login-theme"
-                  onToggle={() => setLoginThemeOpen(!loginThemeOpen)}
-                  onSelect={(_, value) => {
-                    onChange(value as string);
-                    setLoginThemeOpen(false);
-                  }}
-                  selections={value}
-                  variant={SelectVariant.single}
-                  aria-label={t("loginTheme")}
-                  isOpen={loginThemeOpen}
-                  placeholderText="Select a theme"
-                  data-testid="select-login-theme"
-                >
-                  {themeTypes.login.map((theme, idx) => (
-                    <SelectOption
-                      selected={theme.name === value}
-                      key={`login-theme-${idx}`}
-                      value={theme.name}
-                    >
-                      {t(`${theme.name}`)}
-                    </SelectOption>
-                  ))}
-                </Select>
-              )}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("accountTheme")}
-            fieldId="kc-account-theme"
-            labelIcon={
-              <HelpItem
-                helpText="realm-settings-help:accountTheme"
-                forLabel={t("accountTheme")}
-                forID="kc-account-theme"
-              />
-            }
-          >
-            <Controller
-              name="accountTheme"
-              control={control}
-              defaultValue=""
-              render={({ onChange, value }) => (
-                <Select
-                  toggleId="kc-account-theme"
-                  onToggle={() => setAccountThemeOpen(!accountThemeOpen)}
-                  onSelect={(_, value) => {
-                    onChange(value as string);
-                    setAccountThemeOpen(false);
-                  }}
-                  selections={value}
-                  variant={SelectVariant.single}
-                  aria-label={t("accountTheme")}
-                  isOpen={accountThemeOpen}
-                  placeholderText="Select a theme"
-                  data-testid="select-account-theme"
-                >
-                  {themeTypes.account.map((theme, idx) => (
-                    <SelectOption
-                      selected={theme.name === value}
-                      key={`account-theme-${idx}`}
-                      value={theme.name}
-                    >
-                      {t(`${theme.name}`)}
-                    </SelectOption>
-                  ))}
-                </Select>
-              )}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("adminTheme")}
-            fieldId="kc-admin-console-theme"
-            labelIcon={
-              <HelpItem
-                helpText="realm-settings-help:adminConsoleTheme"
-                forLabel={t("adminTheme")}
-                forID="kc-admin-console-theme"
-              />
-            }
-          >
-            <Controller
-              name="adminTheme"
-              control={control}
-              defaultValue=""
-              render={({ onChange, value }) => (
-                <Select
-                  toggleId="kc-admin-console-theme"
-                  onToggle={() =>
-                    setAdminConsoleThemeOpen(!adminConsoleThemeOpen)
-                  }
-                  onSelect={(_, value) => {
-                    onChange(value as string);
-                    setAdminConsoleThemeOpen(false);
-                  }}
-                  selections={value}
-                  variant={SelectVariant.single}
-                  aria-label={t("adminConsoleTheme")}
-                  isOpen={adminConsoleThemeOpen}
-                  placeholderText="Select a theme"
-                  data-testid="select-admin-theme"
-                >
-                  {themeTypes.admin.map((theme, idx) => (
-                    <SelectOption
-                      selected={theme.name === value}
-                      key={`admin-theme-${idx}`}
-                      value={theme.name}
-                    >
-                      {t(`${theme.name}`)}
-                    </SelectOption>
-                  ))}
-                </Select>
-              )}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("emailTheme")}
-            fieldId="kc-email-theme"
-            labelIcon={
-              <HelpItem
-                helpText="realm-settings-help:emailTheme"
-                forLabel={t("emailTheme")}
-                forID="kc-email-theme"
-              />
-            }
-          >
-            <Controller
-              name="emailTheme"
-              control={control}
-              defaultValue=""
-              render={({ onChange, value }) => (
-                <Select
-                  toggleId="kc-email-theme"
-                  onToggle={() => setEmailThemeOpen(!emailThemeOpen)}
-                  onSelect={(_, value) => {
-                    onChange(value as string);
-                    setEmailThemeOpen(false);
-                  }}
-                  selections={value}
-                  variant={SelectVariant.single}
-                  aria-label={t("emailTheme")}
-                  isOpen={emailThemeOpen}
-                  placeholderText="Select a theme"
-                  data-testid="select-email-theme"
-                >
-                  {themeTypes.email.map((theme, idx) => (
-                    <SelectOption
-                      selected={theme.name === value}
-                      key={`email-theme-${idx}`}
-                      value={theme.name}
-                    >
-                      {t(`${theme.name}`)}
-                    </SelectOption>
-                  ))}
-                </Select>
-              )}
-            />
-          </FormGroup>
-          <FormGroup
-            label={t("internationalization")}
-            fieldId="kc-internationalization"
-          >
-            <Controller
-              name="internationalizationEnabled"
-              control={control}
-              defaultValue={false}
-              render={({ onChange, value }) => (
-                <Switch
-                  id="kc-t-internationalization"
-                  label={t("common:enabled")}
-                  labelOff={t("common:disabled")}
-                  isChecked={value}
-                  data-testid={
-                    value
-                      ? "internationalization-enabled"
-                      : "internationalization-disabled"
-                  }
-                  onChange={onChange}
-                />
-              )}
-            />
-          </FormGroup>
-          {internationalizationEnabled && (
-            <>
-              <FormGroup
-                label={t("supportedLocales")}
-                fieldId="kc-t-supported-locales"
+          <Controller
+            name="loginTheme"
+            control={control}
+            defaultValue=""
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-login-theme"
+                onToggle={() => setLoginThemeOpen(!loginThemeOpen)}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setLoginThemeOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+                aria-label={t("loginTheme")}
+                isOpen={loginThemeOpen}
+                placeholderText="Select a theme"
+                data-testid="select-login-theme"
               >
-                <Controller
-                  name="supportedLocales"
-                  control={control}
-                  defaultValue={themeTypes?.account![0].locales}
-                  render={({ value, onChange }) => (
-                    <Select
-                      toggleId="kc-t-supported-locales"
-                      onToggle={() => {
-                        setSupportedLocalesOpen(!supportedLocalesOpen);
-                      }}
-                      onSelect={(_, v) => {
-                        const option = v as string;
-                        if (!value) {
-                          onChange([option]);
-                        } else if (value!.includes(option)) {
-                          onChange(
-                            value.filter((item: string) => item !== option)
-                          );
-                        } else {
-                          onChange([...value, option]);
-                        }
-                      }}
-                      onClear={() => {
-                        onChange([]);
-                      }}
-                      selections={value}
-                      variant={SelectVariant.typeaheadMulti}
-                      aria-label={t("supportedLocales")}
-                      isOpen={supportedLocalesOpen}
-                      placeholderText={"Select locales"}
-                    >
-                      {themeTypes?.login![0].locales.map(
-                        (locale: string, idx: number) => (
-                          <SelectOption
-                            selected={true}
-                            key={`locale-${idx}`}
-                            value={locale}
-                          >
-                            {t(`allSupportedLocales.${locale}`)}
-                          </SelectOption>
-                        )
-                      )}
-                    </Select>
-                  )}
-                />
-              </FormGroup>
-              <FormGroup label={t("defaultLocale")} fieldId="kc-default-locale">
-                <Controller
-                  name="defaultLocale"
-                  control={control}
-                  defaultValue=""
-                  render={({ onChange, value }) => (
-                    <Select
-                      toggleId="kc-t-default-locale"
-                      onToggle={() => setDefaultLocaleOpen(!defaultLocaleOpen)}
-                      onSelect={(_, value) => {
-                        onChange(value as string);
-                        setDefaultLocaleOpen(false);
-                      }}
-                      selections={value && t(`allSupportedLocales.${value}`)}
-                      variant={SelectVariant.single}
-                      aria-label={t("defaultLocale")}
-                      isOpen={defaultLocaleOpen}
-                      placeholderText="Select one"
-                      data-testid="select-default-locale"
-                    >
-                      {watchSupportedLocales.map(
-                        (locale: string, idx: number) => (
-                          <SelectOption
-                            key={`default-locale-${idx}`}
-                            value={locale}
-                          >
-                            {t(`allSupportedLocales.${locale}`)}
-                          </SelectOption>
-                        )
-                      )}
-                    </Select>
-                  )}
-                />
-              </FormGroup>
-            </>
-          )}
-          <ActionGroup>
-            <Button
-              variant="primary"
-              type="submit"
-              data-testid="themes-tab-save"
+                {themeTypes.login.map((theme, idx) => (
+                  <SelectOption
+                    selected={theme.name === value}
+                    key={`login-theme-${idx}`}
+                    value={theme.name}
+                  >
+                    {t(`${theme.name}`)}
+                  </SelectOption>
+                ))}
+              </Select>
+            )}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("accountTheme")}
+          fieldId="kc-account-theme"
+          labelIcon={
+            <HelpItem
+              helpText="realm-settings-help:accountTheme"
+              forLabel={t("accountTheme")}
+              forID="kc-account-theme"
+            />
+          }
+        >
+          <Controller
+            name="accountTheme"
+            control={control}
+            defaultValue=""
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-account-theme"
+                onToggle={() => setAccountThemeOpen(!accountThemeOpen)}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setAccountThemeOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+                aria-label={t("accountTheme")}
+                isOpen={accountThemeOpen}
+                placeholderText="Select a theme"
+                data-testid="select-account-theme"
+              >
+                {themeTypes.account.map((theme, idx) => (
+                  <SelectOption
+                    selected={theme.name === value}
+                    key={`account-theme-${idx}`}
+                    value={theme.name}
+                  >
+                    {t(`${theme.name}`)}
+                  </SelectOption>
+                ))}
+              </Select>
+            )}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("adminTheme")}
+          fieldId="kc-admin-console-theme"
+          labelIcon={
+            <HelpItem
+              helpText="realm-settings-help:adminConsoleTheme"
+              forLabel={t("adminTheme")}
+              forID="kc-admin-console-theme"
+            />
+          }
+        >
+          <Controller
+            name="adminTheme"
+            control={control}
+            defaultValue=""
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-admin-console-theme"
+                onToggle={() =>
+                  setAdminConsoleThemeOpen(!adminConsoleThemeOpen)
+                }
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setAdminConsoleThemeOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+                aria-label={t("adminConsoleTheme")}
+                isOpen={adminConsoleThemeOpen}
+                placeholderText="Select a theme"
+                data-testid="select-admin-theme"
+              >
+                {themeTypes.admin.map((theme, idx) => (
+                  <SelectOption
+                    selected={theme.name === value}
+                    key={`admin-theme-${idx}`}
+                    value={theme.name}
+                  >
+                    {t(`${theme.name}`)}
+                  </SelectOption>
+                ))}
+              </Select>
+            )}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("emailTheme")}
+          fieldId="kc-email-theme"
+          labelIcon={
+            <HelpItem
+              helpText="realm-settings-help:emailTheme"
+              forLabel={t("emailTheme")}
+              forID="kc-email-theme"
+            />
+          }
+        >
+          <Controller
+            name="emailTheme"
+            control={control}
+            defaultValue=""
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-email-theme"
+                onToggle={() => setEmailThemeOpen(!emailThemeOpen)}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setEmailThemeOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+                aria-label={t("emailTheme")}
+                isOpen={emailThemeOpen}
+                placeholderText="Select a theme"
+                data-testid="select-email-theme"
+              >
+                {themeTypes.email.map((theme, idx) => (
+                  <SelectOption
+                    selected={theme.name === value}
+                    key={`email-theme-${idx}`}
+                    value={theme.name}
+                  >
+                    {t(`${theme.name}`)}
+                  </SelectOption>
+                ))}
+              </Select>
+            )}
+          />
+        </FormGroup>
+        <FormGroup
+          label={t("internationalization")}
+          fieldId="kc-internationalization"
+        >
+          <Controller
+            name="internationalizationEnabled"
+            control={control}
+            defaultValue={false}
+            render={({ onChange, value }) => (
+              <Switch
+                id="kc-t-internationalization"
+                label={t("common:enabled")}
+                labelOff={t("common:disabled")}
+                isChecked={value}
+                data-testid={
+                  value
+                    ? "internationalization-enabled"
+                    : "internationalization-disabled"
+                }
+                onChange={onChange}
+              />
+            )}
+          />
+        </FormGroup>
+        {internationalizationEnabled && (
+          <>
+            <FormGroup
+              label={t("supportedLocales")}
+              fieldId="kc-t-supported-locales"
             >
-              {t("common:save")}
-            </Button>
-            <Button variant="link" onClick={reset}>
-              {t("common:revert")}
-            </Button>
-          </ActionGroup>
-        </FormAccess>
-      </PageSection>
-    </>
+              <Controller
+                name="supportedLocales"
+                control={control}
+                defaultValue={themeTypes?.account![0].locales}
+                render={({ value, onChange }) => (
+                  <Select
+                    toggleId="kc-t-supported-locales"
+                    onToggle={() => {
+                      setSupportedLocalesOpen(!supportedLocalesOpen);
+                    }}
+                    onSelect={(_, v) => {
+                      const option = v as string;
+                      if (!value) {
+                        onChange([option]);
+                      } else if (value!.includes(option)) {
+                        onChange(
+                          value.filter((item: string) => item !== option)
+                        );
+                      } else {
+                        onChange([...value, option]);
+                      }
+                    }}
+                    onClear={() => {
+                      onChange([]);
+                    }}
+                    selections={value}
+                    variant={SelectVariant.typeaheadMulti}
+                    aria-label={t("supportedLocales")}
+                    isOpen={supportedLocalesOpen}
+                    placeholderText={"Select locales"}
+                  >
+                    {themeTypes?.login![0].locales.map(
+                      (locale: string, idx: number) => (
+                        <SelectOption
+                          selected={true}
+                          key={`locale-${idx}`}
+                          value={locale}
+                        >
+                          {t(`allSupportedLocales.${locale}`)}
+                        </SelectOption>
+                      )
+                    )}
+                  </Select>
+                )}
+              />
+            </FormGroup>
+            <FormGroup label={t("defaultLocale")} fieldId="kc-default-locale">
+              <Controller
+                name="defaultLocale"
+                control={control}
+                defaultValue=""
+                render={({ onChange, value }) => (
+                  <Select
+                    toggleId="kc-t-default-locale"
+                    onToggle={() => setDefaultLocaleOpen(!defaultLocaleOpen)}
+                    onSelect={(_, value) => {
+                      onChange(value as string);
+                      setDefaultLocaleOpen(false);
+                    }}
+                    selections={value && t(`allSupportedLocales.${value}`)}
+                    variant={SelectVariant.single}
+                    aria-label={t("defaultLocale")}
+                    isOpen={defaultLocaleOpen}
+                    placeholderText="Select one"
+                    data-testid="select-default-locale"
+                  >
+                    {watchSupportedLocales.map(
+                      (locale: string, idx: number) => (
+                        <SelectOption
+                          key={`default-locale-${idx}`}
+                          value={locale}
+                        >
+                          {t(`allSupportedLocales.${locale}`)}
+                        </SelectOption>
+                      )
+                    )}
+                  </Select>
+                )}
+              />
+            </FormGroup>
+          </>
+        )}
+        <ActionGroup>
+          <Button variant="primary" type="submit" data-testid="themes-tab-save">
+            {t("common:save")}
+          </Button>
+          <Button variant="link" onClick={reset}>
+            {t("common:revert")}
+          </Button>
+        </ActionGroup>
+      </FormAccess>
+    </PageSection>
   );
 };
diff --git a/src/realm-settings/TokensTab.tsx b/src/realm-settings/TokensTab.tsx
index 5901719492..535189dcdc 100644
--- a/src/realm-settings/TokensTab.tsx
+++ b/src/realm-settings/TokensTab.tsx
@@ -101,302 +101,259 @@ export const RealmSettingsTokensTab = ({
     }
   };
   return (
-    <>
-      <PageSection variant="light">
-        <FormPanel
-          title={t("realm-settings:general")}
-          className="kc-sso-session-template"
+    <PageSection variant="light">
+      <FormPanel
+        title={t("realm-settings:general")}
+        className="kc-sso-session-template"
+      >
+        <FormAccess
+          isHorizontal
+          role="manage-realm"
+          onSubmit={form.handleSubmit(save)}
         >
-          <FormAccess
-            isHorizontal
-            role="manage-realm"
-            onSubmit={form.handleSubmit(save)}
-          >
-            <FormGroup
-              label={t("defaultSigAlg")}
-              fieldId="kc-default-signature-algorithm"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:defaultSigAlg"
-                  forLabel={t("defaultSigAlg")}
-                  forID={t("common:helpLabel", { label: t("algorithm") })}
-                />
-              }
-            >
-              <Controller
-                name="defaultSignatureAlgorithm"
-                defaultValue={"RS256"}
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <Select
-                    toggleId="kc-default-sig-alg"
-                    onToggle={() =>
-                      setDefaultSigAlgDrpdwnOpen(!defaultSigAlgDrpdwnIsOpen)
-                    }
-                    onSelect={(_, value) => {
-                      onChange(value.toString());
-                      setDefaultSigAlgDrpdwnOpen(false);
-                    }}
-                    selections={[value.toString()]}
-                    variant={SelectVariant.single}
-                    aria-label={t("defaultSigAlg")}
-                    isOpen={defaultSigAlgDrpdwnIsOpen}
-                    data-testid="select-default-sig-alg"
-                  >
-                    {defaultSigAlgOptions!.map((p, idx) => (
-                      <SelectOption
-                        selected={p === value}
-                        key={`default-sig-alg-${idx}`}
-                        value={p}
-                      ></SelectOption>
-                    ))}
-                  </Select>
-                )}
+          <FormGroup
+            label={t("defaultSigAlg")}
+            fieldId="kc-default-signature-algorithm"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:defaultSigAlg"
+                forLabel={t("defaultSigAlg")}
+                forID={t("common:helpLabel", { label: t("algorithm") })}
               />
-            </FormGroup>
-          </FormAccess>
-        </FormPanel>
-        <FormPanel
-          title={t("realm-settings:refreshTokens")}
-          className="kc-client-session-template"
+            }
+          >
+            <Controller
+              name="defaultSignatureAlgorithm"
+              defaultValue={"RS256"}
+              control={form.control}
+              render={({ onChange, value }) => (
+                <Select
+                  toggleId="kc-default-sig-alg"
+                  onToggle={() =>
+                    setDefaultSigAlgDrpdwnOpen(!defaultSigAlgDrpdwnIsOpen)
+                  }
+                  onSelect={(_, value) => {
+                    onChange(value.toString());
+                    setDefaultSigAlgDrpdwnOpen(false);
+                  }}
+                  selections={[value.toString()]}
+                  variant={SelectVariant.single}
+                  aria-label={t("defaultSigAlg")}
+                  isOpen={defaultSigAlgDrpdwnIsOpen}
+                  data-testid="select-default-sig-alg"
+                >
+                  {defaultSigAlgOptions!.map((p, idx) => (
+                    <SelectOption
+                      selected={p === value}
+                      key={`default-sig-alg-${idx}`}
+                      value={p}
+                    ></SelectOption>
+                  ))}
+                </Select>
+              )}
+            />
+          </FormGroup>
+        </FormAccess>
+      </FormPanel>
+      <FormPanel
+        title={t("realm-settings:refreshTokens")}
+        className="kc-client-session-template"
+      >
+        <FormAccess
+          isHorizontal
+          role="manage-realm"
+          className="pf-u-mt-lg"
+          onSubmit={form.handleSubmit(save)}
         >
-          <FormAccess
-            isHorizontal
-            role="manage-realm"
-            className="pf-u-mt-lg"
-            onSubmit={form.handleSubmit(save)}
+          <FormGroup
+            hasNoPaddingTop
+            label={t("revokeRefreshToken")}
+            fieldId="kc-revoke-refresh-token"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:revokeRefreshToken"
+                forLabel={t("revokeRefreshToken")}
+                forID="revokeRefreshToken"
+                id="revokeRefreshToken"
+              />
+            }
           >
-            <FormGroup
-              hasNoPaddingTop
-              label={t("revokeRefreshToken")}
-              fieldId="kc-revoke-refresh-token"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:revokeRefreshToken"
-                  forLabel={t("revokeRefreshToken")}
-                  forID="revokeRefreshToken"
-                  id="revokeRefreshToken"
+            <Controller
+              name="revokeRefreshToken"
+              control={form.control}
+              defaultValue={false}
+              render={({ onChange, value }) => (
+                <Switch
+                  id="kc-revoke-refresh-token"
+                  data-testid="revoke-refresh-token-switch"
+                  aria-label="revoke-refresh-token-switch"
+                  label={t("common:enabled")}
+                  labelOff={t("common:disabled")}
+                  isChecked={value}
+                  onChange={onChange}
                 />
-              }
-            >
-              <Controller
-                name="revokeRefreshToken"
-                control={form.control}
-                defaultValue={false}
-                render={({ onChange, value }) => (
-                  <Switch
-                    id="kc-revoke-refresh-token"
-                    data-testid="revoke-refresh-token-switch"
-                    aria-label="revoke-refresh-token-switch"
-                    label={t("common:enabled")}
-                    labelOff={t("common:disabled")}
-                    isChecked={value}
-                    onChange={onChange}
-                  />
-                )}
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("refreshTokenMaxReuse")}
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:refreshTokenMaxReuse"
+                forLabel={t("refreshTokenMaxReuse")}
+                forID="refreshTokenMaxReuse"
               />
-            </FormGroup>
-            <FormGroup
-              label={t("refreshTokenMaxReuse")}
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:refreshTokenMaxReuse"
-                  forLabel={t("refreshTokenMaxReuse")}
-                  forID="refreshTokenMaxReuse"
+            }
+            fieldId="refreshTokenMaxReuse"
+          >
+            <Controller
+              name="refreshTokenMaxReuse"
+              defaultValue={0}
+              control={form.control}
+              render={({ onChange, value }) => (
+                <NumberInput
+                  type="text"
+                  id="refreshTokenMaxReuseMs"
+                  value={value}
+                  onPlus={() => onChange(value + 1)}
+                  onMinus={() => onChange(value - 1)}
+                  onChange={(event) =>
+                    onChange(Number((event.target as HTMLInputElement).value))
+                  }
                 />
-              }
-              fieldId="refreshTokenMaxReuse"
-            >
-              <Controller
-                name="refreshTokenMaxReuse"
-                defaultValue={0}
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <NumberInput
-                    type="text"
-                    id="refreshTokenMaxReuseMs"
-                    value={value}
-                    onPlus={() => onChange(value + 1)}
-                    onMinus={() => onChange(value - 1)}
-                    onChange={(event) =>
-                      onChange(Number((event.target as HTMLInputElement).value))
-                    }
-                  />
-                )}
-              />
-            </FormGroup>
-          </FormAccess>
-        </FormPanel>
-        <FormPanel
-          title={t("realm-settings:accessTokens")}
-          className="kc-offline-session-template"
+              )}
+            />
+          </FormGroup>
+        </FormAccess>
+      </FormPanel>
+      <FormPanel
+        title={t("realm-settings:accessTokens")}
+        className="kc-offline-session-template"
+      >
+        <FormAccess
+          isHorizontal
+          role="manage-realm"
+          className="pf-u-mt-lg"
+          onSubmit={form.handleSubmit(save)}
         >
-          <FormAccess
-            isHorizontal
-            role="manage-realm"
-            className="pf-u-mt-lg"
-            onSubmit={form.handleSubmit(save)}
-          >
-            <FormGroup
-              label={t("accessTokenLifespan")}
-              fieldId="accessTokenLifespan"
-              helperText={`It is recommended for this value to be shorter than the SSO session idle timeout: ${interpolateTimespan(
-                forHumans(realm?.ssoSessionIdleTimeout!)
-              )}`}
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:accessTokenLifespan"
-                  forLabel={t("accessTokenLifespan")}
-                  forID="accessTokenLifespan"
-                  id="accessTokenLifespan"
-                />
-              }
-            >
-              <Controller
-                name="accessTokenLifespan"
-                defaultValue=""
-                helperTextInvalid={t("common:required")}
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    validated={
-                      value > realm?.ssoSessionIdleTimeout!
-                        ? "warning"
-                        : "default"
-                    }
-                    className="kc-access-token-lifespan"
-                    data-testid="access-token-lifespan-input"
-                    aria-label="access-token-lifespan"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
+          <FormGroup
+            label={t("accessTokenLifespan")}
+            fieldId="accessTokenLifespan"
+            helperText={`It is recommended for this value to be shorter than the SSO session idle timeout: ${interpolateTimespan(
+              forHumans(realm?.ssoSessionIdleTimeout!)
+            )}`}
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:accessTokenLifespan"
+                forLabel={t("accessTokenLifespan")}
+                forID="accessTokenLifespan"
+                id="accessTokenLifespan"
               />
-            </FormGroup>
+            }
+          >
+            <Controller
+              name="accessTokenLifespan"
+              defaultValue=""
+              helperTextInvalid={t("common:required")}
+              control={form.control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  validated={
+                    value > realm?.ssoSessionIdleTimeout!
+                      ? "warning"
+                      : "default"
+                  }
+                  className="kc-access-token-lifespan"
+                  data-testid="access-token-lifespan-input"
+                  aria-label="access-token-lifespan"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
 
-            <FormGroup
-              label={t("accessTokenLifespanImplicitFlow")}
-              fieldId="accessTokenLifespanImplicitFlow"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:accessTokenLifespanImplicitFlow"
-                  forLabel={t("accessTokenLifespanImplicitFlow")}
-                  forID="accessTokenLifespanImplicitFlow"
-                  id="accessTokenLifespanImplicitFlow"
-                />
-              }
-            >
-              <Controller
-                name="accessTokenLifespanForImplicitFlow"
-                defaultValue=""
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-access-token-lifespan-implicit"
-                    data-testid="access-token-lifespan-implicit-input"
-                    aria-label="access-token-lifespan-implicit"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
+          <FormGroup
+            label={t("accessTokenLifespanImplicitFlow")}
+            fieldId="accessTokenLifespanImplicitFlow"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:accessTokenLifespanImplicitFlow"
+                forLabel={t("accessTokenLifespanImplicitFlow")}
+                forID="accessTokenLifespanImplicitFlow"
+                id="accessTokenLifespanImplicitFlow"
               />
-            </FormGroup>
-            <FormGroup
-              label={t("clientLoginTimeout")}
-              fieldId="clientLoginTimeout"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:clientLoginTimeout"
-                  forLabel={t("clientLoginTimeout")}
-                  forID="clientLoginTimeout"
-                  id="clientLoginTimeout"
-                />
-              }
-            >
-              <Controller
-                name="accessCodeLifespan"
-                defaultValue=""
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-client-login-timeout"
-                    data-testid="client-login-timeout-input"
-                    aria-label="client-login-timeout"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
-              />
-            </FormGroup>
-
-            {offlineSessionMaxEnabled && (
-              <FormGroup
-                label={t("offlineSessionMax")}
-                fieldId="offlineSessionMax"
-                id="offline-session-max-label"
-                labelIcon={
-                  <HelpItem
-                    helpText="realm-settings-help:offlineSessionMax"
-                    forLabel={t("offlineSessionMax")}
-                    forID="offlineSessionMax"
-                    id="offlineSessionMax"
-                  />
-                }
-              >
-                <Controller
-                  name="offlineSessionMaxLifespan"
-                  defaultValue=""
-                  control={form.control}
-                  render={({ onChange, value }) => (
-                    <TimeSelector
-                      className="kc-offline-session-max"
-                      data-testid="offline-session-max-input"
-                      aria-label="offline-session-max-input"
-                      value={value}
-                      onChange={onChange}
-                      units={["minutes", "hours", "days"]}
-                    />
-                  )}
-                />
-              </FormGroup>
-            )}
-          </FormAccess>
-        </FormPanel>
-        <FormPanel
-          className="kc-login-settings-template"
-          title={t("actionTokens")}
-        >
-          <FormAccess
-            isHorizontal
-            role="manage-realm"
-            className="pf-u-mt-lg"
-            onSubmit={form.handleSubmit(save)}
+            }
           >
+            <Controller
+              name="accessTokenLifespanForImplicitFlow"
+              defaultValue=""
+              control={form.control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-access-token-lifespan-implicit"
+                  data-testid="access-token-lifespan-implicit-input"
+                  aria-label="access-token-lifespan-implicit"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("clientLoginTimeout")}
+            fieldId="clientLoginTimeout"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:clientLoginTimeout"
+                forLabel={t("clientLoginTimeout")}
+                forID="clientLoginTimeout"
+                id="clientLoginTimeout"
+              />
+            }
+          >
+            <Controller
+              name="accessCodeLifespan"
+              defaultValue=""
+              control={form.control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-client-login-timeout"
+                  data-testid="client-login-timeout-input"
+                  aria-label="client-login-timeout"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
+
+          {offlineSessionMaxEnabled && (
             <FormGroup
-              label={t("userInitiatedActionLifespan")}
-              id="kc-user-initiated-action-lifespan"
-              fieldId="userInitiatedActionLifespan"
+              label={t("offlineSessionMax")}
+              fieldId="offlineSessionMax"
+              id="offline-session-max-label"
               labelIcon={
                 <HelpItem
-                  helpText="realm-settings-help:userInitiatedActionLifespan"
-                  forLabel={t("userInitiatedActionLifespan")}
-                  forID="userInitiatedActionLifespan"
-                  id="userInitiatedActionLifespan"
+                  helpText="realm-settings-help:offlineSessionMax"
+                  forLabel={t("offlineSessionMax")}
+                  forID="offlineSessionMax"
+                  id="offlineSessionMax"
                 />
               }
             >
               <Controller
-                name="actionTokenGeneratedByUserLifespan"
-                defaultValue={""}
+                name="offlineSessionMaxLifespan"
+                defaultValue=""
                 control={form.control}
                 render={({ onChange, value }) => (
                   <TimeSelector
-                    className="kc-user-initiated-action-lifespan"
-                    data-testid="user-initiated-action-lifespan"
-                    aria-label="user-initiated-action-lifespan"
+                    className="kc-offline-session-max"
+                    data-testid="offline-session-max-input"
+                    aria-label="offline-session-max-input"
                     value={value}
                     onChange={onChange}
                     units={["minutes", "hours", "days"]}
@@ -404,141 +361,182 @@ export const RealmSettingsTokensTab = ({
                 )}
               />
             </FormGroup>
-            <FormGroup
-              label={t("defaultAdminInitiated")}
-              fieldId="defaultAdminInitiated"
-              id="default-admin-initiated-label"
-              labelIcon={
-                <HelpItem
-                  helpText="realm-settings-help:defaultAdminInitiatedActionLifespan"
-                  forLabel={t("defaultAdminInitiated")}
-                  forID="defaultAdminInitiated"
-                  id="defaultAdminInitiated"
+          )}
+        </FormAccess>
+      </FormPanel>
+      <FormPanel
+        className="kc-login-settings-template"
+        title={t("actionTokens")}
+      >
+        <FormAccess
+          isHorizontal
+          role="manage-realm"
+          className="pf-u-mt-lg"
+          onSubmit={form.handleSubmit(save)}
+        >
+          <FormGroup
+            label={t("userInitiatedActionLifespan")}
+            id="kc-user-initiated-action-lifespan"
+            fieldId="userInitiatedActionLifespan"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:userInitiatedActionLifespan"
+                forLabel={t("userInitiatedActionLifespan")}
+                forID="userInitiatedActionLifespan"
+                id="userInitiatedActionLifespan"
+              />
+            }
+          >
+            <Controller
+              name="actionTokenGeneratedByUserLifespan"
+              defaultValue={""}
+              control={form.control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-user-initiated-action-lifespan"
+                  data-testid="user-initiated-action-lifespan"
+                  aria-label="user-initiated-action-lifespan"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
                 />
-              }
-            >
-              <Controller
-                name="actionTokenGeneratedByAdminLifespan"
-                defaultValue={""}
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-default-admin-initiated"
-                    data-testid="default-admin-initated-input"
-                    aria-label="default-admin-initated-input"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("defaultAdminInitiated")}
+            fieldId="defaultAdminInitiated"
+            id="default-admin-initiated-label"
+            labelIcon={
+              <HelpItem
+                helpText="realm-settings-help:defaultAdminInitiatedActionLifespan"
+                forLabel={t("defaultAdminInitiated")}
+                forID="defaultAdminInitiated"
+                id="defaultAdminInitiated"
               />
-            </FormGroup>
-            <Text
-              className="kc-override-action-tokens-subtitle"
-              component={TextVariants.h1}
+            }
+          >
+            <Controller
+              name="actionTokenGeneratedByAdminLifespan"
+              defaultValue={""}
+              control={form.control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-default-admin-initiated"
+                  data-testid="default-admin-initated-input"
+                  aria-label="default-admin-initated-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
+          <Text
+            className="kc-override-action-tokens-subtitle"
+            component={TextVariants.h1}
+          >
+            {t("overrideActionTokens")}
+          </Text>
+          <FormGroup
+            label={t("emailVerification")}
+            fieldId="emailVerification"
+            id="email-verification"
+          >
+            <Controller
+              name="attributes.actionTokenGeneratedByUserLifespan-verify-email"
+              defaultValue={""}
+              control={form.control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-email-verification"
+                  data-testid="email-verification-input"
+                  aria-label="email-verification-input"
+                  value={value}
+                  onChange={(value: any) => onChange(value.toString())}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("idpAccountEmailVerification")}
+            fieldId="idpAccountEmailVerification"
+            id="idp-acct-label"
+          >
+            <Controller
+              name="attributes.actionTokenGeneratedByUserLifespan-idp-verify-account-via-email"
+              defaultValue={""}
+              control={form.control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-idp-email-verification"
+                  data-testid="idp-email-verification-input"
+                  aria-label="idp-email-verification"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("forgotPassword")}
+            fieldId="forgotPassword"
+            id="forgot-password-label"
+          >
+            <Controller
+              name="attributes.actionTokenGeneratedByUserLifespan-reset-credentials"
+              defaultValue={""}
+              control={form.control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-forgot-pw"
+                  data-testid="forgot-pw-input"
+                  aria-label="forgot-pw-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
+          <FormGroup
+            label={t("executeActions")}
+            fieldId="executeActions"
+            id="execute-actions"
+          >
+            <Controller
+              name="attributes.actionTokenGeneratedByUserLifespan-execute-actions"
+              defaultValue={""}
+              control={form.control}
+              render={({ onChange, value }) => (
+                <TimeSelector
+                  className="kc-execute-actions"
+                  data-testid="execute-actions-input"
+                  aria-label="execute-actions-input"
+                  value={value}
+                  onChange={onChange}
+                  units={["minutes", "hours", "days"]}
+                />
+              )}
+            />
+          </FormGroup>
+          <ActionGroup>
+            <Button
+              variant="primary"
+              type="submit"
+              data-testid="tokens-tab-save"
+              isDisabled={!form.formState.isDirty}
             >
-              {t("overrideActionTokens")}
-            </Text>
-            <FormGroup
-              label={t("emailVerification")}
-              fieldId="emailVerification"
-              id="email-verification"
-            >
-              <Controller
-                name="attributes.actionTokenGeneratedByUserLifespan-verify-email"
-                defaultValue={""}
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-email-verification"
-                    data-testid="email-verification-input"
-                    aria-label="email-verification-input"
-                    value={value}
-                    onChange={(value: any) => onChange(value.toString())}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
-              />
-            </FormGroup>
-            <FormGroup
-              label={t("idpAccountEmailVerification")}
-              fieldId="idpAccountEmailVerification"
-              id="idp-acct-label"
-            >
-              <Controller
-                name="attributes.actionTokenGeneratedByUserLifespan-idp-verify-account-via-email"
-                defaultValue={""}
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-idp-email-verification"
-                    data-testid="idp-email-verification-input"
-                    aria-label="idp-email-verification"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
-              />
-            </FormGroup>
-            <FormGroup
-              label={t("forgotPassword")}
-              fieldId="forgotPassword"
-              id="forgot-password-label"
-            >
-              <Controller
-                name="attributes.actionTokenGeneratedByUserLifespan-reset-credentials"
-                defaultValue={""}
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-forgot-pw"
-                    data-testid="forgot-pw-input"
-                    aria-label="forgot-pw-input"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
-              />
-            </FormGroup>
-            <FormGroup
-              label={t("executeActions")}
-              fieldId="executeActions"
-              id="execute-actions"
-            >
-              <Controller
-                name="attributes.actionTokenGeneratedByUserLifespan-execute-actions"
-                defaultValue={""}
-                control={form.control}
-                render={({ onChange, value }) => (
-                  <TimeSelector
-                    className="kc-execute-actions"
-                    data-testid="execute-actions-input"
-                    aria-label="execute-actions-input"
-                    value={value}
-                    onChange={onChange}
-                    units={["minutes", "hours", "days"]}
-                  />
-                )}
-              />
-            </FormGroup>
-            <ActionGroup>
-              <Button
-                variant="primary"
-                type="submit"
-                data-testid="tokens-tab-save"
-                isDisabled={!form.formState.isDirty}
-              >
-                {t("common:save")}
-              </Button>
-              <Button variant="link" onClick={reset}>
-                {t("common:revert")}
-              </Button>
-            </ActionGroup>
-          </FormAccess>
-        </FormPanel>
-      </PageSection>
-    </>
+              {t("common:save")}
+            </Button>
+            <Button variant="link" onClick={reset}>
+              {t("common:revert")}
+            </Button>
+          </ActionGroup>
+        </FormAccess>
+      </FormPanel>
+    </PageSection>
   );
 };
diff --git a/src/realm-settings/event-config/EventsTypeTable.tsx b/src/realm-settings/event-config/EventsTypeTable.tsx
index 728189ab25..ea7f97f9d0 100644
--- a/src/realm-settings/event-config/EventsTypeTable.tsx
+++ b/src/realm-settings/event-config/EventsTypeTable.tsx
@@ -39,15 +39,13 @@ export function EventsTypeTable({
       onSelect={onSelect ? onSelect : undefined}
       canSelectAll={!!onSelect}
       toolbarItem={
-        <>
-          {addTypes && (
-            <ToolbarItem>
-              <Button id="addTypes" onClick={addTypes} data-testid="addTypes">
-                {t("addSavedTypes")}
-              </Button>
-            </ToolbarItem>
-          )}
-        </>
+        addTypes && (
+          <ToolbarItem>
+            <Button id="addTypes" onClick={addTypes} data-testid="addTypes">
+              {t("addSavedTypes")}
+            </Button>
+          </ToolbarItem>
+        )
       }
       actions={
         !onDelete
diff --git a/src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx b/src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx
index d998ab1d11..244860d5e4 100644
--- a/src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx
@@ -195,20 +195,18 @@ export const AESGeneratedForm = ({
           />
         )}
         {editMode && (
-          <>
-            <TextInput
-              ref={form.register()}
-              type="text"
-              id="name"
-              name="name"
-              defaultValue={providerId}
-              validated={
-                form.errors.name
-                  ? ValidatedOptions.error
-                  : ValidatedOptions.default
-              }
-            />
-          </>
+          <TextInput
+            ref={form.register()}
+            type="text"
+            id="name"
+            name="name"
+            defaultValue={providerId}
+            validated={
+              form.errors.name
+                ? ValidatedOptions.error
+                : ValidatedOptions.default
+            }
+          />
         )}
       </FormGroup>
       <FormGroup
diff --git a/src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx b/src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx
index 547b65279e..f11aa91bc8 100644
--- a/src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx
@@ -194,20 +194,18 @@ export const ECDSAGeneratedForm = ({
           />
         )}
         {editMode && (
-          <>
-            <TextInput
-              ref={form.register()}
-              type="text"
-              id="name"
-              name="name"
-              defaultValue={providerId}
-              validated={
-                form.errors.name
-                  ? ValidatedOptions.error
-                  : ValidatedOptions.default
-              }
-            />
-          </>
+          <TextInput
+            ref={form.register()}
+            type="text"
+            id="name"
+            name="name"
+            defaultValue={providerId}
+            validated={
+              form.errors.name
+                ? ValidatedOptions.error
+                : ValidatedOptions.default
+            }
+          />
         )}
       </FormGroup>
       <FormGroup
diff --git a/src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx b/src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx
index de17e9594c..08a0fcf9c5 100644
--- a/src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx
@@ -202,20 +202,18 @@ export const HMACGeneratedForm = ({
           />
         )}
         {editMode && (
-          <>
-            <TextInput
-              ref={form.register()}
-              type="text"
-              id="name"
-              name="name"
-              defaultValue={providerId}
-              validated={
-                form.errors.name
-                  ? ValidatedOptions.error
-                  : ValidatedOptions.default
-              }
-            />
-          </>
+          <TextInput
+            ref={form.register()}
+            type="text"
+            id="name"
+            name="name"
+            defaultValue={providerId}
+            validated={
+              form.errors.name
+                ? ValidatedOptions.error
+                : ValidatedOptions.default
+            }
+          />
         )}
       </FormGroup>
       <FormGroup
diff --git a/src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx b/src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx
index 9f6a619a61..586de2e95a 100644
--- a/src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx
+++ b/src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx
@@ -209,20 +209,18 @@ export const JavaKeystoreForm = ({
           />
         )}
         {editMode && (
-          <>
-            <TextInput
-              ref={form.register()}
-              type="text"
-              id="name"
-              name="name"
-              defaultValue={providerId}
-              validated={
-                form.errors.name
-                  ? ValidatedOptions.error
-                  : ValidatedOptions.default
-              }
-            />
-          </>
+          <TextInput
+            ref={form.register()}
+            type="text"
+            id="name"
+            name="name"
+            defaultValue={providerId}
+            validated={
+              form.errors.name
+                ? ValidatedOptions.error
+                : ValidatedOptions.default
+            }
+          />
         )}
       </FormGroup>
       <FormGroup
diff --git a/src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx b/src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx
index 73a24d7805..69b7d3375d 100644
--- a/src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx
@@ -203,20 +203,18 @@ export const RSAGeneratedForm = ({
           />
         )}
         {editMode && (
-          <>
-            <TextInput
-              ref={form.register()}
-              type="text"
-              id="name"
-              name="name"
-              defaultValue={providerId}
-              validated={
-                form.errors.name
-                  ? ValidatedOptions.error
-                  : ValidatedOptions.default
-              }
-            />
-          </>
+          <TextInput
+            ref={form.register()}
+            type="text"
+            id="name"
+            name="name"
+            defaultValue={providerId}
+            validated={
+              form.errors.name
+                ? ValidatedOptions.error
+                : ValidatedOptions.default
+            }
+          />
         )}
       </FormGroup>
       <FormGroup
diff --git a/src/realm-settings/key-providers/rsa/RSAForm.tsx b/src/realm-settings/key-providers/rsa/RSAForm.tsx
index 22510cd6e6..727ade955d 100644
--- a/src/realm-settings/key-providers/rsa/RSAForm.tsx
+++ b/src/realm-settings/key-providers/rsa/RSAForm.tsx
@@ -212,20 +212,18 @@ export const RSAForm = ({
           />
         )}
         {editMode && (
-          <>
-            <TextInput
-              ref={form.register()}
-              type="text"
-              id="name"
-              name="name"
-              defaultValue={providerId}
-              validated={
-                form.errors.name
-                  ? ValidatedOptions.error
-                  : ValidatedOptions.default
-              }
-            />
-          </>
+          <TextInput
+            ref={form.register()}
+            type="text"
+            id="name"
+            name="name"
+            defaultValue={providerId}
+            validated={
+              form.errors.name
+                ? ValidatedOptions.error
+                : ValidatedOptions.default
+            }
+          />
         )}
       </FormGroup>
       <FormGroup
diff --git a/src/user-federation/kerberos/KerberosSettingsRequired.tsx b/src/user-federation/kerberos/KerberosSettingsRequired.tsx
index ba8e98ac32..3e6c9fdd9b 100644
--- a/src/user-federation/kerberos/KerberosSettingsRequired.tsx
+++ b/src/user-federation/kerberos/KerberosSettingsRequired.tsx
@@ -316,9 +316,7 @@ export const KerberosSettingsRequired = ({
               )}
             ></Controller>
           </FormGroup>
-        ) : (
-          <></>
-        )}
+        ) : null}
 
         <FormGroup
           label={t("updateFirstLogin")}
diff --git a/src/user-federation/ldap/mappers/LdapMapperHardcodedLdapGroup.tsx b/src/user-federation/ldap/mappers/LdapMapperHardcodedLdapGroup.tsx
index e3716e8bfd..f4c2fcbeca 100644
--- a/src/user-federation/ldap/mappers/LdapMapperHardcodedLdapGroup.tsx
+++ b/src/user-federation/ldap/mappers/LdapMapperHardcodedLdapGroup.tsx
@@ -15,33 +15,31 @@ export const LdapMapperHardcodedLdapGroup = ({
   const helpText = useTranslation("user-federation-help").t;
 
   return (
-    <>
-      <FormGroup
-        label={t("group")}
-        labelIcon={
-          <HelpItem
-            helpText={helpText("groupHelp")}
-            forLabel={t("group")}
-            forID="kc-group"
-          />
-        }
-        fieldId="kc-group"
-        isRequired
-      >
-        <TextInput
-          isRequired
-          type="text"
-          id="kc-group"
-          data-testid="mapper-group-fld"
-          name="config.group[0]"
-          ref={form.register({ required: true })}
-          validated={
-            form.errors.config?.group
-              ? ValidatedOptions.error
-              : ValidatedOptions.default
-          }
+    <FormGroup
+      label={t("group")}
+      labelIcon={
+        <HelpItem
+          helpText={helpText("groupHelp")}
+          forLabel={t("group")}
+          forID="kc-group"
         />
-      </FormGroup>
-    </>
+      }
+      fieldId="kc-group"
+      isRequired
+    >
+      <TextInput
+        isRequired
+        type="text"
+        id="kc-group"
+        data-testid="mapper-group-fld"
+        name="config.group[0]"
+        ref={form.register({ required: true })}
+        validated={
+          form.errors.config?.group
+            ? ValidatedOptions.error
+            : ValidatedOptions.default
+        }
+      />
+    </FormGroup>
   );
 };
diff --git a/src/user-federation/ldap/mappers/LdapMapperList.tsx b/src/user-federation/ldap/mappers/LdapMapperList.tsx
index ce497e88df..91a7c52dc6 100644
--- a/src/user-federation/ldap/mappers/LdapMapperList.tsx
+++ b/src/user-federation/ldap/mappers/LdapMapperList.tsx
@@ -76,9 +76,7 @@ export const LdapMapperList = () => {
   };
 
   const MapperLink = (mapper: ComponentRepresentation) => (
-    <>
-      <Link to={`${getUrl(url)}/${mapper.id}`}>{mapper.name}</Link>
-    </>
+    <Link to={`${getUrl(url)}/${mapper.id}`}>{mapper.name}</Link>
   );
 
   return (
diff --git a/src/user-federation/ldap/mappers/LdapMapperMsadUserAccount.tsx b/src/user-federation/ldap/mappers/LdapMapperMsadUserAccount.tsx
index d13b9d2a07..1223961845 100644
--- a/src/user-federation/ldap/mappers/LdapMapperMsadUserAccount.tsx
+++ b/src/user-federation/ldap/mappers/LdapMapperMsadUserAccount.tsx
@@ -15,35 +15,33 @@ export const LdapMapperMsadUserAccount = ({
   const helpText = useTranslation("user-federation-help").t;
 
   return (
-    <>
-      <FormGroup
-        label={t("passwordPolicyHintsEnabled")}
-        labelIcon={
-          <HelpItem
-            helpText={helpText("passwordPolicyHintsEnabledHelp")}
-            forLabel={t("passwordPolicyHintsEnabled")}
-            forID="kc-pw-policy-hints-enabled"
+    <FormGroup
+      label={t("passwordPolicyHintsEnabled")}
+      labelIcon={
+        <HelpItem
+          helpText={helpText("passwordPolicyHintsEnabledHelp")}
+          forLabel={t("passwordPolicyHintsEnabled")}
+          forID="kc-pw-policy-hints-enabled"
+        />
+      }
+      fieldId="kc-der-formatted"
+      hasNoPaddingTop
+    >
+      <Controller
+        name="config.ldap-password-policy-hints-enabled"
+        defaultValue={["false"]}
+        control={form.control}
+        render={({ onChange, value }) => (
+          <Switch
+            id={"kc-pw-policy-hints-enabled"}
+            isDisabled={false}
+            onChange={(value) => onChange([`${value}`])}
+            isChecked={value[0] === "true"}
+            label={t("common:on")}
+            labelOff={t("common:off")}
           />
-        }
-        fieldId="kc-der-formatted"
-        hasNoPaddingTop
-      >
-        <Controller
-          name="config.ldap-password-policy-hints-enabled"
-          defaultValue={["false"]}
-          control={form.control}
-          render={({ onChange, value }) => (
-            <Switch
-              id={"kc-pw-policy-hints-enabled"}
-              isDisabled={false}
-              onChange={(value) => onChange([`${value}`])}
-              isChecked={value[0] === "true"}
-              label={t("common:on")}
-              labelOff={t("common:off")}
-            />
-          )}
-        ></Controller>
-      </FormGroup>
-    </>
+        )}
+      ></Controller>
+    </FormGroup>
   );
 };
diff --git a/src/user-federation/ldap/mappers/LdapMapperUserAttribute.tsx b/src/user-federation/ldap/mappers/LdapMapperUserAttribute.tsx
index 1e36cf129d..e1a5b4300b 100644
--- a/src/user-federation/ldap/mappers/LdapMapperUserAttribute.tsx
+++ b/src/user-federation/ldap/mappers/LdapMapperUserAttribute.tsx
@@ -173,39 +173,35 @@ export const LdapMapperUserAttribute = ({
         ></Controller>
       </FormGroup>
       {mapperType === "certificate-ldap-mapper" ? (
-        <>
-          <FormGroup
-            label={t("derFormatted")}
-            labelIcon={
-              <HelpItem
-                helpText={helpText("derFormattedHelp")}
-                forLabel={t("derFormatted")}
-                forID="kc-der-formatted"
+        <FormGroup
+          label={t("derFormatted")}
+          labelIcon={
+            <HelpItem
+              helpText={helpText("derFormattedHelp")}
+              forLabel={t("derFormatted")}
+              forID="kc-der-formatted"
+            />
+          }
+          fieldId="kc-der-formatted"
+          hasNoPaddingTop
+        >
+          <Controller
+            name="config.is-der-formatted"
+            defaultValue={["false"]}
+            control={form.control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-der-formatted"}
+                isDisabled={false}
+                onChange={(value) => onChange([`${value}`])}
+                isChecked={value[0] === "true"}
+                label={t("common:on")}
+                labelOff={t("common:off")}
               />
-            }
-            fieldId="kc-der-formatted"
-            hasNoPaddingTop
-          >
-            <Controller
-              name="config.is-der-formatted"
-              defaultValue={["false"]}
-              control={form.control}
-              render={({ onChange, value }) => (
-                <Switch
-                  id={"kc-der-formatted"}
-                  isDisabled={false}
-                  onChange={(value) => onChange([`${value}`])}
-                  isChecked={value[0] === "true"}
-                  label={t("common:on")}
-                  labelOff={t("common:off")}
-                />
-              )}
-            ></Controller>
-          </FormGroup>
-        </>
-      ) : (
-        <></>
-      )}
+            )}
+          ></Controller>
+        </FormGroup>
+      ) : null}
     </>
   );
 };
diff --git a/src/user-federation/shared/SettingsCache.tsx b/src/user-federation/shared/SettingsCache.tsx
index 3f1e2350bd..9286a3f33a 100644
--- a/src/user-federation/shared/SettingsCache.tsx
+++ b/src/user-federation/shared/SettingsCache.tsx
@@ -190,9 +190,7 @@ export const SettingsCache = ({
               )}
             ></Controller>
           </FormGroup>
-        ) : (
-          <></>
-        )}
+        ) : null}
         {_.isEqual(cachePolicyType, ["EVICT_DAILY"]) ||
         _.isEqual(cachePolicyType, ["EVICT_WEEKLY"]) ? (
           <>
@@ -269,9 +267,7 @@ export const SettingsCache = ({
               ></Controller>
             </FormGroup>
           </>
-        ) : (
-          <></>
-        )}
+        ) : null}
         {_.isEqual(cachePolicyType, ["MAX_LIFESPAN"]) ? (
           <FormGroup
             label={t("maxLifespan")}
@@ -292,9 +288,7 @@ export const SettingsCache = ({
               data-testid="kerberos-cache-lifespan"
             />
           </FormGroup>
-        ) : (
-          <></>
-        )}
+        ) : null}
       </FormAccess>
     </>
   );
diff --git a/src/user/UserForm.tsx b/src/user/UserForm.tsx
index e3db3bbfeb..8b5243db84 100644
--- a/src/user/UserForm.tsx
+++ b/src/user/UserForm.tsx
@@ -353,28 +353,26 @@ export const UserForm = ({
             typeAheadAriaLabel="Select an action"
             control={control}
             render={() => (
-              <>
-                <InputGroup>
-                  <ChipGroup categoryName={" "}>
-                    {selectedGroups.map((currentChip) => (
-                      <Chip
-                        key={currentChip.id}
-                        onClick={() => deleteItem(currentChip.name!)}
-                      >
-                        {currentChip.path}
-                      </Chip>
-                    ))}
-                  </ChipGroup>
-                  <Button
-                    id="kc-join-groups-button"
-                    onClick={toggleModal}
-                    variant="secondary"
-                    data-testid="join-groups-button"
-                  >
-                    {t("users:joinGroups")}
-                  </Button>
-                </InputGroup>
-              </>
+              <InputGroup>
+                <ChipGroup categoryName={" "}>
+                  {selectedGroups.map((currentChip) => (
+                    <Chip
+                      key={currentChip.id}
+                      onClick={() => deleteItem(currentChip.name!)}
+                    >
+                      {currentChip.path}
+                    </Chip>
+                  ))}
+                </ChipGroup>
+                <Button
+                  id="kc-join-groups-button"
+                  onClick={toggleModal}
+                  variant="secondary"
+                  data-testid="join-groups-button"
+                >
+                  {t("users:joinGroups")}
+                </Button>
+              </InputGroup>
             )}
           />
         </FormGroup>
diff --git a/src/user/UserGroups.tsx b/src/user/UserGroups.tsx
index 147afab0a4..d7d338c139 100644
--- a/src/user/UserGroups.tsx
+++ b/src/user/UserGroups.tsx
@@ -189,9 +189,7 @@ export const UserGroups = () => {
     refresh();
   }, [isDirectMembership]);
 
-  const AliasRenderer = (group: GroupRepresentation) => {
-    return <>{group.name}</>;
-  };
+  const AliasRenderer = (group: GroupRepresentation) => group.name;
 
   const toggleModal = () => {
     setOpen(!open);
@@ -232,17 +230,15 @@ export const UserGroups = () => {
       directMembershipList.length === 0 ||
       isDirectMembership;
     return (
-      <>
-        {canLeaveGroup && (
-          <Button
-            data-testid={`leave-${group.name}`}
-            onClick={() => leave(group)}
-            variant="link"
-          >
-            {t("leave")}
-          </Button>
-        )}
-      </>
+      canLeaveGroup && (
+        <Button
+          data-testid={`leave-${group.name}`}
+          onClick={() => leave(group)}
+          variant="link"
+        >
+          {t("leave")}
+        </Button>
+      )
     );
   };
 
diff --git a/src/user/UsersSection.tsx b/src/user/UsersSection.tsx
index d8676e94d5..556d594d52 100644
--- a/src/user/UsersSection.tsx
+++ b/src/user/UsersSection.tsx
@@ -63,14 +63,12 @@ export const UsersSection = () => {
   );
 
   const UserDetailLink = (user: UserRepresentation) => (
-    <>
-      <Link
-        key={user.username}
-        to={toUser({ realm: realmName, id: user.id!, tab: "settings" })}
-      >
-        {user.username}
-      </Link>
-    </>
+    <Link
+      key={user.username}
+      to={toUser({ realm: realmName, id: user.id!, tab: "settings" })}
+    >
+      {user.username}
+    </Link>
   );
 
   const loader = async (first?: number, max?: number, search?: string) => {