diff --git a/src/user-federation/LdapSettingsAdvanced.tsx b/src/user-federation/LdapSettingsAdvanced.tsx
index cd20d2f0de..b964f69638 100644
--- a/src/user-federation/LdapSettingsAdvanced.tsx
+++ b/src/user-federation/LdapSettingsAdvanced.tsx
@@ -2,14 +2,21 @@ import { Form, FormGroup, Switch } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { useForm, Controller } from "react-hook-form";
+import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 
 export const LdapSettingsAdvanced = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
+  const { handleSubmit, control } = useForm<ComponentRepresentation>();
+  const onSubmit = (data: ComponentRepresentation) => {
+    console.log(data);
+  };
+
   return (
     <>
-      <Form isHorizontal>
+      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
         <FormGroup
           label={t("enableLdapv3Password")}
           labelIcon={
@@ -22,14 +29,21 @@ export const LdapSettingsAdvanced = () => {
           fieldId="kc-enable-ldapv3-password"
           hasNoPaddingTop
         >
-          <Switch
-            id={"kc-enable-ldapv3-password"}
-            isChecked={false}
-            isDisabled={false}
-            onChange={() => undefined as any}
-            label={t("common:on")}
-            labelOff={t("common:off")}
-          />
+          <Controller
+            name="enableLadpv3PasswordModify"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-enable-ldapv3-password"}
+                isChecked={value}
+                isDisabled={false}
+                onChange={onChange}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+              />
+            )}
+          ></Controller>
         </FormGroup>
 
         <FormGroup
@@ -44,14 +58,21 @@ export const LdapSettingsAdvanced = () => {
           fieldId="kc-validate-password-policy"
           hasNoPaddingTop
         >
-          <Switch
-            id={"kc-validate-password-policy"}
-            isChecked={false}
-            isDisabled={false}
-            onChange={() => undefined as any}
-            label={t("common:on")}
-            labelOff={t("common:off")}
-          />
+          <Controller
+            name="validatePasswordPolicy"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-validate-password-policy"}
+                isChecked={value}
+                isDisabled={false}
+                onChange={onChange}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+              />
+            )}
+          ></Controller>
         </FormGroup>
 
         <FormGroup
@@ -66,15 +87,24 @@ export const LdapSettingsAdvanced = () => {
           fieldId="kc-trust-email"
           hasNoPaddingTop
         >
-          <Switch
-            id={"kc-trust-email"}
-            isChecked={false}
-            isDisabled={false}
-            onChange={() => undefined as any}
-            label={t("common:on")}
-            labelOff={t("common:off")}
-          />
+          <Controller
+            name="trustEmail"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-trust-email"}
+                isChecked={value}
+                isDisabled={false}
+                onChange={onChange}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+              />
+            )}
+          ></Controller>
         </FormGroup>
+
+        <button type="submit">Test submit</button>
       </Form>
     </>
   );
diff --git a/src/user-federation/LdapSettingsCache.tsx b/src/user-federation/LdapSettingsCache.tsx
index 7e32514025..5339441252 100644
--- a/src/user-federation/LdapSettingsCache.tsx
+++ b/src/user-federation/LdapSettingsCache.tsx
@@ -1,16 +1,61 @@
-import { Form, FormGroup, Select, SelectOption } from "@patternfly/react-core";
+import {
+  Form,
+  FormGroup,
+  Select,
+  SelectOption,
+  SelectVariant,
+  TextInput,
+} from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import React from "react";
+import React, { useState } from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { useForm, Controller } from "react-hook-form";
+import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 
 export const LdapSettingsCache = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
