diff --git a/admin-ui/app/components/GluuTable/GluuTable.tsx b/admin-ui/app/components/GluuTable/GluuTable.tsx
index 2bd19ca590..7fe6f783d0 100644
--- a/admin-ui/app/components/GluuTable/GluuTable.tsx
+++ b/admin-ui/app/components/GluuTable/GluuTable.tsx
@@ -9,7 +9,7 @@ import GluuText from '@/routes/Apps/Gluu/GluuText'
 import { GluuButton } from '@/components/GluuButton'
 import { GluuSpinner } from '@/components/GluuSpinner'
 import { useStyles, TABLE_MIN_WIDTH, TABLE_RESPONSIVE_BREAKPOINT } from './GluuTable.style'
-import { T_KEYS } from './constants'
+import { T_KEYS, EMPTY_CELL_PLACEHOLDER } from './constants'
 import type { CellValue, ColumnKey, GluuTableProps, SortDirection } from './types'
 import { ChevronIcon } from '@/components/SVG'
 import {
@@ -652,7 +652,9 @@ const GluuTable = <T,>(props: Readonly<GluuTableProps<T>>) => {
                                 })
                               ) : (
                                 <GluuText variant="span" disableThemeColor>
-                                  {String(value ?? '')}
+                                  {value === null || value === undefined || value === ''
+                                    ? EMPTY_CELL_PLACEHOLDER
+                                    : String(value)}
                                 </GluuText>
                               )}
                             </td>
diff --git a/admin-ui/app/components/GluuTable/constants.ts b/admin-ui/app/components/GluuTable/constants.ts
index 7ab32a6d18..fc48bc5b24 100644
--- a/admin-ui/app/components/GluuTable/constants.ts
+++ b/admin-ui/app/components/GluuTable/constants.ts
@@ -4,6 +4,8 @@ export const COLUMN_WIDTHS = {
   PILL_LIST: 280,
 } as const
 
