diff --git a/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts b/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts
index a245740e43..609fae3225 100644
--- a/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts
+++ b/js/apps/admin-ui/cypress/e2e/clients_test.spec.ts
@@ -854,8 +854,8 @@ describe("Clients test", () => {
 
       advancedTab.revertAuthFlowOverride();
       advancedTab.jumpToAuthFlow();
-      advancedTab.checkBrowserFlowInput("");
-      advancedTab.checkDirectGrantInput("");
+      advancedTab.checkBrowserFlowInput("Choose...");
+      advancedTab.checkDirectGrantInput("Choose...");
       advancedTab.selectBrowserFlowInput("browser");
       advancedTab.selectDirectGrantInput("docker auth");
 
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts
index 3fa57e7f13..0c65f325c2 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/clients/client_details/tabs/AdvancedTab.ts
@@ -13,7 +13,7 @@ export default class AdvancedTab extends PageObject {
   #nodeHostInput = "node";
   #addNodeConfirmBtn = "#add-node-confirm";
 
-  #accessTokenSignatureAlgorithmInput = "#accessTokenSignatureAlgorithm";
+  #accessTokenSignatureAlgorithmInput = "#access🍺token🍺signed🍺response🍺alg";
   #fineGrainSaveBtn = "#fineGrainSave";
   #fineGrainRevertBtn = "#fineGrainRevert";
   #OIDCCompatabilitySaveBtn = "OIDCCompatabilitySave";
@@ -36,8 +36,8 @@ export default class AdvancedTab extends PageObject {
   #pushedAuthorizationRequestRequiredSwitch =
     "attributes.require🍺pushed🍺authorization🍺requests";
 
-  #browserFlowInput = "#browserFlow";
-  #directGrantInput = "#directGrant";
+  #browserFlowInput = "#browser";
+  #directGrantInput = "#direct_grant";
 
   #jumpToOIDCCompatabilitySettings =
     "jump-link-openid-connect-compatibility-modes";
diff --git a/js/apps/admin-ui/src/clients/advanced/AuthenticationOverrides.tsx b/js/apps/admin-ui/src/clients/advanced/AuthenticationOverrides.tsx
index 489e802d68..d12e3ae387 100644
--- a/js/apps/admin-ui/src/clients/advanced/AuthenticationOverrides.tsx
+++ b/js/apps/admin-ui/src/clients/advanced/AuthenticationOverrides.tsx
@@ -1,20 +1,11 @@
-import {
-  ActionGroup,
-  Button,
-  FormGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-} from "@patternfly/react-core";
+import AuthenticationFlowRepresentation from "@keycloak/keycloak-admin-client/lib/defs/authenticationFlowRepresentation";
+import { ActionGroup, Button } from "@patternfly/react-core";
 import { sortBy } from "lodash-es";
 import { useState } from "react";
-import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-
-import { FormAccess } from "../../components/form/FormAccess";
-import { HelpItem } from "ui-shared";
-
+import { SelectControl } from "ui-shared";
 import { adminClient } from "../../admin-client";
+import { FormAccess } from "../../components/form/FormAccess";
 import { useFetch } from "../../utils/useFetch";
 
 type AuthenticationOverridesProps = {
@@ -31,11 +22,7 @@ export const AuthenticationOverrides = ({
   hasConfigureAccess,
 }: AuthenticationOverridesProps) => {
   const { t } = useTranslation();
-  const [flows, setFlows] = useState<JSX.Element[]>([]);
-  const [browserFlowOpen, setBrowserFlowOpen] = useState(false);
-  const [directGrantOpen, setDirectGrantOpen] = useState(false);
-
-  const { control } = useFormContext();
+  const [flows, setFlows] = useState<AuthenticationFlowRepresentation[]>([]);
 
   useFetch(
     () => adminClient.authenticationManagement.getFlows(),
@@ -44,16 +31,7 @@ export const AuthenticationOverrides = ({
         ...flows.filter((flow) => flow.providerId !== "client-flow"),
       ];
       filteredFlows = sortBy(filteredFlows, [(f) => f.alias]);
-      setFlows([
-        <SelectOption key="empty" value="">
-          {t("choose")}
-        </SelectOption>,
-        ...filteredFlows.map((flow) => (
-          <SelectOption key={flow.id} value={flow.id}>
-            {flow.alias}
-          </SelectOption>
-        )),
-      ]);
+      setFlows(filteredFlows);
     },
     [],
   );
@@ -64,69 +42,31 @@ export const AuthenticationOverrides = ({
       fineGrainedAccess={hasConfigureAccess}
       isHorizontal
     >
-      <FormGroup
+      <SelectControl
+        name="authenticationFlowBindingOverrides.browser"
         label={t("browserFlow")}
-        fieldId="browserFlow"
-        labelIcon={
-          <HelpItem
-            helpText={t("browserFlowHelp")}
-            fieldLabelId="browserFlow"
-          />
-        }
-      >
-        <Controller
-          name="authenticationFlowBindingOverrides.browser"
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="browserFlow"
-              variant={SelectVariant.single}
-              onToggle={setBrowserFlowOpen}
-              isOpen={browserFlowOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setBrowserFlowOpen(false);
-              }}
-              selections={[field.value]}
-            >
-              {flows}
-            </Select>
-          )}
-        />
-      </FormGroup>
+        labelIcon={t("browserFlowHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={[
+          { key: "", value: t("choose") },
+          ...flows.map(({ id, alias }) => ({ key: id!, value: alias! })),
+        ]}
+      />
       {protocol === "openid-connect" && (
-        <FormGroup
+        <SelectControl
+          name="authenticationFlowBindingOverrides.direct_grant"
           label={t("directGrant")}
-          fieldId="directGrant"
-          labelIcon={
-            <HelpItem
-              helpText={t("directGrantHelp")}
-              fieldLabelId="directGrant"
-            />
-          }
-        >
-          <Controller
-            name="authenticationFlowBindingOverrides.direct_grant"
-            defaultValue=""
-            control={control}
-            render={({ field }) => (
-              <Select
-                toggleId="directGrant"
-                variant={SelectVariant.single}
-                onToggle={setDirectGrantOpen}
-                isOpen={directGrantOpen}
-                onSelect={(_, value) => {
-                  field.onChange(value);
-                  setDirectGrantOpen(false);
-                }}
-                selections={[field.value]}
-              >
-                {flows}
-              </Select>
-            )}
-          />
-        </FormGroup>
+          labelIcon={t("directGrantHelp")}
+          controller={{
+            defaultValue: "",
+          }}
+          options={[
+            { key: "", value: t("choose") },
+            ...flows.map(({ id, alias }) => ({ key: id!, value: alias! })),
+          ]}
+        />
       )}
       <ActionGroup>
         <Button
diff --git a/js/apps/admin-ui/src/clients/advanced/FineGrainOpenIdConnect.tsx b/js/apps/admin-ui/src/clients/advanced/FineGrainOpenIdConnect.tsx
index 2db8e154e8..6cd0ca1526 100644
--- a/js/apps/admin-ui/src/clients/advanced/FineGrainOpenIdConnect.tsx
+++ b/js/apps/admin-ui/src/clients/advanced/FineGrainOpenIdConnect.tsx
@@ -1,17 +1,8 @@
-import {
-  ActionGroup,
-  Button,
-  FormGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-} from "@patternfly/react-core";
-import { useState } from "react";
-import { Controller, useFormContext } from "react-hook-form";
+import { ProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/serverInfoRepesentation";
+import { ActionGroup, Button, FormGroup } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-
+import { HelpItem, SelectControl } from "ui-shared";
 import { FormAccess } from "../../components/form/FormAccess";
-import { HelpItem } from "ui-shared";
 import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
 import { convertAttributeNameToForm, sortProviders } from "../../util";
@@ -35,124 +26,25 @@ export const FineGrainOpenIdConnect = ({
   const contentEncryptionProviders = providers?.contentencryption.providers;
   const cekManagementProviders = providers?.cekmanagement.providers;
   const signatureProviders = providers?.signature.providers;
-  const [accessTokenOpen, setAccessTokenOpen] = useState(false);
-  const [idTokenOpen, setIdTokenOpen] = useState(false);
-  const [idTokenKeyManagementOpen, setIdTokenKeyManagementOpen] =
-    useState(false);
-  const [idTokenContentOpen, setIdTokenContentOpen] = useState(false);
-  const [userInfoSignedResponseOpen, setUserInfoSignedResponseOpen] =
-    useState(false);
-  const [requestObjectSignatureOpen, setRequestObjectSignatureOpen] =
-    useState(false);
-  const [requestObjectRequiredOpen, setRequestObjectRequiredOpen] =
-    useState(false);
-  const [requestObjectEncryptionOpen, setRequestObjectEncryptionOpen] =
-    useState(false);
-  const [requestObjectEncodingOpen, setRequestObjectEncodingOpen] =
-    useState(false);
-  const [authorizationSignedOpen, setAuthorizationSignedOpen] = useState(false);
-  const [authorizationEncryptedOpen, setAuthorizationEncryptedOpen] =
-    useState(false);
-  const [
-    authorizationEncryptedResponseOpen,
-    setAuthorizationEncryptedResponseOpen,
-  ] = useState(false);
 
-  const [
-    userInfoResponseEncryptionKeyManagementOpen,
-    setUserInfoResponseEncryptionKeyManagementOpen,
-  ] = useState(false);
+  const convert = (list: { [index: string]: ProviderRepresentation }) =>
+    sortProviders(list).map((i) => ({ key: i, value: i }));
 
-  const [
-    userInfoResponseEncryptionContentEncryptionOpen,
-    setUserInfoResponseEncryptionContentEncryptionOpen,
-  ] = useState(false);
-
-  const { control } = useFormContext();
-
-  const keyOptions = [
-    <SelectOption key="empty" value="">
-      {t("choose")}
-    </SelectOption>,
-    ...sortProviders(clientSignatureProviders!).map((p) => (
-      <SelectOption key={p} value={p} />
-    )),
-  ];
-  const cekManagementOptions = [
-    <SelectOption key="empty" value="">
-      {t("choose")}
-    </SelectOption>,
-    ...sortProviders(cekManagementProviders!).map((p) => (
-      <SelectOption key={p} value={p} />
-    )),
-  ];
-  const signatureOptions = [
-    <SelectOption key="unsigned" value="">
-      {t("unsigned")}
-    </SelectOption>,
-    ...sortProviders(signatureProviders!).map((p) => (
-      <SelectOption key={p} value={p} />
-    )),
-  ];
-  const contentOptions = [
-    <SelectOption key="empty" value="">
-      {t("choose")}
-    </SelectOption>,
-    ...sortProviders(contentEncryptionProviders!).map((p) => (
-      <SelectOption key={p} value={p} />
-    )),
+  const prependEmpty = (list: { [index: string]: ProviderRepresentation }) => [
+    { key: "", value: t("choose") },
+    ...convert(list),
   ];
 
-  const requestObjectOptions = [
-    <SelectOption key="any" value="any">
-      {t("any")}
-    </SelectOption>,
-    <SelectOption key="none" value="none">
-      {t("none")}
-    </SelectOption>,
-    ...sortProviders(clientSignatureProviders!).map((p) => (
-      <SelectOption key={p} value={p} />
-    )),
+  const prependAny = (list: { [index: string]: ProviderRepresentation }) => [
+    { key: "any", value: t("any") },
+    ...convert(list),
   ];
 
-  const requestObjectEncryptionOptions = [
-    <SelectOption key="any" value="any">
-      {t("any")}
-    </SelectOption>,
-    ...sortProviders(cekManagementProviders!).map((p) => (
-      <SelectOption key={p} value={p} />
-    )),
+  const prependNone = (list: { [index: string]: ProviderRepresentation }) => [
+    { key: "none", value: t("none") },
+    ...convert(list),
   ];
 
-  const requestObjectEncodingOptions = [
-    <SelectOption key="any" value="any">
-      {t("any")}
-    </SelectOption>,
-    ...sortProviders(contentEncryptionProviders!).map((p) => (
-      <SelectOption key={p} value={p} />
-    )),
-  ];
-
-  const authorizationSignedResponseOptions = [
-    <SelectOption key="empty" value="">
-      {t("choose")}
-    </SelectOption>,
-    ...sortProviders(signatureProviders!).map((p) => (
-      <SelectOption key={p} value={p} />
-    )),
-  ];
-
-  const requestObjectRequiredOptions = [
-    "not required",
-    "request or request_uri",
-    "request only",
-    "request_uri only",
-  ].map((p) => (
-    <SelectOption key={p} value={p}>
-      {t(`requestObject.${p}`)}
-    </SelectOption>
-  ));
-
   return (
     <FormAccess
       role="manage-clients"
@@ -160,388 +52,140 @@ export const FineGrainOpenIdConnect = ({
       isHorizontal
     >
       <ApplicationUrls />
-      <FormGroup
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.access.token.signed.response.alg",
+        )}
         label={t("accessTokenSignatureAlgorithm")}
-        fieldId="accessTokenSignatureAlgorithm"
-        labelIcon={
-          <HelpItem
-            helpText={t("accessTokenSignatureAlgorithmHelp")}
-            fieldLabelId="accessTokenSignatureAlgorithm"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.access.token.signed.response.alg",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="accessTokenSignatureAlgorithm"
-              variant={SelectVariant.single}
-              onToggle={setAccessTokenOpen}
-              isOpen={accessTokenOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setAccessTokenOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t("selectAccessTokenSignatureAlgorithm")}
-            >
-              {keyOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("accessTokenSignatureAlgorithmHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependEmpty(clientSignatureProviders!)}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.id.token.signed.response.alg",
+        )}
         label={t("idTokenSignatureAlgorithm")}
-        fieldId="kc-id-token-signature"
-        labelIcon={
-          <HelpItem
-            helpText={t("idTokenSignatureAlgorithmHelp")}
-            fieldLabelId="idTokenSignatureAlgorithm"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.id.token.signed.response.alg",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="idTokenSignatureAlgorithm"
-              variant={SelectVariant.single}
-              onToggle={setIdTokenOpen}
-              isOpen={idTokenOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setIdTokenOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t("selectIdTokenSignatureAlgorithm")}
-            >
-              {keyOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("idTokenSignatureAlgorithmHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependEmpty(clientSignatureProviders!)}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.id.token.encrypted.response.alg",
+        )}
         label={t("idTokenEncryptionKeyManagementAlgorithm")}
-        fieldId="idTokenEncryptionKeyManagementAlgorithm"
-        labelIcon={
-          <HelpItem
-            helpText={t("idTokenEncryptionKeyManagementAlgorithmHelp")}
-            fieldLabelId="idTokenEncryptionKeyManagementAlgorithm"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.id.token.encrypted.response.alg",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="idTokenEncryptionKeyManagementAlgorithm"
-              variant={SelectVariant.single}
-              onToggle={setIdTokenKeyManagementOpen}
-              isOpen={idTokenKeyManagementOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setIdTokenKeyManagementOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t("selectIdTokenEncryptionKeyManagementAlgorithm")}
-            >
-              {cekManagementOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("idTokenEncryptionKeyManagementAlgorithmHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependEmpty(cekManagementProviders!)}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.id.token.encrypted.response.enc",
+        )}
         label={t("idTokenEncryptionContentEncryptionAlgorithm")}
-        fieldId="idTokenEncryptionContentEncryptionAlgorithm"
-        labelIcon={
-          <HelpItem
-            helpText={t("idTokenEncryptionContentEncryptionAlgorithmHelp")}
-            fieldLabelId="idTokenEncryptionContentEncryptionAlgorithm"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.id.token.encrypted.response.enc",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="idTokenEncryptionContentEncryptionAlgorithm"
-              variant={SelectVariant.single}
-              onToggle={setIdTokenContentOpen}
-              isOpen={idTokenContentOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setIdTokenContentOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t(
-                "selectIdTokenEncryptionContentEncryptionAlgorithm",
-              )}
-            >
-              {contentOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("idTokenEncryptionContentEncryptionAlgorithmHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependEmpty(contentEncryptionProviders!)}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.user.info.response.signature.alg",
+        )}
         label={t("userInfoSignedResponseAlgorithm")}
-        fieldId="userInfoSignedResponseAlgorithm"
-        labelIcon={
-          <HelpItem
-            helpText={t("userInfoSignedResponseAlgorithmHelp")}
-            fieldLabelId="userInfoSignedResponseAlgorithm"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.user.info.response.signature.alg",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="userInfoSignedResponseAlgorithm"
-              variant={SelectVariant.single}
-              onToggle={setUserInfoSignedResponseOpen}
-              isOpen={userInfoSignedResponseOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setUserInfoSignedResponseOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t("selectUserInfoSignedResponseAlgorithm")}
-            >
-              {signatureOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("userInfoSignedResponseAlgorithmHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependEmpty(signatureProviders!)}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.user.info.encrypted.response.alg",
+        )}
         label={t("userInfoResponseEncryptionKeyManagementAlgorithm")}
-        fieldId="userInfoResponseEncryptionKeyManagementAlgorithm"
-        labelIcon={
-          <HelpItem
-            helpText={t("userInfoResponseEncryptionKeyManagementAlgorithmHelp")}
-            fieldLabelId="userInfoResponseEncryptionKeyManagementAlgorithm"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.user.info.encrypted.response.alg",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="userInfoResponseEncryptionKeyManagementAlgorithm"
-              variant={SelectVariant.single}
-              onToggle={setUserInfoResponseEncryptionKeyManagementOpen}
-              isOpen={userInfoResponseEncryptionKeyManagementOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setUserInfoResponseEncryptionKeyManagementOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t(
-                "selectUserInfoResponseEncryptionKeyManagementAlgorithm",
-              )}
-            >
-              {cekManagementOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("userInfoResponseEncryptionKeyManagementAlgorithmHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependEmpty(cekManagementProviders!)}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.user.info.encrypted.response.enc",
+        )}
         label={t("userInfoResponseEncryptionContentEncryptionAlgorithm")}
-        fieldId="userInfoResponseEncryptionContentEncryptionAlgorithm"
-        labelIcon={
-          <HelpItem
-            helpText={t(
-              "userInfoResponseEncryptionContentEncryptionAlgorithmHelp",
-            )}
-            fieldLabelId="userInfoResponseEncryptionContentEncryptionAlgorithm"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.user.info.encrypted.response.enc",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="userInfoResponseEncryptionContentEncryptionAlgorithm"
-              variant={SelectVariant.single}
-              onToggle={setUserInfoResponseEncryptionContentEncryptionOpen}
-              isOpen={userInfoResponseEncryptionContentEncryptionOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setUserInfoResponseEncryptionContentEncryptionOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t(
-                "selectUserInfoResponseEncryptionContentEncryptionAlgorithm",
-              )}
-            >
-              {contentOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t(
+          "userInfoResponseEncryptionContentEncryptionAlgorithmHelp",
+        )}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependEmpty(contentEncryptionProviders!)}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.request.object.signature.alg",
+        )}
         label={t("requestObjectSignatureAlgorithm")}
-        fieldId="requestObjectSignatureAlgorithm"
-        labelIcon={
-          <HelpItem
-            helpText={t("requestObjectSignatureAlgorithmHelp")}
-            fieldLabelId="requestObjectSignatureAlgorithm"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.request.object.signature.alg",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="requestObjectSignatureAlgorithm"
-              variant={SelectVariant.single}
-              onToggle={setRequestObjectSignatureOpen}
-              isOpen={requestObjectSignatureOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setRequestObjectSignatureOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t("selectRequestObjectSignatureAlgorithm")}
-            >
-              {requestObjectOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("requestObjectSignatureAlgorithmHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={[
+          { key: "any", value: t("any") },
+          ...prependNone(clientSignatureProviders!),
+        ]}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.request.object.encryption.alg",
+        )}
         label={t("requestObjectEncryption")}
-        fieldId="requestObjectEncryption"
-        labelIcon={
-          <HelpItem
-            helpText={t("requestObjectEncryptionHelp")}
-            fieldLabelId="requestObjectEncryption"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.request.object.encryption.alg",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="requestObjectEncryption"
-              variant={SelectVariant.single}
-              onToggle={setRequestObjectEncryptionOpen}
-              isOpen={requestObjectEncryptionOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setRequestObjectEncryptionOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t("selectRequestObjectEncryption")}
-            >
-              {requestObjectEncryptionOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("requestObjectEncryptionHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependAny(cekManagementProviders!)}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.request.object.encryption.enc",
+        )}
         label={t("requestObjectEncoding")}
-        fieldId="requestObjectEncoding"
-        labelIcon={
-          <HelpItem
-            helpText={t("requestObjectEncodingHelp")}
-            fieldLabelId="requestObjectEncoding"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.request.object.encryption.enc",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="requestObjectEncoding"
-              variant={SelectVariant.single}
-              onToggle={setRequestObjectEncodingOpen}
-              isOpen={requestObjectEncodingOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setRequestObjectEncodingOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t("selectRequestObjectEncoding")}
-            >
-              {requestObjectEncodingOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("requestObjectEncodingHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependAny(contentEncryptionProviders!)}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.request.object.required",
+        )}
         label={t("requestObjectRequired")}
-        fieldId="requestObjectRequired"
-        labelIcon={
-          <HelpItem
-            helpText={t("requestObjectRequiredHelp")}
-            fieldLabelId="requestObjectRequired"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.request.object.required",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="requestObjectRequired"
-              variant={SelectVariant.single}
-              onToggle={setRequestObjectRequiredOpen}
-              isOpen={requestObjectRequiredOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setRequestObjectRequiredOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t("selectRequestObjectRequired")}
-            >
-              {requestObjectRequiredOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
+        labelIcon={t("requestObjectRequiredHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={[
+          "not required",
+          "request or request_uri",
+          "request only",
+          "request_uri only",
+        ].map((p) => ({
+          key: p,
+          value: t(`requestObject.${p}`),
+        }))}
+      />
       <FormGroup
         label={t("validRequestURIs")}
         fieldId="validRequestURIs"
@@ -559,108 +203,39 @@ export const FineGrainOpenIdConnect = ({
           stringify
         />
       </FormGroup>
-      <FormGroup
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.authorization.signed.response.alg",
+        )}
         label={t("authorizationSignedResponseAlg")}
-        fieldId="authorizationSignedResponseAlg"
-        labelIcon={
-          <HelpItem
-            helpText={t("authorizationSignedResponseAlgHelp")}
-            fieldLabelId="authorizationSignedResponseAlg"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.authorization.signed.response.alg",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="authorizationSignedResponseAlg"
-              variant={SelectVariant.single}
-              onToggle={setAuthorizationSignedOpen}
-              isOpen={authorizationSignedOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setAuthorizationSignedOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t("selectAuthorizationSignedResponseAlg")}
-            >
-              {authorizationSignedResponseOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("authorizationSignedResponseAlgHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependEmpty(signatureProviders!)}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.authorization.encrypted.response.alg",
+        )}
         label={t("authorizationEncryptedResponseAlg")}
-        fieldId="authorizationEncryptedResponseAlg"
-        labelIcon={
-          <HelpItem
-            helpText={t("authorizationEncryptedResponseAlgHelp")}
-            fieldLabelId="authorizationEncryptedResponseAlg"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.authorization.encrypted.response.alg",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="authorizationEncryptedResponseAlg"
-              variant={SelectVariant.single}
-              onToggle={setAuthorizationEncryptedOpen}
-              isOpen={authorizationEncryptedOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setAuthorizationEncryptedOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t("selectAuthorizationEncryptedResponseAlg")}
-            >
-              {cekManagementOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("authorizationEncryptedResponseAlgHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependEmpty(cekManagementProviders!)}
+      />
+      <SelectControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.authorization.encrypted.response.enc",
+        )}
         label={t("authorizationEncryptedResponseEnc")}
-        fieldId="authorizationEncryptedResponseEnc"
-        labelIcon={
-          <HelpItem
-            helpText={t("authorizationEncryptedResponseEncHelp")}
-            fieldLabelId="authorizationEncryptedResponseEnc"
-          />
-        }
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.authorization.encrypted.response.enc",
-          )}
-          defaultValue=""
-          control={control}
-          render={({ field }) => (
-            <Select
-              toggleId="authorizationEncryptedResponseEnc"
-              variant={SelectVariant.single}
-              onToggle={setAuthorizationEncryptedResponseOpen}
-              isOpen={authorizationEncryptedResponseOpen}
-              onSelect={(_, value) => {
-                field.onChange(value);
-                setAuthorizationEncryptedResponseOpen(false);
-              }}
-              selections={field.value}
-              aria-label={t("selectAuthorizationEncryptedResponseEnc")}
-            >
-              {contentOptions}
-            </Select>
-          )}
-        />
-      </FormGroup>
+        labelIcon={t("authorizationEncryptedResponseEncHelp")}
+        controller={{
+          defaultValue: "",
+        }}
+        options={prependEmpty(contentEncryptionProviders!)}
+      />
       <ActionGroup>
         <Button variant="secondary" id="fineGrainSave" onClick={save}>
           {t("save")}