+  const [isCachePolicyDropdownOpen, setIsCachePolicyDropdownOpen] = useState(
+    false
+  );
+
+  const [isEvictionHourDropdownOpen, setIsEvictionHourDropdownOpen] = useState(
+    false
+  );
+  const [
+    isEvictionMinuteDropdownOpen,
+    setIsEvictionMinuteDropdownOpen,
+  ] = useState(false);
+  const [isEvictionDayDropdownOpen, setIsEvictionDayDropdownOpen] = useState(
+    false
+  );
+
+  const { handleSubmit, control, register } = useForm<
+    ComponentRepresentation
+  >();
+  const onSubmit = (data: ComponentRepresentation) => {
+    console.log(data);
+  };
+
+  const hourOptions = [
+    <SelectOption key={0} value={t("common:selectOne")} isPlaceholder />,
+  ];
+  for (let index = 1; index <= 24; index++) {
+    hourOptions.push(<SelectOption key={index + 1} value={index} />);
+  }
+
+  const minuteOptions = [
+    <SelectOption key={0} value={t("common:selectOne")} isPlaceholder />,
+  ];
+  for (let index = 1; index <= 60; index++) {
+    minuteOptions.push(<SelectOption key={index + 1} value={index} />);
+  }
+
   return (
     <>
       {/* Cache settings */}
-      <Form isHorizontal>
+      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
         <FormGroup
           label={t("cachePolicy")}
           labelIcon={
@@ -22,29 +67,182 @@ export const LdapSettingsCache = () => {
           }
           fieldId="kc-cache-policy"
         >
-          <Select
-            toggleId="kc-cache-policy"
-            // isOpen={openType}
-            onToggle={() => {}}
-            // variant={SelectVariant.single}
-            // value={selected}
-            // selections={selected}
-            // onSelect={(_, value) => {
-            //   setSelected(value as string);
-            //   setOpenType(false);
-            // }}
-            aria-label="Select Input"
-          >
-            {/* {configFormats.map((configFormat) => ( */}
-            <SelectOption
-              key={"key"}
-              value={"value"}
-              // isSelected={selected === configFormat.id}
-            >
-              {"display name"}
-            </SelectOption>
-          </Select>
+          <Controller
+            name="cachePolicy"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-cache-policy"
+                required
+                onToggle={() =>
+                  setIsCachePolicyDropdownOpen(!isCachePolicyDropdownOpen)
+                }
+                isOpen={isCachePolicyDropdownOpen}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setIsCachePolicyDropdownOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+                // aria-label="Other"
+                // isDisabled
+              >
+                <SelectOption key={0} value="Choose..." isPlaceholder />
+                <SelectOption key={1} value="DEFAULT" />
+                <SelectOption key={2} value="EVICT_DAILY" />
+                <SelectOption key={3} value="EVICT_WEEKLY" />
+                <SelectOption key={4} value="MAX_LIFESPAN" />
+                <SelectOption key={5} value="NO_CACHE" />
+              </Select>
+            )}
+          ></Controller>
         </FormGroup>
+
+        {/* TODO: Field shows only if cache policy is EVICT_WEEKLY */}
+        <FormGroup
+          label={t("evictionDay")}
+          labelIcon={
+            <HelpItem
+              helpText={helpText("evictionDayHelp")}
+              forLabel={t("evictionDay")}
+              forID="kc-eviction-day"
+            />
+          }
+          fieldId="kc-eviction-day"
+        >
+          <Controller
+            name="evictionDay"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-eviction-day"
+                required
+                onToggle={() =>
+                  setIsEvictionDayDropdownOpen(!isEvictionDayDropdownOpen)
+                }
+                isOpen={isEvictionDayDropdownOpen}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setIsEvictionDayDropdownOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+              >
+                <SelectOption
+                  key={0}
+                  value={t("common:selectOne")}
+                  isPlaceholder
+                />
+                <SelectOption key={1} value={t("common:Sunday")} />
+                <SelectOption key={2} value={t("common:Monday")} />
+                <SelectOption key={3} value={t("common:Tuesday")} />
+                <SelectOption key={4} value={t("common:Wednesday")} />
+                <SelectOption key={5} value={t("common:Thursday")} />
+                <SelectOption key={6} value={t("common:Friday")} />
+                <SelectOption key={7} value={t("common:Saturday")} />
+              </Select>
+            )}
+          ></Controller>
+        </FormGroup>
+
+        {/* TODO: Field shows only if cache policy is EVICT_WEEKLY or EVICT_DAILY */}
+        {/* TODO: Investigate whether this should be a number field instead of a dropdown/text field */}
+        <FormGroup
+          label={t("evictionHour")}
+          labelIcon={
+            <HelpItem
+              helpText={helpText("evictionHourHelp")}
+              forLabel={t("evictionHour")}
+              forID="kc-eviction-hour"
+            />
+          }
+          fieldId="kc-eviction-hour"
+        >
+          <Controller
+            name="evictionHour"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-eviction-hour"
+                onToggle={() =>
+                  setIsEvictionHourDropdownOpen(!isEvictionHourDropdownOpen)
+                }
+                isOpen={isEvictionHourDropdownOpen}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setIsEvictionHourDropdownOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+              >
+                {hourOptions}
+              </Select>
+            )}
+          ></Controller>
+        </FormGroup>
+
+        {/* TODO: Field shows only if cache policy is EVICT_WEEKLY or EVICT_DAILY */}
+        {/* TODO: Investigate whether this should be a number field instead of a dropdown/text field */}
+        <FormGroup
+          label={t("evictionMinute")}
+          labelIcon={
+            <HelpItem
+              helpText={helpText("evictionMinuteHelp")}
+              forLabel={t("evictionMinute")}
+              forID="kc-eviction-minute"
+            />
+          }
+          fieldId="kc-eviction-minute"
+        >
+          <Controller
+            name="evictionMinute"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-eviction-minute"
+                onToggle={() =>
+                  setIsEvictionMinuteDropdownOpen(!isEvictionMinuteDropdownOpen)
+                }
+                isOpen={isEvictionMinuteDropdownOpen}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setIsEvictionMinuteDropdownOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+              >
+                {minuteOptions}
+              </Select>
+            )}
+          ></Controller>
+        </FormGroup>
+
+        {/* TODO: Field shows only if cache policy is MAX_LIFESPAN */}
+        <FormGroup
+          label={t("maxLifespan")}
+          labelIcon={
+            <HelpItem
+              helpText={helpText("maxLifespanHelp")}
+              forLabel={t("maxLifespan")}
+              forID="kc-max-lifespan"
+            />
+          }
+          fieldId="kc-max-lifespan"
+        >
+          <TextInput
+            isRequired
+            type="text"
+            id="kc-max-lifespan"
+            name="maxLifespan"
+            ref={register}
+          />
+        </FormGroup>
+
+        <button type="submit">Test submit</button>
       </Form>
     </>
   );