+export const EMPTY_CELL_PLACEHOLDER = '—'
+
 export const T_KEYS = {
   FIELDS_ACTIONS: 'fields.actions',
   FIELDS_OF: 'fields.of',
diff --git a/admin-ui/app/components/Layout/Layout.tsx b/admin-ui/app/components/Layout/Layout.tsx
index ce44af3d57..3a9ff4d068 100755
--- a/admin-ui/app/components/Layout/Layout.tsx
+++ b/admin-ui/app/components/Layout/Layout.tsx
@@ -13,7 +13,6 @@ import { LayoutNavbar } from './LayoutNavbar'
 import { LayoutSidebar } from './LayoutSidebar'
 import { PageConfigContext } from './PageConfigContext'
 import { ThemeClass } from './../Theme'
-import { siteDescription, siteKeywords } from '@/config/site'
 import type {
   LayoutPartComponentType,
   LayoutProps,
@@ -89,8 +88,8 @@ const initialLayoutState: LayoutState = {
   screenSize: (typeof window !== 'undefined' ? getScreenSize() : '') as ScreenSize,
   animationsDisabled: true,
   pageTitle: null,
-  pageDescription: siteDescription,
-  pageKeywords: siteKeywords,
+  pageDescription: 'Jans-server admin Ui',
+  pageKeywords: 'jans-server oauth jans gluu',
 }
 
 const Layout: React.FC<LayoutProps> = (props) => {
diff --git a/admin-ui/app/components/icons/index.ts b/admin-ui/app/components/icons/index.ts
index 533d06dc00..56b0f5add2 100644
--- a/admin-ui/app/components/icons/index.ts
+++ b/admin-ui/app/components/icons/index.ts
@@ -1,6 +1,5 @@
 export { default as AccessTimeIcon } from '@mui/icons-material/AccessTime'
 export { default as Add } from '@mui/icons-material/Add'
-export { default as AddCircleOutline } from '@mui/icons-material/AddCircleOutlineOutlined'
 export { default as CachedIcon } from '@mui/icons-material/Cached'
 export { default as Check } from '@mui/icons-material/Check'
 export { default as CheckCircleOutline } from '@mui/icons-material/CheckCircleOutlineOutlined'
diff --git a/admin-ui/app/config/site.ts b/admin-ui/app/config/site.ts
deleted file mode 100644
index 895ac3bd4e..0000000000
--- a/admin-ui/app/config/site.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const siteDescription = 'Jans-server admin Ui'
-export const siteKeywords = 'jans-server oauth jans gluu'
diff --git a/admin-ui/app/constants/ui.ts b/admin-ui/app/constants/ui.ts
index 5ffb0c026e..24b39bfdff 100644
--- a/admin-ui/app/constants/ui.ts
+++ b/admin-ui/app/constants/ui.ts
@@ -120,6 +120,24 @@ export const ICON_SIZE = {
 
 export const ICON_BUTTON_SIZE = 32
 
+export const TOGGLE = {
+  TRACK_WIDTH: 50,
+  TRACK_HEIGHT: 24,
+  TRACK_RADIUS: 30,
+  THUMB_SIZE: 22,
+  THUMB_INSET: 1,
+  THUMB_CHECKED_LEFT: 27,
+  ICON_HEIGHT: 10,
+  CHECK_WIDTH: 14,
+  CHECK_LEFT: 8,
+  X_WIDTH: 10,
+  X_RIGHT: 10,
+  FOCUS_RING_BLUR: 2,
+  FOCUS_RING_SPREAD: 3,
+  ACTIVE_RING_BLUR: 5,
+  ACTIVE_RING_SPREAD: 5,
+} as const
+
 export const TOOLTIP = {
   ARROW_SIZE: 8,
   PADDING_VERTICAL: 8,
diff --git a/admin-ui/app/layout/components/DefaultSidebar.tsx b/admin-ui/app/layout/components/DefaultSidebar.tsx
index 922250de6c..dbb8fc745a 100755
--- a/admin-ui/app/layout/components/DefaultSidebar.tsx
+++ b/admin-ui/app/layout/components/DefaultSidebar.tsx
@@ -3,13 +3,13 @@ import { Link } from 'react-router-dom'
 import { useAppSelector } from '@/redux/hooks'
 import { Sidebar } from 'Components'
 import { LogoThemed } from 'Routes/components/LogoThemed/LogoThemed'
-import GluuSuspenseLoader from 'Routes/Apps/Gluu/GluuSuspenseLoader'
 import GluuText from '@/routes/Apps/Gluu/GluuText'
 import GluuAppSidebar from 'Routes/Apps/Gluu/GluuAppSidebar'
 import type { DefaultSidebarProps } from './types'
 import { useTranslation } from 'react-i18next'
 import { ROUTES } from '@/helpers/navigation'
 import { useStyles } from './DefaultSidebar.style'
+import { GluuSpinner } from '@/components/GluuSpinner'
 
 const DefaultSidebar: React.FC<DefaultSidebarProps> = () => {
   const { t } = useTranslation()
@@ -26,7 +26,7 @@ const DefaultSidebar: React.FC<DefaultSidebarProps> = () => {
       </div>
     ) : (
       <div className={classes.sidebarLoaderRoot}>
-        <GluuSuspenseLoader />
+        <GluuSpinner />
       </div>
     )
 
diff --git a/admin-ui/app/layout/default.tsx b/admin-ui/app/layout/default.tsx
index bd4e8a00c6..11684304f1 100755
--- a/admin-ui/app/layout/default.tsx
+++ b/admin-ui/app/layout/default.tsx
@@ -7,7 +7,6 @@ import { STORAGE_KEYS } from '@/constants'
 
 import 'Styles/bootstrap.scss'
 import 'Styles/main.scss'
-import 'Styles/plugins/plugins.css'
 import 'Styles/plugins/plugins.scss'
 
 import { RoutedNavbars, RoutedSidebars } from '../routes'
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuAutocomplete.tsx b/admin-ui/app/routes/Apps/Gluu/GluuAutocomplete.tsx
index 239975bf8b..c02d0009fa 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuAutocomplete.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuAutocomplete.tsx
@@ -50,7 +50,7 @@ const GluuAutocomplete = ({
   const { t } = useTranslation()
   const { state: themeState } = useTheme()
   const selectedTheme = themeState?.theme ?? DEFAULT_THEME
-  const themeColors = getThemeColor(selectedTheme)
+  const themeColors = React.useMemo(() => getThemeColor(selectedTheme), [selectedTheme])
   const { classes } = useStyles({
     themeColors,
     allowCustom,
@@ -63,7 +63,7 @@ const GluuAutocomplete = ({
   const resolvedHelperText = helperText ?? t('messages.multi_select_hint')
 
   const optionValues = React.useMemo(
-    () => options.map((o) => (typeof o === 'string' ? o : o.value)),
+    () => [...new Set(options.map((o) => (typeof o === 'string' ? o : o.value)))],
     [options],
   )
   const labelByValue = React.useMemo(() => {
@@ -81,13 +81,62 @@ const GluuAutocomplete = ({
     [labelByValue],
   )
 
-  const selectedItems = Array.isArray(value)
-    ? value.filter((v): v is string => typeof v === 'string')
-    : []
+  const selectedItems = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? [...new Set(value.filter((v): v is string => typeof v === 'string'))]
+        : [],
+    [value],
+  )
 
   const [inputValue, setInputValue] = React.useState('')
   const lockedPlacementRef = React.useRef<Placement | null>(null)
 
+  const autocompleteOptions = React.useMemo(
+    () =>
+      allowCustom
+        ? [...optionValues, ...selectedItems.filter((s) => !optionValues.includes(s))]
+        : optionValues,
+    [allowCustom, optionValues, selectedItems],
+  )
+
+  const popperSlotProps = React.useMemo(
+    () => ({
+      paper: { className: classes.dropdownPaper },
+      popper: {
+        placement: 'bottom-start' as const,
+        className: classes.popperRoot,
+        modifiers: [
+          {
+            name: 'computeStyles',
+            options: { adaptive: false, gpuAcceleration: false },
+          },
+          {
+            name: 'sameWidth',
+            enabled: true,
+            phase: 'afterWrite' as const,
+            fn: sameWidthModifier,
+          },
+          {
+            name: 'lockPlacement',
+            enabled: true,
+            phase: 'main' as const,
+            requires: ['flip'],
+            fn: ({ state }: ModifierArguments<Obj>) => {
+              if (lockedPlacementRef.current == null) {
+                lockedPlacementRef.current = state.placement
+              } else if (state.placement !== lockedPlacementRef.current) {
+                state.placement = lockedPlacementRef.current
+                state.reset = true
+              }
+            },
+          },
+        ],
+      },
+    }),
+    [classes.dropdownPaper, classes.popperRoot],
+  )
+
   const handleChange = useCallback(
     (_event: React.SyntheticEvent, newValue: string[]) => {
       const normalized = newValue
@@ -161,11 +210,7 @@ const GluuAutocomplete = ({
                 onSearch?.(val)
               }
             }}
-            options={
-              allowCustom
-                ? [...optionValues, ...selectedItems.filter((s) => !optionValues.includes(s))]
-                : optionValues
-            }
+            options={autocompleteOptions}
             value={selectedItems}
             isOptionEqualToValue={(option, val) => option === val}
             onChange={handleChange}
@@ -178,41 +223,7 @@ const GluuAutocomplete = ({
             disableCloseOnSelect
             disablePortal
             className={classes.autocompleteRoot}
-            slotProps={{
-              paper: {
-                className: classes.dropdownPaper,
-              },
-              popper: {
-                placement: 'bottom-start' as const,
-                className: classes.popperRoot,
-                modifiers: [
-                  {
-                    name: 'computeStyles',
-                    options: { adaptive: false, gpuAcceleration: false },
-                  },
-                  {
-                    name: 'sameWidth',
-                    enabled: true,
-                    phase: 'afterWrite' as const,
-                    fn: sameWidthModifier,
-                  },
-                  {
-                    name: 'lockPlacement',
-                    enabled: true,
-                    phase: 'main' as const,
-                    requires: ['flip'],
-                    fn: ({ state }: ModifierArguments<Obj>) => {
-                      if (lockedPlacementRef.current == null) {
-                        lockedPlacementRef.current = state.placement
-                      } else if (state.placement !== lockedPlacementRef.current) {
-                        state.placement = lockedPlacementRef.current
-                        state.reset = true
-                      }
-                    },
-                  },
-                ],
-              },
-            }}
+            slotProps={popperSlotProps}
             forcePopupIcon
             popupIcon={<ChevronIcon width={20} height={20} direction="down" />}
             filterOptions={filterOptions}
@@ -268,8 +279,8 @@ const GluuAutocomplete = ({
                           const trimmed = inputValue.trim()
                           if (
                             trimmed &&
-                            !optionValues.some((o) =>
-                              getDisplayLabel(o).toLowerCase().includes(trimmed.toLowerCase()),
+                            !optionValues.some(
+                              (o) => getDisplayLabel(o).toLowerCase() === trimmed.toLowerCase(),
                             ) &&
                             !selectedItems.some(
                               (s) => getDisplayLabel(s).toLowerCase() === trimmed.toLowerCase(),
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuBooleanSelectBox.tsx b/admin-ui/app/routes/Apps/Gluu/GluuBooleanSelectBox.tsx
deleted file mode 100644
index d3059fcbfb..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/GluuBooleanSelectBox.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import GluuLabel from './GluuLabel'
-import GluuToggle from './GluuToggle'
-import { Col, FormGroup, CustomInput, InputGroup } from 'Components'
-import { useTranslation } from 'react-i18next'
-import { useMemo } from 'react'
-import type { JsonValue } from './types/common'
-import type { GluuBooleanSelectBoxProps } from './types'
-
-const GluuBooleanSelectBox = <T extends object = Record<string, JsonValue>>({
-  label,
-  name,
-  value,
-  formik,
-  handler,
-  lsize,
-  rsize,
-  doc_category,
-  disabled,
-  toToggle = true,
-}: GluuBooleanSelectBoxProps<T>): JSX.Element => {
-  const { t } = useTranslation()
-  const normalizedValue = useMemo(() => {
-    return typeof value === 'string' ? value === 'true' : value
-  }, [value])
-  return (
-    <FormGroup row>
-      <GluuLabel label={label} size={lsize} doc_category={doc_category} doc_entry={name} />
-      <Col sm={rsize}>
-        {!toToggle && (
-          <InputGroup>
-            <CustomInput
-              type="select"
-              id={name}
-              name={name}
-              data-testid={name}
-              defaultValue={value != null ? String(value) : undefined}
-              onChange={formik.handleChange}
-              disabled={disabled}
-            >
-              <option value="false">{t('options.false')}</option>
-              <option value="true">{t('options.true')}</option>
-            </CustomInput>
-          </InputGroup>
-        )}
-        {toToggle && (
-          <GluuToggle
-            id={name}
-            data-testid={name}
-            name={name}
-            handler={handler}
-            formik={formik}
-            value={normalizedValue}
-            disabled={disabled}
-          />
-        )}
-      </Col>
-    </FormGroup>
-  )
-}
-
-export default GluuBooleanSelectBox
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuCommitDialog.tsx b/admin-ui/app/routes/Apps/Gluu/GluuCommitDialog.tsx
index 24710d1c95..cbbbd2c1c1 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuCommitDialog.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuCommitDialog.tsx
@@ -200,7 +200,9 @@ const GluuCommitDialog = ({
                     {operations.map((operation, index) => (
                       <div key={`${operation.path}-${index}`} className={classes.operationRow}>
                         <span className={classes.operationLabel}>{t('set')}</span>
-                        <span className={classes.operationBadge}>{operation.path}</span>
+                        <span className={classes.operationBadge}>
+                          {operation.label || operation.path}
+                        </span>
                         <span className={classes.operationLabel}>{t('to')}</span>
                         <span className={classes.operationBadge}>
                           {operation.value === null || operation.value === ''
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuInlineInput.tsx b/admin-ui/app/routes/Apps/Gluu/GluuInlineInput.tsx
index 147952353d..93b1bc1962 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuInlineInput.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuInlineInput.tsx
@@ -3,7 +3,8 @@ import { Check, Close } from '@/components/icons'
 import { OPACITY } from '@/constants'
 import GluuLabel from './GluuLabel'
 import GluuToggle from './GluuToggle'
-import { Typeahead } from 'react-bootstrap-typeahead'
+import GluuAutocomplete from './GluuAutocomplete'
+import type { AutocompleteOption } from './types/GluuAutocomplete.types'
 import applicationStyle from '@/routes/Apps/Gluu/styles/applicationStyle'
 import { useStyles } from '@/routes/Apps/Gluu/styles/GluuInlineInput.style'
 import { Col, FormGroup, Input, Button } from 'Components'
@@ -137,8 +138,11 @@ const GluuInlineInput = ({
     [value],
   )
 
-  const filteredOptions = useMemo(
-    () => (Array.isArray(options) ? options.filter((item) => item != null) : []),
+  const filteredOptions = useMemo<AutocompleteOption[]>(
+    () =>
+      Array.isArray(options)
+        ? options.filter((item) => item != null).map((item) => ({ value: item, label: item }))
+        : [],
     [options],
   )
   const resolvedId = id || name
@@ -173,21 +177,19 @@ const GluuInlineInput = ({
                 data-testid={resolvedId}
                 name={name}
                 handler={onValueChanged}
-                value={value as boolean}
+                value={Boolean(data)}
                 disabled={disabled}
               />
             )}
             {isArray && (
-              <Typeahead
-                id={resolvedId}
-                data-testid={resolvedId}
-                allowNew
-                emptyLabel=""
-                labelKey={name}
-                onChange={handleTypeAheadChange}
-                multiple={true}
-                defaultSelected={filteredValue}
+              <GluuAutocomplete
+                hideLabel
+                allowCustom
+                name={name}
+                label={label}
+                value={filteredValue}
                 options={filteredOptions}
+                onChange={handleTypeAheadChange}
                 disabled={disabled}
               />
             )}
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuPermissionModal.tsx b/admin-ui/app/routes/Apps/Gluu/GluuPermissionModal.tsx
deleted file mode 100644
index a2aecdbbcb..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/GluuPermissionModal.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useTheme } from 'Context/theme/themeContext'
-import getThemeColor from '@/context/theme/config'
-import { DEFAULT_THEME, THEME_DARK } from '@/context/theme/constants'
-import GluuText from './GluuText'
-import { GluuButton } from '@/components'
-import { GluuModalShell } from '@/components/GluuModalShell'
-import { useStyles } from './styles/GluuPermissionModal.style'
-import type { GluuPermissionModalProps } from './types/GluuPermissionModal.types'
-
-const GluuPermissionModal = ({ handler, isOpen }: GluuPermissionModalProps) => {
-  const { t } = useTranslation()
-  const { state: themeState } = useTheme()
-  const selectedTheme = themeState?.theme ?? DEFAULT_THEME
-  const isDark = selectedTheme === THEME_DARK
-  const themeColors = useMemo(() => getThemeColor(selectedTheme), [selectedTheme])
-  const { classes } = useStyles({ isDark, themeColors })
-
-  if (!isOpen) return null
-
-  return (
-    <GluuModalShell
-      onClose={handler}
-      ariaLabelledBy="permission-modal-title"
-      closeOnOverlayClick={false}
-    >
-      <GluuText variant="h2" className={classes.title} id="permission-modal-title">
-        <i className="bi bi-shield-lock" /> {t('dashboard.access_denied')}
-      </GluuText>
-      <div className={classes.modalBody}>
-        <GluuText variant="p" className={classes.mutedText}>
-          🚫 <strong>{t('dashboard.access_denied_message')}</strong>
-        </GluuText>
-        <GluuText variant="p">{t('dashboard.access_contact_admin')}</GluuText>
-      </div>
-      <div className={classes.buttonRow}>
-        <GluuButton
-          onClick={handler}
-          backgroundColor={themeColors.formFooter.back.backgroundColor}
-          textColor={themeColors.formFooter.back.textColor}
-          borderColor="transparent"
-          padding="8px 28px"
-          minHeight="40"
-          useOpacityOnHover
-        >
-          {t('menus.signout')}
-        </GluuButton>
-      </div>
-    </GluuModalShell>
-  )
-}
-
-export default GluuPermissionModal
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuRemovableInputRow.tsx b/admin-ui/app/routes/Apps/Gluu/GluuRemovableInputRow.tsx
index 19822be18e..a20bacfde0 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuRemovableInputRow.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuRemovableInputRow.tsx
@@ -6,6 +6,7 @@ import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
+import { THEME_DARK } from '@/context/theme/constants'
 import { useStyles } from './styles/GluuRemovableInputRow.style'
 import type { GluuRemovableInputRowProps } from './types'
 import { Close as CloseIcon } from '@/components/icons'
@@ -29,7 +30,8 @@ const GluuRemovableInputRow = <TValues extends FormikValues = FormikValues>({
   const { t } = useTranslation()
   const { state: themeState } = useTheme()
   const themeColors = useMemo(() => getThemeColor(themeState.theme), [themeState.theme])
-  const { classes } = useStyles({ fontColor: themeColors.fontColor })
+  const isDark = themeState.theme === THEME_DARK
+  const { classes } = useStyles({ fontColor: themeColors.fontColor, isDark })
   const currentValue = formik.values[name as keyof TValues] as string | boolean | undefined
   const isChecked = (formik.values[name as keyof TValues] as boolean | undefined) ?? false
 
@@ -61,7 +63,7 @@ const GluuRemovableInputRow = <TValues extends FormikValues = FormikValues>({
           formik={formik}
           value={isChecked}
           handler={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setModifiedFields({
+            setModifiedFields?.({
               ...modifiedFields,
               [name]: e.target.checked,
             })
@@ -92,7 +94,7 @@ const GluuRemovableInputRow = <TValues extends FormikValues = FormikValues>({
           className={classes.input}
           value={(currentValue as string) ?? (value as string) ?? ''}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setModifiedFields({
+            setModifiedFields?.({
               ...modifiedFields,
               [name]: e.target.value,
             })
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuRemovableSelectRow.tsx b/admin-ui/app/routes/Apps/Gluu/GluuRemovableSelectRow.tsx
index 7de774b582..3582578ef7 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuRemovableSelectRow.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuRemovableSelectRow.tsx
@@ -45,7 +45,7 @@ const GluuRemovableSelectRow = ({
             name={name}
             value={currentValue}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setModifiedFields({
+              setModifiedFields?.({
                 ...modifiedFields,
                 [name]: e.target.value,
               })
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuSecretDetail.tsx b/admin-ui/app/routes/Apps/Gluu/GluuSecretDetail.tsx
deleted file mode 100644
index 4e803968e9..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/GluuSecretDetail.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useState, memo, useCallback, CSSProperties, useMemo } from 'react'
-import { FormGroup, Label, Col } from 'Components'
-import Toggle from 'react-toggle'
-import GluuTooltip from './GluuTooltip'
-import { useTranslation } from 'react-i18next'
-import customColors from '@/customColors'
-import type { GluuSecretDetailProps } from './types'
-import { useStyles } from './styles/GluuSecretDetail.style'
-
-const defaultLabelStyle: CSSProperties = { fontWeight: 'bold', color: customColors.black }
-
-const GluuSecretDetail = ({
-  label,
-  value,
-  doc_category,
-  doc_entry,
-  lsize = 6,
-  rsize = 6,
-  labelStyle,
-  rowClassName,
-}: GluuSecretDetailProps) => {
-  const { t } = useTranslation()
-  const [up, setUp] = useState(false)
-
-  const handleSecret = useCallback(() => {
-    setUp((prev) => !prev)
-  }, [])
-
-  const appliedLabelStyle: CSSProperties = useMemo(
-    () => ({ ...defaultLabelStyle, ...labelStyle }),
-    [labelStyle],
-  )
-  const { classes } = useStyles()
-  const appliedRowClassName = rowClassName || classes.rowDefault
-
-  const valueStyle: CSSProperties = useMemo(
-    () => ({ fontWeight: 'bold', color: customColors.black }),
-    [],
-  )
-
-  return (
-    <GluuTooltip doc_category={doc_category} doc_entry={doc_entry || label}>
-      <FormGroup row className={appliedRowClassName}>
-        <Label for="input" sm={lsize} style={appliedLabelStyle}>
-          {t(label)}:
-        </Label>
-        <Col
-          sm={rsize}
-          className={classes.valueCol}
-          style={{ gap: '0.5rem', wordBreak: 'break-all' }}
-        >
-          {value !== '-' && <Toggle defaultChecked={false} onChange={handleSecret} />}
-          {(value === '-' || up) && (
-            <span style={valueStyle} data-testid="secret-value">
-              {value}
-            </span>
-          )}
-        </Col>
-      </FormGroup>
-    </GluuTooltip>
-  )
-}
-
-export default memo(GluuSecretDetail)
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuSelectRow.tsx b/admin-ui/app/routes/Apps/Gluu/GluuSelectRow.tsx
index 9ffaa11999..569afa3b81 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuSelectRow.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuSelectRow.tsx
@@ -46,6 +46,7 @@ const GluuSelectRow: React.FC<GluuSelectRowProps> = ({
   inputPaddingTop,
   inputPaddingBottom,
   hideChooseOption = false,
+  reserveErrorSpace = false,
 }) => {
   const { t } = useTranslation()
   const { state: themeState } = useTheme()
@@ -160,11 +161,11 @@ const GluuSelectRow: React.FC<GluuSelectRowProps> = ({
             <ChevronIcon width={20} height={20} direction="down" />
           </span>
         </div>
-        {showError && errorMessage && (
+        {(showError && errorMessage) || reserveErrorSpace ? (
           <GluuText variant="span" className={classes.error} data-field-error disableThemeColor>
-            {errorMessage}
+            {showError && errorMessage ? errorMessage : ' '}
           </GluuText>
-        )}
+        ) : null}
       </Col>
     </FormGroup>
   )
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuSuspenseLoader.tsx b/admin-ui/app/routes/Apps/Gluu/GluuSuspenseLoader.tsx
deleted file mode 100644
index 569618f933..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/GluuSuspenseLoader.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { GluuSpinner } from '@/components/GluuSpinner'
-
-const GluuSuspenseLoader = () => {
-  return <GluuSpinner />
-}
-
-export default GluuSuspenseLoader
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuToggle.tsx b/admin-ui/app/routes/Apps/Gluu/GluuToggle.tsx
index 6a8f203b99..2c7544af0a 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuToggle.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuToggle.tsx
@@ -1,52 +1,74 @@
-import React, { useEffect, useState } from 'react'
-import type { FormikProps } from 'formik'
-import Toggle from 'react-toggle'
+import { useState } from 'react'
+import type { ChangeEvent } from 'react'
+import clsx from 'clsx'
 import type { JsonValue } from './types/common'
-
-type GluuToggleProps<T = Record<string, JsonValue>> = {
-  id?: string
-  name: string
-  formik?: FormikProps<T> | null
-  value?: boolean
-  handler?: (event: React.ChangeEvent<HTMLInputElement>) => void
-  disabled?: boolean
-}
+import type { GluuToggleProps } from './types/GluuToggle.types'
+import { useStyles } from './styles/GluuToggle.style'
 
 const GluuToggle = <T = Record<string, JsonValue>,>({
   id,
   name,
   formik,
-  value,
+  value = false,
   handler,
-  disabled,
+  disabled = false,
 }: GluuToggleProps<T>) => {
-  const [checked, setChecked] = useState(value || false)
+  const { classes } = useStyles()
+  const [focused, setFocused] = useState(false)
 
-  useEffect(() => {
-    if (value !== undefined) {
-      setChecked(value)
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    if (formik) {
+      formik.handleChange(event)
     }
-  }, [value])
+    handler?.(event)
+  }
 
   return (
-    <Toggle
-      id={id}
-      name={name}
-      data-testid={name}
-      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-        setChecked(event.target.checked)
-        if (formik) {
-          formik.handleChange(event)
-          if (handler) {
-            handler(event)
-          }
-        } else {
-          handler?.(event)
-        }
-      }}
-      disabled={disabled}
-      checked={checked}
-    />
+    <span className={classes.wrapper}>
+      <label
+        className={clsx(
+          classes.root,
+          'react-toggle',
+          value && 'react-toggle--checked',
+          disabled && 'react-toggle--disabled',
+          focused && 'react-toggle--focus',
+        )}
+      >
+        <div className="react-toggle-track">
+          <div className="react-toggle-track-check">
+            <svg width="14" height="11" viewBox="0 0 14 11">
+              <path
+                d="M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0"
+                fill="#fff"
+                fillRule="evenodd"
+              />
+            </svg>
+          </div>
+          <div className="react-toggle-track-x">
+            <svg width="10" height="10" viewBox="0 0 10 10">
+              <path
+                d="M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12"
+                fill="#fff"
+                fillRule="evenodd"
+              />
+            </svg>
+          </div>
+          <div className="react-toggle-thumb" />
+        </div>
+        <input
+          id={id}
+          name={name}
+          data-testid={name}
+          type="checkbox"
+          className="react-toggle-screenreader-only"
+          checked={value}
+          disabled={disabled}
+          onChange={handleChange}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+        />
+      </label>
+    </span>
   )
 }
 
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuTypeAhead.tsx b/admin-ui/app/routes/Apps/Gluu/GluuTypeAhead.tsx
deleted file mode 100644
index 4b60c46112..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/GluuTypeAhead.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useMemo, useCallback, memo } from 'react'
-import { FormGroup, Col } from 'Components'
-import { Typeahead } from 'react-bootstrap-typeahead'
-import GluuLabel from '../Gluu/GluuLabel'
-import { useTranslation } from 'react-i18next'
-import { useStyles } from './styles/GluuTypeAhead.style'
-import type { GluuTypeAheadOption, GluuTypeAheadProps } from './types/GluuTypeAhead.types'
-
-const GluuTypeAhead = memo(
-  ({
-    label,
-    labelKey,
-    name,
-    value,
-    options,
-    formik = null,
-    required = false,
-    doc_category,
-    doc_entry,
-    forwardRef = null,
-    onChange = null,
-    lsize = 4,
-    rsize = 8,
-    disabled = false,
-    showError = false,
-    errorMessage,
-    allowNew = true,
-    isLoading = false,
-    multiple = true,
-    hideHelperMessage = false,
-    minLength = 0,
-    emptyLabel = 'fields.nothingToShowInTheList',
-    isDark,
-  }: GluuTypeAheadProps) => {
-    const { t } = useTranslation()
-    const { classes } = useStyles()
-
-    const selectedValue = useMemo(() => {
-      if (value !== undefined) {
-        return value
-      }
-      const formikWithValues = formik as { values?: Record<string, GluuTypeAheadOption[]> } | null
-      const fieldValue = formikWithValues?.values?.[name]
-      return Array.isArray(fieldValue) ? fieldValue : []
-    }, [value, formik, name])
-
-    const handleChange = useCallback(
-      (selected: GluuTypeAheadOption[]) => {
-        if (formik) {
-          formik.setFieldValue(name, selected)
-          if (onChange) {
-            onChange(selected)
-          }
-        } else if (onChange) {
-          onChange(selected)
-        }
-      },
-      [formik?.setFieldValue, name, onChange],
-    )
-
-    const resolvedLabelKey = useMemo(() => {
-      if (typeof labelKey === 'function' || typeof labelKey === 'string') {
-        return labelKey
-      }
-      return 'name'
-    }, [labelKey])
-
-    return (
-      <FormGroup row>
-        <GluuLabel
-          label={label}
-          size={lsize}
-          required={required}
-          doc_category={doc_category}
-          doc_entry={doc_entry || name}
-          isDark={isDark}
-        />
-        <Col sm={rsize}>
-          <Typeahead
-            allowNew={allowNew}
-            disabled={disabled}
-            ref={forwardRef}
-            emptyLabel={t(emptyLabel)}
-            labelKey={resolvedLabelKey}
-            isLoading={isLoading}
-            minLength={minLength}
-            onChange={handleChange}
-            id={name}
-            data-testid={name}
-            multiple={multiple}
-            selected={selectedValue}
-            options={options}
-          />
-          {!hideHelperMessage && (
-            <span className={classes.helperText}>{t('placeholders.typeahead_holder_message')}</span>
-          )}
-          {showError ? <div className={classes.error}>{errorMessage}</div> : null}
-        </Col>
-      </FormGroup>
-    )
-  },
-)
-
-export default GluuTypeAhead
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuTypeAheadForDn.tsx b/admin-ui/app/routes/Apps/Gluu/GluuTypeAheadForDn.tsx
deleted file mode 100644
index 435b8d5658..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/GluuTypeAheadForDn.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { useCallback, useState } from 'react'
-import { FormGroup, Col } from 'Components'
-import { AsyncTypeahead } from 'react-bootstrap-typeahead'
-import GluuLabel from '../Gluu/GluuLabel'
-import Typography from '@mui/material/Typography'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
-import { useTranslation } from 'react-i18next'
-import type { JsonValue } from './types/common'
-import type {
-  TypeAheadOptionObject,
-  TypeAheadOption,
-  GluuTypeAheadForDnProps,
-} from './types/GluuTypeAheadForDn.types'
-
-const theme = createTheme({
-  typography: {
-    subtitle1: {
-      fontSize: 12,
-    },
-  },
-})
-
-const GluuTypeAheadForDn = <
-  TValues extends object = Record<string, JsonValue>,
-  TOption extends TypeAheadOptionObject = TypeAheadOptionObject,
->({
-  label,
-  name,
-  value: _value,
-  options,
-  formik,
-  required,
-  doc_category,
-  doc_entry,
-  disabled = false,
-  allowNew = false,
-  haveLabelKey = true,
-  lsize = 4,
-  rsize = 8,
-  paginate = false,
-  onSearch = () => {},
-  onPaginate = () => {},
-  maxResults = undefined,
-  isLoading = false,
-  placeholder = undefined,
-  onChange,
-  hideHelperMessage,
-  defaultSelected,
-}: GluuTypeAheadForDnProps<TValues, TOption>) => {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-  const selectedValue = defaultSelected ?? _value ?? []
-
-  const getItemName = useCallback(
-    (item: string) => {
-      const data = options?.filter(
-        (e) => e.dn === item || (typeof e.key === 'string' && item.includes(e.key)),
-      )
-      return data[0]?.name
-    },
-    [options],
-  )
-
-  const getKey = useCallback((option: TypeAheadOptionObject) => {
-    return option.key ? `(Claim name: ${option.key})` : ''
-  }, [])
-
-  return (
-    <FormGroup row>
-      <GluuLabel
-        label={label}
-        size={lsize}
-        required={required}
-        doc_category={doc_category}
-        doc_entry={doc_entry || name}
-      />
-      <Col sm={rsize}>
-        <AsyncTypeahead
-          isLoading={isLoading}
-          labelKey={
-            haveLabelKey
-              ? (opt: TypeAheadOption) =>
-                  typeof opt === 'string'
-                    ? opt
-                    : `${opt.name || (opt.key ? getItemName(opt.key) : '')} ${getKey(opt)}`
-              : undefined
-          }
-          maxResults={maxResults}
-          options={options as TypeAheadOption[]}
-          onPaginate={onPaginate}
-          paginate={paginate}
-          placeholder={placeholder}
-          renderMenuItemChildren={(option: TypeAheadOption) => {
-            if (typeof option === 'string') {
-              return (
-                <div key={option}>
-                  <span>{option}</span>
-                </div>
-              )
-            }
-            return (
-              <div key={option.name ?? option.dn ?? option.key ?? option.label}>
-                <span>{option.name ?? option.label ?? ''}</span>
-              </div>
-            )
-          }}
-          open={open}
-          onBlur={() => setOpen(false)}
-          onFocus={() => setOpen(true)}
-          onChange={(selected) => {
-            formik.setFieldValue(
-              name,
-              (selected as TypeAheadOption[]).map((item) =>
-                typeof item === 'string' ? item : item.customOption ? item.label : item.dn,
-              ),
-            )
-            const selectedOptions = (selected as TypeAheadOption[]).filter(
-              (item): item is TOption => typeof item !== 'string',
-            )
-            onChange?.(selectedOptions)
-          }}
-          disabled={disabled}
-          id={name}
-          data-testid={name}
-          useCache={false}
-          allowNew={allowNew}
-          multiple={true}
-          selected={selectedValue as TypeAheadOption[]}
-          onSearch={onSearch}
-          dropup={false}
-          flip={true}
-          positionFixed={true}
-        />
-        {!hideHelperMessage && (
-          <ThemeProvider theme={theme}>
-            <Typography variant="subtitle1">
-              {t('placeholders.typeahead_holder_message')}
-            </Typography>
-          </ThemeProvider>
-        )}
-      </Col>
-    </FormGroup>
-  )
-}
-
-export default GluuTypeAheadForDn
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuTypeAheadWithAdd.tsx b/admin-ui/app/routes/Apps/Gluu/GluuTypeAheadWithAdd.tsx
deleted file mode 100644
index a9352aacdf..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/GluuTypeAheadWithAdd.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useState, useCallback } from 'react'
-import { FormGroup, Col, Row, Button, Input } from 'Components'
-import { Typeahead } from 'react-bootstrap-typeahead'
-import GluuLabel from '../Gluu/GluuLabel'
-import applicationStyle from './styles/applicationStyle'
-import { useStyles } from './styles/GluuTypeAheadWithAdd.style'
-import { useTranslation } from 'react-i18next'
-import { AddCircleOutline } from '@/components/icons'
-import { useTheme } from '@/context/theme/themeContext'
-import type { GluuTypeAheadWithAddProps } from './types'
-
-const GluuTypeAheadWithAdd = ({
-  label,
-  name,
-  value,
-  placeholder,
-  options,
-  formik,
-  validator,
-  inputId,
-  doc_category,
-  lsize = 4,
-  rsize = 8,
-  disabled = false,
-  handler = null,
-  multiple = true,
-}: GluuTypeAheadWithAddProps) => {
-  const { classes } = useStyles()
-  const [items, setItems] = useState<string[]>(value ?? [])
-  const [opts, setOpts] = useState<string[]>(options ?? [])
-  const { t } = useTranslation()
-  const { state } = useTheme()
-  const selectedTheme = state.theme
-
-  const addItem = useCallback(() => {
-    const input = document.getElementById(inputId) as HTMLInputElement | null
-    const newItem = input?.value ?? ''
-    if (input) input.value = ''
-    if (validator(newItem)) {
-      const updatedItems = items ? [...items] : []
-      updatedItems.push(newItem)
-
-      const temp = opts ? [...opts] : []
-      temp.push(...updatedItems)
-
-      setOpts(temp)
-      setItems(updatedItems)
-      formik.setFieldValue(name, updatedItems)
-
-      if (handler) {
-        handler(name, updatedItems)
-      }
-    }
-  }, [inputId, items, name, opts, formik, handler, validator])
-
-  const handleChange = useCallback(
-    (aName: string, selected: string[]) => {
-      setOpts(selected)
-      setItems(selected)
-      formik.setFieldValue(aName, selected)
-    },
-    [formik],
-  )
-
-  return (
-    <FormGroup row>
-      <GluuLabel label={label} size={lsize} doc_category={doc_category} doc_entry={name} />
-      <Col sm={rsize} className={classes.inputContainer}>
-        <div className={classes.spacer} />
-        <Row>
-          <Col sm={10}>
-            <Input
-              placeholder={placeholder}
-              id={inputId}
-              disabled={disabled}
-              data-testid="new_entry"
-              aria-label="new_entry"
-            />
-          </Col>
-          <Col>
-            <Button
-              color={`primary-${selectedTheme}`}
-              type="button"
-              disabled={disabled}
-              style={applicationStyle.buttonStyle}
-              onClick={addItem}
-              data-testid={t('actions.add')}
-            >
-              <AddCircleOutline fontSize="small" className={classes.actionIcon} />
-              {t('actions.add')}
-            </Button>
-          </Col>
-        </Row>
-        <div className={classes.spacer} />
-        <Typeahead
-          emptyLabel=""
-          labelKey={name}
-          disabled={disabled}
-          onChange={(selected) => handleChange(name, selected as string[])}
-          id={name}
-          data-testid={name}
-          multiple={multiple}
-          selected={items}
-          options={opts}
-        />
-        <div className={classes.spacer} />
-      </Col>
-    </FormGroup>
-  )
-}
-
-export default GluuTypeAheadWithAdd
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuWebhookExecutionDialog.tsx b/admin-ui/app/routes/Apps/Gluu/GluuWebhookExecutionDialog.tsx
index aaa77c007e..d9ba5d8315 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuWebhookExecutionDialog.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuWebhookExecutionDialog.tsx
@@ -11,14 +11,13 @@ import {
   setShowWebhookExecutionDialog,
   setWebhookTriggerResults,
 } from 'Plugins/admin/redux/features/WebhookSlice'
-import { Check, Close, InfoOutlined } from '@/components/icons'
+import { Close } from '@/components/icons'
 import { ModalLayer } from '@/components/ModalLayer'
 import { useTheme } from 'Context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { THEME_DARK } from '@/context/theme/constants'
 import { usePermission } from '@/cedarling/hooks/usePermission'
 import { ADMIN_UI_RESOURCES } from '@/cedarling/utility'
-import customColors from '@/customColors'
 import { useStyles } from './styles/GluuWebhookExecutionDialog.style'
 import { useStyles as useCommitDialogStyles } from './styles/GluuCommitDialog.style'
 import GluuText from './GluuText'
@@ -99,11 +98,6 @@ const GluuWebhookExecutionDialog = () => {
         <div className={`${commitClasses.contentArea} ${classes.contentArea}`}>
           <div className={classes.titleWithDescription}>
             <GluuText variant="h2" className={classes.title} id="webhook-execution-dialog-title">
-              <InfoOutlined
-                style={{ color: customColors.logo }}
-                className={classes.titleIcon}
-                aria-hidden
-              />
               {t('messages.webhook_execution_information')}
             </GluuText>
             <GluuText variant="p" className={classes.description}>
@@ -175,7 +169,6 @@ const GluuWebhookExecutionDialog = () => {
               useOpacityOnHover
               className={commitClasses.yesButton}
             >
-              <Check fontSize="small" className={classes.actionIcon} aria-hidden />
               {t('actions.ok')}
             </GluuButton>
           </div>
diff --git a/admin-ui/app/routes/Apps/Gluu/Tests/GluuAutocomplete.test.tsx b/admin-ui/app/routes/Apps/Gluu/Tests/GluuAutocomplete.test.tsx
new file mode 100644
index 0000000000..9529b8c8aa
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/Tests/GluuAutocomplete.test.tsx
@@ -0,0 +1,91 @@
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import GluuAutocomplete from '../GluuAutocomplete'
+import AppTestWrapper from './Components/AppTestWrapper'
+import type { AutocompleteOption } from '../types/GluuAutocomplete.types'
+
+const NAME = 'servers'
+const LABEL = 'Servers'
+
+const renderComponent = (props: Partial<Parameters<typeof GluuAutocomplete>[0]> = {}) => {
+  const onChange = jest.fn()
+  const utils = render(
+    <AppTestWrapper>
+      <GluuAutocomplete
+        name={NAME}
+        label={LABEL}
+        value={props.value ?? []}
+        options={props.options ?? []}
+        onChange={props.onChange ?? onChange}
+        {...props}
+      />
+    </AppTestWrapper>,
+  )
+  return { onChange: props.onChange ?? onChange, ...utils }
+}
+
+it('renders the label when not hidden', () => {
+  renderComponent()
+  expect(screen.getByText(/Servers/i)).toBeInTheDocument()
+})
+
+it('hides the label when hideLabel is set', () => {
+  renderComponent({ hideLabel: true })
+  expect(screen.queryByText(/Servers/i)).not.toBeInTheDocument()
+})
+
+it('renders selected values as tags using the option label', () => {
+  const options: AutocompleteOption[] = [
+    { value: 'dn-1', label: 'First Server' },
+    { value: 'dn-2', label: 'Second Server' },
+  ]
+  renderComponent({ value: ['dn-1'], options })
+  expect(screen.getByText('First Server')).toBeInTheDocument()
+  expect(screen.queryByText('Second Server')).not.toBeInTheDocument()
+})
+
+it('falls back to the raw value when no matching option label exists', () => {
+  renderComponent({ value: ['localhost:1636'], options: [] })
+  expect(screen.getByText('localhost:1636')).toBeInTheDocument()
+})
+
+it('deduplicates repeated values so tags stay unique', () => {
+  renderComponent({ value: ['ES512', 'ES512', 'RS256'], options: [] })
+  expect(screen.getAllByTitle('ES512')).toHaveLength(1)
+  expect(screen.getByTitle('RS256')).toBeInTheDocument()
+})
+
+it('calls onChange without the removed item when a tag is removed', () => {
+  const onChange = jest.fn()
+  renderComponent({ value: ['localhost:1636', 'localhost:1389'], options: [], onChange })
+  const tag = screen.getByTitle('localhost:1636')
+  fireEvent.click(within(tag).getByRole('button'))
+  expect(onChange).toHaveBeenCalledWith(['localhost:1389'])
+})
+
+it('adds a typed value on Enter when allowCustom is set', () => {
+  const onChange = jest.fn()
+  renderComponent({ value: [], options: [], allowCustom: true, onChange })
+  const input = screen.getByRole('combobox')
+  fireEvent.change(input, { target: { value: 'localhost:1636' } })
+  fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' })
+  expect(onChange).toHaveBeenCalledWith(['localhost:1636'])
+})
+
+it('does not add custom values when allowCustom is not set', () => {
+  const onChange = jest.fn()
+  renderComponent({ value: [], options: [], onChange })
+  const input = screen.getByRole('combobox')
+  fireEvent.change(input, { target: { value: 'localhost:1636' } })
+  fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' })
+  expect(onChange).not.toHaveBeenCalled()
+})
+
+it('renders the error message when showError is set', () => {
+  renderComponent({ showError: true, errorMessage: 'This field is required' })
+  expect(screen.getByText('This field is required')).toBeInTheDocument()
+})
+
+it('disables the input when disabled is set', () => {
+  renderComponent({ disabled: true })
+  expect(screen.getByRole('combobox')).toBeDisabled()
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/Tests/GluuSecretDetail.test.tsx b/admin-ui/app/routes/Apps/Gluu/Tests/GluuSecretDetail.test.tsx
deleted file mode 100644
index 2ebbc9321a..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/Tests/GluuSecretDetail.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import GluuSecretDetail from '../GluuSecretDetail'
-import { render, screen, waitFor } from '@testing-library/react'
-import AppTestWrapper from './Components/AppTestWrapper'
-import userEvent from '@testing-library/user-event'
-
-it('Test GluuSecretDetail component', async () => {
-  const LABEL = 'fields.application_type'
-  const VALUE = 'computer'
-  const { container } = render(
-    <AppTestWrapper>
-      <GluuSecretDetail
-        doc_category="openid_client"
-        doc_entry="applicationType"
-        value={VALUE}
-        label={LABEL}
-      />
-    </AppTestWrapper>,
-  )
-  expect(screen.getByText(/Application Type/i)).toBeInTheDocument()
-
-  const mouseOverEle = container.querySelector<HTMLDivElement>(
-    `div[data-tooltip-id="applicationType"]`,
-  )
-  expect(mouseOverEle).toBeInTheDocument()
-
-  if (mouseOverEle) await userEvent.hover(mouseOverEle)
-
-  await waitFor(() => {
-    expect(screen.getByRole('tooltip')).toHaveTextContent(/Kind of the application/i)
-  })
-})
diff --git a/admin-ui/app/routes/Apps/Gluu/Tests/GluuToggle.test.tsx b/admin-ui/app/routes/Apps/Gluu/Tests/GluuToggle.test.tsx
index 7a817dbe15..37b394cd71 100644
--- a/admin-ui/app/routes/Apps/Gluu/Tests/GluuToggle.test.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/Tests/GluuToggle.test.tsx
@@ -1,20 +1,35 @@
+import { useState } from 'react'
+import type { ChangeEvent } from 'react'
 import { fireEvent, screen } from '@testing-library/dom'
-import GluuToggle from '../GluuToggle'
 import { render } from '@testing-library/react'
+import GluuToggle from '../GluuToggle'
+
+const NAME = 'switch'
+
+const ControlledToggle = ({ onToggle }: { onToggle: (checked: boolean) => void }) => {
+  const [value, setValue] = useState(true)
+  return (
+    <GluuToggle
+      name={NAME}
+      value={value}
+      handler={(event: ChangeEvent<HTMLInputElement>) => {
+        setValue(event.target.checked)
+        onToggle(event.target.checked)
+      }}
+    />
+  )
+}
 
 describe('Toggle switch', () => {
   it('should update the state and UI when toggled', () => {
-    const initialChecked = true
-    const name = 'switch'
     const handlerMock = jest.fn()
+    render(<ControlledToggle onToggle={handlerMock} />)
 
-    render(<GluuToggle name={name} value={initialChecked} handler={handlerMock} />)
-
-    const toggleElement = screen.getByTestId(name) as HTMLInputElement
-    expect(toggleElement.checked).toBe(initialChecked)
+    const toggleElement = screen.getByTestId(NAME) as HTMLInputElement
+    expect(toggleElement.checked).toBe(true)
 
     fireEvent.click(toggleElement)
     expect(handlerMock).toHaveBeenCalledTimes(1)
-    expect(toggleElement.checked).toBe(!initialChecked)
+    expect(toggleElement.checked).toBe(false)
   })
 })
diff --git a/admin-ui/app/routes/Apps/Gluu/Tests/GluuToggleRow.test.tsx b/admin-ui/app/routes/Apps/Gluu/Tests/GluuToggleRow.test.tsx
new file mode 100644
index 0000000000..0cd5567a73
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/Tests/GluuToggleRow.test.tsx
@@ -0,0 +1,63 @@
+import { useState } from 'react'
+import type { ChangeEvent } from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import GluuToggleRow from '../GluuToggleRow'
+import AppTestWrapper from './Components/AppTestWrapper'
+
+const LABEL = 'Enable Feature'
+const NAME = 'enabledFeature'
+
+const ControlledRow = ({ onToggle }: { onToggle: (checked: boolean) => void }) => {
+  const [value, setValue] = useState(true)
+  return (
+    <GluuToggleRow
+      label={LABEL}
+      name={NAME}
+      value={value}
+      handler={(event: ChangeEvent<HTMLInputElement>) => {
+        setValue(event.target.checked)
+        onToggle(event.target.checked)
+      }}
+    />
+  )
+}
+
+describe('GluuToggleRow', () => {
+  it('renders the label and a toggle reflecting value, firing handler on toggle', () => {
+    const onToggle = jest.fn()
+    render(
+      <AppTestWrapper>
+        <ControlledRow onToggle={onToggle} />
+      </AppTestWrapper>,
+    )
+
+    expect(screen.getByText(/Enable Feature/i)).toBeInTheDocument()
+    const toggle = screen.getByTestId(NAME) as HTMLInputElement
+    expect(toggle.checked).toBe(true)
+
+    fireEvent.click(toggle)
+    expect(onToggle).toHaveBeenCalledTimes(1)
+    expect(toggle.checked).toBe(false)
+  })
+
+  it('hides the label when isLabelVisible is false', () => {
+    render(
+      <AppTestWrapper>
+        <GluuToggleRow label={LABEL} name={NAME} value={false} isLabelVisible={false} />
+      </AppTestWrapper>,
+    )
+
+    expect(screen.queryByText(/Enable Feature/i)).not.toBeInTheDocument()
+    expect(screen.getByTestId(NAME)).toBeInTheDocument()
+  })
+
+  it('disables the toggle when viewOnly', () => {
+    render(
+      <AppTestWrapper>
+        <GluuToggleRow label={LABEL} name={NAME} value viewOnly />
+      </AppTestWrapper>,
+    )
+
+    expect((screen.getByTestId(NAME) as HTMLInputElement).disabled).toBe(true)
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/Tests/GluuTypeAhead.test.tsx b/admin-ui/app/routes/Apps/Gluu/Tests/GluuTypeAhead.test.tsx
deleted file mode 100644
index d47fffc0b9..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/Tests/GluuTypeAhead.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import GluuTypeAhead from '../GluuTypeAhead'
-import i18n from '../../../../i18n'
-import { I18nextProvider } from 'react-i18next'
-import { ThemeProvider } from '../../../../context/theme/themeContext'
-
-const LABEL = 'fields.application_type'
-const NAME = 'applicationType'
-const VALUE = ['Monday']
-const OPTIONS = ['Monday', 'Tuesday']
-
-it('Test gluu typeahead', async () => {
-  render(
-    <I18nextProvider i18n={i18n}>
-      <ThemeProvider>
-        <GluuTypeAhead
-          doc_category="openid_client"
-          name={NAME}
-          value={VALUE}
-          label={LABEL}
-          options={OPTIONS}
-        />
-      </ThemeProvider>
-    </I18nextProvider>,
-  )
-  expect(screen.getByText(/Application type/i)).toBeInTheDocument()
-  expect(screen.getByText(VALUE[0])).toBeInTheDocument()
-})
diff --git a/admin-ui/app/routes/Apps/Gluu/Tests/GluuTypeAheadForDn.test.tsx b/admin-ui/app/routes/Apps/Gluu/Tests/GluuTypeAheadForDn.test.tsx
deleted file mode 100644
index 32d346f55c..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/Tests/GluuTypeAheadForDn.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { FormikProps } from 'formik'
-import { render, screen } from '@testing-library/react'
-import GluuTypeAheadForDn from '../GluuTypeAheadForDn'
-import i18n from '../../../../i18n'
-import { I18nextProvider } from 'react-i18next'
-import { ThemeProvider } from '../../../../context/theme/themeContext'
-import type { JsonValue } from '../types'
-
-const LABEL = 'fields.application_type'
-const NAME = 'applicationType'
-const VALUE = [{ name: 'Monday', dn: '111111112222' }]
-const OPTIONS = [
-  { name: 'Monday', dn: '111111112222' },
-  { name: 'Tuesday', dn: '1001112222' },
-]
-
-const mockFormik: Partial<FormikProps<Record<string, JsonValue>>> = {
-  setFieldValue: jest.fn(),
-}
-
-it('Test gluu typeahead for dn', async () => {
-  render(
-    <I18nextProvider i18n={i18n}>
-      <ThemeProvider>
-        <GluuTypeAheadForDn
-          doc_category="openid_client"
-          name={NAME}
-          label={LABEL}
-          options={OPTIONS}
-          defaultSelected={VALUE}
-          formik={mockFormik as FormikProps<Record<string, JsonValue>>}
-        />
-      </ThemeProvider>
-    </I18nextProvider>,
-  )
-  expect(screen.getByText(/Application [Tt]ype/i)).toBeInTheDocument()
-  expect(screen.getByText(/Monday/)).toBeInTheDocument()
-})
diff --git a/admin-ui/app/routes/Apps/Gluu/Tests/GluuTypeAheadWithAdd.test.tsx b/admin-ui/app/routes/Apps/Gluu/Tests/GluuTypeAheadWithAdd.test.tsx
deleted file mode 100644
index 68668e7e98..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/Tests/GluuTypeAheadWithAdd.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { FormikProps } from 'formik'
-import GluuTypeAheadWithAdd from '../GluuTypeAheadWithAdd'
-import { render, screen } from '@testing-library/react'
-import AppTestWrapper from './Components/AppTestWrapper'
-import type { JsonObject } from '../types/common'
-
-const mockFormik: Partial<FormikProps<JsonObject>> = {
-  setFieldValue: jest.fn(),
-  values: {},
-  errors: {},
-  touched: {},
-  isSubmitting: false,
-  submitCount: 0,
-  setFieldTouched: jest.fn(),
-  setFieldError: jest.fn(),
-  setErrors: jest.fn(),
-  setTouched: jest.fn(),
-  setValues: jest.fn(),
-  setSubmitting: jest.fn(),
-  setFormikState: jest.fn(),
-  resetForm: jest.fn(),
-  validateForm: jest.fn(),
-  validateField: jest.fn(),
-  handleSubmit: jest.fn(),
-  handleReset: jest.fn(),
-  getFieldProps: jest.fn(),
-  getFieldMeta: jest.fn(),
-  getFieldHelpers: jest.fn(),
-  setStatus: jest.fn(),
-}
-
-it('Test GluuTypeAheadWithAdd component', () => {
-  const LABEL = 'fields.application_type'
-  const NAME = 'applicationType'
-  const VALUE = ['Monday']
-  const OPTIONS = ['Monday', 'Tuesday']
-  const INPUT_ID = 'test-typeahead-input'
-  render(
-    <AppTestWrapper>
-      <GluuTypeAheadWithAdd
-        doc_category="openid_client"
-        name={NAME}
-        value={VALUE}
-        label={LABEL}
-        options={OPTIONS}
-        formik={mockFormik as FormikProps<JsonObject>}
-        validator={(v: string) => Boolean(v?.trim())}
-        inputId={INPUT_ID}
-      />
-    </AppTestWrapper>,
-  )
-  expect(screen.getByText(/Application Type/i)).toBeInTheDocument()
-  expect(screen.getByText('Add')).toBeInTheDocument()
-  expect(screen.getByText(VALUE[0])).toBeInTheDocument()
-})
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuPermissionModal.style.ts b/admin-ui/app/routes/Apps/Gluu/styles/GluuPermissionModal.style.ts
deleted file mode 100644
index a4c3bebc36..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/styles/GluuPermissionModal.style.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { makeStyles } from 'tss-react/mui'
-import customColors from '@/customColors'
-import { fontFamily, fontWeights, fontSizes, lineHeights } from '@/styles/fonts'
-import type { ThemeConfig } from '@/context/theme/config'
-
-interface StylesParams {
-  isDark: boolean
-  themeColors: ThemeConfig
-}
-
-export const useStyles = makeStyles<StylesParams>()((theme, { themeColors }) => ({
-  title: {
-    fontFamily,
-    fontWeight: fontWeights.bold,
-    fontSize: fontSizes['3xl'],
-    lineHeight: lineHeights.XXXLoose,
-    color: themeColors.fontColor,
-    margin: 0,
-    paddingBottom: theme.spacing(2),
-    textAlign: 'center',
-    wordWrap: 'break-word',
-    overflowWrap: 'break-word',
-  },
-  modalBody: {
-    textAlign: 'center',
-    color: themeColors.fontColor,
-  },
-  mutedText: {
-    color: customColors.textSecondary,
-    marginBottom: theme.spacing(2),
-  },
-  buttonRow: {
-    display: 'flex',
-    justifyContent: 'center',
-    marginTop: theme.spacing(2),
-  },
-}))
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuRemovableInputRow.style.ts b/admin-ui/app/routes/Apps/Gluu/styles/GluuRemovableInputRow.style.ts
index 436d5f4261..dd55f4ba63 100644
--- a/admin-ui/app/routes/Apps/Gluu/styles/GluuRemovableInputRow.style.ts
+++ b/admin-ui/app/routes/Apps/Gluu/styles/GluuRemovableInputRow.style.ts
@@ -2,10 +2,11 @@ import { makeStyles } from 'tss-react/mui'
 
 interface GluuRemovableInputRowStyleParams {
   fontColor?: string
+  isDark?: boolean
 }
 
 export const useStyles = makeStyles<GluuRemovableInputRowStyleParams>()(
-  (_theme, { fontColor }) => ({
+  (_theme, { fontColor, isDark }) => ({
     removeButton: {
       width: 32,
       height: 32,
@@ -41,8 +42,12 @@ export const useStyles = makeStyles<GluuRemovableInputRowStyleParams>()(
       gap: 8,
     },
     input: {
-      flex: 1,
-      minWidth: 0,
+      'flex': 1,
+      'minWidth': 0,
+      '&::-webkit-calendar-picker-indicator': {
+        filter: isDark ? 'brightness(0) invert(1)' : 'none',
+        cursor: 'pointer',
+      },
     },
   }),
 )
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuSecretDetail.style.ts b/admin-ui/app/routes/Apps/Gluu/styles/GluuSecretDetail.style.ts
deleted file mode 100644
index ba7e344034..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/styles/GluuSecretDetail.style.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { makeStyles } from 'tss-react/mui'
-
-export const useStyles = makeStyles()(() => ({
-  valueCol: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  rowDefault: {
-    alignItems: 'center',
-    marginBottom: '0.5rem',
-  },
-}))
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuToggle.style.ts b/admin-ui/app/routes/Apps/Gluu/styles/GluuToggle.style.ts
new file mode 100644
index 0000000000..332390aa2f
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/styles/GluuToggle.style.ts
@@ -0,0 +1,106 @@
+import { makeStyles } from 'tss-react/mui'
+import { OPACITY, TOGGLE, BORDER_RADIUS } from '@/constants'
+import customColors from '@/customColors'
+
+const TRACK_DEFAULT = customColors.sidebarHoverBg
+const TRACK_CHECKED = customColors.statusActive
+const THUMB_BG = customColors.whiteSmoke
+const FOCUS_COLOR = customColors.lightBlue
+
+export const useStyles = makeStyles()(() => ({
+  wrapper: {
+    display: 'inline-block',
+    flex: '0 0 auto',
+    width: TOGGLE.TRACK_WIDTH,
+    height: TOGGLE.TRACK_HEIGHT,
+    lineHeight: 0,
+    verticalAlign: 'middle',
+  },
+  root: {
+    'touchAction': 'pan-x',
+    'display': 'inline-block',
+    'position': 'relative',
+    'cursor': 'pointer',
+    'backgroundColor': 'transparent',
+    'border': 0,
+    'padding': 0,
+    'margin': 0,
+    'userSelect': 'none',
+    'WebkitTapHighlightColor': 'transparent',
+    '&.react-toggle--disabled': {
+      cursor: 'not-allowed',
+      opacity: OPACITY.DISABLED,
+      transition: 'opacity 0.25s',
+    },
+    '& .react-toggle-screenreader-only': {
+      border: 0,
+      clip: 'rect(0 0 0 0)',
+      height: 1,
+      margin: -1,
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      width: 1,
+    },
+    '& .react-toggle-track': {
+      position: 'relative',
+      width: TOGGLE.TRACK_WIDTH,
+      height: TOGGLE.TRACK_HEIGHT,
+      padding: 0,
+      borderRadius: TOGGLE.TRACK_RADIUS,
+      backgroundColor: TRACK_DEFAULT,
+      transition: 'all 0.2s ease',
+    },
+    '&.react-toggle--checked .react-toggle-track': {
+      backgroundColor: TRACK_CHECKED,
+    },
+    '& .react-toggle-track-check, & .react-toggle-track-x': {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      marginTop: 'auto',
+      marginBottom: 'auto',
+      lineHeight: 0,
+      transition: 'opacity 0.25s ease',
+    },
+    '& .react-toggle-track-check': {
+      width: TOGGLE.CHECK_WIDTH,
+      height: TOGGLE.ICON_HEIGHT,
+      left: TOGGLE.CHECK_LEFT,
+      opacity: OPACITY.NONE,
+    },
+    '&.react-toggle--checked .react-toggle-track-check': {
+      opacity: OPACITY.FULL,
+    },
+    '& .react-toggle-track-x': {
+      width: TOGGLE.X_WIDTH,
+      height: TOGGLE.ICON_HEIGHT,
+      right: TOGGLE.X_RIGHT,
+      opacity: OPACITY.FULL,
+    },
+    '&.react-toggle--checked .react-toggle-track-x': {
+      opacity: OPACITY.NONE,
+    },
+    '& .react-toggle-thumb': {
+      position: 'absolute',
+      top: TOGGLE.THUMB_INSET,
+      left: TOGGLE.THUMB_INSET,
+      width: TOGGLE.THUMB_SIZE,
+      height: TOGGLE.THUMB_SIZE,
+      border: `${TOGGLE.THUMB_INSET}px solid ${TRACK_DEFAULT}`,
+      borderRadius: BORDER_RADIUS.CIRCLE,
+      backgroundColor: THUMB_BG,
+      boxSizing: 'border-box',
+      transition: 'all 0.25s ease',
+    },
+    '&.react-toggle--checked .react-toggle-thumb': {
+      left: TOGGLE.THUMB_CHECKED_LEFT,
+    },
+    '&.react-toggle--focus .react-toggle-thumb': {
+      boxShadow: `0 0 ${TOGGLE.FOCUS_RING_BLUR}px ${TOGGLE.FOCUS_RING_SPREAD}px ${FOCUS_COLOR}`,
+    },
+    '&:active:not(.react-toggle--disabled) .react-toggle-thumb': {
+      boxShadow: `0 0 ${TOGGLE.ACTIVE_RING_BLUR}px ${TOGGLE.ACTIVE_RING_SPREAD}px ${FOCUS_COLOR}`,
+    },
+  },
+}))
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuTypeAhead.style.ts b/admin-ui/app/routes/Apps/Gluu/styles/GluuTypeAhead.style.ts
deleted file mode 100644
index 778c8567ff..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/styles/GluuTypeAhead.style.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { makeStyles } from 'tss-react/mui'
-import customColors from '@/customColors'
-
-export const useStyles = makeStyles()(() => ({
-  helperText: {
-    fontSize: 12,
-  },
-  error: {
-    color: customColors.accentRed,
-    margin: '1px 2px',
-  },
-}))
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuTypeAheadWithAdd.style.ts b/admin-ui/app/routes/Apps/Gluu/styles/GluuTypeAheadWithAdd.style.ts
deleted file mode 100644
index 6db8b2ccc1..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/styles/GluuTypeAheadWithAdd.style.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { makeStyles } from 'tss-react/mui'
-import customColors from '@/customColors'
-import { SPACING } from '@/constants'
-
-export const useStyles = makeStyles()((theme) => ({
-  inputContainer: {
-    borderStyle: 'solid',
-    borderRadius: 5,
-    borderColor: customColors.logo,
-  },
-  spacer: {
-    height: theme.spacing(1),
-  },
-  actionIcon: {
-    marginRight: SPACING.CARD_CONTENT_GAP,
-    flexShrink: 0,
-  },
-}))
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuWebhookExecutionDialog.style.ts b/admin-ui/app/routes/Apps/Gluu/styles/GluuWebhookExecutionDialog.style.ts
index f72db7c3d6..3cceec81ed 100644
--- a/admin-ui/app/routes/Apps/Gluu/styles/GluuWebhookExecutionDialog.style.ts
+++ b/admin-ui/app/routes/Apps/Gluu/styles/GluuWebhookExecutionDialog.style.ts
@@ -41,10 +41,6 @@ export const useStyles = makeStyles<StylesParams>()((_theme, { themeColors }) =>
       display: 'flex',
       alignItems: 'center',
     },
-    titleIcon: {
-      marginRight: MAPPING_SPACING.CHECKBOX_LABEL_GAP,
-      flexShrink: 0,
-    },
     description: {
       fontFamily,
       fontWeight: fontWeights.semiBold,
@@ -83,9 +79,5 @@ export const useStyles = makeStyles<StylesParams>()((_theme, { themeColors }) =>
       gap: MAPPING_SPACING.CHECKBOX_LABEL_GAP + CHECKBOX_LABEL_EXTRA_GAP,
       marginTop: CEDARLING_CONFIG_SPACING.BUTTONS_MT,
     },
-    actionIcon: {
-      marginRight: MAPPING_SPACING.CHECKBOX_LABEL_GAP,
-      flexShrink: 0,
-    },
   }
 })
diff --git a/admin-ui/app/routes/Apps/Gluu/types/GluuCommitDialog.types.ts b/admin-ui/app/routes/Apps/Gluu/types/GluuCommitDialog.types.ts
index 211ab8fa4d..8a4fe325a3 100644
--- a/admin-ui/app/routes/Apps/Gluu/types/GluuCommitDialog.types.ts
+++ b/admin-ui/app/routes/Apps/Gluu/types/GluuCommitDialog.types.ts
@@ -3,6 +3,7 @@ import type { JsonValue } from './common'
 export type GluuCommitDialogOperation = {
   path: string
   value: JsonValue
+  label?: string
 }
 
 export type GluuCommitDialogProps = {
diff --git a/admin-ui/app/routes/Apps/Gluu/types/GluuComponentPropsTypes.ts b/admin-ui/app/routes/Apps/Gluu/types/GluuComponentPropsTypes.ts
index d0f258668f..ef4f4bf348 100644
--- a/admin-ui/app/routes/Apps/Gluu/types/GluuComponentPropsTypes.ts
+++ b/admin-ui/app/routes/Apps/Gluu/types/GluuComponentPropsTypes.ts
@@ -11,19 +11,6 @@ export type GluuAlertProps = {
   show?: boolean
 }
 
-export type GluuBooleanSelectBoxProps<T extends object = Record<string, JsonValue>> = {
-  label: string
-  name: string
-  value?: boolean | string
-  formik: FormikProps<T>
-  handler?: (event: React.ChangeEvent<HTMLInputElement>) => void
-  lsize?: number
-  rsize?: number
-  doc_category?: string
-  disabled?: boolean
-  toToggle?: boolean
-}
-
 type DialogRow = {
   name?: string
   inum?: string
@@ -115,8 +102,8 @@ export type GluuRemovableSelectRowProps = {
   doc_category?: string
   isDirect?: boolean
   hideRemoveButton?: boolean
-  modifiedFields: Record<string, RemovableModifiedFieldValue>
-  setModifiedFields: React.Dispatch<
+  modifiedFields?: Record<string, RemovableModifiedFieldValue>
+  setModifiedFields?: React.Dispatch<
     React.SetStateAction<Record<string, RemovableModifiedFieldValue>>
   >
 }
@@ -128,17 +115,6 @@ export type GluuScriptErrorModalProps = {
   handler: () => void
 }
 
-export type GluuSecretDetailProps = {
-  label: string
-  value: string
-  doc_category?: string
-  doc_entry?: string
-  lsize?: number
-  rsize?: number
-  labelStyle?: CSSProperties
-  rowClassName?: string
-}
-
 export type SessionTimeoutDialogProps = {
   open: boolean
   countdown: number
diff --git a/admin-ui/app/routes/Apps/Gluu/types/GluuPermissionModal.types.ts b/admin-ui/app/routes/Apps/Gluu/types/GluuPermissionModal.types.ts
deleted file mode 100644
index 3ba7fdefda..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/types/GluuPermissionModal.types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type GluuPermissionModalProps = {
-  handler: () => void
-  isOpen: boolean
-}
diff --git a/admin-ui/app/routes/Apps/Gluu/types/GluuRemovableInputRow.types.ts b/admin-ui/app/routes/Apps/Gluu/types/GluuRemovableInputRow.types.ts
index 2bb75d35f8..e9748df755 100644
--- a/admin-ui/app/routes/Apps/Gluu/types/GluuRemovableInputRow.types.ts
+++ b/admin-ui/app/routes/Apps/Gluu/types/GluuRemovableInputRow.types.ts
@@ -18,6 +18,6 @@ export type GluuRemovableInputRowProps<TValues extends FormikValues = FormikValu
   isDirect?: boolean
   isBoolean?: boolean
   hideRemoveButton?: boolean
-  modifiedFields: Record<string, ModifiedFieldValue>
-  setModifiedFields: React.Dispatch<React.SetStateAction<Record<string, ModifiedFieldValue>>>
+  modifiedFields?: Record<string, ModifiedFieldValue>
+  setModifiedFields?: React.Dispatch<React.SetStateAction<Record<string, ModifiedFieldValue>>>
 }
diff --git a/admin-ui/app/routes/Apps/Gluu/types/GluuSelectRow.types.ts b/admin-ui/app/routes/Apps/Gluu/types/GluuSelectRow.types.ts
index 19e2044c08..0ed5dd3b7f 100644
--- a/admin-ui/app/routes/Apps/Gluu/types/GluuSelectRow.types.ts
+++ b/admin-ui/app/routes/Apps/Gluu/types/GluuSelectRow.types.ts
@@ -30,4 +30,5 @@ export type GluuSelectRowProps = {
   inputPaddingTop?: number
   inputPaddingBottom?: number
   hideChooseOption?: boolean
+  reserveErrorSpace?: boolean
 }
diff --git a/admin-ui/app/routes/Apps/Gluu/types/GluuToggle.types.ts b/admin-ui/app/routes/Apps/Gluu/types/GluuToggle.types.ts
new file mode 100644
index 0000000000..860b570f7c
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/types/GluuToggle.types.ts
@@ -0,0 +1,12 @@
+import type { ChangeEvent } from 'react'
+import type { FormikProps } from 'formik'
+import type { JsonValue } from './common'
+
+export type GluuToggleProps<T = Record<string, JsonValue>> = {
+  id?: string
+  name: string
+  formik?: FormikProps<T> | null
+  value?: boolean
+  handler?: (event: ChangeEvent<HTMLInputElement>) => void
+  disabled?: boolean
+}
diff --git a/admin-ui/app/routes/Apps/Gluu/types/GluuTypeAhead.types.ts b/admin-ui/app/routes/Apps/Gluu/types/GluuTypeAhead.types.ts
deleted file mode 100644
index 4b704db3de..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/types/GluuTypeAhead.types.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { MutableRefObject } from 'react'
-import type { TypeaheadRef } from 'react-bootstrap-typeahead'
-import type { JsonObject } from './common'
-
-export type GluuTypeAheadOption = string | JsonObject
-
-type GluuTypeAheadFormik = {
-  setFieldValue(field: string, value: GluuTypeAheadOption[], shouldValidate?: boolean): void
-}
-
-export type GluuTypeAheadProps = {
-  label: string
-  labelKey?: string | ((option: GluuTypeAheadOption) => string)
-  name: string
-  value?: GluuTypeAheadOption[]
-  options: GluuTypeAheadOption[]
-  formik?: GluuTypeAheadFormik | null
-  required?: boolean
-  doc_category?: string
-  doc_entry?: string
-  forwardRef?: MutableRefObject<TypeaheadRef | null> | null
-  onChange?: ((selected: GluuTypeAheadOption[]) => void) | null
-  lsize?: number
-  rsize?: number
-  disabled?: boolean
-  showError?: boolean
-  errorMessage?: string
-  allowNew?: boolean
-  isLoading?: boolean
-  multiple?: boolean
-  hideHelperMessage?: boolean
-  minLength?: number
-  emptyLabel?: string
-  isDark?: boolean
-}
diff --git a/admin-ui/app/routes/Apps/Gluu/types/GluuTypeAheadForDn.types.ts b/admin-ui/app/routes/Apps/Gluu/types/GluuTypeAheadForDn.types.ts
deleted file mode 100644
index d0f56efe62..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/types/GluuTypeAheadForDn.types.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { FormikProps } from 'formik'
-import type { JsonValue } from './common'
-
-export type TypeAheadOptionObject = {
-  dn?: string
-  key?: string
-  name?: string
-  customOption?: boolean
-  label?: string
-}
-
-export type TypeAheadOption = string | TypeAheadOptionObject
-
-export type GluuTypeAheadForDnProps<
-  TValues extends object = Record<string, JsonValue>,
-  TOption extends TypeAheadOptionObject = TypeAheadOptionObject,
-> = {
-  label: string
-  name: string
-  value?: TOption[]
-  options: TOption[]
-  formik: FormikProps<TValues>
-  required?: boolean
-  doc_category?: string
-  doc_entry?: string
-  disabled?: boolean
-  allowNew?: boolean
-  haveLabelKey?: boolean
-  lsize?: number
-  rsize?: number
-  paginate?: boolean
-  onSearch?: (query: string) => void
-  onPaginate?: (e: React.SyntheticEvent, shownResults: number) => void
-  maxResults?: number
-  isLoading?: boolean
-  placeholder?: string
-  onChange?: (selected: TOption[]) => void
-  hideHelperMessage?: boolean
-  defaultSelected?: TOption[]
-}
diff --git a/admin-ui/app/routes/Apps/Gluu/types/GluuTypeAheadWithAdd.types.ts b/admin-ui/app/routes/Apps/Gluu/types/GluuTypeAheadWithAdd.types.ts
deleted file mode 100644
index e18050b020..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/types/GluuTypeAheadWithAdd.types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-type GluuTypeAheadWithAddFormik = {
-  setFieldValue: (field: string, value: string[]) => void
-}
-
-export type GluuTypeAheadWithAddProps = {
-  label: string
-  name: string
-  value?: string[]
-  placeholder?: string
-  options?: string[]
-  formik: GluuTypeAheadWithAddFormik
-  validator: (value: string) => boolean
-  inputId: string
-  doc_category?: string
-  lsize?: number
-  rsize?: number
-  disabled?: boolean
-  handler?: ((name: string, updatedItems: string[]) => void) | null
-  multiple?: boolean
-}
diff --git a/admin-ui/app/routes/Apps/Gluu/types/index.ts b/admin-ui/app/routes/Apps/Gluu/types/index.ts
index 441a07320a..b289c0518e 100644
--- a/admin-ui/app/routes/Apps/Gluu/types/index.ts
+++ b/admin-ui/app/routes/Apps/Gluu/types/index.ts
@@ -1,7 +1,6 @@
 export type { JsonValue } from './common'
 export type { GluuCommitDialogOperation, GluuCommitDialogProps } from './GluuCommitDialog.types'
 export type { GluuAdvancedSearchProps } from './GluuAdvancedSearch.types'
-export type { GluuTypeAheadWithAddProps } from './GluuTypeAheadWithAdd.types'
 export type { GluuWebhookCommitDialogProps } from './GluuWebhookCommitDialog.types'
 export type { LanguageMenuProps, ThemeDropdownComponentProps } from './MenuTypes'
 export type { GluuRemovableInputRowProps } from './GluuRemovableInputRow.types'
diff --git a/admin-ui/app/styles/plugins/_react-bootstrap-typeahead.scss b/admin-ui/app/styles/plugins/_react-bootstrap-typeahead.scss
deleted file mode 100755
index 98a5b1a835..0000000000
--- a/admin-ui/app/styles/plugins/_react-bootstrap-typeahead.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/* React Bootstrap Typeahead Overrides */
-.rbt-token {
-    background-color: $primary !important;
-    color: $white !important;
-}
-
-.close:not(:disabled, .disabled):hover,
-.close:not(:disabled, .disabled):focus {
-    color: darken($white, 20%) !important;
-}
diff --git a/admin-ui/app/styles/plugins/_react-toggle.scss b/admin-ui/app/styles/plugins/_react-toggle.scss
deleted file mode 100755
index d6f3626c9b..0000000000
--- a/admin-ui/app/styles/plugins/_react-toggle.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/* React Toggle Overrides */
-.react-toggle-track {
-    .fa {
-        font-size: 12px;
-    }
-}
-.react-toggle-track {
-    background-color: $gray-500 !important;
-    position: relative;
-}
-.react-toggle-thumb {
-    border: 1px solid $gray-500 !important;
-}
-
-.react-toggle--checked .react-toggle-track {
-    background-color: $success !important;
-}
diff --git a/admin-ui/app/styles/plugins/plugins.css b/admin-ui/app/styles/plugins/plugins.css
deleted file mode 100755
index 655244172e..0000000000
--- a/admin-ui/app/styles/plugins/plugins.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "react-bootstrap-typeahead/css/Typeahead.css";
-@import "react-toggle/style.css";
diff --git a/admin-ui/app/styles/plugins/plugins.scss b/admin-ui/app/styles/plugins/plugins.scss
index 8ca2fb781a..1e4c579941 100755
--- a/admin-ui/app/styles/plugins/plugins.scss
+++ b/admin-ui/app/styles/plugins/plugins.scss
@@ -1,3 +1 @@
 @import "react-toastify";
-@import "react-toggle";
-@import "react-bootstrap-typeahead";
diff --git a/admin-ui/app/utils/__tests__/zip.test.ts b/admin-ui/app/utils/__tests__/zip.test.ts
index 15d85a4b18..862aa32f3d 100644
--- a/admin-ui/app/utils/__tests__/zip.test.ts
+++ b/admin-ui/app/utils/__tests__/zip.test.ts
@@ -1,6 +1,6 @@
 /** @jest-environment node */
 import { deflateRawSync } from 'node:zlib'
-import { readZip } from '../zip'
+import readZip from '../zip'
 
 const STORED_CONTENT = '{"stored":true}'
 const DEFLATED_CONTENT = 'deflate me '.repeat(50)
diff --git a/admin-ui/app/utils/logLevel.ts b/admin-ui/app/utils/logLevel.ts
index 32a448f13e..bfff4de580 100644
--- a/admin-ui/app/utils/logLevel.ts
+++ b/admin-ui/app/utils/logLevel.ts
@@ -2,14 +2,12 @@ import { LOG_LEVELS } from 'Plugins/auth-server/components/Logging/utils'
 
 export type LogLevel = (typeof LOG_LEVELS)[number]
 
-export const DEFAULT_LOG_LEVEL: LogLevel = 'INFO'
-
 const STORAGE_KEY = 'gluu.logLevel'
 
 const isLogLevel = (value: string | null | undefined): value is LogLevel =>
   value != null && (LOG_LEVELS as readonly string[]).includes(value)
 
-export const getLogLevel = (defaultLevel: LogLevel = DEFAULT_LOG_LEVEL): LogLevel => {
+export const getLogLevel = (defaultLevel: LogLevel = 'INFO'): LogLevel => {
   try {
     const stored = window.localStorage?.getItem(STORAGE_KEY)
     return isLogLevel(stored) ? stored : defaultLevel
diff --git a/admin-ui/app/utils/menuFilters.ts b/admin-ui/app/utils/menuFilters.ts
index fe9e3c6415..9b392194d4 100644
--- a/admin-ui/app/utils/menuFilters.ts
+++ b/admin-ui/app/utils/menuFilters.ts
@@ -9,7 +9,7 @@ import type {
   AuthorizationResult,
 } from '@/cedarling/types'
 
-export const MENU_VISIBILITY_CONDITIONS: VisibilityConditions = {
+const MENU_VISIBILITY_CONDITIONS: VisibilityConditions = {
   [ROUTES.JANS_LOCK_BASE]: JANS_SERVICES.LOCK,
   [ROUTES.FIDO_BASE]: JANS_SERVICES.FIDO2,
   [ROUTES.SCIM_BASE]: JANS_SERVICES.SCIM,
diff --git a/admin-ui/app/utils/zip.ts b/admin-ui/app/utils/zip.ts
index f6b9a5d0d8..f51f818a10 100644
--- a/admin-ui/app/utils/zip.ts
+++ b/admin-ui/app/utils/zip.ts
@@ -91,5 +91,4 @@ const readZip = async (input: Blob | ArrayBuffer | Uint8Array): Promise<ZipArchi
   return { files }
 }
 
-export { readZip }
-export type { ZipArchive }
+export default readZip
diff --git a/admin-ui/package.json b/admin-ui/package.json
index a5042de530..4d922e00a4 100644
--- a/admin-ui/package.json
+++ b/admin-ui/package.json
@@ -58,7 +58,6 @@
     "@types/node": "^24.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@types/react-toggle": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^6.0.0",
@@ -117,7 +116,6 @@
     "lodash": "^4.0.0",
     "react": "^18.0.0",
     "react-ace": "^14.0.0",
-    "react-bootstrap-typeahead": "^6.0.0",
     "react-dom": "^18.0.0",
     "react-error-boundary": "^6.0.0",
     "react-i18next": "^17.0.0",
@@ -125,7 +123,6 @@
     "react-redux": "^9.0.0",
     "react-router-dom": "^7.0.0",
     "react-toastify": "^11.0.0",
-    "react-toggle": "^4.0.0",
     "recharts": "^3.0.0",
     "redux-persist": "^6.0.0",
     "tss-react": "^4.0.0",
diff --git a/admin-ui/plugins/admin/components/Assets/AssetForm.tsx b/admin-ui/plugins/admin/components/Assets/AssetForm.tsx
index f84cf50020..3d0188d77e 100644
--- a/admin-ui/plugins/admin/components/Assets/AssetForm.tsx
+++ b/admin-ui/plugins/admin/components/Assets/AssetForm.tsx
@@ -8,7 +8,7 @@ import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
 import GluuUploadFile from 'Routes/Apps/Gluu/GluuUploadFile'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuText from 'Routes/Apps/Gluu/GluuText'
-import Toggle from 'react-toggle'
+import GluuToggle from 'Routes/Apps/Gluu/GluuToggle'
 import { useTranslation } from 'react-i18next'
 import { useAssetServices, useCreateAssetWithAudit, useUpdateAssetWithAudit } from './hooks'
 import { useParams } from 'react-router-dom'
@@ -258,11 +258,11 @@ const AssetForm: React.FC = () => {
                   isDark={isDark}
                 />
                 <div className={classes.toggleRow}>
-                  <Toggle
+                  <GluuToggle
                     id="enabled"
                     name="enabled"
-                    onChange={formik.handleChange}
-                    checked={Boolean(formik.values.enabled)}
+                    formik={formik}
+                    value={Boolean(formik.values.enabled)}
                   />
                 </div>
               </FormGroup>
diff --git a/admin-ui/plugins/admin/components/Cedarling/CedarlingConfigPage.tsx b/admin-ui/plugins/admin/components/Cedarling/CedarlingConfigPage.tsx
index 217adf6318..650dca319f 100644
--- a/admin-ui/plugins/admin/components/Cedarling/CedarlingConfigPage.tsx
+++ b/admin-ui/plugins/admin/components/Cedarling/CedarlingConfigPage.tsx
@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import SetTitle from 'Utils/SetTitle'
 import { useAppDispatch, useAppSelector } from '@/redux/hooks'
@@ -16,20 +15,19 @@ import { logger } from '@/utils/logger'
 import apiAxios from '@/redux/api/axios'
 import { UPDATE } from '@/audit/UserActionType'
 import { Box, Link } from '@mui/material'
-import { Close, InfoOutlined } from '@/components/icons'
-import { ModalLayer } from '@/components/ModalLayer'
+import { InfoOutlined } from '@/components/icons'
 import { Form } from 'Components'
 import { ADMIN_UI_CEDARLING_CONFIG } from 'Plugins/admin/redux/audit/Resources'
 import { GluuPageContent } from '@/components'
 import GluuText from 'Routes/Apps/Gluu/GluuText'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuThemeFormFooter from 'Routes/Apps/Gluu/GluuThemeFormFooter'
-import { useStyles as useCommitDialogStyles } from 'Routes/Apps/Gluu/styles/GluuCommitDialog.style'
 import { useTheme } from 'Context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { THEME_DARK, DEFAULT_THEME } from '@/context/theme/constants'
 import { useAppNavigation, ROUTES } from '@/helpers/navigation'
 import { useStyles } from './CedarlingConfigPage.style'
+import PolicyStoreUploadConfirmDialog from './PolicyStoreUploadConfirmDialog'
 import { uploadPolicyStore, fetchPolicyStore } from '@/redux/api/backend-api'
 
 const SECURITY_RESOURCE_ID = ADMIN_UI_RESOURCES.Security
@@ -67,7 +65,6 @@ const CedarlingConfigPage: React.FC = () => {
   const themeColors = useMemo(() => getThemeColor(currentTheme), [currentTheme])
 
   const { classes } = useStyles({ themeColors, isDark })
-  const { classes: commitClasses } = useCommitDialogStyles({ isDark, themeColors })
 
   const syncRoleToScopesMappingsMutation = useSyncRoleToScopesMappings()
   const userinfo = useAppSelector((state) => state.authReducer?.userinfo)
@@ -75,14 +72,6 @@ const CedarlingConfigPage: React.FC = () => {
 
   const dispatch = useAppDispatch()
 
-  const dialogRef = useRef<HTMLDivElement | null>(null)
-
-  useEffect(() => {
-    if (showConfirm) {
-      dialogRef.current?.focus()
-    }
-  }, [showConfirm])
-
   const handleFileDrop = useCallback((files: File[]) => {
     const [file] = files
     if (file) {
@@ -218,63 +207,6 @@ const CedarlingConfigPage: React.FC = () => {
     navigateBack(ROUTES.HOME_DASHBOARD)
   }, [navigateBack])
 
-  const handleModalKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLDivElement>) => {
-      if (e.key === 'Escape') {
-        e.preventDefault()
-        e.stopPropagation()
-        handleConfirmCancel()
-      }
-    },
-    [handleConfirmCancel],
-  )
-
-  const confirmModal = showConfirm
-    ? createPortal(
-        <ModalLayer onClose={handleConfirmCancel}>
-          <div
-            ref={dialogRef}
-            className={commitClasses.modalContainer}
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={handleModalKeyDown}
-            role="dialog"
-            aria-modal="true"
-            tabIndex={-1}
-            aria-labelledby="confirm-upload-title"
-            style={{ outline: 'none' }}
-          >
-            <button
-              type="button"
-              onClick={handleConfirmCancel}
-              className={commitClasses.closeButton}
-              aria-label={t('actions.close')}
-              title={t('actions.close')}
-            >
-              <Close fontSize="small" aria-hidden />
-            </button>
-            <div className={commitClasses.contentArea}>
-              <GluuText variant="h2" className={commitClasses.title} id="confirm-upload-title">
-                {t('documentation.cedarlingConfig.uploadConfirmTitle')}
-              </GluuText>
-              <p className={commitClasses.description}>
-                {t('documentation.cedarlingConfig.uploadConfirmMessage')}
-              </p>
-              <GluuThemeFormFooter
-                showApply
-                applyButtonLabel={t('actions.yes')}
-                onApply={handleConfirmUpload}
-                applyButtonType="button"
-                showCancel
-                cancelButtonLabel={t('actions.no')}
-                onCancel={handleConfirmCancel}
-              />
-            </div>
-          </div>
-        </ModalLayer>,
-        document.body,
-      )
-    : null
-
   return (
     <GluuLoader blocking={isLoading}>
       <GluuViewWrapper canShow={canReadSecurity}>
@@ -393,7 +325,11 @@ const CedarlingConfigPage: React.FC = () => {
         </GluuPageContent>
       </GluuViewWrapper>
 
-      {confirmModal}
+      <PolicyStoreUploadConfirmDialog
+        open={showConfirm}
+        onConfirm={handleConfirmUpload}
+        onClose={handleConfirmCancel}
+      />
     </GluuLoader>
   )
 }
diff --git a/admin-ui/plugins/admin/components/Cedarling/PolicyStoreUploadConfirmDialog.style.ts b/admin-ui/plugins/admin/components/Cedarling/PolicyStoreUploadConfirmDialog.style.ts
new file mode 100644
index 0000000000..59228d11de
--- /dev/null
+++ b/admin-ui/plugins/admin/components/Cedarling/PolicyStoreUploadConfirmDialog.style.ts
@@ -0,0 +1,31 @@
+import { makeStyles } from 'tss-react/mui'
+import type { ThemeConfig } from '@/context/theme/config'
+import { fontFamily, fontSizes, fontWeights } from '@/styles/fonts'
+import { CEDARLING_CONFIG_SPACING } from '@/constants'
+
+type StylesParams = {
+  isDark: boolean
+  themeColors: ThemeConfig
+}
+
+const HALF_GAP = Math.round((CEDARLING_CONFIG_SPACING.BUTTONS_MT + 5) / 2)
+
+export const useStyles = makeStyles<StylesParams>()((_theme, { themeColors }) => ({
+  contentArea: {
+    gap: 0,
+  },
+  title: {
+    fontFamily,
+    fontWeight: fontWeights.bold,
+    fontSize: fontSizes['3xl'],
+    lineHeight: 'normal',
+    color: themeColors.fontColor,
+    margin: 0,
+  },
+  description: {
+    marginTop: HALF_GAP,
+  },
+  buttonRow: {
+    marginTop: HALF_GAP,
+  },
+}))
diff --git a/admin-ui/plugins/admin/components/Cedarling/PolicyStoreUploadConfirmDialog.tsx b/admin-ui/plugins/admin/components/Cedarling/PolicyStoreUploadConfirmDialog.tsx
new file mode 100644
index 0000000000..ce3cbe97fd
--- /dev/null
+++ b/admin-ui/plugins/admin/components/Cedarling/PolicyStoreUploadConfirmDialog.tsx
@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+import { useTheme } from 'Context/theme/themeContext'
+import getThemeColor from '@/context/theme/config'
+import { THEME_DARK } from '@/context/theme/constants'
+import { ModalLayer } from '@/components/ModalLayer'
+import { Close } from '@/components/icons'
+import { GluuButton } from '@/components'
+import GluuText from 'Routes/Apps/Gluu/GluuText'
+import { useStyles as useCommitDialogStyles } from 'Routes/Apps/Gluu/styles/GluuCommitDialog.style'
+import { useStyles } from './PolicyStoreUploadConfirmDialog.style'
+import type { PolicyStoreUploadConfirmDialogProps } from './types'
+
+const PolicyStoreUploadConfirmDialog: React.FC<PolicyStoreUploadConfirmDialogProps> = ({
+  open,
+  onConfirm,
+  onClose,
+}) => {
+  const { t } = useTranslation()
+  const { state: themeState } = useTheme()
+  const isDark = themeState.theme === THEME_DARK
+  const themeColors = useMemo(() => getThemeColor(themeState.theme), [themeState.theme])
+  const { classes: commitClasses } = useCommitDialogStyles({ isDark, themeColors })
+  const { classes } = useStyles({ isDark, themeColors })
+  const dialogRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (open) {
+      dialogRef.current?.focus()
+    }
+  }, [open])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        onClose()
+      }
+    },
+    [onClose],
+  )
+
+  if (!open) {
+    return null
+  }
+
+  return createPortal(
+    <ModalLayer onClose={onClose}>
+      <div
+        ref={dialogRef}
+        className={commitClasses.modalContainer}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+        aria-labelledby="confirm-upload-title"
+        style={{ outline: 'none' }}
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          className={commitClasses.closeButton}
+          aria-label={t('actions.close')}
+          title={t('actions.close')}
+        >
+          <Close fontSize="small" aria-hidden />
+        </button>
+        <div className={`${commitClasses.contentArea} ${classes.contentArea}`}>
+          <GluuText variant="h2" className={classes.title} id="confirm-upload-title">
+            {t('documentation.cedarlingConfig.uploadConfirmTitle')}
+          </GluuText>
+          <GluuText variant="p" className={`${commitClasses.description} ${classes.description}`}>
+            {t('documentation.cedarlingConfig.uploadConfirmMessage')}
+          </GluuText>
+          <div className={`${commitClasses.buttonRow} ${classes.buttonRow}`}>
+            <GluuButton
+              onClick={onConfirm}
+              backgroundColor={themeColors.formFooter.back.backgroundColor}
+              textColor={themeColors.formFooter.back.textColor}
+              borderColor="transparent"
+              padding="8px 28px"
+              minHeight="40"
+              useOpacityOnHover
+              className={commitClasses.yesButton}
+            >
+              {t('actions.yes')}
+            </GluuButton>
+          </div>
+        </div>
+      </div>
+    </ModalLayer>,
+    document.body,
+  )
+}
+
+export default PolicyStoreUploadConfirmDialog
diff --git a/admin-ui/plugins/admin/components/Cedarling/types/CedarlingTypes.ts b/admin-ui/plugins/admin/components/Cedarling/types/CedarlingTypes.ts
index 4bf3ef2d03..508110e7f0 100644
--- a/admin-ui/plugins/admin/components/Cedarling/types/CedarlingTypes.ts
+++ b/admin-ui/plugins/admin/components/Cedarling/types/CedarlingTypes.ts
@@ -4,3 +4,9 @@ export type CedarlingConfigPageStyleParams = {
   themeColors: ThemeConfig
   isDark: boolean
 }
+
+export type PolicyStoreUploadConfirmDialogProps = {
+  open: boolean
+  onConfirm: () => void
+  onClose: () => void
+}
diff --git a/admin-ui/plugins/admin/components/Settings/SettingsPage.tsx b/admin-ui/plugins/admin/components/Settings/SettingsPage.tsx
index c91f19d551..cb91353912 100644
--- a/admin-ui/plugins/admin/components/Settings/SettingsPage.tsx
+++ b/admin-ui/plugins/admin/components/Settings/SettingsPage.tsx
@@ -383,6 +383,7 @@ const SettingsPage: React.FC = () => {
                       doc_entry="pageSize"
                       disabled={!canWriteSettings}
                       isDark={isDark}
+                      reserveErrorSpace
                       handleChange={(e) => {
                         const n = Number.parseInt(e.target.value, 10)
                         if (!Number.isNaN(n)) handlePagingSizeChange(n)
@@ -404,6 +405,7 @@ const SettingsPage: React.FC = () => {
                       disabled={!canWriteSettings}
                       isDark={isDark}
                       hideChooseOption
+                      reserveErrorSpace
                       handleChange={(e) => handleLogLevelChange(e.target.value as LogLevel)}
                     />
                   </div>
@@ -442,6 +444,7 @@ const SettingsPage: React.FC = () => {
                       doc_entry="adminui_default_acr"
                       disabled={!canWriteSettings}
                       isDark={isDark}
+                      reserveErrorSpace
                     />
                   </div>
 
diff --git a/admin-ui/plugins/admin/components/Webhook/WebhookForm.tsx b/admin-ui/plugins/admin/components/Webhook/WebhookForm.tsx
index 50d54cf8dd..049fe99be7 100644
--- a/admin-ui/plugins/admin/components/Webhook/WebhookForm.tsx
+++ b/admin-ui/plugins/admin/components/Webhook/WebhookForm.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useFormik } from 'formik'
 import isEqual from 'lodash/isEqual'
-import Toggle from 'react-toggle'
+import GluuToggle from 'Routes/Apps/Gluu/GluuToggle'
 import { Add, DeleteOutline, InfoOutlined as InfoOutlinedIcon } from '@/components/icons'
 import { Form, FormGroup, Input } from 'Components'
 import GluuInputRow from 'Routes/Apps/Gluu/GluuInputRow'
@@ -556,11 +556,11 @@ const WebhookForm: React.FC = () => {
                     doc_entry="enabled"
                     isDark={isDark}
                   />
-                  <Toggle
+                  <GluuToggle
                     id="jansEnabled"
                     name="jansEnabled"
-                    onChange={formik.handleChange}
-                    checked={formikValues.jansEnabled}
+                    formik={formik}
+                    value={Boolean(formikValues.jansEnabled)}
                   />
                 </FormGroup>
               </div>
diff --git a/admin-ui/plugins/auth-server/components/Authentication/Acrs/Acrs.tsx b/admin-ui/plugins/auth-server/components/Authentication/Acrs/Acrs.tsx
index d7bcf9a7b0..651636652a 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/Acrs/Acrs.tsx
+++ b/admin-ui/plugins/auth-server/components/Authentication/Acrs/Acrs.tsx
@@ -14,15 +14,11 @@ import { GluuDetailGrid, type GluuDetailGridField } from '@/components/GluuDetai
 import { AUTHN } from 'Utils/ApiResources'
 import { DEFAULT_SCRIPT_TYPE, useCustomScriptsByType } from 'Plugins/scripts/components'
 import { useGetAcrs, useGetConfigDatabaseLdap, type GluuLdapConfiguration } from 'JansConfigApi'
-import type { AuthNItem } from '../types'
+import type { AuthNItem, AcrsProps } from '../types'
 import { BUILT_IN_ACRS, AUTH_RESOURCE_ID, PAGE_SIZE, AUTH_METHOD_NAMES } from '../constants'
 import { useStyles } from './Acrs.style'
 import { displayOrDash } from './helper/acrUtils'
 
-type AcrsProps = {
-  isBuiltIn?: boolean
-}
-
 const Acrs = ({ isBuiltIn = false }: AcrsProps): ReactElement => {
   const { canRead: canReadAuthN, canWrite: canWriteAuthN } = usePermission(AUTH_RESOURCE_ID)
   const { t } = useTranslation()
diff --git a/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsEditPage.tsx b/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsEditPage.tsx
index 765996b536..9c9534fb05 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsEditPage.tsx
+++ b/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsEditPage.tsx
@@ -14,8 +14,7 @@ import {
 } from 'JansConfigApi'
 import { updateToast } from 'Redux/features/toastSlice'
 import { useAppDispatch } from '@/redux/hooks'
-import { type AcrsFormValues } from './AcrsForm'
-import type { AuthNItem } from '../types'
+import type { AcrsFormValues, AuthNItem } from '../types'
 import { isDefaultAuthNMethod, transformConfigurationProperties } from './helper/acrUtils'
 import { logger } from '@/utils/logger'
 import { AUTH_METHOD_NAMES, SCRIPT_TYPES } from '../constants'
diff --git a/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsForm.style.ts b/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsForm.style.ts
index 0254e1a0fc..9b9b4a20b4 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsForm.style.ts
+++ b/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsForm.style.ts
@@ -134,24 +134,25 @@ export const useStyles = makeStyles<AcrsFormStylesParams>()((_, { isDark, themeC
     propsError: dl.listError,
     propsActionBtn: dl.listActionBtn,
     formWithInputs: {
-      '& input:not([type="checkbox"]), & select, & .custom-select, & textarea': {
-        backgroundColor: `${formInputBg} !important`,
-        border: `1px solid ${inputBorderColor} !important`,
-        borderRadius: `${BORDER_RADIUS.SMALL}px !important`,
-        color: `${themeColors.fontColor} !important`,
-        WebkitTextFillColor: `${themeColors.fontColor} !important`,
-        caretColor: themeColors.fontColor,
-        minHeight: INPUT.HEIGHT,
-        height: 'auto',
-        paddingTop: CEDARLING_CONFIG_SPACING.INPUT_PADDING_VERTICAL,
-        paddingBottom: CEDARLING_CONFIG_SPACING.INPUT_PADDING_VERTICAL,
-        paddingLeft: CEDARLING_CONFIG_SPACING.INPUT_PADDING_HORIZONTAL,
-        paddingRight: CEDARLING_CONFIG_SPACING.INPUT_PADDING_HORIZONTAL,
-      },
+      '& input:not([type="checkbox"]):not(.MuiOutlinedInput-input), & select, & .custom-select, & textarea':
+        {
+          backgroundColor: `${formInputBg} !important`,
+          border: `1px solid ${inputBorderColor} !important`,
+          borderRadius: `${BORDER_RADIUS.SMALL}px !important`,
+          color: `${themeColors.fontColor} !important`,
+          WebkitTextFillColor: `${themeColors.fontColor} !important`,
+          caretColor: themeColors.fontColor,
+          minHeight: INPUT.HEIGHT,
+          height: 'auto',
+          paddingTop: CEDARLING_CONFIG_SPACING.INPUT_PADDING_VERTICAL,
+          paddingBottom: CEDARLING_CONFIG_SPACING.INPUT_PADDING_VERTICAL,
+          paddingLeft: CEDARLING_CONFIG_SPACING.INPUT_PADDING_HORIZONTAL,
+          paddingRight: CEDARLING_CONFIG_SPACING.INPUT_PADDING_HORIZONTAL,
+        },
       '& select, & .custom-select': {
         paddingRight: SELECT_ARROW_SPACE,
       },
-      '& input:not([type="checkbox"]):focus, & input:not([type="checkbox"]):active, & select:focus, & select:active, & .custom-select:focus, & .custom-select:active, & textarea:focus, & textarea:active':
+      '& input:not([type="checkbox"]):not(.MuiOutlinedInput-input):focus, & input:not([type="checkbox"]):not(.MuiOutlinedInput-input):active, & select:focus, & select:active, & .custom-select:focus, & .custom-select:active, & textarea:focus, & textarea:active':
         {
           backgroundColor: `${formInputBg} !important`,
           color: `${themeColors.fontColor} !important`,
@@ -160,7 +161,7 @@ export const useStyles = makeStyles<AcrsFormStylesParams>()((_, { isDark, themeC
           outline: 'none',
           boxShadow: 'none',
         },
-      '& input:not([type="checkbox"]):disabled, & select:disabled, & .custom-select:disabled, & textarea:disabled':
+      '& input:not([type="checkbox"]):not(.MuiOutlinedInput-input):disabled, & select:disabled, & .custom-select:disabled, & textarea:disabled':
         {
           backgroundColor: `${formInputBg} !important`,
           border: `1px solid ${inputBorderColor} !important`,
@@ -168,13 +169,13 @@ export const useStyles = makeStyles<AcrsFormStylesParams>()((_, { isDark, themeC
           opacity: OPACITY.DISABLED,
           cursor: 'not-allowed',
         },
-      '& input:not([type="checkbox"]).is-valid, & input:not([type="checkbox"]).is-invalid, & select.is-valid, & select.is-invalid, & textarea.is-valid, & textarea.is-invalid':
+      '& input:not([type="checkbox"]):not(.MuiOutlinedInput-input).is-valid, & input:not([type="checkbox"]):not(.MuiOutlinedInput-input).is-invalid, & select.is-valid, & select.is-invalid, & textarea.is-valid, & textarea.is-invalid':
         {
           border: `1px solid ${inputBorderColor} !important`,
           backgroundImage: 'none !important',
           boxShadow: 'none !important',
         },
-      '& input.form-control, & input[type="text"], & input[type="number"], & textarea.form-control':
+      '& input.form-control, & input[type="text"]:not(.MuiOutlinedInput-input), & input[type="number"]:not(.MuiOutlinedInput-input), & textarea.form-control':
         {
           backgroundColor: `${formInputBg} !important`,
           color: `${themeColors.fontColor} !important`,
@@ -186,15 +187,17 @@ export const useStyles = makeStyles<AcrsFormStylesParams>()((_, { isDark, themeC
         WebkitTextFillColor: `${themeColors.fontColor} !important`,
         caretColor: `${themeColors.fontColor} !important`,
       },
-      '& input:not([type="checkbox"])::selection, & textarea::selection': {
-        backgroundColor: isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.15)',
-        color: `${themeColors.fontColor} !important`,
-      },
-      '& input:not([type="checkbox"])::placeholder, & textarea::placeholder': {
-        color: `${themeColors.textMuted} !important`,
-        opacity: `${OPACITY.PLACEHOLDER} !important`,
-      },
-      '& input:not([type="checkbox"]):-webkit-autofill, & input:not([type="checkbox"]):-webkit-autofill:hover, & input:not([type="checkbox"]):-webkit-autofill:focus, & input:not([type="checkbox"]):-webkit-autofill:active':
+      '& input:not([type="checkbox"]):not(.MuiOutlinedInput-input)::selection, & textarea::selection':
+        {
+          backgroundColor: isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.15)',
+          color: `${themeColors.fontColor} !important`,
+        },
+      '& input:not([type="checkbox"]):not(.MuiOutlinedInput-input)::placeholder, & textarea::placeholder':
+        {
+          color: `${themeColors.textMuted} !important`,
+          opacity: `${OPACITY.PLACEHOLDER} !important`,
+        },
+      '& input:not([type="checkbox"]):not(.MuiOutlinedInput-input):-webkit-autofill, & input:not([type="checkbox"]):not(.MuiOutlinedInput-input):-webkit-autofill:hover, & input:not([type="checkbox"]):not(.MuiOutlinedInput-input):-webkit-autofill:focus, & input:not([type="checkbox"]):not(.MuiOutlinedInput-input):-webkit-autofill:active':
         {
           WebkitBoxShadow: `0 0 0 100px ${formInputBg} inset !important`,
           WebkitTextFillColor: `${themeColors.fontColor} !important`,
diff --git a/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsForm.tsx b/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsForm.tsx
index c109597fdf..a8285f2790 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsForm.tsx
+++ b/admin-ui/plugins/auth-server/components/Authentication/Acrs/AcrsForm.tsx
@@ -1,11 +1,12 @@
 import { useState, useCallback, useMemo, useRef, type ReactElement, type FormEvent } from 'react'
 import { useFormik, type FormikProps } from 'formik'
 import { Add, DeleteOutline } from '@/components/icons'
-import { Form, Input } from 'Components'
+import { Form, Input, FormGroup, Col } from 'Components'
 import GluuInputRow from 'Routes/Apps/Gluu/GluuInputRow'
 import GluuSelectRow from 'Routes/Apps/Gluu/GluuSelectRow'
 import GluuToggleRow from 'Routes/Apps/Gluu/GluuToggleRow'
-import GluuTypeAhead from 'Routes/Apps/Gluu/GluuTypeAhead'
+import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
+import GluuAutocomplete from 'Routes/Apps/Gluu/GluuAutocomplete'
 import GluuText from 'Routes/Apps/Gluu/GluuText'
 import GluuThemeFormFooter from 'Routes/Apps/Gluu/GluuThemeFormFooter'
 import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
@@ -17,48 +18,12 @@ import { useGetAcrs } from 'JansConfigApi'
 import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { DEFAULT_THEME, THEME_DARK } from '@/context/theme/constants'
-import type { AuthNItem } from '../types'
+import type { AcrsFormValues, AcrsFormProps } from '../types'
 import { getAuthNValidationSchema } from './helper/validations'
 import { useStyles } from './AcrsForm.style'
 import { HASH_ALGORITHM_OPTIONS, DEFAULT_AUTHN_OPTIONS } from './constants'
 import { AUTH_METHOD_NAMES } from '../constants'
-import { getPropertiesConfig, type PropertyConfig } from './helper/acrUtils'
-
-export type AcrsFormValues = {
-  acr: string
-  level: number
-  defaultAuthNMethod: boolean | string
-  samlACR: string
-  description: string
-  primaryKey: string
-  passwordAttribute: string
-  hashAlgorithm: string
-  bindDN: string
-  maxConnections: string | number
-  remotePrimaryKey: string
-  localPrimaryKey: string
-  servers: string[]
-  baseDNs: string[]
-  bindPassword: string
-  useSSL: boolean
-  enabled: boolean
-  configId: string
-  baseDn: string | undefined
-  inum: string | undefined
-  configurationProperties?: Array<{
-    id?: string
-    key?: string
-    value?: string
-    value1?: string
-    value2?: string
-  }>
-}
-
-type AcrsFormProps = {
-  item: AuthNItem
-  handleSubmit: (values: AcrsFormValues) => void
-  isSubmitting?: boolean
-}
+import { getPropertiesConfig } from './helper/acrUtils'
 
 const AcrsForm = ({ item, handleSubmit, isSubmitting = false }: AcrsFormProps): ReactElement => {
   const { t } = useTranslation()
@@ -148,7 +113,7 @@ const AcrsForm = ({ item, handleSubmit, isSubmitting = false }: AcrsFormProps):
   }, [formik, initialValues])
 
   const configurationProperties = useMemo(
-    () => (formik.values.configurationProperties as PropertyConfig[]) || [],
+    () => formik.values.configurationProperties || [],
     [formik.values.configurationProperties],
   )
 
@@ -388,37 +353,60 @@ const AcrsForm = ({ item, handleSubmit, isSubmitting = false }: AcrsFormProps):
                 />
               </div>
 
-              <div className={`${classes.fieldItem} ${classes.fieldItemFullWidth}`}>
-                <GluuTypeAhead
-                  name="servers"
-                  label="fields.remote_ldap_server_post"
-                  formik={formik}
-                  required={true}
-                  lsize={12}
-                  rsize={12}
-                  options={[]}
-                  value={Array.isArray(formik.values.servers) ? formik.values.servers : []}
-                  showError={!!(formik.errors.servers && formik.touched.servers)}
-                  errorMessage={
-                    typeof formik.errors.servers === 'string' ? formik.errors.servers : undefined
-                  }
-                />
-              </div>
-
-              <div className={`${classes.fieldItem} ${classes.fieldItemFullWidth}`}>
-                <GluuTypeAhead
-                  name="baseDNs"
-                  label="fields.base_dns"
-                  formik={formik}
-                  lsize={12}
-                  rsize={12}
-                  options={[]}
-                  value={Array.isArray(formik.values.baseDNs) ? formik.values.baseDNs : []}
-                  showError={!!(formik.errors.baseDNs && formik.touched.baseDNs)}
-                  errorMessage={
-                    typeof formik.errors.baseDNs === 'string' ? formik.errors.baseDNs : undefined
-                  }
-                />
+              <div className={`${classes.fieldItemFullWidth} ${classes.formGrid}`}>
+                <div className={classes.fieldItem}>
+                  <FormGroup row>
+                    <GluuLabel label="fields.remote_ldap_server_post" size={12} required />
+                    <Col sm={12}>
+                      <GluuAutocomplete
+                        hideLabel
+                        allowCustom
+                        name="servers"
+                        label={t('fields.remote_ldap_server_post')}
+                        value={Array.isArray(formik.values.servers) ? formik.values.servers : []}
+                        options={[]}
+                        onChange={(vals) => {
+                          formik.setFieldValue('servers', vals)
+                          formik.setFieldTouched('servers', true)
+                        }}
+                        showError={!!(formik.errors.servers && formik.touched.servers)}
+                        errorMessage={
+                          typeof formik.errors.servers === 'string'
+                            ? formik.errors.servers
+                            : undefined
+                        }
+                        helperText={t('placeholders.typeahead_holder_message')}
+                      />
+                    </Col>
+                  </FormGroup>
+                </div>
+
+                <div className={classes.fieldItem}>
+                  <FormGroup row>
+                    <GluuLabel label="fields.base_dns" size={12} />
+                    <Col sm={12}>
+                      <GluuAutocomplete
+                        hideLabel
+                        allowCustom
+                        name="baseDNs"
+                        label={t('fields.base_dns')}
+                        value={Array.isArray(formik.values.baseDNs) ? formik.values.baseDNs : []}
+                        options={[]}
+                        onChange={(vals) => {
+                          formik.setFieldValue('baseDNs', vals)
+                          formik.setFieldTouched('baseDNs', true)
+                        }}
+                        showError={!!(formik.errors.baseDNs && formik.touched.baseDNs)}
+                        errorMessage={
+                          typeof formik.errors.baseDNs === 'string'
+                            ? formik.errors.baseDNs
+                            : undefined
+                        }
+                        helperText={t('placeholders.typeahead_holder_message')}
+                      />
+                    </Col>
+                  </FormGroup>
+                </div>
               </div>
 
               <div className={classes.toggleRow}>
diff --git a/admin-ui/plugins/auth-server/components/Authentication/Acrs/helper/acrUtils.ts b/admin-ui/plugins/auth-server/components/Authentication/Acrs/helper/acrUtils.ts
index 72c09a2c99..27fe25ef6b 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/Acrs/helper/acrUtils.ts
+++ b/admin-ui/plugins/auth-server/components/Authentication/Acrs/helper/acrUtils.ts
@@ -1,7 +1,7 @@
 import { SIMPLE_PASSWORD_AUTH } from '@/constants'
 import type { Deployment } from 'JansConfigApi'
 import type { GluuDetailGridField } from '@/components/GluuDetailGrid'
-import type { AuthNItem, ConfigurationProperty } from '../../types'
+import type { AuthNItem, ConfigurationProperty, PropertyConfig } from '../../types'
 import { EMPTY_PLACEHOLDER } from '../constants'
 
 export type DropdownOption = {
@@ -9,12 +9,6 @@ export type DropdownOption = {
   value: string
 }
 
-export type PropertyConfig = {
-  id: string
-  key: string
-  value: string
-}
-
 export const displayOrDash = (value: GluuDetailGridField['value']): GluuDetailGridField['value'] =>
   value === null || value === undefined || value === '' ? EMPTY_PLACEHOLDER : value
 
diff --git a/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaFlows.tsx b/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaFlows.tsx
index bc26f3899e..f76272a117 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaFlows.tsx
+++ b/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaFlows.tsx
@@ -27,7 +27,7 @@ import FormGroup from '@mui/material/FormGroup'
 import FormControlLabel from '@mui/material/FormControlLabel'
 import FormLabel from '@mui/material/FormLabel'
 import { useFileDrop, type FileRejection } from '@/hooks/useFileDrop'
-import { readZip } from '@/utils/zip'
+import readZip from '@/utils/zip'
 import AgamaProjectConfigModal from './AgamaProjectConfigModal'
 import { updateToast } from 'Redux/features/toastSlice'
 import { useAuthServerJsonPropertiesQuery } from 'Plugins/auth-server/hooks/useAuthServerJsonProperties'
diff --git a/admin-ui/plugins/auth-server/components/Authentication/Aliases/Aliases.tsx b/admin-ui/plugins/auth-server/components/Authentication/Aliases/Aliases.tsx
index 4062ce3ca6..640cae246c 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/Aliases/Aliases.tsx
+++ b/admin-ui/plugins/auth-server/components/Authentication/Aliases/Aliases.tsx
@@ -38,11 +38,7 @@ import {
   prepareMappingsForDelete,
   toActionData,
 } from '../AgamaFlows/helper'
-
-type AliasesProps = {
-  onRegisterAddHandler?: (fn: () => void) => void
-  onWritePermissionChange?: (canWrite: boolean) => void
-}
+import type { AliasesProps } from '../types'
 
 const Aliases = ({
   onRegisterAddHandler,
diff --git a/admin-ui/plugins/auth-server/components/Authentication/Authentication.tsx b/admin-ui/plugins/auth-server/components/Authentication/Authentication.tsx
index a7f6ae458b..6f38bd4e5b 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/Authentication.tsx
+++ b/admin-ui/plugins/auth-server/components/Authentication/Authentication.tsx
@@ -16,12 +16,7 @@ import Aliases from './Aliases/Aliases'
 import AgamaFlows from './AgamaFlows/AgamaFlows'
 import { useStyles } from './styles/Authentication.style'
 import { ALIASES_TAB_INDEX, TAB_IDS } from './constants'
-
-type TabName = {
-  id: string
-  name: string
-  path: string
-}
+import type { TabName } from './types'
 
 const Authentication = (): ReactElement => {
   const { t } = useTranslation()
diff --git a/admin-ui/plugins/auth-server/components/Authentication/DefaultAcr/DefaultAcr.tsx b/admin-ui/plugins/auth-server/components/Authentication/DefaultAcr/DefaultAcr.tsx
index 9fa9b16775..c252a9ba4a 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/DefaultAcr/DefaultAcr.tsx
+++ b/admin-ui/plugins/auth-server/components/Authentication/DefaultAcr/DefaultAcr.tsx
@@ -34,10 +34,7 @@ import { logger } from '@/utils/logger'
 import { useStyles } from './DefaultAcr.style'
 import { MAX_AGAMA_PROJECTS_FOR_ACR } from './constants'
 import { AUTH_RESOURCE_ID } from '../constants'
-
-type DefaultAcrFormValues = {
-  defaultAcr: string
-}
+import type { DefaultAcrFormValues } from '../types'
 
 const DefaultAcr = (): React.ReactElement => {
   const { canRead: canReadAuth, canWrite: canWriteAuth } = usePermission(AUTH_RESOURCE_ID)
diff --git a/admin-ui/plugins/auth-server/components/Authentication/types/authenticationTypes.ts b/admin-ui/plugins/auth-server/components/Authentication/types/authenticationTypes.ts
index a9c424f40f..cab8211833 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/types/authenticationTypes.ts
+++ b/admin-ui/plugins/auth-server/components/Authentication/types/authenticationTypes.ts
@@ -6,6 +6,12 @@ export type ConfigurationProperty = {
   hide?: boolean
 }
 
+export type PropertyConfig = {
+  id: string
+  key: string
+  value: string
+}
+
 export type AuthNItem = {
   inum?: string
   name?: string
@@ -44,3 +50,52 @@ export type BuiltInAcr = {
   defaultAuthNMethod: boolean
   acrName: string
 }
+
+export type TabName = {
+  id: string
+  name: string
+  path: string
+}
+
+export type AcrsProps = {
+  isBuiltIn?: boolean
+}
+
+export type DefaultAcrFormValues = {
+  defaultAcr: string
+}
+
+export type AliasesProps = {
+  onRegisterAddHandler?: (fn: () => void) => void
+  onWritePermissionChange?: (canWrite: boolean) => void
+}
+
+export type AcrsFormValues = {
+  acr: string
+  level: number
+  defaultAuthNMethod: boolean | string
+  samlACR: string
+  description: string
+  primaryKey: string
+  passwordAttribute: string
+  hashAlgorithm: string
+  bindDN: string
+  maxConnections: string | number
+  remotePrimaryKey: string
+  localPrimaryKey: string
+  servers: string[]
+  baseDNs: string[]
+  bindPassword: string
+  useSSL: boolean
+  enabled: boolean
+  configId: string
+  baseDn: string | undefined
+  inum: string | undefined
+  configurationProperties?: PropertyConfig[]
+}
+
+export type AcrsFormProps = {
+  item: AuthNItem
+  handleSubmit: (values: AcrsFormValues) => void
+  isSubmitting?: boolean
+}
diff --git a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientTokensPanel.tsx b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientTokensPanel.tsx
index ffdf07a8a5..de69e1ad14 100644
--- a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientTokensPanel.tsx
+++ b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientTokensPanel.tsx
@@ -3,7 +3,6 @@ import { GluuDynamicList } from 'Components'
 import GluuToggleRow from 'Routes/Apps/Gluu/GluuToggleRow'
 import GluuInputRow from 'Routes/Apps/Gluu/GluuInputRow'
 import GluuSelectRow from 'Routes/Apps/Gluu/GluuSelectRow'
-import GluuBooleanSelectBox from 'Routes/Apps/Gluu/GluuBooleanSelectBox'
 import { useTranslation } from 'react-i18next'
 import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
@@ -270,7 +269,7 @@ const ClientTokensPanel = ({ formik, viewOnly, setModifiedFields }: ClientPanelP
     ),
     runIntrospectionScriptBeforeJwtCreation: (
       <div className={classes.fieldItem}>
-        <GluuBooleanSelectBox
+        <GluuToggleRow
           name="attributes.runIntrospectionScriptBeforeJwtCreation"
           label="fields.run_introspection_script_before_accesstoken"
           value={Boolean(formik.values.attributes?.runIntrospectionScriptBeforeJwtCreation)}
@@ -283,7 +282,7 @@ const ClientTokensPanel = ({ formik, viewOnly, setModifiedFields }: ClientPanelP
             setModifiedFields((prev) => ({
               ...prev,
               [CLIENT_TOKEN_MODIFIED_FIELDS.RUN_INTROSPECTION_SCRIPT_BEFORE_JWT_CREATION]:
-                e.target.value,
+                e.target.checked,
             }))
           }}
         />
diff --git a/admin-ui/plugins/saml/components/WebsiteSsoIdentityProviderForm.tsx b/admin-ui/plugins/saml/components/WebsiteSsoIdentityProviderForm.tsx
index a214637e69..d9b47f505a 100644
--- a/admin-ui/plugins/saml/components/WebsiteSsoIdentityProviderForm.tsx
+++ b/admin-ui/plugins/saml/components/WebsiteSsoIdentityProviderForm.tsx
@@ -12,7 +12,7 @@ import GluuToggleRow from 'Routes/Apps/Gluu/GluuToggleRow'
 import GluuSelectRow from 'Routes/Apps/Gluu/GluuSelectRow'
 import GluuUploadFile from 'Routes/Apps/Gluu/GluuUploadFile'
 import GluuStatusMessage from 'Routes/Apps/Gluu/GluuStatusMessage'
-import Toggle from 'react-toggle'
+import GluuToggle from 'Routes/Apps/Gluu/GluuToggle'
 import {
   nameIDPolicyFormat,
   websiteSsoIdentityProviderValidationSchema,
@@ -381,9 +381,10 @@ const WebsiteSsoIdentityProviderForm = ({
                 <FormGroup row>
                   <GluuLabel label={'fields.import_metadata_from_file'} size={4} />
                   <Col sm={8}>
-                    <Toggle
-                      onChange={handleToggleMetadataImport}
-                      checked={showUploadBtn}
+                    <GluuToggle
+                      name="metaDataFileImportedFlag"
+                      value={showUploadBtn}
+                      handler={handleToggleMetadataImport}
                       disabled={viewOnly}
                     />
                   </Col>
diff --git a/admin-ui/plugins/saml/components/WebsiteSsoServiceProviderForm.tsx b/admin-ui/plugins/saml/components/WebsiteSsoServiceProviderForm.tsx
index e2f92bc3d8..862fb111a1 100644
--- a/admin-ui/plugins/saml/components/WebsiteSsoServiceProviderForm.tsx
+++ b/admin-ui/plugins/saml/components/WebsiteSsoServiceProviderForm.tsx
@@ -13,7 +13,8 @@ import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import { useTranslation } from 'react-i18next'
 import { setClientSelectedScopes } from 'Plugins/auth-server/redux/features/scopeSlice'
 import { updateToast } from 'Redux/features/toastSlice'
-import GluuTypeAheadForDn from 'Routes/Apps/Gluu/GluuTypeAheadForDn'
+import GluuAutocomplete from 'Routes/Apps/Gluu/GluuAutocomplete'
+import type { AutocompleteOption } from 'Routes/Apps/Gluu/types/GluuAutocomplete.types'
 import {
   nameIDPolicyFormat,
   websiteSsoServiceProviderValidationSchema,
@@ -251,6 +252,27 @@ const WebsiteSsoServiceProviderForm = ({
     [dispatch],
   )
 
+  const releasedAttributeOptions = useMemo<AutocompleteOption[]>(
+    () => attributesList.map((item) => ({ value: item.dn, label: item.name })),
+    [attributesList],
+  )
+
+  const releasedAttributeValues = useMemo(
+    () => scopeFieldValue.map((item) => item.dn),
+    [scopeFieldValue],
+  )
+
+  const handleReleasedAttributesChange = useCallback(
+    (values: string[]) => {
+      formik.setFieldValue('releasedAttributes', values)
+      const selected = values
+        .map((dn) => attributesList.find((item) => item.dn === dn))
+        .filter((item): item is ScopeOption => Boolean(item))
+      saveSelectedScopes(selected)
+    },
+    [formik, saveSelectedScopes, attributesList],
+  )
+
   useEffect(() => {
     if (savedForm) {
       navigateBack(ROUTES.SAML_SP_LIST)
@@ -401,24 +423,31 @@ const WebsiteSsoServiceProviderForm = ({
                 />
               </Col>
               <Col sm={10}>
-                <GluuTypeAheadForDn
-                  key={releasedAttributesKey}
-                  name="releasedAttributes"
-                  label="fields.released_attributes"
-                  formik={formik}
-                  value={scopeFieldValue}
-                  options={attributesList}
-                  lsize={4}
-                  rsize={8}
-                  disabled={viewOnly || attributesLoading}
-                  isLoading={attributesLoading}
-                  placeholder={attributesLoading ? `${t('messages.loading_attributes')}...` : ''}
-                  onChange={saveSelectedScopes}
-                  paginate={false}
-                  hideHelperMessage={true}
-                  defaultSelected={scopeFieldValue}
-                  doc_category={DOC_SECTION}
-                />
+                <FormGroup row>
+                  <GluuLabel
+                    label="fields.released_attributes"
+                    size={4}
+                    doc_category={DOC_SECTION}
+                    doc_entry="releasedAttributes"
+                  />
+                  <Col sm={8}>
+                    <GluuAutocomplete
+                      key={releasedAttributesKey}
+                      hideLabel
+                      name="releasedAttributes"
+                      label={t('fields.released_attributes')}
+                      value={releasedAttributeValues}
+                      options={releasedAttributeOptions}
+                      onChange={handleReleasedAttributesChange}
+                      disabled={viewOnly || attributesLoading}
+                      isLoading={attributesLoading}
+                      placeholder={
+                        attributesLoading ? `${t('messages.loading_attributes')}...` : ''
+                      }
+                      helperText=""
+                    />
+                  </Col>
+                </FormGroup>
                 {attributesError ? (
                   <GluuStatusMessage
                     message={t('errors.attribute_load_failed')}
diff --git a/admin-ui/plugins/scripts/components/CustomScriptForm.tsx b/admin-ui/plugins/scripts/components/CustomScriptForm.tsx
index 44322e7af7..4d2939828d 100644
--- a/admin-ui/plugins/scripts/components/CustomScriptForm.tsx
+++ b/admin-ui/plugins/scripts/components/CustomScriptForm.tsx
@@ -1,7 +1,7 @@
 import React, { useState, ChangeEvent, useMemo, useCallback } from 'react'
 import type { FormikProps } from 'formik'
 import { useFormik } from 'formik'
-import Toggle from 'react-toggle'
+import GluuToggle from 'Routes/Apps/Gluu/GluuToggle'
 import { Button, Form, FormGroup, Input } from 'Components'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuInumInput from 'Routes/Apps/Gluu/GluuInumInput'
@@ -458,11 +458,11 @@ const CustomScriptForm = ({ item, handleSubmit, viewOnly = false }: CustomScript
                   doc_entry="enabled"
                   isDark={isDark}
                 />
-                <Toggle
+                <GluuToggle
                   id="enabled"
                   name="enabled"
-                  onChange={handleEnabledToggle}
-                  checked={Boolean(formik.values.enabled)}
+                  value={Boolean(formik.values.enabled)}
+                  handler={handleEnabledToggle}
                   disabled={viewOnly}
                 />
               </FormGroup>
@@ -482,7 +482,7 @@ const CustomScriptForm = ({ item, handleSubmit, viewOnly = false }: CustomScript
           </div>
         )}
 
-        <div className={classes.fieldItemFullWidth}>
+        <div className={cx(classes.fieldItemFullWidth, classes.propsSection)}>
           <div
             className={cx(classes.propsBox, {
               [classes.propsBoxEmpty]: !formik.values.configurationProperties?.length,
@@ -548,7 +548,7 @@ const CustomScriptForm = ({ item, handleSubmit, viewOnly = false }: CustomScript
           </div>
         </div>
 
-        <div className={classes.fieldItemFullWidth}>
+        <div className={cx(classes.fieldItemFullWidth, classes.propsSection)}>
           <div
             className={cx(classes.propsBox, {
               [classes.propsBoxEmpty]: !formik.values.moduleProperties?.length,
diff --git a/admin-ui/plugins/scripts/components/styles/CustomScriptFormPage.style.ts b/admin-ui/plugins/scripts/components/styles/CustomScriptFormPage.style.ts
index a71d669954..2ee5c6a37d 100644
--- a/admin-ui/plugins/scripts/components/styles/CustomScriptFormPage.style.ts
+++ b/admin-ui/plugins/scripts/components/styles/CustomScriptFormPage.style.ts
@@ -87,8 +87,10 @@ export const useStyles = makeStyles<CustomScriptFormPageStylesParams>()((
       'display': DISPLAY_FLEX,
       'flexDirection': FLEX_DIRECTION_COLUMN,
       'width': WIDTH_FULL,
-      '& > * + *:not(:last-child)': {
-        marginTop: SPACING.SECTION_GAP,
+      'gap': SPACING.SECTION_GAP,
+      '& > *': {
+        marginTop: '0 !important',
+        marginBottom: '0 !important',
       },
     },
     fieldsGrid: {
@@ -113,6 +115,9 @@ export const useStyles = makeStyles<CustomScriptFormPageStylesParams>()((
         flex: '1 1 0',
         minWidth: 0,
       },
+      '& > div .form-group [class*="col"]': {
+        paddingBottom: 0,
+      },
       [theme.breakpoints.down('md')]: {
         flexDirection: FLEX_DIRECTION_COLUMN,
       },
@@ -350,6 +355,11 @@ export const useStyles = makeStyles<CustomScriptFormPageStylesParams>()((
           transition: 'background-color 5000s ease-in-out 0s',
         },
     },
+    propsSection: {
+      '& + &': {
+        marginTop: '16px !important',
+      },
+    },
     propsBox: dl.listBox,
     propsBoxEmpty: dl.listBoxEmpty,
     propsHeader: dl.listHeader,
diff --git a/admin-ui/plugins/smtp/components/SmtpForm.tsx b/admin-ui/plugins/smtp/components/SmtpForm.tsx
index 872f0c9c7c..6723000a09 100644
--- a/admin-ui/plugins/smtp/components/SmtpForm.tsx
+++ b/admin-ui/plugins/smtp/components/SmtpForm.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { Form, FormGroup } from 'Components'
-import Toggle from 'react-toggle'
+import GluuToggle from 'Routes/Apps/Gluu/GluuToggle'
 import GluuInputRow from 'Routes/Apps/Gluu/GluuInputRow'
 import { getFieldPlaceholder } from '@/utils/placeholderUtils'
 import GluuSelectRow from 'Routes/Apps/Gluu/GluuSelectRow'
@@ -459,11 +459,11 @@ const SmtpForm = (props: Readonly<SmtpFormProps>) => {
                 doc_category={smtpConstants.DOC_CATEGORY}
                 doc_entry="trust_host"
               />
-              <Toggle
+              <GluuToggle
                 id="trust_host"
                 name="trust_host"
-                checked={Boolean(formik.values.trust_host)}
-                onChange={(e) => formik.setFieldValue('trust_host', e.target.checked)}
+                formik={formik}
+                value={Boolean(formik.values.trust_host)}
                 disabled={readOnly}
               />
             </FormGroup>
@@ -479,11 +479,11 @@ const SmtpForm = (props: Readonly<SmtpFormProps>) => {
                 doc_entry="allowKeystoreEdit"
               />
               <GluuLoader blocking={Boolean(loadingConfig)}>
-                <Toggle
+                <GluuToggle
                   id="allowKeystoreEdit"
                   name="allowKeystoreEdit"
-                  checked={Boolean(optimisticKeystoreEdit)}
-                  onChange={(e) => {
+                  value={Boolean(optimisticKeystoreEdit)}
+                  handler={(e) => {
                     const checked = e.target.checked
                     if (Boolean(checked) !== Boolean(allowSmtpKeystoreEdit)) {
                       setOptimisticKeystoreEdit(checked)
@@ -513,11 +513,11 @@ const SmtpForm = (props: Readonly<SmtpFormProps>) => {
                 doc_category={smtpConstants.DOC_CATEGORY}
                 doc_entry="requires_authentication"
               />
-              <Toggle
+              <GluuToggle
                 id="requires_authentication"
                 name="requires_authentication"
-                checked={Boolean(formik.values.requires_authentication)}
-                onChange={(e) => formik.setFieldValue('requires_authentication', e.target.checked)}
+                formik={formik}
+                value={Boolean(formik.values.requires_authentication)}
                 disabled={readOnly}
               />
             </FormGroup>
diff --git a/admin-ui/plugins/user-claims/__tests__/components/UserClaimsListPage.test.tsx b/admin-ui/plugins/user-claims/__tests__/components/UserClaimsListPage.test.tsx
index 335c0b4126..b7233ecb34 100644
--- a/admin-ui/plugins/user-claims/__tests__/components/UserClaimsListPage.test.tsx
+++ b/admin-ui/plugins/user-claims/__tests__/components/UserClaimsListPage.test.tsx
@@ -5,7 +5,19 @@ import { Provider } from 'react-redux'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
 import { combineReducers, configureStore } from '@reduxjs/toolkit'
-import attributes from '../../utils/attributes'
+function mockBuildAttributes() {
+  return ['givenName', 'emailVerified'].map((name, index) => ({
+    name,
+    inum: `B4B${index}`,
+    displayName: name,
+    description: name,
+    status: 'ACTIVE',
+    editType: 'ADMIN',
+    viewType: 'ADMIN',
+  }))
+}
+
+const attributes = mockBuildAttributes()
 
 jest.mock('Plugins/PluginReducersResolver', () => ({ __esModule: true, default: jest.fn() }))
 jest.mock('Plugins/PluginListenersResolver', () => ({ __esModule: true, default: jest.fn() }))
@@ -34,7 +46,7 @@ jest.mock('JansConfigApi', () => ({
 }))
 
 jest.mock('Plugins/user-claims/hooks', () => {
-  const mockAttributes = jest.requireActual('../../utils/attributes').default
+  const mockAttributes = mockBuildAttributes()
   return {
     useAttributes: jest.fn(() => ({
       data: {
diff --git a/admin-ui/plugins/user-claims/__tests__/utils/attributes.test.ts b/admin-ui/plugins/user-claims/__tests__/utils/attributes.test.ts
deleted file mode 100644
index aaff9c33fc..0000000000
--- a/admin-ui/plugins/user-claims/__tests__/utils/attributes.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import attributes from 'Plugins/user-claims/utils/attributes'
-
-describe('attributes', () => {
-  it('default export is an array', () => {
-    expect(Array.isArray(attributes)).toBe(true)
-  })
-
-  it('attributes array is not empty', () => {
-    expect(attributes.length).toBeGreaterThan(0)
-  })
-
-  it('each attribute has required properties', () => {
-    attributes.forEach((attribute) => {
-      expect(attribute).toHaveProperty('name')
-      expect(attribute).toHaveProperty('inum')
-      expect(attribute).toHaveProperty('displayName')
-    })
-  })
-})
diff --git a/admin-ui/plugins/user-claims/components/styles/UserClaimsFormPage.style.ts b/admin-ui/plugins/user-claims/components/styles/UserClaimsFormPage.style.ts
index 6a8560fb9a..13b7b2b517 100644
--- a/admin-ui/plugins/user-claims/components/styles/UserClaimsFormPage.style.ts
+++ b/admin-ui/plugins/user-claims/components/styles/UserClaimsFormPage.style.ts
@@ -125,6 +125,7 @@ export const useStyles = makeStyles<AttributeFormPageStylesParams>()((
       'width': '100%',
       'minWidth': 0,
       'boxSizing': 'border-box' as const,
+      'paddingBottom': 18,
       ...createFormGroupOverrides(),
       '& .form-group > label': {
         ...createFormGroupOverrides()['& .form-group > label'],
diff --git a/admin-ui/plugins/user-claims/utils/attributes.ts b/admin-ui/plugins/user-claims/utils/attributes.ts
deleted file mode 100644
index b6d40ae30a..0000000000
--- a/admin-ui/plugins/user-claims/utils/attributes.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-const scopes = [
-  {
-    name: 'givenName',
-    inum: 'B4B0',
-    displayName: 'givenName',
-    description: 'First Name',
-    status: 'ACTIVE',
-    dataType: 'STRING',
-    editType: 'ADMIN',
-    viewType: 'ADMIN',
-    usageType: 'OPENID',
-    jansHideOnDiscovery: false,
-    oxMultiValuedAttribute: false,
-    attributeValidation: { maxLength: null, regexp: null, minLength: null },
-    scimCustomAttr: false,
-  },
-  {
-    name: 'emailVerified',
-    inum: 'B4B1',
-    displayName: 'emailVerified',
-    description: 'Email Verified',
-    status: 'ACTIVE',
-    dataType: 'STRING',
-    editType: 'ADMIN',
-    viewType: 'ADMIN',
-    usageType: 'OPENID',
-    jansHideOnDiscovery: false,
-    oxMultiValuedAttribute: false,
-    attributeValidation: { maxLength: null, regexp: null, minLength: null },
-    scimCustomAttr: false,
-  },
-]
-
-export default scopes
diff --git a/admin-ui/plugins/user-management/__tests__/utils/formValidationUtils.test.ts b/admin-ui/plugins/user-management/__tests__/utils/formValidationUtils.test.ts
index 0e67e773b7..39d4ab3331 100644
--- a/admin-ui/plugins/user-management/__tests__/utils/formValidationUtils.test.ts
+++ b/admin-ui/plugins/user-management/__tests__/utils/formValidationUtils.test.ts
@@ -3,6 +3,7 @@ import {
   shouldDisableApplyButton,
   hasFormChanges,
   buildFormOperations,
+  diffFormValues,
 } from 'Plugins/user-management/utils/formValidationUtils'
 
 describe('isEmptyValue', () => {
@@ -99,3 +100,56 @@ describe('buildFormOperations', () => {
     expect(result).toHaveLength(0)
   })
 })
+
+describe('diffFormValues', () => {
+  it('returns only changed scalar fields', () => {
+    const result = diffFormValues(
+      { displayName: 'New', mail: 'a@b.com' },
+      { displayName: 'Old', mail: 'a@b.com' },
+    )
+    expect(result).toEqual({ displayName: 'New' })
+  })
+
+  it('ignores a field reverted to its original value', () => {
+    const result = diffFormValues({ locale: 'en' }, { locale: 'en' })
+    expect(result).toEqual({})
+  })
+
+  it('treats empty string and undefined as equal (no change)', () => {
+    const result = diffFormValues({ middleName: '' }, { middleName: undefined })
+    expect(result).toEqual({})
+  })
+
+  it('tracks a cleared field that originally had a value', () => {
+    const result = diffFormValues({ o: '' }, { o: 'Acme' })
+    expect(result).toEqual({ o: '' })
+  })
+
+  it('tracks a newly set field with no original value', () => {
+    const result = diffFormValues({ nickname: 'qa' }, {})
+    expect(result).toEqual({ nickname: 'qa' })
+  })
+
+  it('compares array values element-wise', () => {
+    expect(diffFormValues({ role: ['a', 'b'] }, { role: ['a', 'b'] })).toEqual({})
+    expect(diffFormValues({ role: ['a', 'c'] }, { role: ['a', 'b'] })).toEqual({ role: ['a', 'c'] })
+  })
+
+  it('tracks a cleared multi-valued field', () => {
+    expect(diffFormValues({ role: [] }, { role: ['a'] })).toEqual({ role: [] })
+  })
+
+  it('tracks boolean toggles but not unchanged booleans', () => {
+    expect(diffFormValues({ emailVerified: false }, { emailVerified: true })).toEqual({
+      emailVerified: false,
+    })
+    expect(diffFormValues({ emailVerified: true }, { emailVerified: true })).toEqual({})
+  })
+
+  it('skips ignored keys', () => {
+    const result = diffFormValues({ userPassword: 'x', userConfirmPassword: 'x' }, {}, [
+      'userConfirmPassword',
+    ])
+    expect(result).toEqual({ userPassword: 'x' })
+  })
+})
diff --git a/admin-ui/plugins/user-management/common/Constants.ts b/admin-ui/plugins/user-management/common/Constants.ts
index 3428572cde..6f5d9f489f 100644
--- a/admin-ui/plugins/user-management/common/Constants.ts
+++ b/admin-ui/plugins/user-management/common/Constants.ts
@@ -7,6 +7,7 @@ export const DISPLAY_NAME_ATTR = 'displayName'
 export const MAIL_ATTR = 'mail'
 export const STATUS_ATTR = 'status'
 export const JANS_STATUS_ATTR = 'jansStatus'
+export const UID_ATTR = 'uid'
 export const GIVEN_NAME_ATTR = 'givenName'
 export const MIDDLE_NAME_ATTR = 'middleName'
 export const SN_ATTR = 'sn'
@@ -14,3 +15,17 @@ export const FAMILY_NAME_ATTR = 'familyName'
 export const EMAIL_VERIFIED_ATTR = 'emailVerified'
 export const CREATED_AT_ATTR = 'createdAt'
 export const UPDATED_AT_ATTR = 'updatedAt'
+
+export const RESERVED_STANDARD_CLAIMS = [
+  USER_ID_ATTR,
+  UID_ATTR,
+  DISPLAY_NAME_ATTR,
+  MAIL_ATTR,
+  STATUS_ATTR,
+  JANS_STATUS_ATTR,
+  USER_PASSWORD_ATTR,
+  GIVEN_NAME_ATTR,
+  MIDDLE_NAME_ATTR,
+  SN_ATTR,
+  FAMILY_NAME_ATTR,
+]
diff --git a/admin-ui/plugins/user-management/components/AvailableClaimsPanel.tsx b/admin-ui/plugins/user-management/components/AvailableClaimsPanel.tsx
index 3cf1755c93..0e65ef7a18 100644
--- a/admin-ui/plugins/user-management/components/AvailableClaimsPanel.tsx
+++ b/admin-ui/plugins/user-management/components/AvailableClaimsPanel.tsx
@@ -4,35 +4,13 @@ import { useTranslation } from 'react-i18next'
 import { Close } from '@/components/icons'
 import GluuText from 'Routes/Apps/Gluu/GluuText'
 import type { PersonAttribute, AvailableClaimsPanelProps } from '../types'
-import {
-  USER_PASSWORD_ATTR,
-  USER_ID_ATTR,
-  DISPLAY_NAME_ATTR,
-  MAIL_ATTR,
-  STATUS_ATTR,
-  GIVEN_NAME_ATTR,
-  MIDDLE_NAME_ATTR,
-  SN_ATTR,
-  CREATED_AT_ATTR,
-  UPDATED_AT_ATTR,
-} from '../common'
+import { RESERVED_STANDARD_CLAIMS, CREATED_AT_ATTR, UPDATED_AT_ATTR } from '../common'
 import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { THEME_DARK } from '@/context/theme/constants'
 import { useStyles } from './AvailableClaimsPanel.style'
 
-const USED_CLAIMS = new Set([
-  USER_ID_ATTR,
-  DISPLAY_NAME_ATTR,
-  MAIL_ATTR,
-  STATUS_ATTR,
-  USER_PASSWORD_ATTR,
-  GIVEN_NAME_ATTR,
-  MIDDLE_NAME_ATTR,
-  SN_ATTR,
-  CREATED_AT_ATTR,
-  UPDATED_AT_ATTR,
-])
+const USED_CLAIMS = new Set([...RESERVED_STANDARD_CLAIMS, CREATED_AT_ATTR, UPDATED_AT_ATTR])
 
 const AvailableClaimsPanel = ({
   searchClaims,
diff --git a/admin-ui/plugins/user-management/components/UserClaimEntry.tsx b/admin-ui/plugins/user-management/components/UserClaimEntry.tsx
index fafe2a15db..81eaed9c7d 100644
--- a/admin-ui/plugins/user-management/components/UserClaimEntry.tsx
+++ b/admin-ui/plugins/user-management/components/UserClaimEntry.tsx
@@ -6,21 +6,14 @@ import GluuAutocomplete from 'Routes/Apps/Gluu/GluuAutocomplete'
 import { Close as CloseIcon } from '@/components/icons'
 import { countries } from 'Plugins/user-management/common/countries'
 import { JANS_ADMIN_UI_ROLE_ATTR } from '@/constants'
-import { COUNTRY_ATTR } from '../common'
+import { COUNTRY_ATTR, BIRTHDATE_ATTR } from '../common'
 import { getClaimLabel, getClaimLabelKey } from '../utils/claimLabelUtils'
 import { useGetAllAdminuiRoles } from 'JansConfigApi'
 import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { useStyles } from './UserClaimEntry.style'
 import { UserClaimEntryProps } from '../types'
-const UserClaimEntry = ({
-  data,
-  entry,
-  formik,
-  handler,
-  modifiedFields,
-  setModifiedFields,
-}: UserClaimEntryProps) => {
+const UserClaimEntry = ({ data, entry, formik, handler }: UserClaimEntryProps) => {
   const { t } = useTranslation()
   const { state: themeState } = useTheme()
   const themeColors = useMemo(() => getThemeColor(themeState.theme), [themeState.theme])
@@ -61,22 +54,8 @@ const UserClaimEntry = ({
     (next: string[]) => {
       formik.setFieldValue(data.name, next)
       formik.setFieldTouched(data.name, true, false)
-      const initial = formik.initialValues[data.name]
-      const initialArr = Array.isArray(initial)
-        ? (initial as string[]).filter((v): v is string => typeof v === 'string')
-        : []
-      const isSameAsInitial =
-        next.length === initialArr.length && next.every((v, i) => v === initialArr[i])
-      setModifiedFields((prev) => {
-        if (isSameAsInitial) {
-          const rest = { ...prev }
-          delete rest[data.name]
-          return rest
-        }
-        return { ...prev, [data.name]: next }
-      })
     },
-    [data.name, formik, setModifiedFields],
+    [data.name, formik],
   )
 
   if (data.oxMultiValuedAttribute) {
@@ -127,8 +106,6 @@ const UserClaimEntry = ({
           value={String(formik.values[data.name] ?? '')}
           values={countries}
           formik={formik as React.ComponentProps<typeof GluuRemovableSelectRow>['formik']}
-          modifiedFields={modifiedFields}
-          setModifiedFields={setModifiedFields}
           handler={doHandle}
           lsize={12}
         />
@@ -136,24 +113,24 @@ const UserClaimEntry = ({
     )
   }
 
+  const isBoolean = data?.dataType?.toLowerCase() === 'boolean'
+  const isDate = data?.dataType?.toLowerCase() === 'date' || data.name === BIRTHDATE_ATTR
+
   return (
     <div key={entry}>
       <GluuRemovableInputRow
         label={claimLabelKey}
         name={data.name}
+        type={isDate ? 'date' : 'text'}
         isDirect={true}
         value={
-          data?.dataType?.toLowerCase() === 'boolean'
-            ? Boolean(formik.values[data.name])
-            : String(formik.values[data.name] ?? '')
+          isBoolean ? Boolean(formik.values[data.name]) : String(formik.values[data.name] ?? '')
         }
         formik={formik}
         handler={doHandle}
-        modifiedFields={modifiedFields}
-        setModifiedFields={setModifiedFields}
         doc_category={typeof data.description === 'string' ? data.description : undefined}
         lsize={12}
-        isBoolean={data?.dataType?.toLowerCase() === 'boolean'}
+        isBoolean={isBoolean}
       />
     </div>
   )
diff --git a/admin-ui/plugins/user-management/components/UserEditPage.tsx b/admin-ui/plugins/user-management/components/UserEditPage.tsx
index dd8f89fdc0..1ad47a1605 100644
--- a/admin-ui/plugins/user-management/components/UserEditPage.tsx
+++ b/admin-ui/plugins/user-management/components/UserEditPage.tsx
@@ -162,7 +162,6 @@ const UserEditPage = () => {
         baseCustomAttributes,
         modifiedFields,
         personAttributes,
-        userDetails,
       )
       const standardFieldValues = getStandardFieldValues(values, standardFields)
 
diff --git a/admin-ui/plugins/user-management/components/UserForm.style.ts b/admin-ui/plugins/user-management/components/UserForm.style.ts
index 58e9b952fe..d6f6bb457f 100644
--- a/admin-ui/plugins/user-management/components/UserForm.style.ts
+++ b/admin-ui/plugins/user-management/components/UserForm.style.ts
@@ -154,7 +154,7 @@ export const useStyles = makeStyles<UserFormStylesParams>()((_, { isDark, themeC
       display: 'flex',
       justifyContent: 'flex-start',
       alignItems: 'center',
-      paddingTop: SPACING.CARD_CONTENT_GAP,
+      paddingTop: 16,
     },
     dynamicClaimsWrap: {
       'display': 'flex',
diff --git a/admin-ui/plugins/user-management/components/UserForm.tsx b/admin-ui/plugins/user-management/components/UserForm.tsx
index 786e39b935..7c0b55f313 100644
--- a/admin-ui/plugins/user-management/components/UserForm.tsx
+++ b/admin-ui/plugins/user-management/components/UserForm.tsx
@@ -18,12 +18,12 @@ import GluuThemeFormFooter from 'Routes/Apps/Gluu/GluuThemeFormFooter'
 import UserClaimEntry from './UserClaimEntry'
 import PasswordChangeModal from './PasswordChangeModal'
 import AvailableClaimsPanel from './AvailableClaimsPanel'
-import { buildFormOperations, shouldDisableApplyButton, isEmptyValue } from '../utils'
+import { buildFormOperations, diffFormValues } from '../utils'
+import { getClaimLabel } from '../utils/claimLabelUtils'
 import type {
   FormFieldValue,
   UserFormProps,
   FormOperation,
-  ModifiedFields,
   UserEditFormValues,
   PersonAttribute,
 } from '../types'
@@ -47,7 +47,6 @@ const UserForm = ({
   const [selectedClaims, setSelectedClaims] = useState<PersonAttribute[]>([])
   const [modal, setModal] = useState(false)
   const [changePasswordModal, setChangePasswordModal] = useState(false)
-  const [modifiedFields, setModifiedFields] = useState<ModifiedFields>({})
   const [operations, setOperations] = useState<FormOperation[]>([])
 
   const personAttributesKey = useMemo(
@@ -97,21 +96,24 @@ const UserForm = ({
     onSubmit: () => {},
   })
 
+  const changedFields = useMemo(
+    () => diffFormValues(formik.values, formik.initialValues, ['userConfirmPassword']),
+    [formik.values, formik.initialValues],
+  )
+  const hasChanges = Object.keys(changedFields).length > 0
+
   const toggle = useCallback(() => {
     setModal((prev) => !prev)
   }, [])
 
   const handleApply = useCallback(() => {
-    const hasModifiedFields = Object.keys(modifiedFields).length > 0
-    const isFormChanged = formik.dirty || hasModifiedFields
-
-    if (isSubmitting || !isFormChanged || !formik.isValid) {
+    if (isSubmitting || !hasChanges || !formik.isValid) {
       return
     }
 
-    setOperations(buildFormOperations(modifiedFields))
+    setOperations(buildFormOperations(changedFields))
     toggle()
-  }, [isSubmitting, formik.dirty, formik.isValid, modifiedFields, toggle])
+  }, [isSubmitting, hasChanges, formik.isValid, changedFields, toggle])
 
   const handleNavigateBack = useCallback(() => {
     navigateBack(ROUTES.USER_MANAGEMENT)
@@ -120,7 +122,6 @@ const UserForm = ({
   const handleCancel = useCallback(() => {
     const resetValues = initializeCustomAttributes(userDetails || null, memoizedPersonAttributes)
     formik.resetForm({ values: resetValues })
-    setModifiedFields({})
     setSelectedClaims([])
     if (userDetails) {
       setupCustomAttributes(userDetails, memoizedPersonAttributes, [], setSelectedClaims)
@@ -139,9 +140,9 @@ const UserForm = ({
       if (isSubmitting) {
         return Promise.resolve()
       }
-      return onSubmitData(formik.values, modifiedFields, usermessage)
+      return onSubmitData(formik.values, changedFields, usermessage)
     },
-    [onSubmitData, formik.values, modifiedFields, isSubmitting],
+    [onSubmitData, formik.values, changedFields, isSubmitting],
   )
 
   const setSelectedClaimsToState = useCallback((data: PersonAttribute) => {
@@ -165,75 +166,16 @@ const UserForm = ({
     initializedRef.current = `${userKey}-${attrsKey}`
   }, [userDetails?.inum, personAttributesKey, memoizedPersonAttributes, setSelectedClaims])
 
-  const resetFormToInitialCustomAttributes = useCallback(() => {
-    const resetValues = initializeCustomAttributes(userDetails || null, memoizedPersonAttributes)
-    formik.resetForm({ values: resetValues })
-  }, [formik, memoizedPersonAttributes, userDetails])
-
-  const prevModifiedFieldsLengthRef = useRef<number>(0)
-
-  useEffect(() => {
-    const currentLength = Object.keys(modifiedFields).length
-    const prevLength = prevModifiedFieldsLengthRef.current
-
-    if (prevLength > 0 && currentLength === 0) {
-      resetFormToInitialCustomAttributes()
-    }
-
-    prevModifiedFieldsLengthRef.current = currentLength
-  }, [modifiedFields, resetFormToInitialCustomAttributes])
-
-  const updateModifiedFields = useCallback((name: string, value: FormFieldValue) => {
-    setModifiedFields((prev) => {
-      if (isEmptyValue(value) && !Array.isArray(value)) {
-        const rest = { ...prev }
-        delete rest[name]
-        return rest
-      } else {
-        return {
-          ...prev,
-          [name]: value as string | string[] | boolean,
-        }
-      }
-    })
-  }, [])
-
   const removeSelectedClaimsFromState = useCallback(
     (id: string) => {
       const attributeDef = memoizedPersonAttributes.find((attr) => attr.name === id)
       const isMultiValued = attributeDef?.oxMultiValuedAttribute
       const isBoolean = attributeDef?.dataType?.toLowerCase() === 'boolean'
 
-      if (isMultiValued) {
-        formik.setFieldValue(id, [])
-      } else if (isBoolean) {
-        formik.setFieldValue(id, false)
-      } else {
-        formik.setFieldValue(id, '')
-      }
-      updateModifiedFields(id, isMultiValued ? [] : '')
+      formik.setFieldValue(id, isMultiValued ? [] : isBoolean ? false : '')
       setSelectedClaims((prev) => prev.filter((data) => data.name !== id))
     },
-    [formik, memoizedPersonAttributes, updateModifiedFields],
-  )
-
-  const setModifiedFieldsWrapper = useCallback(
-    (fields: React.SetStateAction<Record<string, string | string[] | boolean>>) => {
-      setModifiedFields((prev) => {
-        const newFields = typeof fields === 'function' ? fields(prev) : fields
-        const cleanedFields: Record<string, string | string[] | boolean> = {}
-
-        for (const [key, value] of Object.entries(newFields)) {
-          // Preserve empty arrays as they represent intentional clearing of multi-valued fields
-          if (!isEmptyValue(value) || Array.isArray(value)) {
-            cleanedFields[key] = value
-          }
-        }
-
-        return cleanedFields
-      })
-    },
-    [],
+    [formik, memoizedPersonAttributes],
   )
 
   const handleChange = useCallback(
@@ -245,14 +187,19 @@ const UserForm = ({
       const { name, value } = e.target
       formik.setFieldValue(name, value)
       formik.setFieldTouched(name, true, false)
-      updateModifiedFields(name, value)
     },
-    [formik, updateModifiedFields],
+    [formik],
   )
 
   const commitDialogOperations = useMemo(
-    () => operations.map(({ path, value }) => ({ path, value })),
-    [operations],
+    () =>
+      operations.map(({ path, value }) => {
+        const attributeDef = memoizedPersonAttributes.find((attr) => attr.name === path)
+        const displayName =
+          typeof attributeDef?.displayName === 'string' ? attributeDef.displayName : undefined
+        return { path, value, label: getClaimLabel(t, path, displayName) }
+      }),
+    [operations, memoizedPersonAttributes, t],
   )
 
   return (
@@ -464,8 +411,6 @@ const UserForm = ({
                       data={data}
                       formik={formik}
                       handler={removeSelectedClaimsFromState}
-                      setModifiedFields={setModifiedFieldsWrapper}
-                      modifiedFields={modifiedFields}
                     />
                   ))}
                 </div>
@@ -509,17 +454,10 @@ const UserForm = ({
           onBack={handleNavigateBack}
           showCancel
           onCancel={handleCancel}
-          disableCancel={
-            isSubmitting || (!formik.dirty && Object.keys(modifiedFields).length === 0)
-          }
+          disableCancel={isSubmitting || !hasChanges}
           showApply
           onApply={handleApply}
-          disableApply={shouldDisableApplyButton(
-            isSubmitting,
-            formik.dirty,
-            formik.isValid,
-            modifiedFields,
-          )}
+          disableApply={isSubmitting || !hasChanges || !formik.isValid}
           applyButtonType="button"
           isLoading={isSubmitting}
         />
diff --git a/admin-ui/plugins/user-management/types/ComponentTypes.ts b/admin-ui/plugins/user-management/types/ComponentTypes.ts
index 0981c271a0..4b214379e4 100644
--- a/admin-ui/plugins/user-management/types/ComponentTypes.ts
+++ b/admin-ui/plugins/user-management/types/ComponentTypes.ts
@@ -31,8 +31,6 @@ export type UserClaimEntryProps = {
   entry: string | number
   formik: FormikProps<UserFormValues>
   handler: (name: string) => void
-  modifiedFields: ModifiedFields
-  setModifiedFields: React.Dispatch<React.SetStateAction<ModifiedFields>>
 }
 
 export type UserFormProps = {
diff --git a/admin-ui/plugins/user-management/utils/attributeTransformUtils.ts b/admin-ui/plugins/user-management/utils/attributeTransformUtils.ts
index 2f9b9e64c5..40a97ce36e 100644
--- a/admin-ui/plugins/user-management/utils/attributeTransformUtils.ts
+++ b/admin-ui/plugins/user-management/utils/attributeTransformUtils.ts
@@ -9,7 +9,6 @@ import {
   ModifiedFieldValue,
   ValueExtractionRecord,
   PersonAttribute,
-  CustomUser,
   CustomAttribute,
   AttributeValue,
 } from '../types'
@@ -104,14 +103,6 @@ export const isMultiValuedAttribute = (attributeDef?: PersonAttribute): boolean
   return Boolean(attributeDef?.oxMultiValuedAttribute)
 }
 
-const hadOriginalValue = (originalAttr?: CustomAttribute): boolean => {
-  if (!originalAttr) return false
-  return Boolean(
-    (originalAttr.values && originalAttr.values.length > 0) ||
-    (originalAttr.value !== undefined && originalAttr.value !== null),
-  )
-}
-
 export const processMultiValuedField = (
   modifiedValue: ModifiedFieldValue,
 ): (string | boolean)[] => {
@@ -186,7 +177,6 @@ export const updateCustomAttributesWithModifiedFields = (
   customAttributes: CustomAttribute[],
   modifiedFields: ModifiedFields,
   personAttributes: PersonAttribute[],
-  originalUserDetails?: CustomUser | null,
 ): CustomAttribute[] => {
   const attributeMap = createAttributeMap(personAttributes)
   const result: CustomAttribute[] = [...customAttributes]
@@ -209,23 +199,14 @@ export const updateCustomAttributesWithModifiedFields = (
       }
     } else {
       const valueToStore = processSingleValuedField(modifiedValue, isBoolean)
-      const originalAttr = originalUserDetails?.customAttributes?.find(
-        (attr) => attr.name === attributeName,
-      )
-      const hadOriginal = hadOriginalValue(originalAttr)
+      const isCleared = !isBoolean && valueToStore === ''
+      const valuesToSet: AttributeValue[] = isCleared ? [] : [valueToStore]
 
       const existingAttr = result.find((attr) => attr.name === attributeName)
       if (existingAttr) {
-        if (isBoolean || valueToStore !== '' || hadOriginal) {
-          existingAttr.values = [valueToStore]
-        } else {
-          const index = result.indexOf(existingAttr)
-          if (index > -1) {
-            result.splice(index, 1)
-          }
-        }
-      } else if (isBoolean || valueToStore !== '' || hadOriginal) {
-        result.push(createCustomAttribute(attributeName, [valueToStore], false))
+        existingAttr.values = valuesToSet
+      } else {
+        result.push(createCustomAttribute(attributeName, valuesToSet, false))
       }
     }
   })
diff --git a/admin-ui/plugins/user-management/utils/formValidationUtils.ts b/admin-ui/plugins/user-management/utils/formValidationUtils.ts
index 796b9ab437..f276c4a36c 100644
--- a/admin-ui/plugins/user-management/utils/formValidationUtils.ts
+++ b/admin-ui/plugins/user-management/utils/formValidationUtils.ts
@@ -1,4 +1,9 @@
-import type { ModifiedFields, FormFieldValue } from '../types'
+import type {
+  ModifiedFields,
+  ModifiedFieldValue,
+  FormFieldValue,
+  UserEditFormValues,
+} from '../types'
 
 export const isEmptyValue = (value: FormFieldValue): boolean => {
   if (value === null || value === undefined) return true
@@ -7,6 +12,40 @@ export const isEmptyValue = (value: FormFieldValue): boolean => {
   return false
 }
 
+const valuesEqual = (a: FormFieldValue, b: FormFieldValue): boolean => {
+  if (isEmptyValue(a) && isEmptyValue(b)) return true
+  if (Array.isArray(a) || Array.isArray(b)) {
+    const aArr = Array.isArray(a) ? a : []
+    const bArr = Array.isArray(b) ? b : []
+    return aArr.length === bArr.length && aArr.every((value, index) => value === bArr[index])
+  }
+  return a === b
+}
+
+const toModifiedValue = (value: FormFieldValue): ModifiedFieldValue => {
+  if (Array.isArray(value))
+    return value.filter((entry): entry is string => typeof entry === 'string')
+  if (typeof value === 'boolean') return value
+  return value == null ? '' : String(value)
+}
+
+export const diffFormValues = (
+  values: UserEditFormValues,
+  initialValues: UserEditFormValues,
+  ignoreKeys: readonly string[] = [],
+): ModifiedFields => {
+  const ignore = new Set(ignoreKeys)
+  const result: ModifiedFields = {}
+  const keys = new Set([...Object.keys(initialValues), ...Object.keys(values)])
+  for (const key of keys) {
+    if (ignore.has(key)) continue
+    if (!valuesEqual(values[key], initialValues[key])) {
+      result[key] = toModifiedValue(values[key])
+    }
+  }
+  return result
+}
+
 export const shouldDisableApplyButton = (
   isSubmitting: boolean,
   isDirty: boolean,
diff --git a/admin-ui/plugins/user-management/utils/userFormUtils.ts b/admin-ui/plugins/user-management/utils/userFormUtils.ts
index d06a2bd181..b91b590c85 100644
--- a/admin-ui/plugins/user-management/utils/userFormUtils.ts
+++ b/admin-ui/plugins/user-management/utils/userFormUtils.ts
@@ -6,17 +6,7 @@ import {
 } from '@/utils/regex'
 import { JansAttribute, PagedResultEntriesItem } from 'JansConfigApi'
 
-import {
-  USER_PASSWORD_ATTR,
-  USER_ID_ATTR,
-  DISPLAY_NAME_ATTR,
-  MAIL_ATTR,
-  STATUS_ATTR,
-  GIVEN_NAME_ATTR,
-  MIDDLE_NAME_ATTR,
-  SN_ATTR,
-  EMAIL_VERIFIED_ATTR,
-} from '../common'
+import { RESERVED_STANDARD_CLAIMS, EMAIL_VERIFIED_ATTR } from '../common'
 import { PersonAttribute, ExtendedCustomUser } from '../types'
 
 export const validatePassword = (password: string): boolean => {
@@ -46,16 +36,7 @@ export const setupCustomAttributes = (
 ) => {
   if (!userDetails?.customAttributes) return
 
-  const usedClaims = new Set([
-    USER_ID_ATTR,
-    DISPLAY_NAME_ATTR,
-    MAIL_ATTR,
-    STATUS_ATTR,
-    USER_PASSWORD_ATTR,
-    GIVEN_NAME_ATTR,
-    MIDDLE_NAME_ATTR,
-    SN_ATTR,
-  ])
+  const usedClaims = new Set(RESERVED_STANDARD_CLAIMS)
 
   const attributeMap = new Map(personAttributes.map((attr) => [attr.name, attr]))