diff --git a/js/apps/admin-ui/src/clients/authorization/policy/NameDescription.tsx b/js/apps/admin-ui/src/clients/authorization/policy/NameDescription.tsx
index 9e6e50d831..6ed8ebbd41 100644
--- a/js/apps/admin-ui/src/clients/authorization/policy/NameDescription.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/policy/NameDescription.tsx
@@ -1,76 +1,29 @@
 import { useTranslation } from "react-i18next";
-import { useFormContext } from "react-hook-form";
-import { FormGroup, ValidatedOptions } from "@patternfly/react-core";
-
-import { HelpItem } from "ui-shared";
-import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
-import { KeycloakTextArea } from "../../../components/keycloak-text-area/KeycloakTextArea";
+import { TextAreaControl, TextControl } from "ui-shared";
 
 type NameDescriptionProps = {
-  prefix: string;
   isDisabled: boolean;
 };
 
-export const NameDescription = ({
-  prefix,
-  isDisabled,
-}: NameDescriptionProps) => {
+export const NameDescription = ({ isDisabled }: NameDescriptionProps) => {
   const { t } = useTranslation();
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext();
 
   return (
     <>
-      <FormGroup
+      <TextControl
+        name="name"
         label={t("name")}
-        fieldId="kc-name"
-        helperTextInvalid={t("required")}
-        validated={
-          errors.name ? ValidatedOptions.error : ValidatedOptions.default
-        }
-        isRequired
-        labelIcon={
-          <HelpItem helpText={t(`${prefix}-nameHelp`)} fieldLabelId="name" />
-        }
-      >
-        <KeycloakTextInput
-          isDisabled={isDisabled}
-          id="kc-name"
-          data-testid="name"
-          validated={
-            errors.name ? ValidatedOptions.error : ValidatedOptions.default
-          }
-          {...register("name", { required: true })}
-        />
-      </FormGroup>
-      <FormGroup
+        rules={{ required: t("required") }}
+        isDisabled={isDisabled}
+      />
+      <TextAreaControl
+        name="description"
         label={t("description")}
-        fieldId="kc-description"
-        labelIcon={
-          <HelpItem
-            helpText={t(`${prefix}-descriptionHelp`)}
-            fieldLabelId="description"
-          />
-        }
-        validated={
-          errors.description ? ValidatedOptions.error : ValidatedOptions.default
-        }
-        helperTextInvalid={t("maxLength", { length: 255 })}
-      >
-        <KeycloakTextArea
-          isDisabled={isDisabled}
-          id="kc-description"
-          data-testid="description"
-          validated={
-            errors.description
-              ? ValidatedOptions.error
-              : ValidatedOptions.default
-          }
-          {...register("description", { maxLength: 255 })}
-        />
-      </FormGroup>
+        rules={{
+          maxLength: { message: t("maxLength", { length: 255 }), value: 255 },
+        }}
+        isDisabled={isDisabled}
+      />
     </>
   );
 };
diff --git a/js/apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx b/js/apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx
index c8254def5e..d2ade58e0f 100644
--- a/js/apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx
+++ b/js/apps/admin-ui/src/clients/authorization/policy/PolicyDetails.tsx
@@ -201,7 +201,7 @@ export default function PolicyDetails() {
           role="anyone" // if you get this far it means you have access
         >
           <FormProvider {...form}>
-            <NameDescription isDisabled={isDisabled} prefix="policy" />
+            <NameDescription isDisabled={isDisabled} />
             <ComponentType />
             <LogicSelector isDisabled={isDisabled} />
           </FormProvider>