diff --git a/src/user-federation/LdapSettingsConnection.tsx b/src/user-federation/LdapSettingsConnection.tsx
index b198b4b850..548a2fa40b 100644
--- a/src/user-federation/LdapSettingsConnection.tsx
+++ b/src/user-federation/LdapSettingsConnection.tsx
@@ -5,64 +5,85 @@ import {
   InputGroup,
   Select,
   SelectOption,
+  SelectVariant,
   Switch,
   TextInput,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import React from "react";
+import React, { useState } from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { Controller, useForm } from "react-hook-form";
+import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { EyeIcon } from "@patternfly/react-icons";
 
 export const LdapSettingsConnection = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
+  const [
+    isTruststoreSpiDropdownOpen,
+    setIsTruststoreSpiDropdownOpen,
+  ] = useState(false);
+  const [isBindTypeDropdownOpen, setIsBindTypeDropdownOpen] = useState(false);
+  const { register, handleSubmit, control } = useForm<
+    ComponentRepresentation
+  >();
+  const onSubmit = (data: ComponentRepresentation) => {
+    console.log(data);
+  };
+
   return (
     <>
       {/* Cache settings */}
-      <Form isHorizontal>
+      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
         <FormGroup
           label={t("connectionURL")}
           labelIcon={
             <HelpItem
               helpText={helpText("consoleDisplayConnectionUrlHelp")}
               forLabel={t("connectionURL")}
-              forID="kc-connection-url"
+              forID="kc-console-connection-url"
             />
           }
-          fieldId="kc-connection-url"
+          fieldId="kc-console-connection-url"
           isRequired
         >
           <TextInput
             isRequired
             type="text"
-            id="kc-connection-url"
-            name="kc-connection-url"
-            // value={value1}
-            // onChange={this.handleTextInputChange1}
+            id="kc-console-connection-url"
+            name="connectionUrl"
+            ref={register}
           />
         </FormGroup>
 
         <FormGroup
-          label={t("enableStarttls")}
+          label={t("enableStartTls")}
           labelIcon={
             <HelpItem
-              helpText={helpText("enableStarttlsHelp")}
-              forLabel={t("enableStarttls")}
+              helpText={helpText("enableStartTlsHelp")}
+              forLabel={t("enableStartTls")}
               forID="kc-enable-start-tls"
             />
           }
           fieldId="kc-enable-start-tls"
           hasNoPaddingTop
         >
-          <Switch
-            id={"kc-enable-start-tls"}
-            isChecked={true}
-            isDisabled={false}
-            onChange={() => undefined as any}
-            label={t("common:on")}
-            labelOff={t("common:off")}
-          />
+          <Controller
+            name="enableStartTls"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-enable-start-tls"}
+                isChecked={value}
+                isDisabled={false}
+                onChange={onChange}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+              />
+            )}
+          ></Controller>
         </FormGroup>
 
         <FormGroup
@@ -76,29 +97,33 @@ export const LdapSettingsConnection = () => {
           }
           fieldId="kc-use-truststore-spi"
         >
-          <Select
-            toggleId="kc-use-truststore-spi"
-            // isOpen={openType}
-            onToggle={() => {}}
-            // variant={SelectVariant.single}
-            // value={selected}
-            // selections={selected}
-            // onSelect={(_, value) => {
-            //   setSelected(value as string);
-            //   setOpenType(false);
-            // }}
-            aria-label="Only for LDAPS" // TODO
-          >
-            {/* {configFormats.map((configFormat) => ( */}
-            <SelectOption
-              key={"key"}
-              value={"value"}
-              // isSelected={selected === configFormat.id}
-            >
-              {"display name"}
-            </SelectOption>
-            {/* ))} */}
-          </Select>
+          <Controller
+            name="useTruststoreSpi"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-use-truststore-spi"
+                onToggle={() =>
+                  setIsTruststoreSpiDropdownOpen(!isTruststoreSpiDropdownOpen)
+                }
+                isOpen={isTruststoreSpiDropdownOpen}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setIsTruststoreSpiDropdownOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+              >
+                <SelectOption
+                  key={0}
+                  value="LDAP connection URL"
+                  isPlaceholder
+                />
+                <SelectOption key={1} value="something else" />
+              </Select>
+            )}
+          ></Controller>
         </FormGroup>
 
         <FormGroup
@@ -113,14 +138,21 @@ export const LdapSettingsConnection = () => {
           fieldId="kc-connection-pooling"
           hasNoPaddingTop
         >
-          <Switch
-            id={"kc-connection-pooling"}
-            isChecked={true}
-            isDisabled={false}
-            onChange={() => undefined as any}
-            label={t("common:on")}
-            labelOff={t("common:off")}
-          />
+          <Controller
+            name="connectionPooling"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-connection-pooling"}
+                isDisabled={false}
+                onChange={onChange}
+                isChecked={value}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+              />
+            )}
+          ></Controller>
         </FormGroup>
 
         <FormGroup
@@ -129,17 +161,16 @@ export const LdapSettingsConnection = () => {
             <HelpItem
               helpText={helpText("connectionTimeoutHelp")}
               forLabel={t("connectionTimeout")}
-              forID="kc-connection-timeout"
+              forID="kc-console-connection-timeout"
             />
           }
-          fieldId="kc-connection-timeout"
+          fieldId="kc-console-connection-timeout"
         >
           <TextInput
             type="text"
-            id="kc-connection-timeout"
-            name="kc-connection-timeout"
-            // value={value1}
-            // onChange={this.handleTextInputChange1}
+            id="kc-console-connection-timeout"
+            name="connectionTimeout"
+            ref={register}
           />
         </FormGroup>
 
@@ -155,19 +186,35 @@ export const LdapSettingsConnection = () => {
           fieldId="kc-bind-type"
           isRequired
         >
-          <Select
-            toggleId="kc-bind-type"
-            // isOpen={openType}
-            onToggle={() => {}}
-            // variant={SelectVariant.single}
-            // value={selected}
-            // selections={selected}
-            // onSelect={(_, value) => {
-            //   setSelected(value as string);
-            //   setOpenType(false);
-            // }}
-            aria-label="simple" // TODO
-          ></Select>
+          <Controller
+            name="bindType"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-bind-type"
+                required
+                onToggle={() =>
+                  setIsBindTypeDropdownOpen(!isBindTypeDropdownOpen)
+                }
+                isOpen={isBindTypeDropdownOpen}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setIsBindTypeDropdownOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+                // aria-label="simple" // TODO
+              >
+                <SelectOption
+                  key={3}
+                  value="Connection timeout"
+                  isPlaceholder
+                />
+                <SelectOption key={4} value="something" />
+              </Select>
+            )}
+          ></Controller>
         </FormGroup>
 
         <FormGroup
@@ -176,17 +223,16 @@ export const LdapSettingsConnection = () => {
             <HelpItem
               helpText={helpText("bindDnHelp")}
               forLabel={t("bindDn")}
-              forID="kc-bind-dn"
+              forID="kc-console-bind-dn"
             />
           }
-          fieldId="kc-bind-dn"
+          fieldId="kc-console-bind-dn"
         >
           <TextInput
             type="text"
-            id="kc-bind-dn"
-            name="kc-bind-dn"
-            // value={value1}
-            // onChange={this.handleTextInputChange1}
+            id="kc-console-bind-dn"
+            name="bindDn"
+            ref={register}
           />
         </FormGroup>
 
@@ -196,19 +242,19 @@ export const LdapSettingsConnection = () => {
             <HelpItem
               helpText={helpText("bindCredentialsHelp")}
               forLabel={t("bindCredentials")}
-              forID="kc-bind-credentials"
+              forID="kc-console-bind-credentials"
             />
           }
-          fieldId="kc-bind-credentials"
+          fieldId="kc-console-bind-credentials"
           isRequired
         >
           <InputGroup>
-            <TextInput
-              name="kc-bind-credentials"
-              id="kc-bind-credentials"
-              type="password"
-              aria-label="bind credentials"
+            <TextInput // TODO: Make password field
               isRequired
+              type="text"
+              id="kc-console-bind-credentials"
+              name="bindCredentials"
+              ref={register}
             />
             <Button
               variant="control"
@@ -218,6 +264,14 @@ export const LdapSettingsConnection = () => {
             </Button>
           </InputGroup>
         </FormGroup>
+
+        <FormGroup fieldId="kc-test-button">
+          <Button variant="secondary" id="kc-test-button">
+            Test
+          </Button>
+        </FormGroup>
+
+        <button type="submit">Test Submit</button>
       </Form>
     </>
   );
diff --git a/src/user-federation/LdapSettingsGeneral.tsx b/src/user-federation/LdapSettingsGeneral.tsx
index c8214c8104..2a855f8eac 100644
--- a/src/user-federation/LdapSettingsGeneral.tsx
+++ b/src/user-federation/LdapSettingsGeneral.tsx
@@ -1,16 +1,33 @@
-import { Form, FormGroup, Select, TextInput } from "@patternfly/react-core";
+import {
+  Form,
+  FormGroup,
+  Select,
+  SelectOption,
+  SelectVariant,
+  TextInput,
+} from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import React from "react";
+import React, { useState } from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { useForm, Controller } from "react-hook-form";
+import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 
 export const LdapSettingsGeneral = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
+  const [isVendorDropdownOpen, setIsVendorDropdownOpen] = useState(false);
+  const { register, handleSubmit, control } = useForm<
+    ComponentRepresentation
+  >();
+  const onSubmit = (data: ComponentRepresentation) => {
+    console.log(data);
+  };
+
   return (
     <>
       {/* Cache settings */}
-      <Form isHorizontal>
+      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
         <FormGroup
           label={t("consoleDisplayName")}
           labelIcon={
@@ -27,9 +44,8 @@ export const LdapSettingsGeneral = () => {
             isRequired
             type="text"
             id="kc-console-display-name"
-            name="kc-console-display-name"
-            // value={value1}
-            // onChange={this.handleTextInputChange1}
+            name="displayName"
+            ref={register}
           />
         </FormGroup>
 
@@ -45,21 +61,36 @@ export const LdapSettingsGeneral = () => {
           fieldId="kc-vendor"
           isRequired
         >
-          <Select
-            toggleId="kc-vendor"
-            // isOpen={openType}
-            onToggle={() => {}}
-            // variant={SelectVariant.single}
-            // value={selected}
-            // selections={selected}
-            // onSelect={(_, value) => {
-            //   setSelected(value as string);
-            //   setOpenType(false);
-            // }}
-            aria-label="Other"
-            isDisabled
-          ></Select>
+          <Controller
+            name="vendor"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-vendor"
+                required
+                onToggle={() => setIsVendorDropdownOpen(!isVendorDropdownOpen)}
+                isOpen={isVendorDropdownOpen}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setIsVendorDropdownOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+                // aria-label="Other"
+                // isDisabled
+              >
+                <SelectOption key={0} value="Choose..." isPlaceholder />
+                <SelectOption key={1} value="Active Directory" />
+                <SelectOption key={2} value="Red Hat Directory Server" />
+                <SelectOption key={3} value="Tivoli" />
+                <SelectOption key={4} value="Novell eDirectory" />
+                <SelectOption key={5} value="Other" />
+              </Select>
+            )}
+          ></Controller>
         </FormGroup>
+        <button type="submit">Test submit</button>
       </Form>
     </>
   );
diff --git a/src/user-federation/LdapSettingsKerberosIntegration.tsx b/src/user-federation/LdapSettingsKerberosIntegration.tsx
index d62ed7aa44..dc45ce0b69 100644
--- a/src/user-federation/LdapSettingsKerberosIntegration.tsx
+++ b/src/user-federation/LdapSettingsKerberosIntegration.tsx
@@ -2,15 +2,22 @@ import { Form, FormGroup, Switch } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { useForm, Controller } from "react-hook-form";
+import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 
 export const LdapSettingsKerberosIntegration = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
+  const { handleSubmit, control } = useForm<ComponentRepresentation>();
+  const onSubmit = (data: ComponentRepresentation) => {
+    console.log(data);
+  };
+
   return (
     <>
       {/* Kerberos integration */}
-      <Form isHorizontal>
+      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
         <FormGroup
           label={t("allowKerberosAuthentication")}
           labelIcon={
@@ -23,14 +30,21 @@ export const LdapSettingsKerberosIntegration = () => {
           fieldId="kc-allow-kerberos-authentication"
           hasNoPaddingTop
         >
-          <Switch
-            id={"kc-allow-kerberos-authentication"}
-            isChecked={true}
-            isDisabled={false}
-            onChange={() => undefined as any}
-            label={t("common:on")}
-            labelOff={t("common:off")}
-          />
+          <Controller
+            name="allowKerberosAuthentication"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-allow-kerberos-authentication"}
+                isDisabled={false}
+                onChange={onChange}
+                isChecked={value}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+              />
+            )}
+          ></Controller>
         </FormGroup>
 
         <FormGroup
@@ -45,15 +59,24 @@ export const LdapSettingsKerberosIntegration = () => {
           fieldId="kc-use-kerberos-password-authentication"
           hasNoPaddingTop
         >
-          <Switch
-            id={"kc-use-kerberos-password-authentication"}
-            isChecked={true}
-            isDisabled={false}
-            onChange={() => undefined as any}
-            label={t("common:on")}
-            labelOff={t("common:off")}
-          />
+          <Controller
+            name="useKerberosForPasswordAuthentication"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-use-kerberos-password-authentication"}
+                isDisabled={false}
+                onChange={onChange}
+                isChecked={value}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+              />
+            )}
+          ></Controller>
         </FormGroup>
+
+        <button type="submit">Test submit</button>
       </Form>
     </>
   );
diff --git a/src/user-federation/LdapSettingsSearching.tsx b/src/user-federation/LdapSettingsSearching.tsx
index 95cef95bd3..729ce9d198 100644
--- a/src/user-federation/LdapSettingsSearching.tsx
+++ b/src/user-federation/LdapSettingsSearching.tsx
@@ -3,21 +3,40 @@ import {
   FormGroup,
   Select,
   SelectOption,
+  SelectVariant,
   Switch,
   TextInput,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
-import React from "react";
+import React, { useState } from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { useForm, Controller } from "react-hook-form";
+import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 
 export const LdapSettingsSearching = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
+  const [isEditModeDropdownOpen, setIsEditModeDropdownOpen] = useState(false);
+  const [
+    isUserLdapFilterModeDropdownOpen,
+    setIsUserLdapFilterModeDropdownOpen,
+  ] = useState(false);
+  const [isSearchScopeDropdownOpen, setIsSearchScopeDropdownOpen] = useState(
+    false
+  );
+
+  const { register, handleSubmit, control } = useForm<
+    ComponentRepresentation
+  >();
+  const onSubmit = (data: ComponentRepresentation) => {
+    console.log(data);
+  };
+
   return (
     <>
       {/* Cache settings */}
-      <Form isHorizontal>
+      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
         <FormGroup
           label={t("editMode")}
           labelIcon={
@@ -29,29 +48,34 @@ export const LdapSettingsSearching = () => {
           }
           fieldId="kc-edit-mode"
         >
-          <Select
-            toggleId="kc-edit-mode"
-            // isOpen={openType}
-            onToggle={() => {}}
-            // variant={SelectVariant.single}
-            // value={selected}
-            // selections={selected}
-            // onSelect={(_, value) => {
-            //   setSelected(value as string);
-            //   setOpenType(false);
-            // }}
-            aria-label="Select a mode"
-          >
-            {/* {configFormats.map((configFormat) => ( */}
-            <SelectOption
-              key={"key"}
-              value={"value"}
-              // isSelected={selected === configFormat.id}
-            >
-              {"display name"}
-            </SelectOption>
-            {/* ))} */}
-          </Select>
+          <Controller
+            name="editMode"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-edit-mode"
+                required
+                onToggle={() =>
+                  setIsEditModeDropdownOpen(!isEditModeDropdownOpen)
+                }
+                isOpen={isEditModeDropdownOpen}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setIsEditModeDropdownOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+                // aria-label="Other"
+                // isDisabled
+              >
+                <SelectOption key={0} value="Choose..." isPlaceholder />
+                <SelectOption key={1} value="RACT_ONLY" />
+                <SelectOption key={2} value="WRITABLE" />
+                <SelectOption key={3} value="UNSYNCED" />
+              </Select>
+            )}
+          ></Controller>
         </FormGroup>
 
         <FormGroup
@@ -70,9 +94,8 @@ export const LdapSettingsSearching = () => {
             isRequired
             type="text"
             id="kc-console-users-dn"
-            name="kc-console-users-dn"
-            // value={value1}
-            // onChange={this.handleTextInputChange1}
+            name="usersDn"
+            ref={register}
           />
         </FormGroup>
 
@@ -92,9 +115,8 @@ export const LdapSettingsSearching = () => {
             isRequired
             type="text"
             id="kc-username-ldap-attribute"
-            name="kc-username-ldap-attribute"
-            // value={value1}
-            // onChange={this.handleTextInputChange1}
+            name="usernameLdapAttribute"
+            ref={register}
           />
         </FormGroup>
 
@@ -114,9 +136,8 @@ export const LdapSettingsSearching = () => {
             isRequired
             type="text"
             id="kc-rdn-ldap-attribute"
-            name="kc-rdn-ldap-attribute"
-            // value={value1}
-            // onChange={this.handleTextInputChange1}
+            name="rdnLdapAttribute"
+            ref={register}
           />
         </FormGroup>
 
@@ -136,9 +157,8 @@ export const LdapSettingsSearching = () => {
             isRequired
             type="text"
             id="kc-uuid-ldap-attribute"
-            name="kc-uuid-ldap-attribute"
-            // value={value1}
-            // onChange={this.handleTextInputChange1}
+            name="uuidLdapAttribute"
+            ref={register}
           />
         </FormGroup>
 
@@ -158,9 +178,8 @@ export const LdapSettingsSearching = () => {
             isRequired
             type="text"
             id="kc-user-object-classes"
-            name="kc-user-object-classes"
-            // value={value1}
-            // onChange={this.handleTextInputChange1}
+            name="userObjectClasses"
+            ref={register}
           />
         </FormGroup>
 
@@ -175,29 +194,32 @@ export const LdapSettingsSearching = () => {
           }
           fieldId="kc-user-ldap-filter"
         >
-          <Select
-            toggleId="kc-user-ldap-filter"
-            // isOpen={openType}
-            onToggle={() => {}}
-            // variant={SelectVariant.single}
-            // value={selected}
-            // selections={selected}
-            // onSelect={(_, value) => {
-            //   setSelected(value as string);
-            //   setOpenType(false);
-            // }}
-            aria-label="Only for LDAPS" // TODO
-          >
-            {/* {configFormats.map((configFormat) => ( */}
-            <SelectOption
-              key={"key"}
-              value={"value"}
-              // isSelected={selected === configFormat.id}
-            >
-              {"display name"}
-            </SelectOption>
-            {/* ))} */}
-          </Select>
+          <Controller
+            name="userLdapFilter"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-user-ldap-filter"
+                required
+                onToggle={() =>
+                  setIsUserLdapFilterModeDropdownOpen(
+                    !isUserLdapFilterModeDropdownOpen
+                  )
+                }
+                isOpen={isUserLdapFilterModeDropdownOpen}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setIsUserLdapFilterModeDropdownOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+              >
+                <SelectOption key={0} value="Choose..." isPlaceholder />
+                <SelectOption key={1} value="to do " />
+              </Select>
+            )}
+          ></Controller>
         </FormGroup>
 
         <FormGroup
@@ -211,29 +233,32 @@ export const LdapSettingsSearching = () => {
           }
           fieldId="kc-search-scope"
         >
-          <Select
-            toggleId="kc-search-scope"
-            // isOpen={openType}
-            onToggle={() => {}}
-            // variant={SelectVariant.single}
-            // value={selected}
-            // selections={selected}
-            // onSelect={(_, value) => {
-            //   setSelected(value as string);
-            //   setOpenType(false);
-            // }}
-            aria-label="Only for LDAPS" // TODO
-          >
-            {/* {configFormats.map((configFormat) => ( */}
-            <SelectOption
-              key={"key"}
-              value={"value"}
-              // isSelected={selected === configFormat.id}
-            >
-              {"display name"}
-            </SelectOption>
-            {/* ))} */}
-          </Select>
+          <Controller
+            name="searchScope"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <Select
+                toggleId="kc-search-scope"
+                required
+                onToggle={() =>
+                  setIsSearchScopeDropdownOpen(!isSearchScopeDropdownOpen)
+                }
+                isOpen={isSearchScopeDropdownOpen}
+                onSelect={(_, value) => {
+                  onChange(value as string);
+                  setIsSearchScopeDropdownOpen(false);
+                }}
+                selections={value}
+                variant={SelectVariant.single}
+              >
+                <SelectOption key={0} value="Choose..." isPlaceholder />
+                <SelectOption key={1} value="simple" />
+                <SelectOption key={2} value="none" />
+                <SelectOption key={5} value="Other" />
+              </Select>
+            )}
+          ></Controller>
         </FormGroup>
 
         <FormGroup
@@ -250,9 +275,8 @@ export const LdapSettingsSearching = () => {
           <TextInput
             type="text"
             id="kc-read-timeout"
-            name="kc-read-timeout"
-            // value={value1}
-            // onChange={this.handleTextInputChange1}
+            name="readTimeout"
+            ref={register}
           />
         </FormGroup>
 
@@ -268,15 +292,24 @@ export const LdapSettingsSearching = () => {
           fieldId="kc-console-pagination"
           hasNoPaddingTop
         >
-          <Switch
-            id={"kc-console-pagination"}
-            isChecked={true}
-            isDisabled={false}
-            onChange={() => undefined as any}
-            label={t("common:on")}
-            labelOff={t("common:off")}
-          />
+          <Controller
+            name="pagination"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-console-pagination"}
+                isChecked={value}
+                isDisabled={false}
+                onChange={onChange}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+              />
+            )}
+          ></Controller>
         </FormGroup>
+
+        <button type="submit">Test Submit</button>
       </Form>
     </>
   );
diff --git a/src/user-federation/LdapSettingsSynchronization.tsx b/src/user-federation/LdapSettingsSynchronization.tsx
index 68b5447bdd..b804a63a81 100644
--- a/src/user-federation/LdapSettingsSynchronization.tsx
+++ b/src/user-federation/LdapSettingsSynchronization.tsx
@@ -2,15 +2,24 @@ import { Form, FormGroup, Switch, TextInput } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React from "react";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { useForm, Controller } from "react-hook-form";
+import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 
 export const LdapSettingsSynchronization = () => {
   const { t } = useTranslation("user-federation");
   const helpText = useTranslation("user-federation-help").t;
 
+  const { register, handleSubmit, control } = useForm<
+    ComponentRepresentation
+  >();
+  const onSubmit = (data: ComponentRepresentation) => {
+    console.log(data);
+  };
+
   return (
     <>
       {/* Synchronization settings */}
-      <Form isHorizontal>
+      <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
         <FormGroup
           label={t("importUsers")}
           labelIcon={
@@ -23,16 +32,21 @@ export const LdapSettingsSynchronization = () => {
           fieldId="kc-import-users"
           hasNoPaddingTop
         >
-          <Switch
-            id={"kc-import-users"}
-            isChecked={true}
-            isDisabled={false}
-            onChange={() => undefined as any} //TODO: switch shows/hides other fields
-            label={t("common:on")}
-            labelOff={t("common:off")}
-          />
+          <Controller
+            name="importUsers"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-import-users"}
+                isChecked={value}
+                isDisabled={false}
+                onChange={onChange}
+                aria-label={t("importUsers") + " " + t("common:on")}
+              />
+            )}
+          ></Controller>
         </FormGroup>
-
         <FormGroup
           label={t("batchSize")}
           labelIcon={
@@ -44,9 +58,13 @@ export const LdapSettingsSynchronization = () => {
           }
           fieldId="kc-batch-size"
         >
-          <TextInput type="text" id="kc-batch-size" name="batchSize" />
+          <TextInput
+            type="text"
+            id="kc-batch-size"
+            name="batchSize"
+            ref={register}
+          />
         </FormGroup>
-
         <FormGroup
           label={t("periodicFullSync")}
           labelIcon={
@@ -59,16 +77,22 @@ export const LdapSettingsSynchronization = () => {
           fieldId="kc-periodic-full-sync"
           hasNoPaddingTop
         >
-          <Switch
-            id={"kc-periodic-full-sync"}
-            label={t("common:on")}
-            labelOff={t("common:off")}
-            isChecked={true}
-            isDisabled={false}
-            onChange={() => undefined as any}
-          />
+          <Controller
+            name="periodicFullSync"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-periodic-full-sync"}
+                isChecked={value}
+                isDisabled={false}
+                onChange={onChange}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+              />
+            )}
+          ></Controller>
         </FormGroup>
-
         <FormGroup
           label={t("periodicChangedUsersSync")}
           labelIcon={
@@ -81,15 +105,23 @@ export const LdapSettingsSynchronization = () => {
           fieldId="kc-periodic-changed-users-sync"
           hasNoPaddingTop
         >
-          <Switch
-            id={"kc-periodic-changed-users-sync"}
-            isChecked={true}
-            isDisabled={false}
-            onChange={() => undefined as any}
-            label={t("common:on")}
-            labelOff={t("common:off")}
-          />
+          <Controller
+            name="periodicChangedUsersSync"
+            defaultValue={false}
+            control={control}
+            render={({ onChange, value }) => (
+              <Switch
+                id={"kc-periodic-changed-users-sync"}
+                isChecked={value}
+                isDisabled={false}
+                onChange={onChange}
+                label={t("common:on")}
+                labelOff={t("common:off")}
+              />
+            )}
+          ></Controller>
         </FormGroup>
+        <button type="submit">Test submit</button>
       </Form>
     </>
   );