diff --git a/admin-ui/.markdownlint-cli2.cjs b/admin-ui/.markdownlint-cli2.cjs
index 7bff800cd8..5c33274984 100644
--- a/admin-ui/.markdownlint-cli2.cjs
+++ b/admin-ui/.markdownlint-cli2.cjs
@@ -10,6 +10,7 @@ module.exports = {
     'dist',
     'coverage',
     'jans_config_api_orval',
+    'jans_config_api',
     '.husky/_',
     '.claude',
     'CHANGELOG.md',
diff --git a/admin-ui/app/components/Accordion/AccordionIndicator.tsx b/admin-ui/app/components/Accordion/AccordionIndicator.tsx
index 11460d713b..28e122f95e 100755
--- a/admin-ui/app/components/Accordion/AccordionIndicator.tsx
+++ b/admin-ui/app/components/Accordion/AccordionIndicator.tsx
@@ -1,12 +1,14 @@
-import React, { ReactNode } from 'react'
+import React, { type ReactElement } from 'react'
 import clsx from 'clsx'
 import { Add, Remove } from '@/components/icons'
 
 import { Consumer } from './context'
 
-interface AccordionIndicatorProps {
-  open?: ReactNode
-  closed?: ReactNode
+type IndicatorElement = ReactElement<{ className?: string }>
+
+type AccordionIndicatorProps = {
+  open?: IndicatorElement
+  closed?: IndicatorElement
   className?: string
 }
 
@@ -16,14 +18,11 @@ export const AccordionIndicator: React.FC<AccordionIndicatorProps> = ({
   className,
 }) => (
   <Consumer>
-    {({ isOpen }) =>
-      isOpen
-        ? React.cloneElement(open as React.ReactElement, {
-            className: clsx(className, (open as React.ReactElement).props.className),
-          })
-        : React.cloneElement(closed as React.ReactElement, {
-            className: clsx(className, (closed as React.ReactElement).props.className),
-          })
-    }
+    {({ isOpen }) => {
+      const indicator = isOpen ? open : closed
+      return React.cloneElement(indicator, {
+        className: clsx(className, indicator.props.className),
+      })
+    }}
   </Consumer>
 )
diff --git a/admin-ui/app/components/App/AppMain.tsx b/admin-ui/app/components/App/AppMain.tsx
index cbbe105b07..2fb4295ac0 100755
--- a/admin-ui/app/components/App/AppMain.tsx
+++ b/admin-ui/app/components/App/AppMain.tsx
@@ -1,12 +1,22 @@
 import { BrowserRouter as Router } from 'react-router-dom'
+import { ErrorBoundary } from 'react-error-boundary'
 import AuthenticatedRouteSelector from './AuthenticatedRouteSelector'
+import GluuErrorScreen from 'Routes/Apps/Gluu/GluuErrorScreen'
+import logUiCrash from '@/utils/logUiCrash'
 
 const basePath = process.env.BASE_PATH ?? '/admin'
 
 const AppMain = () => {
   return (
     <Router basename={basePath}>
-      <AuthenticatedRouteSelector />
+      <ErrorBoundary
+        FallbackComponent={GluuErrorScreen}
+        onError={(error, info) =>
+          logUiCrash(error instanceof Error ? error : new Error(String(error)), info.componentStack)
+        }
+      >
+        <AuthenticatedRouteSelector />
+      </ErrorBoundary>
     </Router>
   )
 }
diff --git a/admin-ui/app/components/BootstrapWrappers/index.tsx b/admin-ui/app/components/BootstrapWrappers/index.tsx
index d6e0a18396..d6c91ff015 100644
--- a/admin-ui/app/components/BootstrapWrappers/index.tsx
+++ b/admin-ui/app/components/BootstrapWrappers/index.tsx
@@ -134,10 +134,7 @@ export const Alert: React.FC<AlertProps> = ({
   )
 }
 
-export const Input = React.forwardRef<
-  HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
-  InputProps
->(({ type = 'text', className, children, ...props }, ref) => {
+export const Input = ({ ref, type = 'text', className, children, ...props }: InputProps) => {
   if (type === 'select') {
     return (
       <select
@@ -170,7 +167,7 @@ export const Input = React.forwardRef<
       {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
     />
   )
-})
+}
 Input.displayName = 'Input'
 
 const bootstrapColorToMui = (
diff --git a/admin-ui/app/components/BootstrapWrappers/types.ts b/admin-ui/app/components/BootstrapWrappers/types.ts
index 087da86991..3986f48e38 100644
--- a/admin-ui/app/components/BootstrapWrappers/types.ts
+++ b/admin-ui/app/components/BootstrapWrappers/types.ts
@@ -44,16 +44,19 @@ export type AlertProps = React.HTMLAttributes<HTMLDivElement> & {
 type StandardInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children'> & {
   type?: Exclude<React.HTMLInputTypeAttribute, 'select' | 'textarea'>
   children?: React.ReactNode
+  ref?: React.Ref<HTMLInputElement>
 }
 
 type SelectInputProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
   type: 'select'
   children?: React.ReactNode
+  ref?: React.Ref<HTMLSelectElement>
 }
 
 type TextareaInputProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
   type: 'textarea'
   children?: React.ReactNode
+  ref?: React.Ref<HTMLTextAreaElement>
 }
 
 export type InputProps = StandardInputProps | SelectInputProps | TextareaInputProps
diff --git a/admin-ui/app/components/GluuDropdown/GluuDropdown.tsx b/admin-ui/app/components/GluuDropdown/GluuDropdown.tsx
index 1ee0d57960..14fb2917ec 100644
--- a/admin-ui/app/components/GluuDropdown/GluuDropdown.tsx
+++ b/admin-ui/app/components/GluuDropdown/GluuDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useContext, useMemo, useCallback, useId } from 'react'
+import React, { useState, useRef, useEffect, use, useMemo, useCallback, useId } from 'react'
 import Box from '@mui/material/Box'
 import { ThemeContext } from 'Context/theme/themeContext'
 import { THEME_DARK, DEFAULT_THEME } from '@/context/theme/constants'
@@ -44,7 +44,7 @@ export const GluuDropdown = <T extends DropdownValue = DropdownValue>({
   const searchInputRef = useRef<HTMLInputElement>(null)
   const listboxId = useId()
 
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const currentTheme = theme?.state.theme || DEFAULT_THEME
   const isDark = currentTheme === THEME_DARK
   const dropdownBg = useMemo(() => {
@@ -68,7 +68,7 @@ export const GluuDropdown = <T extends DropdownValue = DropdownValue>({
   const extractTextFromReactNode = useCallback((node: React.ReactNode): string => {
     if (typeof node === 'string') return node
     if (typeof node === 'number') return String(node)
-    if (React.isValidElement(node) && node.props.children) {
+    if (React.isValidElement<{ children?: React.ReactNode }>(node) && node.props.children) {
       const { children } = node.props
       if (Array.isArray(children)) {
         return children.map((child) => extractTextFromReactNode(child)).join('')
diff --git a/admin-ui/app/components/GluuModalShell/GluuModalShell.tsx b/admin-ui/app/components/GluuModalShell/GluuModalShell.tsx
index 2d5b924708..5e9f71a1b0 100644
--- a/admin-ui/app/components/GluuModalShell/GluuModalShell.tsx
+++ b/admin-ui/app/components/GluuModalShell/GluuModalShell.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useMemo } from 'react'
+import React, { useCallback, use, useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { Close } from '@/components/icons'
@@ -15,7 +15,7 @@ const GluuModalShell = ({
   children,
 }: GluuModalShellProps) => {
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const selectedTheme = theme?.state?.theme ?? DEFAULT_THEME
   const isDark = selectedTheme === THEME_DARK
   const themeColors = useMemo(() => getThemeColor(selectedTheme), [selectedTheme])
diff --git a/admin-ui/app/components/GluuPageContent/GluuPageContent.tsx b/admin-ui/app/components/GluuPageContent/GluuPageContent.tsx
index 7807757ced..8b7a9233dc 100644
--- a/admin-ui/app/components/GluuPageContent/GluuPageContent.tsx
+++ b/admin-ui/app/components/GluuPageContent/GluuPageContent.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useContext, useMemo } from 'react'
+import React, { memo, use, useMemo } from 'react'
 import { ThemeContext } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { DEFAULT_THEME } from '@/context/theme/constants'
@@ -8,7 +8,7 @@ import type { GluuPageContentProps } from './types'
 
 const GluuPageContent: React.FC<GluuPageContentProps> = memo(
   ({ children, className, withVerticalPadding = true, maxWidth, backgroundColor }) => {
-    const themeContext = useContext(ThemeContext)
+    const themeContext = use(ThemeContext)
     const currentTheme = useMemo(
       () => themeContext?.state.theme || DEFAULT_THEME,
       [themeContext?.state.theme],
diff --git a/admin-ui/app/components/GluuTable/GluuTable.style.ts b/admin-ui/app/components/GluuTable/GluuTable.style.ts
index 27cd75717d..17f1e6c753 100644
--- a/admin-ui/app/components/GluuTable/GluuTable.style.ts
+++ b/admin-ui/app/components/GluuTable/GluuTable.style.ts
@@ -146,21 +146,22 @@ export const useStyles = makeStyles<GluuTableStyleParams>()((
     headerCellActions: {
       textAlign: 'center',
     },
+    headerCellSortable: {
+      padding: 0,
+    },
     sortableHeader: {
       'cursor': 'pointer',
       'display': 'flex',
       'alignItems': 'center',
       'justifyContent': 'flex-start',
-      'position': 'absolute',
-      'left': 0,
-      'top': 0,
-      'right': 6,
-      'bottom': 0,
-      'width': 'auto',
+      'width': '100%',
       'padding': '14px 16px',
+      'paddingRight': 20,
+      'boxSizing': 'border-box',
       'background': 'none',
       'border': 'none',
       'font': 'inherit',
+      'lineHeight': '28px',
       'color': headerColor,
       'textAlign': 'inherit',
       '&:hover [data-sort-icon]': {
@@ -178,7 +179,8 @@ export const useStyles = makeStyles<GluuTableStyleParams>()((
       display: 'inline-flex',
       alignItems: 'center',
       opacity: OPACITY.NONE,
-      transition: 'opacity 0.15s ease',
+      transformOrigin: 'center',
+      transition: 'opacity 0.15s ease, transform 0.2s ease',
     },
     cell: {
       padding: '14px 16px',
diff --git a/admin-ui/app/components/GluuTable/GluuTable.tsx b/admin-ui/app/components/GluuTable/GluuTable.tsx
index 7fe6f783d0..19aa06a346 100644
--- a/admin-ui/app/components/GluuTable/GluuTable.tsx
+++ b/admin-ui/app/components/GluuTable/GluuTable.tsx
@@ -4,7 +4,6 @@ import { ExpandMore as ExpandMoreIcon } from '@/components/icons'
 import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { THEME_DARK } from '@/context/theme/constants'
-import { ICON_SIZE } from '@/constants'
 import GluuText from '@/routes/Apps/Gluu/GluuText'
 import { GluuButton } from '@/components/GluuButton'
 import { GluuSpinner } from '@/components/GluuSpinner'
@@ -12,6 +11,7 @@ import { useStyles, TABLE_MIN_WIDTH, TABLE_RESPONSIVE_BREAKPOINT } from './GluuT
 import { T_KEYS, EMPTY_CELL_PLACEHOLDER } from './constants'
 import type { CellValue, ColumnKey, GluuTableProps, SortDirection } from './types'
 import { ChevronIcon } from '@/components/SVG'
+import { ICON_SIZE } from '@/constants'
 import {
   getDefaultPagingSize,
   getRowsPerPageOptions,
@@ -401,13 +401,9 @@ const GluuTable = <T,>(props: Readonly<GluuTableProps<T>>) => {
   const handleSort = useCallback((columnKey: string) => {
     setSortState((prev) => {
       const isSameColumn = prev.column === columnKey
-      const nextDirection: SortDirection = !isSameColumn
-        ? 'asc'
-        : prev.direction === 'asc'
-          ? 'desc'
-          : null
+      const nextDirection: SortDirection = isSameColumn && prev.direction === 'asc' ? 'desc' : 'asc'
       return {
-        column: nextDirection ? columnKey : null,
+        column: columnKey,
         direction: nextDirection,
       }
     })
@@ -510,7 +506,11 @@ const GluuTable = <T,>(props: Readonly<GluuTableProps<T>>) => {
                     <th
                       ref={(el) => setHeaderCellRef(id, el)}
                       key={`${id}-${colIdx}`}
-                      className={`${classes.headerCell} ${classes.headerCellResizable}`}
+                      className={
+                        isSortable
+                          ? `${classes.headerCell} ${classes.headerCellSortable}`
+                          : `${classes.headerCell} ${classes.headerCellResizable}`
+                      }
                       style={{
                         width: effectiveWidths[id],
                         ...(parseMinWidth(col) != null && { minWidth: parseMinWidth(col) }),
@@ -529,12 +529,17 @@ const GluuTable = <T,>(props: Readonly<GluuTableProps<T>>) => {
                           onClick={() => handleSort(id)}
                         >
                           {col.label}
-                          <span className={classes.sortIconWrap} data-sort-icon>
-                            <ChevronIcon
-                              width={14}
-                              height={14}
-                              direction={isActive && sortState.direction === 'asc' ? 'up' : 'down'}
-                            />
+                          <span
+                            className={classes.sortIconWrap}
+                            data-sort-icon
+                            style={{
+                              transform:
+                                isActive && sortState.direction === 'asc'
+                                  ? 'rotate(180deg)'
+                                  : 'rotate(0deg)',
+                            }}
+                          >
+                            <ChevronIcon width={14} height={14} />
                           </span>
                         </button>
                       ) : (
@@ -542,23 +547,25 @@ const GluuTable = <T,>(props: Readonly<GluuTableProps<T>>) => {
                           {col.label}
                         </GluuText>
                       )}
-                      <div
-                        role="separator"
-                        aria-orientation="vertical"
-                        aria-label="Resize column"
-                        className={classes.resizeHandle}
-                        onMouseDown={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                          handleResizeStart(id, e.clientX, e.currentTarget)
-                        }}
-                        onTouchStart={(e) => {
-                          e.preventDefault()
-                          if (e.touches.length > 0) {
-                            handleResizeStart(id, e.touches[0].clientX, e.currentTarget)
-                          }
-                        }}
-                      />
+                      {(colIdx < columns.length - 1 || (actions?.length ?? 0) > 0) && (
+                        <div
+                          role="separator"
+                          aria-orientation="vertical"
+                          aria-label="Resize column"
+                          className={classes.resizeHandle}
+                          onMouseDown={(e) => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                            handleResizeStart(id, e.clientX, e.currentTarget)
+                          }}
+                          onTouchStart={(e) => {
+                            e.preventDefault()
+                            if (e.touches.length > 0) {
+                              handleResizeStart(id, e.touches[0].clientX, e.currentTarget)
+                            }
+                          }}
+                        />
+                      )}
                     </th>
                   )
                 })}
diff --git a/admin-ui/app/components/GluuTable/__tests__/GluuTable.test.tsx b/admin-ui/app/components/GluuTable/__tests__/GluuTable.test.tsx
new file mode 100644
index 0000000000..162d70a041
--- /dev/null
+++ b/admin-ui/app/components/GluuTable/__tests__/GluuTable.test.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import GluuTable from '@/components/GluuTable/GluuTable'
+import type { ColumnDef } from '@/components/GluuTable/types'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <AppTestWrapper>{children}</AppTestWrapper>
+)
+
+type Row = {
+  id: string
+  name: string
+  count: number
+}
+
+const columns: ColumnDef<Row>[] = [
+  { key: 'name', label: 'Name' },
+  { key: 'count', label: 'Count' },
+]
+
+const data: Row[] = [
+  { id: 'a', name: 'Charlie', count: 3 },
+  { id: 'b', name: 'Alpha', count: 1 },
+  { id: 'c', name: 'Bravo', count: 2 },
+]
+
+const getRows = (): HTMLElement[] =>
+  screen
+    .getAllByRole('row')
+    .filter(
+      (row) => within(row).queryAllByRole('cell').length > 0 && !row.getAttribute('aria-hidden'),
+    )
+
+const getNameColumnOrder = (): string[] =>
+  getRows()
+    .map((row) => within(row).queryAllByRole('cell')[0]?.textContent?.trim())
+    .filter((v): v is string => !!v)
+
+describe('GluuTable', () => {
+  it('renders all rows and column headers', () => {
+    render(<GluuTable columns={columns} data={data} />, { wrapper: Wrapper })
+    expect(screen.getByText('Name')).toBeInTheDocument()
+    expect(screen.getByText('Count')).toBeInTheDocument()
+    expect(screen.getByText('Charlie')).toBeInTheDocument()
+    expect(screen.getByText('Alpha')).toBeInTheDocument()
+    expect(screen.getByText('Bravo')).toBeInTheDocument()
+  })
+
+  it('renders the empty message when there is no data', () => {
+    render(<GluuTable columns={columns} data={[]} emptyMessage="Nothing here" />, {
+      wrapper: Wrapper,
+    })
+    expect(screen.getByText('Nothing here')).toBeInTheDocument()
+  })
+
+  it('sorts ascending on first header click and toggles to descending on second click (never clears)', () => {
+    render(<GluuTable columns={columns} data={data} />, { wrapper: Wrapper })
+    const nameHeader = screen.getByRole('button', { name: /Name/i })
+
+    fireEvent.click(nameHeader)
+    expect(getNameColumnOrder()).toEqual(['Alpha', 'Bravo', 'Charlie'])
+
+    fireEvent.click(nameHeader)
+    expect(getNameColumnOrder()).toEqual(['Charlie', 'Bravo', 'Alpha'])
+
+    // third click stays sorted (2-state cycle: asc <-> desc, no clear back to insertion order)
+    fireEvent.click(nameHeader)
+    expect(getNameColumnOrder()).toEqual(['Alpha', 'Bravo', 'Charlie'])
+  })
+
+  it('keeps the last column resize handle hidden when there are no actions', () => {
+    render(<GluuTable columns={columns} data={data} />, { wrapper: Wrapper })
+    const resizeHandles = screen.getAllByRole('separator', { name: /Resize column/i })
+    // 2 columns, no actions -> only the first column gets a resize handle
+    expect(resizeHandles).toHaveLength(columns.length - 1)
+  })
+
+  it('shows a resize handle on every column when actions are present', () => {
+    const actions = [{ icon: 'icon', tooltip: 'Edit', onClick: jest.fn() }]
+    render(<GluuTable columns={columns} data={data} actions={actions} />, { wrapper: Wrapper })
+    const resizeHandles = screen.getAllByRole('separator', { name: /Resize column/i })
+    expect(resizeHandles).toHaveLength(columns.length)
+  })
+})
diff --git a/admin-ui/app/components/Layout/Layout.tsx b/admin-ui/app/components/Layout/Layout.tsx
index 3a9ff4d068..5b97cf7b1c 100755
--- a/admin-ui/app/components/Layout/Layout.tsx
+++ b/admin-ui/app/components/Layout/Layout.tsx
@@ -218,7 +218,7 @@ const Layout: React.FC<LayoutProps> = (props) => {
   const layoutClass = clsx('layout', 'layout--animations-enabled')
 
   return (
-    <PageConfigContext.Provider
+    <PageConfigContext
       value={{
         ...state,
         sidebarSlim: false,
@@ -233,10 +233,13 @@ const Layout: React.FC<LayoutProps> = (props) => {
           <div className={clsx(layoutClass, themeClass)} ref={containerRef}>
             {!state.sidebarHidden &&
               sidebar &&
-              React.cloneElement(sidebar, {
-                sidebarSlim: false,
-                sidebarCollapsed: state.sidebarCollapsed,
-              })}
+              React.cloneElement(
+                sidebar as React.ReactElement<{
+                  sidebarSlim?: boolean
+                  sidebarCollapsed?: boolean
+                }>,
+                { sidebarSlim: false, sidebarCollapsed: state.sidebarCollapsed },
+              )}
 
             <div className="layout__wrap">
               {!state.navbarHidden && navbars}
@@ -248,7 +251,7 @@ const Layout: React.FC<LayoutProps> = (props) => {
           </div>
         )}
       </ThemeClass>
-    </PageConfigContext.Provider>
+    </PageConfigContext>
   )
 }
 
diff --git a/admin-ui/app/components/Layout/LayoutContent.tsx b/admin-ui/app/components/Layout/LayoutContent.tsx
index 33defc30f9..2e3e0bac81 100755
--- a/admin-ui/app/components/Layout/LayoutContent.tsx
+++ b/admin-ui/app/components/Layout/LayoutContent.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react'
+import React, { use, useEffect, useMemo, useRef } from 'react'
 import { ThemeContext } from '@/context/theme/themeContext'
 import getThemeColor, { themeConfig } from '@/context/theme/config'
 import customColors, { getCustomColorsAsCssVars, getLoadingOverlayRgba } from '@/customColors'
@@ -7,7 +7,7 @@ import { THEME_LIGHT, THEME_DARK } from '@/context/theme/constants'
 import type { LayoutContentProps } from './types'
 
 const LayoutContent: React.FC<LayoutContentProps> & { layoutPartName: string } = ({ children }) => {
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   if (!theme) {
     throw new Error('ThemeContext must be used within a ThemeProvider')
   }
diff --git a/admin-ui/app/components/Layout/LayoutNavbar.tsx b/admin-ui/app/components/Layout/LayoutNavbar.tsx
index c8b08f830d..7a8430f7ca 100755
--- a/admin-ui/app/components/Layout/LayoutNavbar.tsx
+++ b/admin-ui/app/components/Layout/LayoutNavbar.tsx
@@ -14,7 +14,11 @@ const LayoutNavbar: LayoutNavbarComponent = (props) => {
     throw new Error('LayoutNavbar expects a single valid React element as a child')
   }
 
-  return <div className="layout__navbar">{React.cloneElement(child, { fixed: null })}</div>
+  return (
+    <div className="layout__navbar">
+      {React.cloneElement(child as React.ReactElement<{ fixed?: boolean | null }>, { fixed: null })}
+    </div>
+  )
 }
 
 LayoutNavbar.layoutPartName = 'navbar'
diff --git a/admin-ui/app/components/Layout/withPageConfig.tsx b/admin-ui/app/components/Layout/withPageConfig.tsx
index deb48db369..c54a4aa358 100755
--- a/admin-ui/app/components/Layout/withPageConfig.tsx
+++ b/admin-ui/app/components/Layout/withPageConfig.tsx
@@ -1,14 +1,13 @@
-import React from 'react'
+import React, { use } from 'react'
 import { PageConfigContext } from './PageConfigContext'
 import type { PageConfig } from './types'
 
 export const withPageConfig = <P extends { pageConfig?: PageConfig | null }>(
   Component: React.ComponentType<P>,
 ): React.ComponentType<Omit<P, 'pageConfig'>> => {
-  const WithPageConfig: React.FC<Omit<P, 'pageConfig'>> = (props) => (
-    <PageConfigContext.Consumer>
-      {(pageConfig) => <Component {...(props as P)} pageConfig={pageConfig} />}
-    </PageConfigContext.Consumer>
-  )
+  const WithPageConfig: React.FC<Omit<P, 'pageConfig'>> = (props) => {
+    const pageConfig = use(PageConfigContext)
+    return <Component {...(props as P)} pageConfig={pageConfig} />
+  }
   return WithPageConfig as React.ComponentType<Omit<P, 'pageConfig'>>
 }
diff --git a/admin-ui/app/components/LicenseScreens/ApiKey.tsx b/admin-ui/app/components/LicenseScreens/ApiKey.tsx
index faf639fe01..3fb8fe545b 100644
--- a/admin-ui/app/components/LicenseScreens/ApiKey.tsx
+++ b/admin-ui/app/components/LicenseScreens/ApiKey.tsx
@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react'
+import { use, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import logo from 'Images/logos/logo192.png'
 import { Box } from '@mui/material'
@@ -13,7 +13,7 @@ import useStyles from './LicenseScreen.style'
 
 const ApiKey = () => {
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const currentTheme = theme?.state?.theme ?? DEFAULT_THEME
   const themeColors = useMemo(() => getThemeColor(currentTheme), [currentTheme])
   const { classes } = useStyles({ themeColors })
diff --git a/admin-ui/app/components/LicenseScreens/GenerateLicenseCard.tsx b/admin-ui/app/components/LicenseScreens/GenerateLicenseCard.tsx
index 0ec6387167..484b17ba74 100644
--- a/admin-ui/app/components/LicenseScreens/GenerateLicenseCard.tsx
+++ b/admin-ui/app/components/LicenseScreens/GenerateLicenseCard.tsx
@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react'
+import { use, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Card from '@mui/material/Card'
 import CardActions from '@mui/material/CardActions'
@@ -15,7 +15,7 @@ import useStyles from './GenerateLicenseCard.style'
 const GenerateLicenseCard = () => {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const currentTheme = theme?.state?.theme ?? DEFAULT_THEME
   const themeColors = useMemo(() => getThemeColor(currentTheme), [currentTheme])
   const { classes } = useStyles({ themeColors })
diff --git a/admin-ui/app/components/ModalLayer/ModalLayer.tsx b/admin-ui/app/components/ModalLayer/ModalLayer.tsx
index f885a2ff90..d5be339e50 100644
--- a/admin-ui/app/components/ModalLayer/ModalLayer.tsx
+++ b/admin-ui/app/components/ModalLayer/ModalLayer.tsx
@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react'
+import { use, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ThemeContext } from 'Context/theme/themeContext'
 import { DEFAULT_THEME, THEME_DARK } from '@/context/theme/constants'
@@ -8,7 +8,7 @@ import type { ModalLayerProps } from './types'
 
 const ModalLayer = ({ onClose, overlayClassName, children }: ModalLayerProps) => {
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const selectedTheme = theme?.state?.theme ?? DEFAULT_THEME
   const isDark = selectedTheme === THEME_DARK
   const themeColors = useMemo(() => getThemeColor(selectedTheme), [selectedTheme])
diff --git a/admin-ui/app/components/Notifications/index.tsx b/admin-ui/app/components/Notifications/index.tsx
index f152f10516..670007fad2 100644
--- a/admin-ui/app/components/Notifications/index.tsx
+++ b/admin-ui/app/components/Notifications/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react'
+import React, { use, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import { OPACITY } from '@/constants'
@@ -14,7 +14,7 @@ const LIGHT_ICON_FILTER =
 
 const Notifications = () => {
   const { t } = useTranslation()
-  const themeContext = useContext(ThemeContext)
+  const themeContext = use(ThemeContext)
 
   const currentTheme = useMemo(() => {
     return themeContext?.state?.theme || DEFAULT_THEME
diff --git a/admin-ui/app/components/SidebarMenu/SidebarMenu.tsx b/admin-ui/app/components/SidebarMenu/SidebarMenu.tsx
index 925764be10..ffc50e8249 100755
--- a/admin-ui/app/components/SidebarMenu/SidebarMenu.tsx
+++ b/admin-ui/app/components/SidebarMenu/SidebarMenu.tsx
@@ -1,12 +1,4 @@
-import React, {
-  ReactNode,
-  useState,
-  useRef,
-  useEffect,
-  useMemo,
-  useContext,
-  useCallback,
-} from 'react'
+import React, { ReactNode, useState, useRef, useEffect, useMemo, use, useCallback } from 'react'
 import { useLocation } from 'react-router-dom'
 import find from 'lodash/find'
 import includes from 'lodash/includes'
@@ -37,7 +29,7 @@ interface SidebarMenuProps {
 
 const SidebarMenu: React.FC<SidebarMenuProps> = ({ children, slim, disabled }) => {
   const location = useLocation()
-  const pageConfig = useContext(PageConfigContext)
+  const pageConfig = use(PageConfigContext)
   const containerRef = useRef<HTMLUListElement>(null)
   const [entries, setEntries] = useState<Record<string, SidebarMenuEntry>>({})
   const entriesRef = useRef(entries)
@@ -156,7 +148,7 @@ const SidebarMenu: React.FC<SidebarMenuProps> = ({ children, slim, disabled }) =
   )
 
   return (
-    <MenuContext.Provider value={contextValue}>
+    <MenuContext value={contextValue}>
       <ul className={sidebarMenuClass} ref={containerRef}>
         {React.Children.map(children, (child) => {
           if (React.isValidElement(child)) {
@@ -174,7 +166,7 @@ const SidebarMenu: React.FC<SidebarMenuProps> = ({ children, slim, disabled }) =
           return child
         })}
       </ul>
-    </MenuContext.Provider>
+    </MenuContext>
   )
 }
 
diff --git a/admin-ui/app/components/SidebarMenu/SidebarMenuItem.tsx b/admin-ui/app/components/SidebarMenu/SidebarMenuItem.tsx
index b38f824ad1..c9e00cdb69 100755
--- a/admin-ui/app/components/SidebarMenu/SidebarMenuItem.tsx
+++ b/admin-ui/app/components/SidebarMenu/SidebarMenuItem.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, MouseEvent, useEffect, useId, useContext, useMemo } from 'react'
+import React, { CSSProperties, MouseEvent, useEffect, useId, use, useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import clsx from 'clsx'
 import { MenuContext } from './MenuContext'
@@ -13,9 +13,6 @@ import type {
   SidebarMenuItemProps,
 } from './types'
 
-/**
- * Renders a collapse trigger or a ReactRouter Link
- */
 const SidebarMenuItemLink: React.FC<SidebarMenuItemLinkProps> = (props) => {
   return props.to || props.href ? (
     props.to !== 'logout' ? (
@@ -80,8 +77,8 @@ export const SidebarMenuItem: React.FC<SidebarMenuItemProps> = ({
   sidebarMenuActiveClass,
   isEmptyNode = false,
 }) => {
-  const { entries, addEntry, updateEntry, removeEntry } = useContext(MenuContext)
-  const theme = useContext(ThemeContext)
+  const { entries, addEntry, updateEntry, removeEntry } = use(MenuContext)
+  const theme = use(ThemeContext)
   const selectedTheme = theme?.state.theme || DEFAULT_THEME
   const id = useId()
 
@@ -173,8 +170,11 @@ export const SidebarMenuItem: React.FC<SidebarMenuItemProps> = ({
           handleClick={handleClick}
         >
           {icon &&
-            React.cloneElement(icon, {
-              className: clsx(icon.props.className, `${classBase}__entry__icon`),
+            React.cloneElement(icon as React.ReactElement<{ className?: string; fill?: string }>, {
+              className: clsx(
+                (icon as React.ReactElement<{ className?: string }>).props.className,
+                `${classBase}__entry__icon`,
+              ),
               fill: iconFillColor,
             })}
           {typeof title === 'string' ? <span style={textStyle}>{title}</span> : title}
@@ -205,13 +205,16 @@ export const SidebarMenuItem: React.FC<SidebarMenuItemProps> = ({
               <MenuContext.Consumer>
                 {(ctx: SidebarMenuContext) =>
                   React.isValidElement(child)
-                    ? React.cloneElement(child, {
-                        isSubNode: true,
-                        parentId: id,
-                        currentUrl,
-                        slim,
-                        ...ctx,
-                      })
+                    ? React.cloneElement(
+                        child as React.ReactElement<SidebarMenuItemProps & SidebarMenuContext>,
+                        {
+                          isSubNode: true,
+                          parentId: id,
+                          currentUrl,
+                          slim,
+                          ...ctx,
+                        },
+                      )
                     : child
                 }
               </MenuContext.Consumer>
diff --git a/admin-ui/app/components/Wizard/Wizard.tsx b/admin-ui/app/components/Wizard/Wizard.tsx
index 03653ce2ac..2825a44df3 100755
--- a/admin-ui/app/components/Wizard/Wizard.tsx
+++ b/admin-ui/app/components/Wizard/Wizard.tsx
@@ -65,14 +65,16 @@ class Wizard extends React.Component<WizardProps, WizardState> {
 
     return (
       <div className="wizard">
-        {map(children as React.ReactElement[], (child, index) =>
-          React.cloneElement(child, {
-            onClick: () => {
-              this.stepClick(child.props.id || '')
-            },
-            active: child.props.id === activeStep,
-            key: index,
-          }),
+        {map(
+          children as React.ReactElement<{ id?: string; onClick?: () => void; active?: boolean }>[],
+          (child, index) =>
+            React.cloneElement(child, {
+              onClick: () => {
+                this.stepClick(child.props.id || '')
+              },
+              active: child.props.id === activeStep,
+              key: index,
+            }),
         )}
       </div>
     )
diff --git a/admin-ui/app/components/icons/index.ts b/admin-ui/app/components/icons/index.ts
index 56b0f5add2..395d8baa55 100644
--- a/admin-ui/app/components/icons/index.ts
+++ b/admin-ui/app/components/icons/index.ts
@@ -2,6 +2,7 @@ export { default as AccessTimeIcon } from '@mui/icons-material/AccessTime'
 export { default as Add } from '@mui/icons-material/Add'
 export { default as CachedIcon } from '@mui/icons-material/Cached'
 export { default as Check } from '@mui/icons-material/Check'
+export { default as CheckCircle } from '@mui/icons-material/CheckCircle'
 export { default as CheckCircleOutline } from '@mui/icons-material/CheckCircleOutlineOutlined'
 export { default as Close } from '@mui/icons-material/Close'
 export { default as Delete } from '@mui/icons-material/Delete'
@@ -30,4 +31,5 @@ export { default as Visibility } from '@mui/icons-material/Visibility'
 export { default as VisibilityOff } from '@mui/icons-material/VisibilityOff'
 export { default as VisibilityOffOutlined } from '@mui/icons-material/VisibilityOffOutlined'
 export { default as VisibilityOutlined } from '@mui/icons-material/VisibilityOutlined'
+export { default as Warning } from '@mui/icons-material/Warning'
 export { default as WarningAmberOutlined } from '@mui/icons-material/WarningAmberOutlined'
diff --git a/admin-ui/app/constants/index.ts b/admin-ui/app/constants/index.ts
index f6ac170919..3486ccab68 100644
--- a/admin-ui/app/constants/index.ts
+++ b/admin-ui/app/constants/index.ts
@@ -8,3 +8,4 @@ export * from './scriptTypes'
 export * from './adminUiFeatures'
 export * from './authMethods'
 export * from './userAttributes'
+export * from './links'
diff --git a/admin-ui/app/constants/links.ts b/admin-ui/app/constants/links.ts
new file mode 100644
index 0000000000..3b24595097
--- /dev/null
+++ b/admin-ui/app/constants/links.ts
@@ -0,0 +1,3 @@
+export const EXTERNAL_LINKS = {
+  SUPPORT: 'https://gluu.org/',
+} as const
diff --git a/admin-ui/app/context/theme/themeContext.tsx b/admin-ui/app/context/theme/themeContext.tsx
index 50d660a75b..54c9600a27 100644
--- a/admin-ui/app/context/theme/themeContext.tsx
+++ b/admin-ui/app/context/theme/themeContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useReducer, useContext, useEffect, useRef, type ReactNode } from 'react'
+import { createContext, useReducer, use, useEffect, useRef, type ReactNode } from 'react'
 import { DEFAULT_THEME, isValidTheme, type ThemeValue } from './constants'
 import { logger } from '@/utils/logger'
 import { storage } from '@/utils/storage'
@@ -158,11 +158,11 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
     document.documentElement.classList.add(`theme-${state.theme}`)
   }, [state.theme])
 
-  return <ThemeContext.Provider value={{ state, dispatch }}>{props.children}</ThemeContext.Provider>
+  return <ThemeContext value={{ state, dispatch }}>{props.children}</ThemeContext>
 }
 
 export const useTheme = (): ThemeContextType => {
-  const context = useContext(ThemeContext)
+  const context = use(ThemeContext)
   if (!context) {
     throw new Error('useTheme must be used within a ThemeProvider')
   }
diff --git a/admin-ui/app/helpers/navigation.ts b/admin-ui/app/helpers/navigation.ts
index 7680f58ec8..9a07fd33a3 100644
--- a/admin-ui/app/helpers/navigation.ts
+++ b/admin-ui/app/helpers/navigation.ts
@@ -140,7 +140,6 @@ const ROUTES = {
 
   PROFILE: '/profile',
   LOGOUT: '/admin/logout',
-  ERROR_404: '/error-404',
 
   // ========== Wildcard routes ==========
   WILDCARD: '/*',
diff --git a/admin-ui/app/i18n.ts b/admin-ui/app/i18n.ts
index 2768cf3e03..8edb75a269 100644
--- a/admin-ui/app/i18n.ts
+++ b/admin-ui/app/i18n.ts
@@ -6,7 +6,7 @@ import { isDevelopment } from './utils/env'
 import { logger } from './utils/logger'
 import { storage } from '@/utils/storage'
 import { hmrAccept } from '@/utils/hmr'
-import { toast } from 'react-toastify'
+import { updateToast } from '@/redux/features/toastSlice'
 import { STORAGE_KEYS, LANG_CODES, DEFAULT_LANG } from '@/constants'
 
 const LAZY_LOCALE_LOADERS: Record<string, () => Promise<{ default: typeof translationEn }>> = {
@@ -15,16 +15,25 @@ const LAZY_LOCALE_LOADERS: Record<string, () => Promise<{ default: typeof transl
   [LANG_CODES.PT]: () => import('./locales/pt/translation.json'),
 }
 
+const warnedMissingKeys = new Set<string>()
+
 const handleMissingKey = (key: string, defaultValue?: string): string => {
   logger.error(
     `[i18n] Missing translation key: "${key}"`,
     defaultValue !== undefined ? `(default: "${defaultValue}")` : '',
   )
-  if (isDevelopment) {
-    toast.warning(`[i18n] Missing translation key: "${key}"`, {
-      autoClose: 5000,
-      toastId: `i18n-missing-${key}`,
-    })
+  if (isDevelopment && !warnedMissingKeys.has(key)) {
+    warnedMissingKeys.add(key)
+    void import('@/redux/store')
+      .then(({ default: store }) => {
+        store.dispatch(updateToast(true, 'warning', `[i18n] Missing translation key: "${key}"`))
+      })
+      .catch((error) => {
+        logger.error(
+          '[i18n] Failed to load store for missing-key toast:',
+          error instanceof Error ? error : String(error),
+        )
+      })
   }
   return defaultValue ?? key
 }
diff --git a/admin-ui/app/layout/default.tsx b/admin-ui/app/layout/default.tsx
index 11684304f1..039d17850a 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.scss'
 
 import { RoutedNavbars, RoutedSidebars } from '../routes'
 
diff --git a/admin-ui/app/locales/en/translation.json b/admin-ui/app/locales/en/translation.json
index 5ddef39dcb..235e4475df 100644
--- a/admin-ui/app/locales/en/translation.json
+++ b/admin-ui/app/locales/en/translation.json
@@ -34,6 +34,8 @@
     "apply_filter": "Apply Filter",
     "back": "Back",
     "back_home": "Back Home",
+    "back_to_home": "Back to home",
+    "support_portal": "Support Portal",
     "cancel": "Cancel",
     "currentMonth": "Current Month",
     "currentYear": "Current Year",
@@ -947,6 +949,8 @@
     "both_dates_required": "Both start and end dates are required for date range filtering",
     "success": "Success",
     "error": "Error",
+    "warning": "Warning",
+    "info": "Information",
     "success_in_saving": "Changes saved successfully",
     "fido_config_updated_successfully": "FIDO configuration updated successfully",
     "fido_config_update_failed": "Failed to update FIDO configuration",
@@ -1051,6 +1055,10 @@
     "request_waiting_message": "Performing the request, please wait!",
     "resource_not_found_message": "The requested resource doesn't exist on this server. Please contact the site administrator or the support team.",
     "resource_not_found_title": "Resource not found",
+    "crash_title": "Something went wrong\non our end",
+    "crash_message": "The Gluu Admin UI encountered an unexpected issue while processing your request. Please try again or contact support.",
+    "crash_footer_pre": "© {{year}} Gluu Admin UI · Designed and implemented by",
+    "crash_footer_post": "· All rights reserved.",
     "view_client_details": "View client details",
     "view_2FA_details": "View 2FA details",
     "2FA_details": "2FA details",
@@ -1571,9 +1579,6 @@
     "search_filter": "Search Filter",
     "uma_resource_detail": "UMA Resource Detail"
   },
-  "links": {
-    "support": "https://support.gluu.org/"
-  },
   "options": {
     "admin": "ADMIN",
     "active": "ACTIVE",
diff --git a/admin-ui/app/locales/es/translation.json b/admin-ui/app/locales/es/translation.json
index e968893d53..c50403330a 100644
--- a/admin-ui/app/locales/es/translation.json
+++ b/admin-ui/app/locales/es/translation.json
@@ -34,6 +34,8 @@
     "apply_filter": "Aplicar filtro",
     "back": "Atrás",
     "back_home": "Volver al inicio",
+    "back_to_home": "Volver al inicio",
+    "support_portal": "Portal de soporte",
     "cancel": "Cancelar",
     "currentMonth": "Mes actual",
     "currentYear": "Año actual",
@@ -953,6 +955,8 @@
     "both_dates_required": "Las fechas de inicio y fin son obligatorias para el filtrado por rango de fechas",
     "success": "Éxito",
     "error": "Error",
+    "warning": "Advertencia",
+    "info": "Información",
     "success_in_saving": "Cambios guardados correctamente",
     "fido_config_updated_successfully": "Configuración FIDO actualizada correctamente",
     "fido_config_update_failed": "Error al actualizar la configuración FIDO",
@@ -1058,6 +1062,10 @@
     "request_waiting_message": "Realizando la solicitud, por favor espere...",
     "resource_not_found_message": "El recurso solicitado no existe en este servidor. Contacte al administrador del sitio o al equipo de soporte.",
     "resource_not_found_title": "Recurso no encontrado",
+    "crash_title": "Algo salió mal\nde nuestro lado",
+    "crash_message": "La interfaz de administración de Gluu encontró un problema inesperado al procesar tu solicitud. Inténtalo de nuevo o contacta con soporte.",
+    "crash_footer_pre": "© {{year}} Gluu Admin UI · Diseñado e implementado por",
+    "crash_footer_post": "· Todos los derechos reservados.",
     "view_client_details": "Ver detalles del cliente",
     "view_2FA_details": "Ver detalles de 2FA",
     "2FA_details": "Detalles de 2FA",
@@ -1574,9 +1582,6 @@
     "passkey_authentication": "Autenticación con Passkey",
     "passkey_metrics_dashboard": "Panel de Métricas de Passkey"
   },
-  "links": {
-    "support": "https://support.gluu.org/"
-  },
   "options": {
     "admin": "ADMIN",
     "active": "ACTIVO",
diff --git a/admin-ui/app/locales/fr/translation.json b/admin-ui/app/locales/fr/translation.json
index 094c40bf3b..89abe471f3 100644
--- a/admin-ui/app/locales/fr/translation.json
+++ b/admin-ui/app/locales/fr/translation.json
@@ -176,6 +176,8 @@
     "apply_filter": "Appliquer le filtre",
     "back": "Retour",
     "back_home": "Retour à la maison",
+    "back_to_home": "Retour à l'accueil",
+    "support_portal": "Portail d'assistance",
     "cancel": "Annuler",
     "clear": "Effacer",
     "clear_search": "Effacer la recherche",
@@ -1027,6 +1029,10 @@
     "request_waiting_message": "Exécution de la demande, veuillez patienter !",
     "resource_not_found_message": "La ressource demandée n'existe pas sur ce serveur. Veuillez contacter l'administrateur du site ou l'équipe d'assistance.",
     "resource_not_found_title": "Ressource introuvable",
+    "crash_title": "Une erreur s'est produite\nde notre côté",
+    "crash_message": "L'interface d'administration Gluu a rencontré un problème inattendu lors du traitement de votre demande. Réessayez ou contactez le support.",
+    "crash_footer_pre": "© {{year}} Gluu Admin UI · Conçu et mis en œuvre par",
+    "crash_footer_post": "· Tous droits réservés.",
     "view_client_details": "Afficher les détails du client",
     "view_2FA_details": "Afficher les détails de la 2FA",
     "2FA_details": "les détails de la 2FA",
@@ -1148,6 +1154,8 @@
     "try_again_later": "Veuillez réessayer plus tard",
     "success": "Succès",
     "error": "Erreur",
+    "warning": "Avertissement",
+    "info": "Information",
     "error_processing_request": "Erreur lors du traitement de la demande.",
     "no_data": "Aucune donnée trouvée",
     "no_data_available": "Aucune donnée disponible",
@@ -1579,9 +1587,6 @@
     "creation_date": "Creation Date",
     "uma_resource_detail": "Détail de la ressource UMA"
   },
-  "links": {
-    "support": "https://support.gluu.org/"
-  },
   "options": {
     "admin": "ADMINISTRER",
     "active": "ACTIF",
diff --git a/admin-ui/app/locales/pt/translation.json b/admin-ui/app/locales/pt/translation.json
index 3e077d2de7..f6e7346e1f 100644
--- a/admin-ui/app/locales/pt/translation.json
+++ b/admin-ui/app/locales/pt/translation.json
@@ -175,6 +175,8 @@
     "apply_filter": "Aplicar filtro",
     "back": "Voltar",
     "back_home": "Voltar para casa",
+    "back_to_home": "Voltar para o início",
+    "support_portal": "Portal de suporte",
     "add_server": "Adicionar servidor",
     "add_base_dn": "Adicionar DN básico",
     "change_bind_password": "Alterar Senha de Vinculação",
@@ -1024,6 +1026,10 @@
     "request_waiting_message": "Executando a solicitação, aguarde!",
     "resource_not_found_message": "O recurso solicitado não existe neste servidor. Entre em contato com o administrador do site ou com a equipe de suporte.",
     "resource_not_found_title": "Recurso não encontrado",
+    "crash_title": "Algo deu errado\ndo nosso lado",
+    "crash_message": "A interface de administração do Gluu encontrou um problema inesperado ao processar sua solicitação. Tente novamente ou entre em contato com o suporte.",
+    "crash_footer_pre": "© {{year}} Gluu Admin UI · Projetado e implementado por",
+    "crash_footer_post": "· Todos os direitos reservados.",
     "view_client_details": "Ver detalhes do cliente",
     "view_2FA_details": "Ver detalhes 2FA",
     "2FA_details": "detalhes 2FA",
@@ -1140,6 +1146,8 @@
     "try_again_later": "Por favor, tente novamente mais tarde",
     "success": "Sucesso",
     "error": "Erro",
+    "warning": "Aviso",
+    "info": "Informação",
     "error_processing_request": "Erro ao processar a solicitação.",
     "no_data": "Nenhum dado encontrado",
     "no_data_available": "Nenhum dado disponível",
@@ -1575,9 +1583,6 @@
     "passkey_authentication": "Autenticação com Passkey",
     "passkey_metrics_dashboard": "Painel de Métricas de Passkey"
   },
-  "links": {
-    "support": "https://support.gluu.org/"
-  },
   "options": {
     "admin": "ADMIN",
     "active": "ATIVO",
diff --git a/admin-ui/app/redux/api/axios.ts b/admin-ui/app/redux/api/axios.ts
index f843e40409..faea6b1992 100644
--- a/admin-ui/app/redux/api/axios.ts
+++ b/admin-ui/app/redux/api/axios.ts
@@ -8,7 +8,9 @@ declare global {
 }
 
 const windowUrl =
-  window.configApiBaseUrl && !REGEX_PYTHON_PLACEHOLDER.test(window.configApiBaseUrl)
+  typeof window !== 'undefined' &&
+  window.configApiBaseUrl &&
+  !REGEX_PYTHON_PLACEHOLDER.test(window.configApiBaseUrl)
     ? window.configApiBaseUrl
     : undefined
 
diff --git a/admin-ui/app/routes/Apps/Gluu/Gluu404Error.tsx b/admin-ui/app/routes/Apps/Gluu/Gluu404Error.tsx
index 82ea108005..a29c4d9fa6 100644
--- a/admin-ui/app/routes/Apps/Gluu/Gluu404Error.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/Gluu404Error.tsx
@@ -4,6 +4,7 @@ import { HeaderAuth } from 'Routes/components/Pages/HeaderAuth'
 import { FooterAuth } from 'Routes/components/Pages/FooterAuth'
 import { useTranslation } from 'react-i18next'
 import { ROUTES } from '@/helpers/navigation'
+import { EXTERNAL_LINKS } from '@/constants'
 import { useStyles } from './styles/Gluu404Error.style'
 
 const Gluu404Error = () => {
@@ -18,8 +19,13 @@ const Gluu404Error = () => {
         />
         <div className={classes.linkRow}>
           <Link to={ROUTES.ROOT}>{t('actions.back_home')}</Link>
-          <Link to={ROUTES.ROOT} className={classes.supportLink}>
-            {t('links.support')}
+          <Link
+            to={EXTERNAL_LINKS.SUPPORT}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={classes.supportLink}
+          >
+            {t('actions.support_portal')}
           </Link>
         </div>
         <FooterAuth />
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuAlert.tsx b/admin-ui/app/routes/Apps/Gluu/GluuAlert.tsx
index 66b6d29dde..3e4efebc1b 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuAlert.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuAlert.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import Snackbar from '@mui/material/Snackbar'
 import styles from './styles/GluuAlert.style'
-import MuiAlert, { AlertProps } from '@mui/material/Alert'
-import type { GluuAlertProps } from './types'
+import MuiAlert from '@mui/material/Alert'
+import type { GluuAlertProps, GluuMuiAlertProps } from './types'
 
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
-  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
-})
+const Alert = ({ ref, ...props }: GluuMuiAlertProps) => (
+  <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+)
 
 const GluuAlert = ({ severity, message, show }: GluuAlertProps) => {
   const { classes } = styles()
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.tsx b/admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.tsx
index be96f48355..6e238db7e5 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.tsx
@@ -1,8 +1,6 @@
-import React, { useState, useEffect, useContext, useMemo, useCallback, useRef } from 'react'
+import React, { useState, useEffect, use, useMemo, useCallback, useRef, type JSX } from 'react'
 import { SidebarMenu, SidebarMenuItem } from 'Components'
 import { useAppSelector } from '@/redux/hooks'
-import { ErrorBoundary } from 'react-error-boundary'
-import GluuErrorFallBack from './GluuErrorFallBack'
 import { processMenus } from 'Plugins/PluginMenuResolver'
 import { useTranslation } from 'react-i18next'
 import { ThemeContext } from 'Context/theme/themeContext'
@@ -73,7 +71,7 @@ const GluuAppSidebar = (): JSX.Element => {
   // ready once a load attempt has settled, so the loader can't spin forever
   const isReady = menusLoaded
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext) as ThemeContextState
+  const theme = use(ThemeContext) as ThemeContextState
   const selectedTheme = theme.state.theme
   const { classes } = styles()
   const { authorizeHelper } = useCedarling()
@@ -135,61 +133,59 @@ const GluuAppSidebar = (): JSX.Element => {
   }, [logoutAuditSucceeded, navigateToRoute])
 
   return (
-    <ErrorBoundary FallbackComponent={GluuErrorFallBack}>
-      <SidebarMenu>
-        {isReady ? (
-          <div
-            className={`${!didAnimateMenusRef.current ? classes.menuFadeIn : ''} ${classes.menuContainer}`}
-          >
-            <MenuContext.Consumer>
-              {(ctx: SidebarMenuContext) =>
-                pluginMenus.map((plugin, key) => (
-                  <SidebarMenuItem
-                    key={key}
-                    icon={getMenuIcon(plugin.icon)}
-                    to={getMenuPath(plugin)}
-                    title={t(`${plugin.title}`)}
-                    textStyle={{ fontSize: '18px' }}
-                    sidebarMenuActiveClass={sidebarMenuActiveClass}
-                    {...ctx}
-                  >
-                    {hasChildren(plugin) &&
-                      plugin.children!.map((item, idx) => (
-                        <SidebarMenuItem
-                          key={idx}
-                          title={t(`${item.title}`)}
-                          to={getMenuPath(item)}
-                          icon={getMenuIcon(item.icon)}
-                          textStyle={{ fontSize: '15px' }}
-                          exact
-                          {...ctx}
-                        >
-                          {hasChildren(item) &&
-                            item.children!.map((sub, id) => (
-                              <SidebarMenuItem
-                                key={id}
-                                title={t(`${sub.title}`)}
-                                to={getMenuPath(sub)}
-                                icon={getMenuIcon(sub.icon)}
-                                textStyle={{ fontSize: '15px' }}
-                                exact
-                                {...ctx}
-                              ></SidebarMenuItem>
-                            ))}
-                        </SidebarMenuItem>
-                      ))}
-                  </SidebarMenuItem>
-                ))
-              }
-            </MenuContext.Consumer>
-          </div>
-        ) : (
-          <div className={classes.loaderRoot}>
-            <GluuLoader blocking />
-          </div>
-        )}
-      </SidebarMenu>
-    </ErrorBoundary>
+    <SidebarMenu>
+      {isReady ? (
+        <div
+          className={`${!didAnimateMenusRef.current ? classes.menuFadeIn : ''} ${classes.menuContainer}`}
+        >
+          <MenuContext.Consumer>
+            {(ctx: SidebarMenuContext) =>
+              pluginMenus.map((plugin, key) => (
+                <SidebarMenuItem
+                  key={key}
+                  icon={getMenuIcon(plugin.icon)}
+                  to={getMenuPath(plugin)}
+                  title={t(`${plugin.title}`)}
+                  textStyle={{ fontSize: '18px' }}
+                  sidebarMenuActiveClass={sidebarMenuActiveClass}
+                  {...ctx}
+                >
+                  {hasChildren(plugin) &&
+                    plugin.children!.map((item, idx) => (
+                      <SidebarMenuItem
+                        key={idx}
+                        title={t(`${item.title}`)}
+                        to={getMenuPath(item)}
+                        icon={getMenuIcon(item.icon)}
+                        textStyle={{ fontSize: '15px' }}
+                        exact
+                        {...ctx}
+                      >
+                        {hasChildren(item) &&
+                          item.children!.map((sub, id) => (
+                            <SidebarMenuItem
+                              key={id}
+                              title={t(`${sub.title}`)}
+                              to={getMenuPath(sub)}
+                              icon={getMenuIcon(sub.icon)}
+                              textStyle={{ fontSize: '15px' }}
+                              exact
+                              {...ctx}
+                            ></SidebarMenuItem>
+                          ))}
+                      </SidebarMenuItem>
+                    ))}
+                </SidebarMenuItem>
+              ))
+            }
+          </MenuContext.Consumer>
+        </div>
+      ) : (
+        <div className={classes.loaderRoot}>
+          <GluuLoader blocking />
+        </div>
+      )}
+    </SidebarMenu>
   )
 }
 
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuDialog.tsx b/admin-ui/app/routes/Apps/Gluu/GluuDialog.tsx
index 11eb5c3ff0..94ab70bdef 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuDialog.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuDialog.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext, useMemo, useCallback } from 'react'
+import { useState, useEffect, use, useMemo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ThemeContext } from 'Context/theme/themeContext'
 import { DEFAULT_THEME, THEME_DARK } from '@/context/theme/constants'
@@ -25,7 +25,7 @@ const GluuDialog = ({ row, handler, modal, onAccept, subject, name, feature }: G
 
   const [userMessage, setUserMessage] = useState('')
   const webhookModal = useAppSelector((state) => state.webhookReducer?.webhookModal ?? false)
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const selectedTheme = theme?.state.theme || DEFAULT_THEME
   const isDark = selectedTheme === THEME_DARK
   const themeColors = useMemo(() => getThemeColor(selectedTheme), [selectedTheme])
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuErrorFallBack.tsx b/admin-ui/app/routes/Apps/Gluu/GluuErrorFallBack.tsx
deleted file mode 100644
index d7a8e037c0..0000000000
--- a/admin-ui/app/routes/Apps/Gluu/GluuErrorFallBack.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { FallbackProps } from 'react-error-boundary'
-
-const GluuErrorFallBack = ({ error }: FallbackProps) => (
-  <div role="alert">
-    <pre>{error instanceof Error ? error.message : String(error)}</pre>
-  </div>
-)
-
-export default GluuErrorFallBack
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuErrorScreen.tsx b/admin-ui/app/routes/Apps/Gluu/GluuErrorScreen.tsx
new file mode 100644
index 0000000000..8809b6024a
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/GluuErrorScreen.tsx
@@ -0,0 +1,104 @@
+import { use, useMemo } from 'react'
+import type { FallbackProps } from 'react-error-boundary'
+import { useTranslation } from 'react-i18next'
+import ArrowBack from '@mui/icons-material/ArrowBack'
+import OpenInNew from '@mui/icons-material/OpenInNew'
+import { EmptyLayout } from 'Components'
+import { LogoThemed } from 'Routes/components/LogoThemed/LogoThemed'
+import GluuText from 'Routes/Apps/Gluu/GluuText'
+import { GluuButton } from '@/components/GluuButton'
+import { ThemeContext } from 'Context/theme/themeContext'
+import { DEFAULT_THEME } from '@/context/theme/constants'
+import getThemeColor from '@/context/theme/config'
+import customColors from '@/customColors'
+import { EXTERNAL_LINKS } from '@/constants'
+import { isDevelopment } from '@/utils/env'
+import { createDate } from '@/utils/dayjsUtils'
+import { useStyles } from './styles/GluuErrorScreen.style'
+
+const basePath = process.env.BASE_PATH ?? '/admin'
+const currentYear = createDate().year()
+
+const GluuErrorScreen = ({ error }: FallbackProps) => {
+  const { t } = useTranslation()
+  const currentTheme = use(ThemeContext)?.state.theme ?? DEFAULT_THEME
+  const themeColors = useMemo(() => getThemeColor(currentTheme), [currentTheme])
+  const { classes } = useStyles({ themeColors })
+
+  return (
+    <EmptyLayout className={classes.screen}>
+      {isDevelopment && (
+        <details className={classes.errorOverlay}>
+          <summary className={classes.errorSummary}>{t('actions.show_error')}</summary>
+          <pre className={classes.errorStack}>
+            {error instanceof Error ? (error.stack ?? error.message) : String(error)}
+          </pre>
+        </details>
+      )}
+      <div className={classes.scroller}>
+        <div className={classes.root}>
+          <LogoThemed width={153} height={60} />
+          <svg
+            className={classes.ghost}
+            viewBox="0 0 90 106"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden
+          >
+            <path
+              d="M0 37.5V105.5L11 91L22.5 105.5L33.5 91L44.5 105.5L55.5 91L67.5 105.5L78 91L89.5 105.5V39.5C88.3 8.3 60 0.166667 46 0C13.2 0 1.66667 25 0 37.5Z"
+              fill={customColors.logo}
+            />
+            <circle cx="24.5" cy="40.5" r="9.5" fill={themeColors.background} />
+            <circle cx="65.5" cy="40.5" r="9.5" fill={themeColors.background} />
+          </svg>
+          <GluuText variant="h1" className={classes.title}>
+            {t('messages.crash_title')}
+          </GluuText>
+          <GluuText variant="p" secondary className={classes.message}>
+            {t('messages.crash_message')}
+          </GluuText>
+          <hr className={classes.divider} />
+          <div className={classes.actions}>
+            <GluuButton
+              backgroundColor={customColors.logo}
+              textColor={customColors.white}
+              borderColor={customColors.logo}
+              fontWeight={700}
+              minHeight={40}
+              padding="0 28px"
+              useOpacityOnHover
+              style={{ letterSpacing: '0.28px' }}
+              onClick={() => window.location.assign(basePath)}
+            >
+              <ArrowBack className={classes.buttonIcon} />
+              {t('actions.back_to_home')}
+            </GluuButton>
+            <GluuButton
+              outlined
+              textColor={themeColors.fontColor}
+              borderColor={themeColors.fontColor}
+              fontWeight={700}
+              minHeight={40}
+              padding="0 28px"
+              style={{ letterSpacing: '0.28px' }}
+              onClick={() => window.open(EXTERNAL_LINKS.SUPPORT, '_blank', 'noopener,noreferrer')}
+            >
+              <OpenInNew className={classes.buttonIconSmall} />
+              {t('actions.support_portal')}
+            </GluuButton>
+          </div>
+          <GluuText variant="p" secondary className={classes.footer}>
+            {t('messages.crash_footer_pre', { year: currentYear })}{' '}
+            <GluuText variant="span" className={classes.footerCompany}>
+              {t('footer.company_name')}
+            </GluuText>{' '}
+            {t('messages.crash_footer_post')}
+          </GluuText>
+        </div>
+      </div>
+    </EmptyLayout>
+  )
+}
+
+export default GluuErrorScreen
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuFormDetailRow.tsx b/admin-ui/app/routes/Apps/Gluu/GluuFormDetailRow.tsx
index 61e3aa0a1a..4c4de7f457 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuFormDetailRow.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuFormDetailRow.tsx
@@ -1,4 +1,4 @@
-import { memo, CSSProperties, useMemo, useContext } from 'react'
+import { memo, CSSProperties, useMemo, use } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FormGroup, Label, Badge, GluuBadge } from 'Components'
 import GluuTooltip from './GluuTooltip'
@@ -28,7 +28,7 @@ const GluuFormDetailRow = ({
   layout = 'row',
 }: GluuFormDetailRowProps) => {
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const selectedTheme = theme?.state?.theme || DEFAULT_THEME
   const themeColors = useMemo(() => getThemeColor(selectedTheme), [selectedTheme])
 
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuInlineInput.tsx b/admin-ui/app/routes/Apps/Gluu/GluuInlineInput.tsx
index 93b1bc1962..7b7118526a 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuInlineInput.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuInlineInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext, useCallback, useEffect, useMemo } from 'react'
+import React, { useState, use, useCallback, useEffect, useMemo } from 'react'
 import { Check, Close } from '@/components/icons'
 import { OPACITY } from '@/constants'
 import GluuLabel from './GluuLabel'
@@ -33,7 +33,7 @@ const GluuInlineInput = ({
   placeholder,
 }: GluuInlineInputProps) => {
   const { classes } = useStyles()
-  const theme = useContext(ThemeContext) as ThemeContextValue
+  const theme = use(ThemeContext) as ThemeContextValue
   const selectedTheme = theme.state.theme
   const [show, setShow] = useState(false)
   const [correctValue, setCorrectValue] = useState<string[]>([])
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuLoader.tsx b/admin-ui/app/routes/Apps/Gluu/GluuLoader.tsx
index 074c471e32..2538964b3d 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuLoader.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuLoader.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useContext } from 'react'
+import React, { memo, use } from 'react'
 import { GluuSpinner } from '@/components/GluuSpinner'
 import { ThemeContext } from '@/context/theme/themeContext'
 import { THEME_DARK, DEFAULT_THEME } from '@/context/theme/constants'
@@ -10,7 +10,7 @@ interface GluuLoaderProps {
 }
 
 const GluuLoader: React.FC<GluuLoaderProps> = memo(({ blocking, children }) => {
-  const themeContext = useContext(ThemeContext)
+  const themeContext = use(ThemeContext)
   const currentTheme = themeContext?.state.theme || DEFAULT_THEME
   const isDark = currentTheme === THEME_DARK
   const { classes } = useStyles({ isDark })
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuNavBar.tsx b/admin-ui/app/routes/Apps/Gluu/GluuNavBar.tsx
index ed4ed0c46b..26e5d49427 100755
--- a/admin-ui/app/routes/Apps/Gluu/GluuNavBar.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuNavBar.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useRef, useMemo, useCallback, memo } from 'react'
-import { ErrorBoundary } from 'react-error-boundary'
 import Box from '@mui/material/Box'
 import { Notifications, ChevronIcon } from 'Components'
 import GluuText from 'Routes/Apps/Gluu/GluuText'
@@ -7,7 +6,6 @@ import { DropdownProfile } from 'Routes/components/Dropdowns/DropdownProfile'
 import type { UserInfo } from 'Redux/features/types/authTypes'
 import { LanguageMenu } from './LanguageMenu'
 import { ThemeDropdownComponent } from './ThemeDropdown'
-import GluuErrorFallBack from './GluuErrorFallBack'
 import { UserIcon } from './components/UserIcon'
 import { useStyles } from './styles/GluuNavBar.style'
 import { useNavbarTheme } from './hooks/useNavbarTheme'
@@ -70,53 +68,49 @@ const GluuNavBar = () => {
   }, [userInfo])
 
   return (
-    <ErrorBoundary FallbackComponent={GluuErrorFallBack}>
-      <Box ref={navbarRef} className={`${classes.navbarWrapper} navbar-themed`}>
-        <Box className={classes.navbarContainer}>
-          <Box className={classes.leftSection}>
-            <GluuText
-              variant="h3"
-              className={classes.pageTitle}
-              id="page-title-navbar"
-              disableThemeColor
-            >
-              {pageTitle}
-            </GluuText>
+    <Box ref={navbarRef} className={`${classes.navbarWrapper} navbar-themed`}>
+      <Box className={classes.navbarContainer}>
+        <Box className={classes.leftSection}>
+          <GluuText
+            variant="h3"
+            className={classes.pageTitle}
+            id="page-title-navbar"
+            disableThemeColor
+          >
+            {pageTitle}
+          </GluuText>
+        </Box>
+        <Box className={classes.rightSection}>
+          <Box className={`${classes.navbarItem} ${classes.iconButton}`}>
+            <Notifications />
           </Box>
-          <Box className={classes.rightSection}>
-            <Box className={`${classes.navbarItem} ${classes.iconButton}`}>
-              <Notifications />
-            </Box>
-            {userInfo && (
-              <>
-                <Box className={`${classes.navbarItem} ${classes.languageMenuWrapper}`}>
-                  <ThemeDropdownComponent userInfo={userInfo} />
-                </Box>
-                <Box className={`${classes.navbarItem} ${classes.languageMenuWrapper}`}>
-                  <LanguageMenu userInfo={userInfo} />
+          {userInfo && (
+            <>
+              <Box className={`${classes.navbarItem} ${classes.languageMenuWrapper}`}>
+                <ThemeDropdownComponent userInfo={userInfo} />
+              </Box>
+              <Box className={`${classes.navbarItem} ${classes.languageMenuWrapper}`}>
+                <LanguageMenu userInfo={userInfo} />
+              </Box>
+            </>
+          )}
+          <DropdownProfile
+            renderTrigger={(isOpen: boolean) => (
+              <Box className={`${classes.navbarItem} ${classes.userProfileContainer}`}>
+                <UserIcon size={40} className={classes.userIcon} avatarUrl={avatarUrl} />
+                <GluuText variant="span" className={classes.userName} disableThemeColor>
+                  {displayName}
+                </GluuText>
+                <Box className={`${classes.userChevron} ${isOpen ? classes.userChevronOpen : ''}`}>
+                  <ChevronIcon />
                 </Box>
-              </>
+              </Box>
             )}
-            <DropdownProfile
-              renderTrigger={(isOpen: boolean) => (
-                <Box className={`${classes.navbarItem} ${classes.userProfileContainer}`}>
-                  <UserIcon size={40} className={classes.userIcon} avatarUrl={avatarUrl} />
-                  <GluuText variant="span" className={classes.userName} disableThemeColor>
-                    {displayName}
-                  </GluuText>
-                  <Box
-                    className={`${classes.userChevron} ${isOpen ? classes.userChevronOpen : ''}`}
-                  >
-                    <ChevronIcon />
-                  </Box>
-                </Box>
-              )}
-              position="bottom"
-            />
-          </Box>
+            position="bottom"
+          />
         </Box>
       </Box>
-    </ErrorBoundary>
+    </Box>
   )
 }
 
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuScriptErrorModal.tsx b/admin-ui/app/routes/Apps/Gluu/GluuScriptErrorModal.tsx
index 4b48d7529f..0838ee897c 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuScriptErrorModal.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuScriptErrorModal.tsx
@@ -1,4 +1,4 @@
-import { memo, useContext, useState, useCallback, useMemo } from 'react'
+import { memo, use, useState, useCallback, useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { Close } from '@/components/icons'
@@ -20,7 +20,7 @@ const GluuScriptErrorModal = ({
   handler,
 }: GluuScriptErrorModalProps) => {
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const [isCopied, setIsCopied] = useState(false)
   const selectedTheme = theme?.state.theme ?? DEFAULT_THEME
   const isDark = selectedTheme === THEME_DARK
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuSessionTimeoutDialog.tsx b/admin-ui/app/routes/Apps/Gluu/GluuSessionTimeoutDialog.tsx
index fcfb150f59..0c9989044f 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuSessionTimeoutDialog.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuSessionTimeoutDialog.tsx
@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react'
+import { use, useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import styles from './styles/GluuSessionTimeoutDialog.style'
@@ -21,7 +21,7 @@ const SessionTimeoutDialog = ({
   themeOverride,
 }: SessionTimeoutDialogProps) => {
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const currentTheme = themeOverride ?? theme?.state?.theme ?? DEFAULT_THEME
   const themeColors = useMemo(() => getThemeColor(currentTheme), [currentTheme])
   const isDark = currentTheme === THEME_DARK
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuText.tsx b/admin-ui/app/routes/Apps/Gluu/GluuText.tsx
index b9531e3aff..01bd642d97 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuText.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuText.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, CSSProperties } from 'react'
+import React, { use, useMemo, CSSProperties } from 'react'
 import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
 import { DEFAULT_THEME, THEME_DARK } from '@/context/theme/constants'
@@ -16,7 +16,7 @@ const GluuText: React.FC<GluuTextProps> = ({
   id,
   ...rest
 }) => {
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const selectedTheme = theme?.state?.theme || DEFAULT_THEME
   const themeColors = useMemo(() => getThemeColor(selectedTheme), [selectedTheme])
   const isDark = useMemo(() => selectedTheme === THEME_DARK, [selectedTheme])
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuToast.tsx b/admin-ui/app/routes/Apps/Gluu/GluuToast.tsx
index 6675a4fd47..869110422a 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuToast.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuToast.tsx
@@ -1,68 +1,261 @@
-import { useEffect, useRef } from 'react'
-import { ToastContainer, toast } from 'react-toastify'
-import { useAppSelector, useAppDispatch } from '@/redux/hooks'
+import { useEffect, useRef, useState, useCallback } from 'react'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
+import type { TFunction } from 'i18next'
+import { useAppSelector, useAppDispatch } from '@/redux/hooks'
 import { updateToast } from 'Redux/features/toastSlice'
 import { buildSafeNavigationUrl } from '@/utils/urlSecurity'
+import { Close, CheckCircle, ErrorIcon, Warning, Info } from '@/components/icons'
+import type { ToastMessage, ToastType } from '@/redux/types'
+import type { ToastItem } from './types/GluuToast.types'
+import { useStyles, TOAST_TYPE_COLOR } from './styles/GluuToast.style'
+
+const DEFAULT_AUTO_CLOSE = 10000
+const EXIT_ANIMATION_MS = 300
+
+const ICON_BY_TYPE: Record<ToastType, typeof CheckCircle> = {
+  success: CheckCircle,
+  error: ErrorIcon,
+  warning: Warning,
+  info: Info,
+}
+
+const TITLE_KEY_BY_TYPE: Record<ToastType, string> = {
+  success: 'messages.success',
+  error: 'messages.error',
+  warning: 'messages.warning',
+  info: 'messages.info',
+}
+
+const FALLBACK_KEY_BY_TYPE: Record<ToastType, string> = {
+  success: 'messages.success_in_saving',
+  error: 'messages.error_processing_request',
+  warning: 'messages.warning',
+  info: 'messages.info',
+}
+
+const renderToastBody = (
+  t: TFunction,
+  type: ToastType,
+  message: ToastMessage,
+  titleClassName: string,
+) => {
+  const normalizedMessage =
+    typeof message === 'string' ? message : ((message as { message?: string }).message ?? '')
+  return (
+    <>
+      <span className={titleClassName}>{t(TITLE_KEY_BY_TYPE[type])}</span>
+      <br />
+      {normalizedMessage === '' ? t(FALLBACK_KEY_BY_TYPE[type]) : normalizedMessage}
+    </>
+  )
+}
+
+type ToastTimer = {
+  timer: ReturnType<typeof setTimeout>
+  start: number
+  remaining: number
+  item: ToastItem
+  paused: boolean
+}
 
 const GluuToast = () => {
   const dispatch = useAppDispatch()
   const { t } = useTranslation()
+  const { classes } = useStyles()
+
   const { showToast, message, type, onCloseRedirectUrl } = useAppSelector(
-    (state) => state.toastReducer,
+    (reduxState) => reduxState.toastReducer,
   )
-  const redirectUrlRef = useRef('')
-
-  const ToastDesign = () => {
-    const normalizedMessage =
-      typeof message === 'string' ? message : ((message as { message?: string }).message ?? '')
-
-    return (
-      <div style={{ textAlign: 'left' }}>
-        <strong>{type === 'success' ? t('messages.success') : t('messages.error')}</strong>
-        <br />
-        {normalizedMessage === ''
-          ? type === 'success'
-            ? t('messages.success_in_saving')
-            : t('messages.error_processing_request')
-          : normalizedMessage}
-      </div>
-    )
-  }
 
-  const handleToastClose = () => {
-    const safeRedirectUrl = buildSafeNavigationUrl(redirectUrlRef.current)
-    if (safeRedirectUrl) {
-      window.location.href = safeRedirectUrl
+  const [toasts, setToasts] = useState<ToastItem[]>([])
+  const [paused, setPaused] = useState(false)
+  const timersRef = useRef<Map<string, ToastTimer>>(new Map())
+  const exitingRef = useRef<Set<string>>(new Set())
+  const counterRef = useRef(0)
+
+  const removeToast = useCallback((id: string) => {
+    exitingRef.current.delete(id)
+    const entry = timersRef.current.get(id)
+    if (entry) {
+      clearTimeout(entry.timer)
+      timersRef.current.delete(id)
     }
-  }
+    setToasts((prev) =>
+      prev.some((toast) => toast.id === id) ? prev.filter((toast) => toast.id !== id) : prev,
+    )
+  }, [])
 
-  const showTheToast = () => {
-    const options = onCloseRedirectUrl ? { onClose: handleToastClose } : {}
-    if (type === 'success') {
-      toast.success(<ToastDesign />, options)
-    } else {
-      toast.error(<ToastDesign />, options)
+  const beginExit = useCallback(
+    (item: ToastItem) => {
+      if (exitingRef.current.has(item.id)) return
+      exitingRef.current.add(item.id)
+      const entry = timersRef.current.get(item.id)
+      if (entry) {
+        clearTimeout(entry.timer)
+        timersRef.current.delete(item.id)
+      }
+      item.onClose?.()
+      setToasts((prev) =>
+        prev.map((toast) => (toast.id === item.id ? { ...toast, exiting: true } : toast)),
+      )
+      timersRef.current.set(item.id, {
+        timer: setTimeout(() => removeToast(item.id), EXIT_ANIMATION_MS + 50),
+        start: 0,
+        remaining: 0,
+        item,
+        paused: false,
+      })
+    },
+    [removeToast],
+  )
+
+  const pauseEntry = useCallback((entry: ToastTimer) => {
+    if (entry.paused) return
+    clearTimeout(entry.timer)
+    entry.remaining -= Date.now() - entry.start
+    entry.paused = true
+  }, [])
+
+  const resumeEntry = useCallback(
+    (entry: ToastTimer) => {
+      if (!entry.paused) return
+      entry.start = Date.now()
+      entry.paused = false
+      entry.timer = setTimeout(() => beginExit(entry.item), Math.max(entry.remaining, 0))
+    },
+    [beginExit],
+  )
+
+  const pauseTimer = useCallback(
+    (id: string) => {
+      if (exitingRef.current.has(id)) return
+      const entry = timersRef.current.get(id)
+      if (entry) pauseEntry(entry)
+    },
+    [pauseEntry],
+  )
+
+  const resumeTimer = useCallback(
+    (id: string) => {
+      if (exitingRef.current.has(id)) return
+      const entry = timersRef.current.get(id)
+      if (entry) resumeEntry(entry)
+    },
+    [resumeEntry],
+  )
+
+  useEffect(() => {
+    if (!showToast) return
+    counterRef.current += 1
+    const id = `toast-${counterRef.current}`
+    const onClose = onCloseRedirectUrl
+      ? () => {
+          const safeRedirectUrl = buildSafeNavigationUrl(onCloseRedirectUrl)
+          if (safeRedirectUrl) {
+            window.location.href = safeRedirectUrl
+          }
+        }
+      : undefined
+    const item: ToastItem = { id, type, message, onClose }
+    setToasts((prev) => [item, ...prev])
+    timersRef.current.set(id, {
+      timer: setTimeout(() => beginExit(item), DEFAULT_AUTO_CLOSE),
+      start: Date.now(),
+      remaining: DEFAULT_AUTO_CLOSE,
+      item,
+      paused: false,
+    })
+    dispatch(updateToast(false, 'success', ''))
+  }, [showToast])
+
+  const pauseAll = useCallback(() => {
+    timersRef.current.forEach((entry, id) => {
+      if (!exitingRef.current.has(id)) pauseEntry(entry)
+    })
+  }, [pauseEntry])
+
+  const resumeAll = useCallback(() => {
+    timersRef.current.forEach((entry, id) => {
+      if (!exitingRef.current.has(id)) resumeEntry(entry)
+    })
+  }, [resumeEntry])
+
+  useEffect(() => {
+    const onVisibilityChange = () => {
+      if (document.hidden) {
+        setPaused(true)
+        pauseAll()
+      } else {
+        setPaused(false)
+        resumeAll()
+      }
     }
-  }
+    document.addEventListener('visibilitychange', onVisibilityChange)
+    return () => {
+      document.removeEventListener('visibilitychange', onVisibilityChange)
+    }
+  }, [pauseAll, resumeAll])
 
   useEffect(() => {
-    if (showToast) {
-      redirectUrlRef.current = onCloseRedirectUrl || ''
-      showTheToast()
-      dispatch(updateToast(false, 'success', ''))
+    const timers = timersRef.current
+    return () => {
+      timers.forEach((entry) => clearTimeout(entry.timer))
+      timers.clear()
     }
-  }, [showToast])
+  }, [])
 
-  return (
-    <ToastContainer
-      autoClose={10000}
-      closeOnClick
-      newestOnTop
-      draggable={false}
-      theme="light"
-      stacked={false}
-    />
+  if (typeof document === 'undefined' || toasts.length === 0) {
+    return null
+  }
+
+  return createPortal(
+    <div
+      className={classes.container}
+      data-paused={paused || undefined}
+      aria-live="polite"
+      aria-atomic="false"
+    >
+      {toasts.map((item) => {
+        const TypeIcon = ICON_BY_TYPE[item.type]
+        const color = TOAST_TYPE_COLOR[item.type]
+        return (
+          <div
+            key={item.id}
+            className={`${classes.toast} ${item.exiting ? classes.toastExiting : ''}`}
+            role="alert"
+            onMouseEnter={() => pauseTimer(item.id)}
+            onMouseLeave={() => resumeTimer(item.id)}
+            onAnimationEnd={(e) => {
+              if (e.target === e.currentTarget && item.exiting) {
+                removeToast(item.id)
+              }
+            }}
+          >
+            <div className={classes.accentBar} style={{ backgroundColor: color }} aria-hidden />
+            <TypeIcon className={classes.icon} style={{ color }} />
+            <div className={classes.content}>
+              {renderToastBody(t, item.type, item.message, classes.title)}
+            </div>
+            <button
+              type="button"
+              className={classes.closeButton}
+              aria-label={t('actions.close')}
+              title={t('actions.close')}
+              onClick={() => beginExit(item)}
+            >
+              <Close fontSize="small" aria-hidden />
+            </button>
+            <div
+              data-toast-progress
+              className={classes.progressBar}
+              style={{ backgroundColor: color, animationDuration: `${DEFAULT_AUTO_CLOSE}ms` }}
+            />
+          </div>
+        )
+      })}
+    </div>,
+    document.body,
   )
 }
 
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuUploadFile.tsx b/admin-ui/app/routes/Apps/Gluu/GluuUploadFile.tsx
index 01926794ac..020e40c7e8 100644
--- a/admin-ui/app/routes/Apps/Gluu/GluuUploadFile.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/GluuUploadFile.tsx
@@ -1,5 +1,5 @@
 import type { MouseEvent } from 'react'
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { useCallback, use, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useFileDrop, type Accept } from '@/hooks/useFileDrop'
 import { Box } from '@mui/material'
@@ -25,7 +25,7 @@ const GluuUploadFile: React.FC<GluuUploadFileProps> = ({
   showClearButton = true,
 }) => {
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const selectedTheme = useMemo(() => {
     return theme?.state?.theme || DEFAULT_THEME
   }, [theme?.state?.theme])
diff --git a/admin-ui/app/routes/Apps/Gluu/LanguageMenu.tsx b/admin-ui/app/routes/Apps/Gluu/LanguageMenu.tsx
index 5d50e899ac..4f3dd1f1b4 100644
--- a/admin-ui/app/routes/Apps/Gluu/LanguageMenu.tsx
+++ b/admin-ui/app/routes/Apps/Gluu/LanguageMenu.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext, useMemo, useCallback, memo, useRef } from 'react'
+import { useState, useEffect, use, useMemo, useCallback, memo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import { GluuDropdown, type GluuDropdownOption, ChevronIcon } from 'Components'
@@ -28,7 +28,7 @@ const getInitialLang = (inum?: string): string => {
 const LanguageMenu = memo<LanguageMenuProps>(({ userInfo }) => {
   const { t, i18n } = useTranslation()
   const { inum } = userInfo
-  const themeContext = useContext(ThemeContext)
+  const themeContext = use(ThemeContext)
   const currentTheme = themeContext?.state?.theme || DEFAULT_THEME
   const isDark = currentTheme === THEME_DARK
   const { classes } = useStyles({ isDark })
diff --git a/admin-ui/app/routes/Apps/Gluu/Tests/GluuErrorScreen.test.tsx b/admin-ui/app/routes/Apps/Gluu/Tests/GluuErrorScreen.test.tsx
new file mode 100644
index 0000000000..ed9bfa874a
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/Tests/GluuErrorScreen.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react'
+import { I18nextProvider } from 'react-i18next'
+import GluuErrorScreen from '../GluuErrorScreen'
+import i18n from '../../../../i18n'
+import { ThemeProvider } from '../../../../context/theme/themeContext'
+
+const renderScreen = () =>
+  render(
+    <I18nextProvider i18n={i18n}>
+      <ThemeProvider>
+        <GluuErrorScreen error={new Error('boom')} resetErrorBoundary={jest.fn()} />
+      </ThemeProvider>
+    </I18nextProvider>,
+  )
+
+describe('GluuErrorScreen', () => {
+  it('renders the crash heading and message', () => {
+    renderScreen()
+    expect(screen.getByText(/Something went wrong/i)).toBeInTheDocument()
+    expect(screen.getByText(/encountered an unexpected issue/i)).toBeInTheDocument()
+  })
+
+  it('renders the home and support actions', () => {
+    renderScreen()
+    expect(screen.getByRole('button', { name: /back to home/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /support portal/i })).toBeInTheDocument()
+  })
+
+  it('renders the footer with company and rights', () => {
+    renderScreen()
+    expect(screen.getByText(/All rights reserved/i)).toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/__tests__/GluuToast.test.tsx b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuToast.test.tsx
new file mode 100644
index 0000000000..d9cefdf920
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/__tests__/GluuToast.test.tsx
@@ -0,0 +1,103 @@
+import React from 'react'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import type { Store } from '@reduxjs/toolkit'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+import GluuToast from 'Routes/Apps/Gluu/GluuToast'
+
+type ToastReducerState = {
+  showToast: boolean
+  type: string
+  message: string
+  onCloseRedirectUrl: string
+}
+
+const initialToastState: ToastReducerState = {
+  showToast: true,
+  type: 'success',
+  message: 'Saved successfully',
+  onCloseRedirectUrl: '',
+}
+
+const createTestStore = (toastState: ToastReducerState): Store =>
+  configureStore({
+    reducer: combineReducers({
+      toastReducer: (
+        state = toastState,
+        action: { type: string; payload?: Partial<ToastReducerState> },
+      ) => {
+        if (action.type === 'toast/updateToast') {
+          return { ...state, ...action.payload }
+        }
+        return state
+      },
+    }),
+  })
+
+const renderToast = (toastState: ToastReducerState = initialToastState) => {
+  const store = createTestStore(toastState)
+  const result = render(
+    <Provider store={store}>
+      <AppTestWrapper>
+        <GluuToast />
+      </AppTestWrapper>
+    </Provider>,
+  )
+  return { store, ...result }
+}
+
+describe('GluuToast', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    act(() => {
+      jest.runOnlyPendingTimers()
+    })
+    jest.useRealTimers()
+  })
+
+  it('renders a toast with the message when showToast is true', () => {
+    renderToast()
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+    expect(screen.getByText('Saved successfully')).toBeInTheDocument()
+  })
+
+  it('renders nothing when showToast is false', () => {
+    renderToast({ ...initialToastState, showToast: false })
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+
+  it('dismisses the toast when the close button is clicked', () => {
+    renderToast()
+    const closeButton = screen.getByRole('button', { name: /close/i })
+    act(() => {
+      fireEvent.click(closeButton)
+      jest.advanceTimersByTime(400)
+    })
+    expect(screen.queryByText('Saved successfully')).not.toBeInTheDocument()
+  })
+
+  it('auto-dismisses the toast after the timeout elapses', () => {
+    renderToast()
+    expect(screen.getByText('Saved successfully')).toBeInTheDocument()
+    act(() => {
+      // default auto-close (10s) + exit animation buffer
+      jest.advanceTimersByTime(10000 + 400)
+    })
+    expect(screen.queryByText('Saved successfully')).not.toBeInTheDocument()
+  })
+
+  it('pauses the auto-dismiss timer while hovered and survives past the normal timeout', () => {
+    renderToast()
+    const toast = screen.getByRole('alert')
+    act(() => {
+      fireEvent.mouseEnter(toast)
+      jest.advanceTimersByTime(10000 + 400)
+    })
+    // still present because hover paused the timer
+    expect(screen.getByText('Saved successfully')).toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/app/routes/Apps/Gluu/hooks/useNavbarTheme.ts b/admin-ui/app/routes/Apps/Gluu/hooks/useNavbarTheme.ts
index 3bcdd2f36d..e9dd60c5bc 100644
--- a/admin-ui/app/routes/Apps/Gluu/hooks/useNavbarTheme.ts
+++ b/admin-ui/app/routes/Apps/Gluu/hooks/useNavbarTheme.ts
@@ -1,10 +1,10 @@
-import { useContext, useMemo, useEffect } from 'react'
+import { use, useMemo, useEffect } from 'react'
 import { ThemeContext } from '@/context/theme/themeContext'
 import getThemeColor, { themeConfig } from '@/context/theme/config'
 import { THEME_LIGHT, DEFAULT_THEME, isValidTheme } from '@/context/theme/constants'
 
 export const useNavbarTheme = () => {
-  const themeContext = useContext(ThemeContext)
+  const themeContext = use(ThemeContext)
 
   const currentTheme = useMemo(() => {
     const theme = themeContext?.state?.theme
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuErrorScreen.style.ts b/admin-ui/app/routes/Apps/Gluu/styles/GluuErrorScreen.style.ts
new file mode 100644
index 0000000000..51828dd722
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/styles/GluuErrorScreen.style.ts
@@ -0,0 +1,121 @@
+import { makeStyles } from 'tss-react/mui'
+import { fontFamily, fontWeights, fontSizes, letterSpacing, lineHeights } from '@/styles/fonts'
+import type { ThemeConfig } from '@/context/theme/config'
+
+type StyleParams = { themeColors: ThemeConfig }
+
+export const useStyles = makeStyles<StyleParams>()((theme, { themeColors }) => ({
+  screen: {
+    backgroundColor: themeColors.background,
+  },
+  scroller: {
+    flex: 1,
+    width: '100%',
+    overflowY: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  root: {
+    flex: '1 0 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    width: '100%',
+    padding: theme.spacing(12, 8),
+    boxSizing: 'border-box',
+    fontFamily,
+  },
+  ghost: {
+    width: 89.5,
+    height: 105.5,
+    marginTop: theme.spacing(5),
+  },
+  title: {
+    margin: 0,
+    marginTop: theme.spacing(3),
+    maxWidth: 414,
+    fontSize: fontSizes['2.5xl'],
+    fontWeight: fontWeights.bold,
+    lineHeight: '30px',
+    letterSpacing: '0.6px',
+    whiteSpace: 'pre-line',
+  },
+  message: {
+    margin: 0,
+    marginTop: theme.spacing(1.5),
+    maxWidth: 410,
+    fontSize: fontSizes.description,
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights.tight,
+    letterSpacing: letterSpacing.normal,
+  },
+  divider: {
+    width: 40,
+    height: 1,
+    margin: 0,
+    marginTop: theme.spacing(3.5),
+    border: 'none',
+    backgroundColor: themeColors.borderColor,
+  },
+  actions: {
+    display: 'flex',
+    gap: theme.spacing(2),
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: theme.spacing(4),
+  },
+  buttonIcon: {
+    fontSize: 18,
+  },
+  buttonIconSmall: {
+    fontSize: 14,
+  },
+  errorOverlay: {
+    position: 'fixed',
+    top: theme.spacing(2),
+    left: theme.spacing(4),
+    right: theme.spacing(4),
+    zIndex: theme.zIndex.modal,
+    borderRadius: 8,
+    overflow: 'hidden',
+    border: `1px solid ${themeColors.borderColor}`,
+    boxShadow: theme.shadows[6],
+    textAlign: 'left',
+  },
+  errorSummary: {
+    cursor: 'pointer',
+    fontFamily,
+    fontSize: fontSizes.base,
+    fontWeight: fontWeights.regular,
+    padding: theme.spacing(1, 2),
+    backgroundColor: themeColors.inputBackground,
+    color: themeColors.fontColor,
+  },
+  errorStack: {
+    margin: 0,
+    overflow: 'auto',
+    maxHeight: '40vh',
+    padding: theme.spacing(2),
+    backgroundColor: themeColors.inputBackground,
+    color: themeColors.fontColor,
+    fontFamily,
+    fontSize: fontSizes.base,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    borderTop: `1px solid ${themeColors.borderColor}`,
+  },
+  footer: {
+    margin: 0,
+    marginTop: theme.spacing(5),
+    maxWidth: '100%',
+    fontSize: '13px',
+    fontWeight: fontWeights.medium,
+    lineHeight: lineHeights.base,
+    letterSpacing: '0.26px',
+  },
+  footerCompany: {
+    fontWeight: fontWeights.semiBold,
+  },
+}))
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/GluuToast.style.ts b/admin-ui/app/routes/Apps/Gluu/styles/GluuToast.style.ts
new file mode 100644
index 0000000000..0029c5af80
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/styles/GluuToast.style.ts
@@ -0,0 +1,126 @@
+import { makeStyles } from 'tss-react/mui'
+import { keyframes } from '@emotion/react'
+import { BORDER_RADIUS, OPACITY } from '@/constants'
+import { getCardBorderStyle } from '@/styles/cardBorderStyles'
+import { fontFamily, fontWeights } from '@/styles/fonts'
+import type { ToastType } from '@/redux/types'
+import customColors from '@/customColors'
+
+const VIEWPORT_Z_INDEX = 1400
+const TOAST_WIDTH = 320
+const TOAST_MIN_HEIGHT = 72
+const TOAST_ICON_SIZE = 26
+const PROGRESS_HEIGHT = 5
+const ENTER_DURATION = '300ms'
+const EXIT_DURATION = '300ms'
+
+export const TOAST_TYPE_COLOR: Record<ToastType, string> = {
+  success: customColors.statusActive,
+  error: customColors.statusInactive,
+  warning: customColors.orange,
+  info: customColors.lightBlue,
+}
+
+export const useStyles = makeStyles()(() => ({
+  container: {
+    'position': 'fixed',
+    'top': 16,
+    'right': 16,
+    'zIndex': VIEWPORT_Z_INDEX,
+    'display': 'flex',
+    'flexDirection': 'column',
+    'gap': 8,
+    'width': TOAST_WIDTH,
+    'maxWidth': 'calc(100vw - 32px)',
+    'pointerEvents': 'none',
+    '&[data-paused] [data-toast-progress]': {
+      animationPlayState: 'paused',
+    },
+  },
+  toast: {
+    ...getCardBorderStyle({ isDark: false, borderRadius: BORDER_RADIUS.SMALL }),
+    'borderRadius': BORDER_RADIUS.SMALL,
+    'boxSizing': 'border-box',
+    'pointerEvents': 'auto',
+    'position': 'relative',
+    'overflow': 'hidden',
+    'display': 'flex',
+    'alignItems': 'center',
+    'gap': 10,
+    'minHeight': TOAST_MIN_HEIGHT,
+    'padding': '12px 40px 12px 16px',
+    'backgroundColor': customColors.white,
+    'color': customColors.textMutedDark,
+    fontFamily,
+    'fontWeight': fontWeights.regular,
+    'wordBreak': 'break-word',
+    'animation': `${keyframes({
+      from: { transform: 'translateX(120%)', opacity: 0 },
+      to: { transform: 'translateX(0)', opacity: 1 },
+    })} ${ENTER_DURATION} ease`,
+    '&:hover [data-toast-progress]': {
+      animationPlayState: 'paused',
+    },
+  },
+  toastExiting: {
+    animation: `${keyframes({
+      from: { transform: 'translateX(0)', opacity: 1 },
+      to: { transform: 'translateX(120%)', opacity: 0 },
+    })} ${EXIT_DURATION} ease forwards`,
+  },
+  accentBar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: 3,
+  },
+  icon: {
+    flexShrink: 0,
+    fontSize: TOAST_ICON_SIZE,
+  },
+  content: {
+    flex: 1,
+    minWidth: 0,
+    lineHeight: 1.4,
+    textAlign: 'left',
+  },
+  title: {
+    fontWeight: fontWeights.semiBold,
+    color: customColors.nearBlack,
+  },
+  closeButton: {
+    'position': 'absolute',
+    'top': 8,
+    'right': 8,
+    'display': 'inline-flex',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'padding': 0,
+    'width': 20,
+    'height': 20,
+    'border': 'none',
+    'background': 'transparent',
+    'color': customColors.textMutedDark,
+    'cursor': 'pointer',
+    'lineHeight': 1,
+    'opacity': OPACITY.OVERLAY,
+    '&:hover': {
+      opacity: OPACITY.FULL,
+    },
+  },
+  progressBar: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    height: PROGRESS_HEIGHT,
+    transformOrigin: 'left',
+    animationName: keyframes({
+      from: { transform: 'scaleX(1)' },
+      to: { transform: 'scaleX(0)' },
+    }),
+    animationTimingFunction: 'linear',
+    animationFillMode: 'forwards',
+  },
+}))
diff --git a/admin-ui/app/routes/Apps/Gluu/types/GluuComponentPropsTypes.ts b/admin-ui/app/routes/Apps/Gluu/types/GluuComponentPropsTypes.ts
index ef4f4bf348..016274bd93 100644
--- a/admin-ui/app/routes/Apps/Gluu/types/GluuComponentPropsTypes.ts
+++ b/admin-ui/app/routes/Apps/Gluu/types/GluuComponentPropsTypes.ts
@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode, HTMLAttributes } from 'react'
+import type { CSSProperties, ReactNode, HTMLAttributes, Ref } from 'react'
 import type { AlertProps } from '@mui/material/Alert'
 import type { FormikProps } from 'formik'
 import type { Accept } from '@/hooks/useFileDrop'
@@ -11,6 +11,10 @@ export type GluuAlertProps = {
   show?: boolean
 }
 
+export type GluuMuiAlertProps = AlertProps & {
+  ref?: Ref<HTMLDivElement>
+}
+
 type DialogRow = {
   name?: string
   inum?: string
diff --git a/admin-ui/app/routes/Apps/Gluu/types/GluuToast.types.ts b/admin-ui/app/routes/Apps/Gluu/types/GluuToast.types.ts
new file mode 100644
index 0000000000..a13b61035c
--- /dev/null
+++ b/admin-ui/app/routes/Apps/Gluu/types/GluuToast.types.ts
@@ -0,0 +1,9 @@
+import type { ToastMessage, ToastType } from '@/redux/types'
+
+export type ToastItem = {
+  id: string
+  type: ToastType
+  message: ToastMessage
+  onClose?: () => void
+  exiting?: boolean
+}
diff --git a/admin-ui/app/routes/Apps/Profile/ProfilePage.tsx b/admin-ui/app/routes/Apps/Profile/ProfilePage.tsx
index 822fb722d8..68ffcc87e2 100755
--- a/admin-ui/app/routes/Apps/Profile/ProfilePage.tsx
+++ b/admin-ui/app/routes/Apps/Profile/ProfilePage.tsx
@@ -1,7 +1,5 @@
-import React, { useContext, useCallback, useMemo, memo } from 'react'
+import React, { use, useCallback, useMemo, memo } from 'react'
 import { GluuBadge } from 'Components'
-import { ErrorBoundary } from 'react-error-boundary'
-import GluuErrorFallBack from '../Gluu/GluuErrorFallBack'
 import { useTranslation } from 'react-i18next'
 import { ThemeContext } from '../../../context/theme/themeContext'
 import SetTitle from 'Utils/SetTitle'
@@ -40,7 +38,7 @@ InfoRow.displayName = 'InfoRow'
 
 const ProfileDetails: React.FC = () => {
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext) as ThemeContextValue
+  const theme = use(ThemeContext) as ThemeContextValue
   const currentTheme = theme?.state?.theme ?? DEFAULT_THEME
   const isDark = currentTheme === THEME_DARK
   const themeColors = useMemo(() => getThemeColor(currentTheme), [currentTheme])
@@ -111,167 +109,165 @@ const ProfileDetails: React.FC = () => {
   const displayMail = profileDetails?.mail ?? userinfo?.email ?? '-'
 
   return (
-    <ErrorBoundary FallbackComponent={GluuErrorFallBack}>
-      <GluuViewWrapper canShow={canReadProfile}>
-        <GluuLoader blocking={loading}>
-          <Box className={classes.mainContainer}>
-            <Box className={classes.profileCard}>
-              <Box className={classes.avatarContainer}>
-                <img src={avatarSrc} alt="Avatar" className={classes.avatar} />
-              </Box>
+    <GluuViewWrapper canShow={canReadProfile}>
+      <GluuLoader blocking={loading}>
+        <Box className={classes.mainContainer}>
+          <Box className={classes.profileCard}>
+            <Box className={classes.avatarContainer}>
+              <img src={avatarSrc} alt="Avatar" className={classes.avatar} />
+            </Box>
 
+            <Box
+              sx={{
+                textAlign: 'center',
+              }}
+            >
+              <GluuText variant="h5" className={classes.nameText}>
+                {displayName}
+              </GluuText>
+              <GluuText variant="div" className={classes.emailText} disableThemeColor>
+                {displayMail}
+              </GluuText>
               <Box
+                className={classes.profileHeaderStatusWrap}
                 sx={{
-                  textAlign: 'center',
+                  width: '100%',
                 }}
               >
-                <GluuText variant="h5" className={classes.nameText}>
-                  {displayName}
-                </GluuText>
-                <GluuText variant="div" className={classes.emailText} disableThemeColor>
-                  {displayMail}
-                </GluuText>
-                <Box
-                  className={classes.profileHeaderStatusWrap}
-                  sx={{
-                    width: '100%',
-                  }}
-                >
-                  <Box className={classes.statusRow}>
-                    <div
-                      className={`${classes.statusDot} ${
+                <Box className={classes.statusRow}>
+                  <div
+                    className={`${classes.statusDot} ${
+                      profileDetails?.status === 'active'
+                        ? classes.statusDotActive
+                        : classes.statusDotInactive
+                    }`}
+                  />
+                  <Box component="span" className={classes.statusKeyValueWrap}>
+                    <GluuText
+                      variant="span"
+                      className={
                         profileDetails?.status === 'active'
-                          ? classes.statusDotActive
-                          : classes.statusDotInactive
-                      }`}
-                    />
-                    <Box component="span" className={classes.statusKeyValueWrap}>
-                      <GluuText
-                        variant="span"
-                        className={
-                          profileDetails?.status === 'active'
-                            ? classes.statusLabelActive
-                            : classes.statusLabelInactive
-                        }
-                        disableThemeColor
-                      >
-                        {t('fields.statusLabel')}:
-                      </GluuText>
-                      <GluuText
-                        variant="span"
-                        className={
-                          profileDetails?.status === 'active'
-                            ? classes.statusValueActive
-                            : classes.statusValueInactive
-                        }
-                        disableThemeColor
-                      >
-                        {statusLabel}
-                      </GluuText>
-                    </Box>
-                  </Box>
-                  <Box className={classes.statusDividerWrapper}>
-                    <Divider className={classes.statusDivider} />
+                          ? classes.statusLabelActive
+                          : classes.statusLabelInactive
+                      }
+                      disableThemeColor
+                    >
+                      {t('fields.statusLabel')}:
+                    </GluuText>
+                    <GluuText
+                      variant="span"
+                      className={
+                        profileDetails?.status === 'active'
+                          ? classes.statusValueActive
+                          : classes.statusValueInactive
+                      }
+                      disableThemeColor
+                    >
+                      {statusLabel}
+                    </GluuText>
                   </Box>
                 </Box>
-              </Box>
-
-              <Box
-                sx={{
-                  width: '100%',
-                }}
-              >
-                <GluuText variant="h6" className={classes.sectionTitle} disableThemeColor>
-                  {t('titles.personal_information', { defaultValue: 'Personal Information' })}
-                </GluuText>
-                <Box className={classes.dataContainer}>
-                  <InfoRow
-                    label={t('fields.givenName')}
-                    value={profileDetails?.givenName}
-                    index={0}
-                    classes={classes}
-                  />
-                  <InfoRow
-                    label={t('fields.sn', { defaultValue: 'Last Name' })}
-                    value={surname}
-                    index={1}
-                    classes={classes}
-                  />
-                  <InfoRow
-                    label={t('fields.mail')}
-                    value={profileDetails?.mail}
-                    index={2}
-                    classes={classes}
-                  />
+                <Box className={classes.statusDividerWrapper}>
+                  <Divider className={classes.statusDivider} />
                 </Box>
               </Box>
+            </Box>
 
-              <Box
-                sx={{
-                  width: '100%',
-                }}
-              >
-                <GluuText variant="h6" className={classes.sectionTitle} disableThemeColor>
-                  {t('titles.admin_roles', { defaultValue: 'Admin Roles' })}
-                </GluuText>
-                <Box className={classes.roleContainer}>
-                  <GluuText className={classes.roleLabel} disableThemeColor>
-                    {t('fields.admin')}:
-                  </GluuText>
-                  <GluuBadge
-                    size="sm"
-                    backgroundColor={adminBadgeColors.bg}
-                    textColor={adminBadgeColors.text}
-                    borderColor={adminBadgeColors.bg}
-                  >
-                    {roles}
-                  </GluuBadge>
-                </Box>
+            <Box
+              sx={{
+                width: '100%',
+              }}
+            >
+              <GluuText variant="h6" className={classes.sectionTitle} disableThemeColor>
+                {t('titles.personal_information', { defaultValue: 'Personal Information' })}
+              </GluuText>
+              <Box className={classes.dataContainer}>
+                <InfoRow
+                  label={t('fields.givenName')}
+                  value={profileDetails?.givenName}
+                  index={0}
+                  classes={classes}
+                />
+                <InfoRow
+                  label={t('fields.sn', { defaultValue: 'Last Name' })}
+                  value={surname}
+                  index={1}
+                  classes={classes}
+                />
+                <InfoRow
+                  label={t('fields.mail')}
+                  value={profileDetails?.mail}
+                  index={2}
+                  classes={classes}
+                />
               </Box>
+            </Box>
 
-              <Box
-                sx={{
-                  width: '100%',
-                }}
-              >
-                <GluuText variant="h6" className={classes.sectionTitle} disableThemeColor>
-                  {t('titles.account_status', { defaultValue: 'Account Status' })}
+            <Box
+              sx={{
+                width: '100%',
+              }}
+            >
+              <GluuText variant="h6" className={classes.sectionTitle} disableThemeColor>
+                {t('titles.admin_roles', { defaultValue: 'Admin Roles' })}
+              </GluuText>
+              <Box className={classes.roleContainer}>
+                <GluuText className={classes.roleLabel} disableThemeColor>
+                  {t('fields.admin')}:
                 </GluuText>
-                <Box className={classes.accountStatusContainer}>
-                  <GluuText className={classes.roleLabel} disableThemeColor>
-                    {t('fields.statusLabel')}:
-                  </GluuText>
-                  <GluuBadge
-                    size="sm"
-                    className={classes.accountStatusPill}
-                    borderRadius={5}
-                    backgroundColor={accountStatusPillColors.bg}
-                    textColor={accountStatusPillColors.text}
-                    borderColor={accountStatusPillColors.bg}
-                  >
-                    {statusLabel}
-                  </GluuBadge>
-                </Box>
+                <GluuBadge
+                  size="sm"
+                  backgroundColor={adminBadgeColors.bg}
+                  textColor={adminBadgeColors.text}
+                  borderColor={adminBadgeColors.bg}
+                >
+                  {roles}
+                </GluuBadge>
               </Box>
+            </Box>
 
-              {canEditProfile && (
-                <GluuButton
-                  block
-                  disableHoverStyles
-                  className={classes.editButton}
-                  onClick={navigateToUserManagement}
-                  backgroundColor={themeColors.formFooter?.back?.backgroundColor}
-                  textColor={themeColors.formFooter?.back?.textColor}
+            <Box
+              sx={{
+                width: '100%',
+              }}
+            >
+              <GluuText variant="h6" className={classes.sectionTitle} disableThemeColor>
+                {t('titles.account_status', { defaultValue: 'Account Status' })}
+              </GluuText>
+              <Box className={classes.accountStatusContainer}>
+                <GluuText className={classes.roleLabel} disableThemeColor>
+                  {t('fields.statusLabel')}:
+                </GluuText>
+                <GluuBadge
+                  size="sm"
+                  className={classes.accountStatusPill}
+                  borderRadius={5}
+                  backgroundColor={accountStatusPillColors.bg}
+                  textColor={accountStatusPillColors.text}
+                  borderColor={accountStatusPillColors.bg}
                 >
-                  <EditOutlined fontSize="small" className={classes.editButtonIcon} />
-                  {t('actions.edit')}
-                </GluuButton>
-              )}
+                  {statusLabel}
+                </GluuBadge>
+              </Box>
             </Box>
+
+            {canEditProfile && (
+              <GluuButton
+                block
+                disableHoverStyles
+                className={classes.editButton}
+                onClick={navigateToUserManagement}
+                backgroundColor={themeColors.formFooter?.back?.backgroundColor}
+                textColor={themeColors.formFooter?.back?.textColor}
+              >
+                <EditOutlined fontSize="small" className={classes.editButtonIcon} />
+                {t('actions.edit')}
+              </GluuButton>
+            )}
           </Box>
-        </GluuLoader>
-      </GluuViewWrapper>
-    </ErrorBoundary>
+        </Box>
+      </GluuLoader>
+    </GluuViewWrapper>
   )
 }
 
diff --git a/admin-ui/app/routes/Dashboards/DashboardPage.tsx b/admin-ui/app/routes/Dashboards/DashboardPage.tsx
index 7dacc21d05..2587bc93ce 100644
--- a/admin-ui/app/routes/Dashboards/DashboardPage.tsx
+++ b/admin-ui/app/routes/Dashboards/DashboardPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useContext } from 'react'
+import { useState, useMemo, useCallback, use } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAppSelector } from '@/redux/hooks'
 import useMediaQuery from '@mui/material/useMediaQuery'
@@ -46,7 +46,7 @@ const DashboardPage = () => {
   const { t } = useTranslation()
   const isMobile = useMediaQuery(MOBILE_MEDIA_QUERY)
 
-  const themeContext = useContext(ThemeContext)
+  const themeContext = use(ThemeContext)
   const currentTheme = useMemo(
     () => themeContext?.state?.theme || DEFAULT_THEME,
     [themeContext?.state?.theme],
diff --git a/admin-ui/app/routes/Pages/ByeBye.tsx b/admin-ui/app/routes/Pages/ByeBye.tsx
index 37baae3642..5a57dc087d 100644
--- a/admin-ui/app/routes/Pages/ByeBye.tsx
+++ b/admin-ui/app/routes/Pages/ByeBye.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo } from 'react'
+import { use, useEffect, useMemo } from 'react'
 import { useAppDispatch, useAppSelector } from '@/redux/hooks'
 import { uuidv4 } from 'Utils/Util'
 import { EmptyLayout, Label } from 'Components'
@@ -19,7 +19,7 @@ const ByeBye = () => {
 
   const dispatch = useAppDispatch()
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const selectedTheme = theme?.state.theme || DEFAULT_THEME
   const themeColors = useMemo(() => getThemeColor(selectedTheme), [selectedTheme])
 
diff --git a/admin-ui/app/routes/components/LogoThemed/LogoThemed.tsx b/admin-ui/app/routes/components/LogoThemed/LogoThemed.tsx
index 79fdb96b9e..1367c2cf49 100755
--- a/admin-ui/app/routes/components/LogoThemed/LogoThemed.tsx
+++ b/admin-ui/app/routes/components/LogoThemed/LogoThemed.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react'
+import React, { use, useMemo } from 'react'
 import clsx from 'clsx'
 import { ThemeContext } from '@/context/theme/themeContext'
 import { THEME_DARK, THEME_LIGHT, DEFAULT_THEME } from '@/context/theme/constants'
@@ -13,7 +13,7 @@ const LOGO_FILTERS = {
 } as const
 
 const LogoThemed: React.FC<LogoThemedProps> = ({ className, width, height, ...otherProps }) => {
-  const themeContext = useContext(ThemeContext)
+  const themeContext = use(ThemeContext)
   const currentTheme = themeContext?.state.theme || DEFAULT_THEME
 
   const logoStyle: React.CSSProperties = useMemo(() => {
diff --git a/admin-ui/app/routes/index.tsx b/admin-ui/app/routes/index.tsx
index 09c92e7b83..9b497cd77d 100755
--- a/admin-ui/app/routes/index.tsx
+++ b/admin-ui/app/routes/index.tsx
@@ -1,7 +1,10 @@
 import { Suspense, useState, useEffect } from 'react'
-import { Route, Routes, Navigate } from 'react-router-dom'
+import { Route, Routes, Navigate, useLocation } from 'react-router-dom'
+import { ErrorBoundary } from 'react-error-boundary'
 import { ROUTES } from '@/helpers/navigation'
 import { logger } from '@/utils/logger'
+import GluuErrorScreen from 'Routes/Apps/Gluu/GluuErrorScreen'
+import logUiCrash from '@/utils/logUiCrash'
 import { useAppSelector } from '@/redux/hooks'
 import GluuViewWrapper from 'Routes/Apps/Gluu/GluuViewWrapper'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
@@ -81,6 +84,7 @@ export const RoutedContent = () => {
     loadPlugins()
   }, [])
 
+  const location = useLocation()
   const { userinfo, config } = useAppSelector((state) => state.authReducer)
   const { initialized, cedarFailedStatusAfterMaxTries } = useAppSelector(
     (state) => state.cedarPermissions,
@@ -106,32 +110,38 @@ export const RoutedContent = () => {
   }
 
   return (
-    <Suspense fallback={<GluuLoader blocking />}>
-      <Routes>
-        <Route
-          path={ROUTES.HOME_DASHBOARD}
-          element={
-            <ProtectedRoute>
-              <LazyRoutes.DashboardPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route path={ROUTES.ROOT} element={<LandingRedirect />} />
-
-        {/* -------- Plugins ---------*/}
-        {pluginMenus.map((item, key) => (
-          <Route key={key} path={item.path} element={<item.component />} />
-        ))}
-
-        {/*    Pages Routes    */}
-        <Route element={<LazyRoutes.ProfilePage />} path={ROUTES.PROFILE} />
-
-        <Route element={<LazyRoutes.Gluu404Error />} path={ROUTES.ERROR_404} />
-
-        {/*    404    */}
-        <Route path={ROUTES.WILDCARD} element={<Navigate to={ROUTES.ERROR_404} />} />
-      </Routes>
-    </Suspense>
+    <ErrorBoundary
+      FallbackComponent={GluuErrorScreen}
+      onError={(error, info) =>
+        logUiCrash(error instanceof Error ? error : new Error(String(error)), info.componentStack)
+      }
+      resetKeys={[location.pathname]}
+    >
+      <Suspense fallback={<GluuLoader blocking />}>
+        <Routes>
+          <Route
+            path={ROUTES.HOME_DASHBOARD}
+            element={
+              <ProtectedRoute>
+                <LazyRoutes.DashboardPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route path={ROUTES.ROOT} element={<LandingRedirect />} />
+
+          {/* -------- Plugins ---------*/}
+          {pluginMenus.map((item, key) => (
+            <Route key={key} path={item.path} element={<item.component />} />
+          ))}
+
+          {/*    Pages Routes    */}
+          <Route element={<LazyRoutes.ProfilePage />} path={ROUTES.PROFILE} />
+
+          {/*    404    */}
+          <Route path={ROUTES.WILDCARD} element={<LazyRoutes.Gluu404Error />} />
+        </Routes>
+      </Suspense>
+    </ErrorBoundary>
   )
 }
 
diff --git a/admin-ui/app/styles/plugins/_react-toastify.scss b/admin-ui/app/styles/plugins/_react-toastify.scss
deleted file mode 100755
index 0ee6019b82..0000000000
--- a/admin-ui/app/styles/plugins/_react-toastify.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import "react-toastify/dist/ReactToastify.css";
-@import "../miltonbo/scss/variables";
-
-:root {
-    --toastify-color-progress-light: #{$success};
-}
-
-.Toastify__toast {
-    background-color: $white;
-    padding: 20px;
-    border-radius: 3px;
-    border-top: 1px solid $gray-300;
-    border-bottom: 1px solid $gray-300;
-    border-right: 1px solid $gray-300;
-    font-family: inherit;
-}
-
-.Toastify__toast p {
-    color: $body-color;
-}
-
-.Toastify__toast h6 {
-    color: $black;
-    font-weight: 500;
-}
-
-// Hide v11 auto-generated icon — left border color communicates type
-.Toastify__toast-icon {
-    display: none;
-}
-
-// Remove v11 faded progress bar trail
-.Toastify__progress-bar--bg {
-    display: none;
-}
-
-// v11: single close button class replaces per-type classes
-.Toastify__close-button--light {
-    color: $gray-500;
-    opacity: 1;
-}
-
-.Toastify__toast--success {
-    border-left: 3px solid $success;
-}
-
-.Toastify__toast--info {
-    background-color: $white;
-    border-left: 3px solid $primary;
-}
-
-.Toastify__toast--warning {
-    background-color: $white;
-    border-left: 3px solid $warning;
-}
-
-.Toastify__toast--error {
-    background-color: $white;
-    border-left: 3px solid $danger;
-}
-
-.Toastify__toast--default {
-    background-color: $white;
-    border-left: 3px solid $secondary;
-}
diff --git a/admin-ui/app/styles/plugins/plugins.scss b/admin-ui/app/styles/plugins/plugins.scss
deleted file mode 100755
index 1e4c579941..0000000000
--- a/admin-ui/app/styles/plugins/plugins.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "react-toastify";
diff --git a/admin-ui/app/utils/ApiKeyRedirect.tsx b/admin-ui/app/utils/ApiKeyRedirect.tsx
index 01e9d6ce92..acfc527fa7 100644
--- a/admin-ui/app/utils/ApiKeyRedirect.tsx
+++ b/admin-ui/app/utils/ApiKeyRedirect.tsx
@@ -1,4 +1,4 @@
-import React, { lazy, Suspense, useContext, useMemo } from 'react'
+import React, { lazy, Suspense, use, useMemo } from 'react'
 import { Container, ApiKey } from 'Components'
 import { useTranslation } from 'react-i18next'
 import GluuErrorModal from '../routes/Apps/Gluu/GluuErrorModal'
@@ -28,7 +28,7 @@ const ApiKeyRedirect = ({
   isConfigValid,
 }: ApiKeyRedirectProps) => {
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const currentTheme = theme?.state?.theme ?? DEFAULT_THEME
   const themeColors = useMemo(() => getThemeColor(currentTheme), [currentTheme])
   const { classes } = useStyles({ themeColors })
diff --git a/admin-ui/app/utils/UploadSSA.tsx b/admin-ui/app/utils/UploadSSA.tsx
index 28d144ce7d..127deca699 100644
--- a/admin-ui/app/utils/UploadSSA.tsx
+++ b/admin-ui/app/utils/UploadSSA.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, use, useEffect, useMemo, useState } from 'react'
 import { Container } from 'Components'
 import { useFileDrop } from '@/hooks/useFileDrop'
 import logo from 'Images/logos/logo192.png'
@@ -16,7 +16,7 @@ import { GluuButton } from '@/components/GluuButton'
 const UploadSSA = () => {
   const dispatch = useAppDispatch()
   const { t } = useTranslation()
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const currentTheme = theme?.state?.theme ?? DEFAULT_THEME
   const themeColors = useMemo(() => getThemeColor(currentTheme), [currentTheme])
   const { classes } = useStyles({ themeColors })
diff --git a/admin-ui/app/utils/__tests__/logUiCrash.test.ts b/admin-ui/app/utils/__tests__/logUiCrash.test.ts
new file mode 100644
index 0000000000..7eb8d6e675
--- /dev/null
+++ b/admin-ui/app/utils/__tests__/logUiCrash.test.ts
@@ -0,0 +1,39 @@
+import logUiCrash from '../logUiCrash'
+import { logger } from '@/utils/logger'
+
+jest.mock('@/utils/logger', () => ({
+  logger: { error: jest.fn(), trace: jest.fn() },
+}))
+
+describe('logUiCrash', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('logs a concise message at error level', () => {
+    logUiCrash(new Error('boom'), 'at Component')
+    expect(logger.error).toHaveBeenCalledWith('UI crash:', 'boom')
+  })
+
+  it('logs full details at trace level', () => {
+    const error = new Error('boom')
+    logUiCrash(error, 'at Component')
+    expect(logger.trace).toHaveBeenCalledWith(
+      'UI crash details:',
+      expect.objectContaining({
+        name: 'Error',
+        message: 'boom',
+        stack: error.stack,
+        componentStack: 'at Component',
+      }),
+    )
+  })
+
+  it('preserves the error subclass name', () => {
+    logUiCrash(new TypeError('bad type'))
+    expect(logger.trace).toHaveBeenCalledWith(
+      'UI crash details:',
+      expect.objectContaining({ name: 'TypeError', componentStack: undefined }),
+    )
+  })
+})
diff --git a/admin-ui/app/utils/logUiCrash.ts b/admin-ui/app/utils/logUiCrash.ts
new file mode 100644
index 0000000000..0b0dde1228
--- /dev/null
+++ b/admin-ui/app/utils/logUiCrash.ts
@@ -0,0 +1,13 @@
+import { logger } from '@/utils/logger'
+
+const logUiCrash = (error: Error, componentStack?: string | null) => {
+  logger.error('UI crash:', error.message)
+  logger.trace('UI crash details:', {
+    name: error.name,
+    message: error.message,
+    stack: error.stack,
+    componentStack: componentStack ?? undefined,
+  })
+}
+
+export default logUiCrash
diff --git a/admin-ui/app/utils/regex.ts b/admin-ui/app/utils/regex.ts
index 45582fa5ed..32e4f2d687 100644
--- a/admin-ui/app/utils/regex.ts
+++ b/admin-ui/app/utils/regex.ts
@@ -110,8 +110,8 @@ export const regexForBracedKey = (key: string): RegExp => {
  * Build-tooling regexes
  * Imported by vite.config.ts, orval mutator, and script/* —
  * used at build / tooling time only (chunking, bundle reports,
- * date-fns ESM resolver, orval enum patcher, orval barrel
- * generator, write-method verifier, prettier output parser).
+ * orval enum patcher, orval barrel generator, write-method
+ * verifier, prettier output parser).
  * Not imported by app runtime code.
  * ============================================================ */
 
@@ -127,10 +127,6 @@ export const REGEX_NODE_MODULES_PREFIX = /^.*\/node_modules\//
 export const REGEX_VIRTUAL_MODULE_NULL_PREFIX = /^\0+/
 /** Matches built code/style output assets (`.js`, `.mjs`, `.css`, `.wasm`); used to focus the bundle report on optimizable output. */
 export const REGEX_CODE_BUILD_ASSET = /\.(?:m?js|css|wasm)$/
-/** Matches the bare `date-fns` import specifier; aliased to date-fns's ESM entry so its CJS build isn't bundled alongside the ESM one (date-fns ships disjoint `.js`/`.mjs` graphs). */
-export const REGEX_DATE_FNS_BARE_SPECIFIER = /^date-fns$/
-/** Matches a `date-fns/<subpath>` import specifier (excluding `package.json`); capture group [1] is the subpath, used to alias the import to the corresponding ESM `.mjs` file so a single date-fns build ends up in the bundle. */
-export const REGEX_DATE_FNS_SUBPATH_SPECIFIER = /^date-fns\/(?!package\.json)(.+)$/
 /** Matches a Prettier --write timing suffix (e.g. "5ms", "123ms"); used to identify file output lines in the format script. */
 export const REGEX_PRETTIER_TIMESTAMP = /\d+ms/
 /** Extracts the file path from a Prettier --write output line (e.g. "src/foo.ts 5ms (unchanged)" → capture group [1] = "src/foo.ts"). */
diff --git a/admin-ui/eslint.config.cjs b/admin-ui/eslint.config.cjs
index 78f444a816..ff5cef5b30 100644
--- a/admin-ui/eslint.config.cjs
+++ b/admin-ui/eslint.config.cjs
@@ -2,6 +2,7 @@ const js = require('@eslint/js')
 const tsParser = require('@typescript-eslint/parser')
 const tsPlugin = require('@typescript-eslint/eslint-plugin')
 const reactPlugin = require('eslint-plugin-react')
+const reactHooksPlugin = require('eslint-plugin-react-hooks')
 const jestPlugin = require('eslint-plugin-jest')
 const jsoncPlugin = require('eslint-plugin-jsonc')
 const globals = require('globals')
@@ -37,6 +38,7 @@ module.exports = [
 
     plugins: {
       'react': reactPlugin,
+      'react-hooks': reactHooksPlugin,
       '@typescript-eslint': tsPlugin,
     },
 
@@ -66,6 +68,13 @@ module.exports = [
           },
         },
       ],
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/set-state-in-render': 'error',
+      'react-hooks/static-components': 'error',
+      'react-hooks/component-hook-factories': 'error',
+      'react-hooks/incompatible-library': 'error',
+      'react-hooks/error-boundaries': 'error',
+      'react-hooks/globals': 'error',
     },
   },
 
@@ -242,6 +251,9 @@ module.exports = [
       '**/*.generated.ts',
       'app/redux/api/backend/**',
       'jans_config_api_orval/**',
+      'jans_config_api/**',
+      '.check-all-out/**',
+      '.fix-orval-enums-out/**',
       'package-lock.json',
     ],
   },
diff --git a/admin-ui/jest.config.ts b/admin-ui/jest.config.ts
index 5fa1306738..561d2dbe79 100644
--- a/admin-ui/jest.config.ts
+++ b/admin-ui/jest.config.ts
@@ -35,6 +35,7 @@ const config: Config = {
     'loadPluginMetadata$': '<rootDir>/__mocks__/loadPluginMetadata.ts',
   },
   testMatch: ['**/__tests__/**/*.test.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+  testPathIgnorePatterns: ['/node_modules/', '/jans_config_api/', '/jans_config_api_orval/'],
   transformIgnorePatterns: ['node_modules/(?!(uuid)/)'],
 }
 
diff --git a/admin-ui/package.json b/admin-ui/package.json
index 4d922e00a4..ff0735c2d0 100644
--- a/admin-ui/package.json
+++ b/admin-ui/package.json
@@ -56,8 +56,8 @@
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.0.0",
     "@types/node": "^24.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^6.0.0",
@@ -68,6 +68,7 @@
     "eslint-plugin-jest": "^29.0.0",
     "eslint-plugin-jsonc": "^3.1.2",
     "eslint-plugin-react": "^7.0.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^17.0.0",
     "husky": "^9.0.0",
     "jest": "^30.0.0",
@@ -85,19 +86,10 @@
     "vite": "^8.0.0",
     "vite-plugin-wasm": "^3.0.0"
   },
-  "overrides": {
-    "@material-table/core": {
-      "@mui/icons-material": "^7.0.0",
-      "@mui/material": "$@mui/material",
-      "@mui/system": "$@mui/material"
-    },
-    "react-is": "$react"
-  },
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@janssenproject/cedarling_wasm": "0.0.338",
-    "@material-table/core": "6.4.4",
     "@mui/icons-material": "^9.0.0",
     "@mui/material": "^9.0.0",
     "@mui/x-date-pickers": "^9.0.0",
@@ -114,15 +106,14 @@
     "formik": "^2.0.0",
     "i18next": "^26.0.0",
     "lodash": "^4.0.0",
-    "react": "^18.0.0",
+    "react": "^19.0.0",
     "react-ace": "^14.0.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "^19.0.0",
     "react-error-boundary": "^6.0.0",
     "react-i18next": "^17.0.0",
     "react-json-view-lite": "^2.0.0",
     "react-redux": "^9.0.0",
     "react-router-dom": "^7.0.0",
-    "react-toastify": "^11.0.0",
     "recharts": "^3.0.0",
     "redux-persist": "^6.0.0",
     "tss-react": "^4.0.0",
diff --git a/admin-ui/plugins/auth-server/components/AuthServerProperties/components/AuthServerPropertiesPage.tsx b/admin-ui/plugins/auth-server/components/AuthServerProperties/components/AuthServerPropertiesPage.tsx
index 6c8390b959..f48eb51136 100644
--- a/admin-ui/plugins/auth-server/components/AuthServerProperties/components/AuthServerPropertiesPage.tsx
+++ b/admin-ui/plugins/auth-server/components/AuthServerProperties/components/AuthServerPropertiesPage.tsx
@@ -198,7 +198,7 @@ const AuthServerPropertiesPage: React.FC = () => {
       }
     }
   }, [serverConfiguration, isConfigLoaded, patches.length])
-  const deferredSearch = useDeferredValue(search.toLowerCase())
+  const deferredSearch = useDeferredValue(search.toLowerCase(), '')
 
   const searchableEntries = useMemo(() => {
     const renamed = renamedFieldFromObject(configuration, t(DISCOVERY_DENY_KEYS_I18N))
diff --git a/admin-ui/plugins/auth-server/components/AuthServerProperties/components/JsonPropertyBuilder.tsx b/admin-ui/plugins/auth-server/components/AuthServerProperties/components/JsonPropertyBuilder.tsx
index 6da6d78c6c..e40d05c188 100644
--- a/admin-ui/plugins/auth-server/components/AuthServerProperties/components/JsonPropertyBuilder.tsx
+++ b/admin-ui/plugins/auth-server/components/AuthServerProperties/components/JsonPropertyBuilder.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useMemo } from 'react'
+import React, { useState, useCallback, useEffect, useMemo, type JSX } from 'react'
 import { DeleteOutline } from '@/components/icons'
 import { Accordion, FormGroup, Col } from 'Components'
 import { GluuButton } from '@/components'
@@ -273,6 +273,12 @@ const JsonPropertyBuilder = ({
     [handler, path],
   )
 
+  const sortedObjectKeys = useMemo(() => {
+    if (!isObject(propValue)) return []
+    const objVal = propValue as AppConfiguration
+    return sortKeysByFieldType(Object.keys(objVal), objVal as Record<string, PropertyValue>)
+  }, [propValue])
+
   if (isBoolean(propValue) || shouldRenderAsBoolean(schema)) {
     return (
       <>
@@ -355,12 +361,6 @@ const JsonPropertyBuilder = ({
     )
   }
 
-  const sortedObjectKeys = useMemo(() => {
-    if (!isObject(propValue)) return []
-    const objVal = propValue as AppConfiguration
-    return sortKeysByFieldType(Object.keys(objVal), objVal as Record<string, PropertyValue>)
-  }, [propValue])
-
   if (isStringArray(propValue) || isEmptyArray(propValue) || shouldRenderAsStringArray(schema)) {
     const arrayValues = (propValue as string[]) || []
     const enumOptions = [...new Set(schema?.items?.enum || arrayValues)]
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 f76272a117..ae78aa83af 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaFlows.tsx
+++ b/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaFlows.tsx
@@ -33,7 +33,6 @@ import { updateToast } from 'Redux/features/toastSlice'
 import { useAuthServerJsonPropertiesQuery } from 'Plugins/auth-server/hooks/useAuthServerJsonProperties'
 import { logger } from '@/utils/logger'
 import { resolveApiErrorMessage } from '@/utils/apiErrorMessage'
-import { toast } from 'react-toastify'
 import { useQueryClient } from '@tanstack/react-query'
 import { AXIOS_INSTANCE } from 'Orval'
 import {
@@ -252,7 +251,7 @@ const AgamaFlows: React.FC = () => {
       }
     } catch (error) {
       logger.error('Error reading zip file:', error instanceof Error ? error : String(error))
-      toast.error('Failed to read zip file')
+      dispatch(updateToast(true, 'error', 'Failed to read zip file'))
     }
   }, [])
 
@@ -268,12 +267,12 @@ const AgamaFlows: React.FC = () => {
   const handleProjectDropRejected = useCallback((fileRejections: FileRejection[]) => {
     const error = fileRejections[0]?.errors[0]
     if (error?.code === 'file-too-large') {
-      toast.error('File size exceeds 50MB limit')
+      dispatch(updateToast(true, 'error', 'File size exceeds 50MB limit'))
     }
   }, [])
 
   const handleShaDropRejected = useCallback(() => {
-    toast.error('SHA256 file size exceeds 1MB limit')
+    dispatch(updateToast(true, 'error', 'SHA256 file size exceeds 1MB limit'))
   }, [])
 
   const {
@@ -375,7 +374,7 @@ const AgamaFlows: React.FC = () => {
 
     reader.onerror = (error) => {
       logger.error('Error reading SHA256 file:', error)
-      toast.error('Failed to read SHA256 file')
+      dispatch(updateToast(true, 'error', 'Failed to read SHA256 file'))
     }
 
     const blob = new Blob([shaFile])
@@ -425,13 +424,13 @@ const AgamaFlows: React.FC = () => {
 
   const handleDeploy = async (): Promise<void> => {
     if (!repoName) {
-      toast.error('No repository selected')
+      dispatch(updateToast(true, 'error', 'No repository selected'))
       return
     }
 
     const repo = agamaRepositoriesList.projects.find((item) => item['repository-name'] === repoName)
     if (!repo) {
-      toast.error('Repository not found')
+      dispatch(updateToast(true, 'error', 'Repository not found'))
       return
     }
 
@@ -474,7 +473,7 @@ const AgamaFlows: React.FC = () => {
       setDeployLoading(false)
     } catch (error) {
       logger.error('Error deploying project: ' + resolveApiErrorMessage(error as Error))
-      toast.error('File not found or deployment failed')
+      dispatch(updateToast(true, 'error', 'File not found or deployment failed'))
       setDeployLoading(false)
     }
   }
diff --git a/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaProjectConfigModal.tsx b/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaProjectConfigModal.tsx
index c8617e9530..bac909b1a9 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaProjectConfigModal.tsx
+++ b/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/AgamaProjectConfigModal.tsx
@@ -3,8 +3,7 @@ import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { Close } from '@/components/icons'
 import { Box, Divider } from '@mui/material'
-import MaterialTable from '@material-table/core'
-import type { Column } from '@material-table/core'
+import { GluuTable, type ColumnDef } from '@/components/GluuTable'
 import { updateToast } from 'Redux/features/toastSlice'
 import isEmpty from 'lodash/isEmpty'
 import AceEditor from 'react-ace'
@@ -228,13 +227,10 @@ const AgamaProjectConfigModal: React.FC<AgamaProjectConfigModalProps> = ({
     save_data(JSON.stringify(projectConfigs))
   }
 
-  const tableColumns: Column<FlowError>[] = useMemo(
+  const tableColumns: ColumnDef<FlowError>[] = useMemo(
     () => [
-      { title: `${t('fields.flow')}`, field: 'flow' },
-      {
-        title: `${t('fields.errors')}`,
-        field: 'error',
-      },
+      { key: 'flow', label: t('fields.flow') },
+      { key: 'error', label: t('fields.errors') },
     ],
     [t],
   )
@@ -260,9 +256,6 @@ const AgamaProjectConfigModal: React.FC<AgamaProjectConfigModalProps> = ({
     [handler],
   )
 
-  const tableComponents = useMemo(() => ({ Toolbar: () => null }), [])
-  const tableOptions = useMemo(() => ({ search: false, selection: false, paging: false }), [])
-
   if (!isOpen) return null
 
   return createPortal(
@@ -374,13 +367,11 @@ const AgamaProjectConfigModal: React.FC<AgamaProjectConfigModalProps> = ({
                         {t('fields.errors')}: {projectDetailsData?.details?.error ?? 'No'}
                       </Box>
                       <Box className={classes.tableWrapper} sx={{ mt: 2 }}>
-                        <MaterialTable
-                          components={tableComponents}
+                        <GluuTable<FlowError>
                           columns={tableColumns}
                           data={flowErrors}
-                          isLoading={projectDetailsFetching}
-                          title=""
-                          options={tableOptions}
+                          loading={projectDetailsFetching}
+                          getRowKey={(row) => row.id}
                         />
                       </Box>
                       {projectConfigs ? (
diff --git a/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/__tests__/helpers/agamaTestUtils.tsx b/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/__tests__/helpers/agamaTestUtils.tsx
index 14d63c6603..79794ab1c5 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/__tests__/helpers/agamaTestUtils.tsx
+++ b/admin-ui/plugins/auth-server/components/Authentication/AgamaFlows/__tests__/helpers/agamaTestUtils.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { Provider } from 'react-redux'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { combineReducers, configureStore } from '@reduxjs/toolkit'
diff --git a/admin-ui/plugins/auth-server/components/Authentication/__tests__/helpers/authenticationTestUtils.tsx b/admin-ui/plugins/auth-server/components/Authentication/__tests__/helpers/authenticationTestUtils.tsx
index 075862d8a4..ec6032c465 100644
--- a/admin-ui/plugins/auth-server/components/Authentication/__tests__/helpers/authenticationTestUtils.tsx
+++ b/admin-ui/plugins/auth-server/components/Authentication/__tests__/helpers/authenticationTestUtils.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { Provider } from 'react-redux'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { combineReducers, configureStore } from '@reduxjs/toolkit'
diff --git a/admin-ui/plugins/auth-server/components/ConfigApiProperties/__tests__/components/ConfigApiPropertiesForm.test.tsx b/admin-ui/plugins/auth-server/components/ConfigApiProperties/__tests__/components/ConfigApiPropertiesForm.test.tsx
index 8ad3f945bb..23ea327661 100644
--- a/admin-ui/plugins/auth-server/components/ConfigApiProperties/__tests__/components/ConfigApiPropertiesForm.test.tsx
+++ b/admin-ui/plugins/auth-server/components/ConfigApiProperties/__tests__/components/ConfigApiPropertiesForm.test.tsx
@@ -9,11 +9,9 @@ jest.mock('formik', () => ({
   useFormik: jest.fn(),
 }))
 
-jest.mock('react-toastify', () => ({
-  toast: {
-    error: jest.fn(),
-    success: jest.fn(),
-  },
+const mockDispatch = jest.fn()
+jest.mock('@/redux/hooks', () => ({
+  useAppDispatch: () => mockDispatch,
 }))
 
 jest.mock('react-i18next', () => ({
diff --git a/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesForm.tsx b/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesForm.tsx
index 92164567ac..00b0bc2bae 100644
--- a/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesForm.tsx
+++ b/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesForm.tsx
@@ -2,7 +2,8 @@ import React, { useCallback, useState, useEffect, useMemo, useRef, useDeferredVa
 import { useFormik, setIn } from 'formik'
 import { REGEX_LEADING_SLASH, REGEX_FORWARD_SLASH } from '@/utils/regex'
 import { logger } from '@/utils/logger'
-import { toast } from 'react-toastify'
+import { useAppDispatch } from '@/redux/hooks'
+import { updateToast } from 'Redux/features/toastSlice'
 import { useTranslation } from 'react-i18next'
 import { Form } from 'Components'
 import { usePermission } from '@/cedarling/hooks/usePermission'
@@ -43,7 +44,8 @@ const ConfigApiPropertiesForm: React.FC<ConfigApiPropertiesFormProps> = ({
   search = '',
 }) => {
   const { t } = useTranslation()
-  const deferredSearch = useDeferredValue(search.toLowerCase())
+  const dispatch = useAppDispatch()
+  const deferredSearch = useDeferredValue(search.toLowerCase(), '')
   const { canWrite: canWriteConfigApi } = usePermission(CONFIG_API_RESOURCE_ID)
   const { navigateToRoute } = useAppNavigation()
   const { state: themeState } = useTheme()
@@ -283,10 +285,10 @@ const ConfigApiPropertiesForm: React.FC<ConfigApiPropertiesFormProps> = ({
         setPatches([])
       } catch (error) {
         logger.error('Error submitting form:', error instanceof Error ? error : String(error))
-        toast.error(t('messages.error_in_saving'))
+        dispatch(updateToast(true, 'error', t('messages.error_in_saving')))
       }
     },
-    [onSubmit, patches, t],
+    [onSubmit, patches, t, dispatch],
   )
 
   const handleBack = useCallback(() => {
diff --git a/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesPage.tsx b/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesPage.tsx
index 9dc577e30a..62ff6808d1 100644
--- a/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesPage.tsx
+++ b/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/ConfigApiPropertiesPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react'
+import { useState, useCallback, useMemo, type JSX } from 'react'
 import ConfigApiPropertiesForm from './ConfigApiPropertiesForm'
 import { Card, CardBody } from 'Components'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
@@ -7,7 +7,8 @@ import SetTitle from 'Utils/SetTitle'
 import { useTranslation } from 'react-i18next'
 import { useGetConfigApiProperties, usePatchConfigApiProperties } from 'JansConfigApi'
 import { useConfigApiActions, DEFAULT_CONFIG_API_CONFIG } from '../utils'
-import { toast } from 'react-toastify'
+import { useAppDispatch } from '@/redux/hooks'
+import { updateToast } from 'Redux/features/toastSlice'
 import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { THEME_DARK } from '@/context/theme/constants'
@@ -30,6 +31,7 @@ const configApiResourceId = ADMIN_UI_RESOURCES.ConfigApiConfiguration
 
 const ConfigApiPropertiesPage = (): JSX.Element => {
   const { t } = useTranslation()
+  const dispatch = useAppDispatch()
   const { logConfigApiUpdate } = useConfigApiActions()
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
   const { canRead: canReadConfigApi } = usePermission(configApiResourceId)
@@ -85,18 +87,18 @@ const ConfigApiPropertiesPage = (): JSX.Element => {
         }
 
         if (auditSuccess) {
-          toast.success(t('messages.success_in_saving'))
+          dispatch(updateToast(true, 'success', t('messages.success_in_saving')))
         } else {
-          toast.warning(t('messages.success_in_saving_audit_failed'))
+          dispatch(updateToast(true, 'warning', t('messages.success_in_saving_audit_failed')))
         }
       } catch (err) {
         logger.error('Error updating config:', err instanceof Error ? err : String(err))
         const errorMsg = err instanceof Error ? err.message : t('messages.error_in_saving')
         setErrorMessage(errorMsg)
-        toast.error(errorMsg)
+        throw err
       }
     },
-    [patchConfigMutation, logConfigApiUpdate, t, refetch],
+    [patchConfigMutation, logConfigApiUpdate, t, refetch, dispatch],
   )
 
   if (error !== null && error !== undefined) {
diff --git a/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/JsonPropertyBuilderConfigApi.tsx b/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/JsonPropertyBuilderConfigApi.tsx
index 2af47e6074..533ae23355 100644
--- a/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/JsonPropertyBuilderConfigApi.tsx
+++ b/admin-ui/plugins/auth-server/components/ConfigApiProperties/components/JsonPropertyBuilderConfigApi.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react'
+import React, { useState, useMemo, useCallback, useEffect, type JSX } from 'react'
 import { DeleteOutline } from '@/components/icons'
 import { Accordion, FormGroup, Col } from 'Components'
 import { GluuButton } from '@/components'
@@ -168,6 +168,37 @@ const JsonPropertyBuilderConfigApi = ({
     [handler, path],
   )
 
+  const arrayValues = useMemo(
+    () =>
+      isStringArray(propValue) || shouldRenderAsStringArray(schema)
+        ? getStringArrayValue(propValue, schema)
+        : [],
+    [propValue, schema],
+  )
+
+  const selectOptions = useMemo<AutocompleteOption[]>(() => {
+    if (!isStringArray(propValue) && !shouldRenderAsStringArray(schema)) return []
+    const enumOptions = Array.from(new Set(schema?.items?.enum || arrayValues))
+    return enumOptions.map((v: string) => ({ value: v, label: v }))
+  }, [propValue, schema, arrayValues])
+
+  const sortedObjectKeys = useMemo(() => {
+    if (!isObject(propValue)) return []
+    const objVal = propValue as AppConfiguration
+    const allKeys = Object.keys(objVal)
+    const inputKeys = allKeys.filter((k) => {
+      const v = objVal[k]
+      return typeof v === 'string' || typeof v === 'number'
+    })
+    const booleanKeys = allKeys.filter((k) => typeof objVal[k] === 'boolean')
+    const arrKeys = allKeys.filter((k) => {
+      const v = objVal[k]
+      return Array.isArray(v) && !isObjectArray(v)
+    })
+    const complexKeys = allKeys.filter((k) => isObject(objVal[k]) || isObjectArray(objVal[k]))
+    return [...inputKeys, ...booleanKeys, ...arrKeys, ...complexKeys]
+  }, [propValue])
+
   if (isBoolean(propValue) || shouldRenderAsBoolean(schema)) {
     return (
       <>
@@ -287,37 +318,6 @@ const JsonPropertyBuilderConfigApi = ({
     )
   }
 
-  const arrayValues = useMemo(
-    () =>
-      isStringArray(propValue) || shouldRenderAsStringArray(schema)
-        ? getStringArrayValue(propValue, schema)
-        : [],
-    [propValue, schema],
-  )
-
-  const selectOptions = useMemo<AutocompleteOption[]>(() => {
-    if (!isStringArray(propValue) && !shouldRenderAsStringArray(schema)) return []
-    const enumOptions = Array.from(new Set(schema?.items?.enum || arrayValues))
-    return enumOptions.map((v: string) => ({ value: v, label: v }))
-  }, [propValue, schema, arrayValues])
-
-  const sortedObjectKeys = useMemo(() => {
-    if (!isObject(propValue)) return []
-    const objVal = propValue as AppConfiguration
-    const allKeys = Object.keys(objVal)
-    const inputKeys = allKeys.filter((k) => {
-      const v = objVal[k]
-      return typeof v === 'string' || typeof v === 'number'
-    })
-    const booleanKeys = allKeys.filter((k) => typeof objVal[k] === 'boolean')
-    const arrKeys = allKeys.filter((k) => {
-      const v = objVal[k]
-      return Array.isArray(v) && !isObjectArray(v)
-    })
-    const complexKeys = allKeys.filter((k) => isObject(objVal[k]) || isObjectArray(objVal[k]))
-    return [...inputKeys, ...booleanKeys, ...arrKeys, ...complexKeys]
-  }, [propValue])
-
   if (isStringArray(propValue) || shouldRenderAsStringArray(schema)) {
     return (
       <>
diff --git a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientActiveTokenDetailPage.tsx b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientActiveTokenDetailPage.tsx
index 96dee68674..158cabed61 100644
--- a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientActiveTokenDetailPage.tsx
+++ b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientActiveTokenDetailPage.tsx
@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import { Container, Row, Col } from 'Components'
 import GluuFormDetailRow from 'Routes/Apps/Gluu/GluuFormDetailRow'
 import { formatDate as formatTokenDate } from '@/utils/dayjsUtils'
diff --git a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientActiveTokens.tsx b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientActiveTokens.tsx
index 4ce3fce541..93622c5205 100644
--- a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientActiveTokens.tsx
+++ b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientActiveTokens.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useState, useEffect, useCallback, useMemo, type JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DeleteOutline } from '@/components/icons'
 import GluuViewWrapper from 'Routes/Apps/Gluu/GluuViewWrapper'
diff --git a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientAddPage.tsx b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientAddPage.tsx
index 21e0833e79..14d207c5c8 100644
--- a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientAddPage.tsx
+++ b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientAddPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, type JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAppSelector } from '@/redux/hooks'
 import { GluuPageContent } from '@/components'
diff --git a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientEditPage.tsx b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientEditPage.tsx
index adeb41d1d1..bb9cbce0c4 100644
--- a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientEditPage.tsx
+++ b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientEditPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react'
+import { useState, useCallback, useMemo, type JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { useGetOauthOpenidClientsByInum } from 'JansConfigApi'
diff --git a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientLogoutPanel.tsx b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientLogoutPanel.tsx
index da7ef78f8e..962fd2722d 100644
--- a/admin-ui/plugins/auth-server/components/OidcClients/components/ClientLogoutPanel.tsx
+++ b/admin-ui/plugins/auth-server/components/OidcClients/components/ClientLogoutPanel.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, type JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { GluuDynamicList } from 'Components'
 import GluuInputRow from 'Routes/Apps/Gluu/GluuInputRow'
diff --git a/admin-ui/plugins/auth-server/components/Scopes/components/ScopeListPage.tsx b/admin-ui/plugins/auth-server/components/Scopes/components/ScopeListPage.tsx
index 8459699284..0ff8fc8bd7 100644
--- a/admin-ui/plugins/auth-server/components/Scopes/components/ScopeListPage.tsx
+++ b/admin-ui/plugins/auth-server/components/Scopes/components/ScopeListPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useCallback, useMemo, memo } from 'react'
+import React, { useState, useEffect, use, useCallback, useMemo, memo } from 'react'
 import { Add, DeleteOutlined, Edit } from '@/components/icons'
 import { Link } from 'react-router-dom'
 import { useAppDispatch } from '@/redux/hooks'
@@ -69,7 +69,7 @@ const ScopeListPage: React.FC = () => {
   const { canRead, canWrite, canDelete } = usePermission(ADMIN_UI_RESOURCES.Scopes)
   const { logScopeDeletion } = useScopeActions()
 
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const { themeColors, isDarkTheme } = useMemo(() => {
     const selected = theme?.state?.theme || DEFAULT_THEME
     return {
diff --git a/admin-ui/plugins/auth-server/components/Ssa/__tests__/helpers/ssaTestUtils.tsx b/admin-ui/plugins/auth-server/components/Ssa/__tests__/helpers/ssaTestUtils.tsx
index 896b66ad25..bb2bba97c5 100644
--- a/admin-ui/plugins/auth-server/components/Ssa/__tests__/helpers/ssaTestUtils.tsx
+++ b/admin-ui/plugins/auth-server/components/Ssa/__tests__/helpers/ssaTestUtils.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { Provider } from 'react-redux'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { combineReducers, configureStore } from '@reduxjs/toolkit'
diff --git a/admin-ui/plugins/auth-server/components/Ssa/components/AvailableCustomAttributesPanel.tsx b/admin-ui/plugins/auth-server/components/Ssa/components/AvailableCustomAttributesPanel.tsx
index c02430568b..a75f9faf2a 100644
--- a/admin-ui/plugins/auth-server/components/Ssa/components/AvailableCustomAttributesPanel.tsx
+++ b/admin-ui/plugins/auth-server/components/Ssa/components/AvailableCustomAttributesPanel.tsx
@@ -20,7 +20,7 @@ const AvailableCustomAttributesPanel: React.FC<CustomAttributesPanelProps> = ({
   const themeColors = useMemo(() => getThemeColor(themeState.theme), [themeState.theme])
   const isDark = themeState.theme === THEME_DARK
   const { classes } = useStyles({ themeColors, isDark })
-  const deferredSearchInputValue = useDeferredValue(searchInputValue)
+  const deferredSearchInputValue = useDeferredValue(searchInputValue, '')
 
   const normalizedAttributes = useMemo(
     () =>
diff --git a/admin-ui/plugins/fido/__tests__/components/Metrics/ActivityBarChart.test.tsx b/admin-ui/plugins/fido/__tests__/components/Metrics/ActivityBarChart.test.tsx
index e1fe3294e2..c4b9bf1f73 100644
--- a/admin-ui/plugins/fido/__tests__/components/Metrics/ActivityBarChart.test.tsx
+++ b/admin-ui/plugins/fido/__tests__/components/Metrics/ActivityBarChart.test.tsx
@@ -9,8 +9,11 @@ jest.mock('recharts', () => {
   const reactLib = jest.requireActual('react') as typeof import('react')
   return {
     ...actual,
-    ResponsiveContainer: ({ children }: { children: React.ReactElement }) =>
-      reactLib.cloneElement(children, { width: 800, height: 400 }),
+    ResponsiveContainer: ({
+      children,
+    }: {
+      children: React.ReactElement<{ width?: number; height?: number }>
+    }) => reactLib.cloneElement(children, { width: 800, height: 400 }),
   }
 })
 
diff --git a/admin-ui/plugins/fido/__tests__/components/Metrics/OnboardingTimeChart.test.tsx b/admin-ui/plugins/fido/__tests__/components/Metrics/OnboardingTimeChart.test.tsx
index 6ad16d1601..01fc023b22 100644
--- a/admin-ui/plugins/fido/__tests__/components/Metrics/OnboardingTimeChart.test.tsx
+++ b/admin-ui/plugins/fido/__tests__/components/Metrics/OnboardingTimeChart.test.tsx
@@ -14,8 +14,11 @@ jest.mock('recharts', () => {
   const reactLib = jest.requireActual('react') as typeof import('react')
   return {
     ...actual,
-    ResponsiveContainer: ({ children }: { children: React.ReactElement }) =>
-      reactLib.cloneElement(children, { width: 800, height: 320 }),
+    ResponsiveContainer: ({
+      children,
+    }: {
+      children: React.ReactElement<{ width?: number; height?: number }>
+    }) => reactLib.cloneElement(children, { width: 800, height: 320 }),
   }
 })
 
diff --git a/admin-ui/plugins/saml/__tests__/WebsiteSsoIdentityBrokeringList.test.tsx b/admin-ui/plugins/saml/__tests__/WebsiteSsoIdentityBrokeringList.test.tsx
new file mode 100644
index 0000000000..42bea63d9c
--- /dev/null
+++ b/admin-ui/plugins/saml/__tests__/WebsiteSsoIdentityBrokeringList.test.tsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import AppTestWrapper from 'Routes/Apps/Gluu/Tests/Components/AppTestWrapper'
+
+type IdpQueryParams = { startIndex: number; limit: number; pattern?: string }
+
+const mockState: {
+  entries: { inum: string; displayName: string; enabled: boolean }[]
+  canRead: boolean
+  lastQueryParams: IdpQueryParams | null
+} = {
+  entries: [
+    { inum: 'IDP-1', displayName: 'Google IdP', enabled: true },
+    { inum: 'IDP-2', displayName: 'Okta IdP', enabled: false },
+  ],
+  canRead: true,
+  lastQueryParams: null,
+}
+
+jest.mock('Plugins/saml/components/hooks', () => ({
+  useIdentityProviders: (params: IdpQueryParams) => {
+    mockState.lastQueryParams = params
+    return {
+      data: { entries: mockState.entries, totalEntriesCount: mockState.entries.length },
+      isLoading: false,
+      isFetching: false,
+    }
+  },
+  useDeleteIdentityProvider: () => ({ mutateAsync: jest.fn(), isPending: false }),
+}))
+
+jest.mock('@/cedarling/hooks/usePermission', () => ({
+  usePermission: () => ({
+    canRead: mockState.canRead,
+    canWrite: true,
+    canDelete: true,
+  }),
+}))
+
+jest.mock('@/helpers/navigation', () => ({
+  useAppNavigation: () => ({ navigateToRoute: jest.fn() }),
+  ROUTES: { SAML_IDP_EDIT: 'saml-idp-edit', SAML_IDP_ADD: 'saml-idp-add' },
+}))
+
+jest.mock('Routes/Apps/Gluu/GluuDialog', () => ({
+  __esModule: true,
+  default: () => null,
+}))
+
+import WebsiteSsoIdentityBrokeringList from 'Plugins/saml/components/WebsiteSsoIdentityBrokeringList'
+
+const renderList = () =>
+  render(
+    <AppTestWrapper>
+      <WebsiteSsoIdentityBrokeringList />
+    </AppTestWrapper>,
+  )
+
+describe('WebsiteSsoIdentityBrokeringList', () => {
+  beforeEach(() => {
+    mockState.canRead = true
+    mockState.lastQueryParams = null
+  })
+
+  it('renders rows from the identity providers data', () => {
+    renderList()
+    expect(screen.getByText('IDP-1')).toBeInTheDocument()
+    expect(screen.getByText('Google IdP')).toBeInTheDocument()
+    expect(screen.getByText('IDP-2')).toBeInTheDocument()
+    expect(screen.getByText('Okta IdP')).toBeInTheDocument()
+  })
+
+  it('renders the inum column header', () => {
+    renderList()
+    expect(screen.getByText(/inum/i)).toBeInTheDocument()
+  })
+
+  it('queries identity providers with the initial paging params', () => {
+    renderList()
+    expect(mockState.lastQueryParams).toEqual(expect.objectContaining({ startIndex: 0 }))
+  })
+
+  it('does not render the rows when the user lacks read permission', () => {
+    mockState.canRead = false
+    renderList()
+    expect(screen.queryByText('Google IdP')).not.toBeInTheDocument()
+  })
+})
diff --git a/admin-ui/plugins/saml/__tests__/WebsiteSsoServiceProviderList.test.ts b/admin-ui/plugins/saml/__tests__/WebsiteSsoServiceProviderList.test.ts
new file mode 100644
index 0000000000..d28dfb4626
--- /dev/null
+++ b/admin-ui/plugins/saml/__tests__/WebsiteSsoServiceProviderList.test.ts
@@ -0,0 +1,33 @@
+import { matchesPattern } from 'Plugins/saml/components/WebsiteSsoServiceProviderList'
+import type { TrustRelationship } from 'Plugins/saml/components/hooks'
+
+const provider: TrustRelationship = {
+  inum: 'ABC-123',
+  displayName: 'My Service Provider',
+  enabled: true,
+}
+
+describe('matchesPattern', () => {
+  it('returns true for an empty pattern (no filtering)', () => {
+    expect(matchesPattern(provider, '')).toBe(true)
+  })
+
+  it('matches against the inum case-insensitively', () => {
+    expect(matchesPattern(provider, 'abc')).toBe(true)
+    expect(matchesPattern(provider, 'ABC-123')).toBe(true)
+  })
+
+  it('matches against the displayName case-insensitively', () => {
+    expect(matchesPattern(provider, 'service')).toBe(true)
+    expect(matchesPattern(provider, 'MY SERVICE')).toBe(true)
+  })
+
+  it('returns false when the pattern matches neither inum nor displayName', () => {
+    expect(matchesPattern(provider, 'nonexistent')).toBe(false)
+  })
+
+  it('handles providers with missing fields without throwing', () => {
+    expect(matchesPattern({ enabled: false }, 'anything')).toBe(false)
+    expect(matchesPattern({ enabled: false }, '')).toBe(true)
+  })
+})
diff --git a/admin-ui/plugins/saml/components/WebsiteSsoIdentityBrokeringList.tsx b/admin-ui/plugins/saml/components/WebsiteSsoIdentityBrokeringList.tsx
index 88636f2e83..4521e516bf 100644
--- a/admin-ui/plugins/saml/components/WebsiteSsoIdentityBrokeringList.tsx
+++ b/admin-ui/plugins/saml/components/WebsiteSsoIdentityBrokeringList.tsx
@@ -1,46 +1,44 @@
-import React, { useCallback, useEffect, useContext, useMemo, useState, useRef } from 'react'
-import debounce from 'lodash/debounce'
-import MaterialTable, { type Action } from '@material-table/core'
+import React, { useCallback, use, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import GluuViewWrapper from 'Routes/Apps/Gluu/GluuViewWrapper'
 import { buildPayload } from 'Utils/auditAction'
 import { usePermission } from '@/cedarling/hooks/usePermission'
-import applicationStyle from '@/routes/Apps/Gluu/styles/applicationStyle'
-import { DeleteOutlined } from '@/components/icons'
+import { Add, Edit, VisibilityOutlined, DeleteOutlined } from '@/components/icons'
 import GluuDialog from 'Routes/Apps/Gluu/GluuDialog'
-import { TablePagination } from '@mui/material'
-import GluuAdvancedSearch from 'Routes/Apps/Gluu/GluuAdvancedSearch'
+import { GluuTable } from '@/components/GluuTable'
+import { GluuSearchToolbar } from '@/components/GluuSearchToolbar'
+import type { ColumnDef, ActionDef, PaginationConfig } from '@/components/GluuTable'
 import { adminUiFeatures } from '@/constants'
-import customColors from '@/customColors'
 import getThemeColor from 'Context/theme/config'
 import { ThemeContext } from 'Context/theme/themeContext'
 import { ADMIN_UI_RESOURCES } from '@/cedarling/utility'
 import { useAppNavigation, ROUTES } from '@/helpers/navigation'
-import { PaperContainer, getIdentityProviderTableCols } from '../helper'
+import { getRowsPerPageOptions, usePaginationState } from '@/utils/pagingUtils'
 import { useIdentityProviders, useDeleteIdentityProvider, type IdentityProvider } from './hooks'
-import { DEFAULT_THEME } from '@/context/theme/constants'
+import { DEFAULT_THEME, THEME_DARK } from '@/context/theme/constants'
 import { logger } from '@/utils/logger'
+import { useStyles } from './styles/WebsiteSsoList.style'
 
 interface DeleteItem {
   inum?: string
   displayName?: string
 }
 
-const DeleteOutlinedIcon = () => <DeleteOutlined />
+const LIMIT_OPTIONS = getRowsPerPageOptions()
+const samlResourceId = ADMIN_UI_RESOURCES.SAML
 
 const WebsiteSsoIdentityBrokeringList = React.memo(() => {
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const selectedTheme = theme?.state?.theme ?? DEFAULT_THEME
-  const themeColors = getThemeColor(selectedTheme)
+  const themeColors = useMemo(() => getThemeColor(selectedTheme), [selectedTheme])
+  const isDark = selectedTheme === THEME_DARK
+  const { classes } = useStyles({ isDark, themeColors })
 
   const [modal, setModal] = useState(false)
-  const [limit, setLimit] = useState(10)
-  const [pattern, setPattern] = useState<string | null>(null)
-  const [searchInput, setSearchInput] = useState<string>('')
+  const [pattern, setPattern] = useState('')
   const [item, setItem] = useState<DeleteItem>({})
-  const [pageNumber, setPageNumber] = useState(0)
-  const prevPatternRef = useRef<string | null>(null)
+  const { limit, setLimit, pageNumber, setPageNumber, onPagingSizeSync } = usePaginationState()
 
   const { t } = useTranslation()
   const { navigateToRoute } = useAppNavigation()
@@ -70,28 +68,7 @@ const WebsiteSsoIdentityBrokeringList = React.memo(() => {
     canRead: canReadIdentities,
     canWrite: canWriteIdentities,
     canDelete: canDeleteIdentities,
-  } = usePermission(ADMIN_UI_RESOURCES.SAML)
-
-  const debouncedSetPattern = useMemo(
-    () =>
-      debounce((value: string) => {
-        setPattern(value || null)
-      }, 500),
-    [],
-  )
-
-  useEffect(() => {
-    return () => {
-      debouncedSetPattern.cancel()
-    }
-  }, [debouncedSetPattern])
-
-  useEffect(() => {
-    if (pattern !== prevPatternRef.current) {
-      prevPatternRef.current = pattern
-      setPageNumber(0)
-    }
-  }, [pattern])
+  } = usePermission(samlResourceId)
 
   const toggle = useCallback(() => setModal((prev) => !prev), [])
 
@@ -138,218 +115,148 @@ const WebsiteSsoIdentityBrokeringList = React.memo(() => {
         )
       }
     },
-    [buildPayload, deleteIdentityProviderMutation, item.inum, toggle],
+    [deleteIdentityProviderMutation, item.inum, toggle],
   )
 
-  const onRowCountChangeClick = useCallback((count: number): void => {
-    setPageNumber(0)
-    setLimit(count)
-  }, [])
-
-  const onPageChangeClick = useCallback((page: number): void => {
-    setPageNumber(page)
-  }, [])
+  const handleSearch = useCallback(
+    (value: string) => {
+      setPattern(value)
+      setPageNumber(0)
+    },
+    [setPageNumber],
+  )
 
-  const handleRefresh = useCallback((): void => {
+  const handleRefresh = useCallback(() => {
+    setPattern('')
     setPageNumber(0)
-  }, [])
+  }, [setPageNumber])
 
-  const handleOptionsChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>): void => {
-      if (event.target.name === 'limit') {
-        setLimit(Number(event.target.value))
-      } else if (event.target.name === 'pattern') {
-        const value = event.target.value
-        setSearchInput(value)
-        debouncedSetPattern(value)
-      }
-    },
-    [debouncedSetPattern],
-  )
+  const handlePageChange = useCallback((page: number) => setPageNumber(page), [setPageNumber])
 
-  const handleOptionsKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>): void => {
-      if (event.target instanceof HTMLInputElement && event.target.name === 'pattern') {
-        if (event.key === 'Enter' || event.keyCode === 13) {
-          const nextPattern = event.target.value
-          setSearchInput(nextPattern)
-          debouncedSetPattern.cancel()
-          setPattern(nextPattern || null)
-          setPageNumber(0)
-        }
-      }
+  const handleRowsPerPageChange = useCallback(
+    (rowsPerPage: number) => {
+      setLimit(rowsPerPage)
+      setPageNumber(0)
     },
-    [debouncedSetPattern],
+    [setLimit, setPageNumber],
   )
 
-  const PaginationWrapper = useCallback(
-    (): React.ReactElement => (
-      <TablePagination
-        count={totalItems}
-        page={pageNumber}
-        onPageChange={(_prop: React.MouseEvent<HTMLButtonElement> | null, page: number): void => {
-          onPageChangeClick(page)
-        }}
-        rowsPerPage={limit}
-        onRowsPerPageChange={(
-          event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-        ): void => {
-          onRowCountChangeClick(Number(event.target.value))
-        }}
-      />
-    ),
-    [pageNumber, totalItems, onPageChangeClick, limit, onRowCountChangeClick],
+  const columns: ColumnDef<IdentityProvider>[] = useMemo(
+    () => [
+      { key: 'inum', label: t('fields.inum'), sortable: true },
+      { key: 'displayName', label: t('fields.displayName'), sortable: true },
+      { key: 'enabled', label: t('fields.enabled'), sortable: true },
+    ],
+    [t],
   )
 
-  const GluuSearch = useCallback((): React.ReactElement => {
-    return (
-      <GluuAdvancedSearch
-        limitId={'searchLimit'}
-        patternId={'searchPattern'}
-        limit={limit}
-        pattern={searchInput}
-        onChange={handleOptionsChange}
-        onKeyDown={handleOptionsKeyDown}
-        showLimit={false}
-        controlled={true}
-      />
-    )
-  }, [limit, searchInput, handleOptionsChange, handleOptionsKeyDown])
-
-  const tableActions = useMemo(() => {
-    const actions: Action<IdentityProvider>[] = []
+  const actions: ActionDef<IdentityProvider>[] = useMemo(() => {
+    const list: ActionDef<IdentityProvider>[] = []
     if (canWriteIdentities) {
-      actions.push({
-        icon: 'edit',
-        tooltip: `${t('titles.edit_identity_provider')}`,
-        iconProps: { style: { color: customColors.darkGray } },
-        onClick: (
-          _event: React.MouseEvent,
-          rowData: IdentityProvider | IdentityProvider[],
-        ): void => {
-          if (Array.isArray(rowData)) return
-          handleGoToEditPage(rowData)
-        },
-      })
-      actions.push({
-        icon: 'add',
-        tooltip: `${t('titles.create_identity_provider')}`,
-        iconProps: { color: 'primary' },
-        isFreeAction: true,
-        onClick: () => handleGoToAddPage(),
+      list.push({
+        icon: <Edit className={classes.editIcon} />,
+        tooltip: t('titles.edit_identity_provider'),
+        onClick: (row) => handleGoToEditPage(row),
       })
     }
     if (canReadIdentities) {
-      actions.push({
-        icon: 'visibility',
-        tooltip: `${t('titles.view_identity_provider')}`,
-        onClick: (
-          _event: React.MouseEvent,
-          rowData: IdentityProvider | IdentityProvider[],
-        ): void => {
-          if (Array.isArray(rowData)) return
-          handleGoToEditPage(rowData, true)
-        },
+      list.push({
+        icon: <VisibilityOutlined className={classes.viewIcon} />,
+        tooltip: t('titles.view_identity_provider'),
+        onClick: (row) => handleGoToEditPage(row, true),
       })
     }
     if (canDeleteIdentities) {
-      actions.push({
-        icon: DeleteOutlinedIcon,
-        iconProps: { color: 'secondary' },
-        tooltip: `${t('titles.delete_identity_provider')}`,
-        onClick: (
-          _event: React.MouseEvent,
-          rowData: IdentityProvider | IdentityProvider[],
-        ): void => {
-          if (Array.isArray(rowData)) return
-          handleDelete(rowData)
-        },
+      list.push({
+        icon: <DeleteOutlined className={classes.deleteIcon} />,
+        tooltip: t('titles.delete_identity_provider'),
+        onClick: handleDelete,
       })
     }
-    const handleSearchIconClickNoop = (): void => {}
-    actions.push({
-      icon: GluuSearch,
-      tooltip: `${t('messages.advanced_search')}`,
-      iconProps: { color: 'primary' },
-      isFreeAction: true,
-      onClick: handleSearchIconClickNoop,
-    })
-    actions.push({
-      icon: 'refresh',
-      tooltip: `${t('messages.refresh')}`,
-      iconProps: { color: 'primary' },
-      isFreeAction: true,
-      onClick: handleRefresh,
-    } as Action<IdentityProvider> & { 'data-testid'?: string })
-    return actions
+    return list
   }, [
     canWriteIdentities,
     canReadIdentities,
     canDeleteIdentities,
     t,
+    classes,
     handleGoToEditPage,
-    handleGoToAddPage,
     handleDelete,
-    handleRefresh,
-    GluuSearch,
   ])
 
-  const tableColumns = useMemo(() => getIdentityProviderTableCols(t), [t])
-
-  const headerStyle = useMemo(
-    () =>
-      ({
-        ...applicationStyle.tableHeaderStyle,
-        backgroundColor: themeColors.background,
-        color: themeColors.fontColor,
-      }) as React.CSSProperties,
-    [themeColors.background, themeColors.fontColor],
-  )
-
-  const tableOptions = useMemo(
+  const pagination: PaginationConfig = useMemo(
     () => ({
-      search: false,
-      selection: false,
-      idSynonym: 'inum',
-      pageSize: limit,
-      headerStyle,
-      actionsColumnIndex: -1,
+      page: pageNumber,
+      rowsPerPage: limit,
+      totalItems,
+      rowsPerPageOptions: LIMIT_OPTIONS,
+      onPageChange: handlePageChange,
+      onRowsPerPageChange: handleRowsPerPageChange,
     }),
-    [limit, headerStyle],
+    [pageNumber, limit, totalItems, handlePageChange, handleRowsPerPageChange],
   )
 
-  const tableComponents = useMemo(
+  const primaryAction = useMemo(
     () => ({
-      Container: PaperContainer,
-      Pagination: PaginationWrapper,
+      label: t('titles.create_identity_provider'),
+      icon: <Add className={classes.addIcon} />,
+      onClick: handleGoToAddPage,
+      disabled: !canWriteIdentities,
     }),
-    [PaginationWrapper],
+    [t, classes.addIcon, handleGoToAddPage, canWriteIdentities],
+  )
+
+  const getRowKey = useCallback(
+    (row: IdentityProvider, index: number) => row.inum ?? `row-${index}`,
+    [],
   )
 
   return (
     <GluuLoader blocking={isLoading}>
-      <GluuViewWrapper canShow={canReadIdentities}>
-        <MaterialTable
-          components={tableComponents}
-          columns={tableColumns}
-          data={items}
-          isLoading={isLoading}
-          title=""
-          actions={tableActions}
-          options={tableOptions}
-        />
-      </GluuViewWrapper>
-      {canDeleteIdentities && (
-        <GluuDialog
-          row={item}
-          name={item?.displayName || ''}
-          handler={toggle}
-          modal={modal}
-          subject="saml idp"
-          onAccept={onDeletionConfirmed}
-          feature={adminUiFeatures.saml_delete}
-        />
-      )}
+      <div className={classes.page}>
+        <GluuViewWrapper canShow={canReadIdentities}>
+          <div className={classes.searchCard}>
+            <div className={classes.searchCardContent}>
+              <GluuSearchToolbar
+                searchLabel={`${t('fields.pattern')}:`}
+                searchPlaceholder={t('placeholders.search_pattern')}
+                searchValue={pattern}
+                searchOnType
+                onSearch={handleSearch}
+                onSearchSubmit={handleSearch}
+                onRefresh={canReadIdentities ? handleRefresh : undefined}
+                refreshLoading={isLoading}
+                primaryAction={primaryAction}
+                disabled={isLoading}
+              />
+            </div>
+          </div>
+
+          <div className={classes.tableCard}>
+            <GluuTable<IdentityProvider>
+              columns={columns}
+              data={items}
+              loading={false}
+              pagination={pagination}
+              onPagingSizeSync={onPagingSizeSync}
+              actions={actions}
+              getRowKey={getRowKey}
+              emptyMessage={t('messages.no_data')}
+            />
+          </div>
+        </GluuViewWrapper>
+        {canDeleteIdentities && (
+          <GluuDialog
+            row={item}
+            name={item?.displayName || ''}
+            handler={toggle}
+            modal={modal}
+            subject="saml idp"
+            onAccept={onDeletionConfirmed}
+            feature={adminUiFeatures.saml_delete}
+          />
+        )}
+      </div>
     </GluuLoader>
   )
 })
diff --git a/admin-ui/plugins/saml/components/WebsiteSsoServiceProviderList.tsx b/admin-ui/plugins/saml/components/WebsiteSsoServiceProviderList.tsx
index 1ab77cd3ed..b7e4851054 100644
--- a/admin-ui/plugins/saml/components/WebsiteSsoServiceProviderList.tsx
+++ b/admin-ui/plugins/saml/components/WebsiteSsoServiceProviderList.tsx
@@ -1,42 +1,57 @@
-import React, { useCallback, useContext, useMemo, useState } from 'react'
-import MaterialTable, { type Action } from '@material-table/core'
+import React, { useCallback, use, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import GluuViewWrapper from 'Routes/Apps/Gluu/GluuViewWrapper'
 import { buildPayload } from 'Utils/auditAction'
 import type { UserAction } from 'Utils/types'
 import { usePermission } from '@/cedarling/hooks/usePermission'
-import applicationStyle from '@/routes/Apps/Gluu/styles/applicationStyle'
 import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
-import { DeleteOutlined } from '@/components/icons'
+import { Add, Edit, VisibilityOutlined, DeleteOutlined } from '@/components/icons'
 import GluuDialog from 'Routes/Apps/Gluu/GluuDialog'
+import { GluuTable } from '@/components/GluuTable'
+import { GluuSearchToolbar } from '@/components/GluuSearchToolbar'
+import type { ColumnDef, ActionDef, PaginationConfig } from '@/components/GluuTable'
 import { adminUiFeatures } from '@/constants'
-import { PaperContainer, getServiceProviderTableCols } from '../helper'
-import customColors from '@/customColors'
 import { ADMIN_UI_RESOURCES } from '@/cedarling/utility'
 import { useAppNavigation, ROUTES } from '@/helpers/navigation'
+import { getRowsPerPageOptions, usePaginationState } from '@/utils/pagingUtils'
 import {
   useTrustRelationships,
   useDeleteTrustRelationshipMutation,
   type TrustRelationship,
 } from './hooks'
-import { DEFAULT_THEME } from '@/context/theme/constants'
+import { DEFAULT_THEME, THEME_DARK } from '@/context/theme/constants'
 import { logger } from '@/utils/logger'
+import { useStyles } from './styles/WebsiteSsoList.style'
 
 interface DeleteItem {
   inum: string
   displayName?: string
 }
 
-const DeleteOutlinedIcon = () => <DeleteOutlined />
+const LIMIT_OPTIONS = getRowsPerPageOptions()
+const samlResourceId = ADMIN_UI_RESOURCES.SAML
+
+const matchesPattern = (provider: TrustRelationship, pattern: string): boolean => {
+  if (!pattern) return true
+  const needle = pattern.toLowerCase()
+  return [provider.inum, provider.displayName].some((field) =>
+    (field ?? '').toLowerCase().includes(needle),
+  )
+}
 
 const WebsiteSsoServiceProviderList = React.memo(() => {
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const selectedTheme = useMemo(() => theme?.state?.theme ?? DEFAULT_THEME, [theme?.state?.theme])
   const themeColors = useMemo(() => getThemeColor(selectedTheme), [selectedTheme])
+  const isDark = selectedTheme === THEME_DARK
+  const { classes } = useStyles({ isDark, themeColors })
+
   const [modal, setModal] = useState(false)
   const [item, setItem] = useState<DeleteItem>({ inum: '' })
+  const [pattern, setPattern] = useState('')
+  const { limit, setLimit, pageNumber, setPageNumber, onPagingSizeSync } = usePaginationState()
 
   const toggle = useCallback(() => setModal((prev) => !prev), [])
 
@@ -57,7 +72,7 @@ const WebsiteSsoServiceProviderList = React.memo(() => {
     canRead: canReadWebsiteSsoServiceProviders,
     canWrite: canWriteWebsiteSsoServiceProviders,
     canDelete: canDeleteWebsiteSsoServiceProviders,
-  } = usePermission(ADMIN_UI_RESOURCES.SAML)
+  } = usePermission(samlResourceId)
 
   const handleGoToEditPage = useCallback(
     (rowData: TrustRelationship, viewOnly?: boolean) => {
@@ -102,123 +117,161 @@ const WebsiteSsoServiceProviderList = React.memo(() => {
     [deleteTrustRelationshipMutation, item.inum, toggle],
   )
 
-  const handleRefresh = useCallback((): void => {
+  const handleSearch = useCallback(
+    (value: string) => {
+      setPattern(value)
+      setPageNumber(0)
+    },
+    [setPageNumber],
+  )
+
+  const handleRefresh = useCallback(() => {
+    setPattern('')
+    setPageNumber(0)
     refetch()
-  }, [refetch])
+  }, [setPageNumber, refetch])
+
+  const handlePageChange = useCallback((page: number) => setPageNumber(page), [setPageNumber])
+
+  const handleRowsPerPageChange = useCallback(
+    (rowsPerPage: number) => {
+      setLimit(rowsPerPage)
+      setPageNumber(0)
+    },
+    [setLimit, setPageNumber],
+  )
+
+  const filteredProviders = useMemo(
+    () => websiteSsoServiceProviders.filter((provider) => matchesPattern(provider, pattern)),
+    [websiteSsoServiceProviders, pattern],
+  )
 
-  const tableActions = useMemo(() => {
-    const actions: Action<TrustRelationship>[] = []
+  const pagedProviders = useMemo(
+    () => filteredProviders.slice(pageNumber * limit, pageNumber * limit + limit),
+    [filteredProviders, pageNumber, limit],
+  )
+
+  const columns: ColumnDef<TrustRelationship>[] = useMemo(
+    () => [
+      { key: 'inum', label: t('fields.inum'), sortable: true },
+      { key: 'displayName', label: t('fields.displayName'), sortable: true },
+      { key: 'enabled', label: t('fields.enabled'), sortable: true },
+    ],
+    [t],
+  )
+
+  const actions: ActionDef<TrustRelationship>[] = useMemo(() => {
+    const list: ActionDef<TrustRelationship>[] = []
     if (canWriteWebsiteSsoServiceProviders) {
-      actions.push({
-        icon: 'edit',
-        tooltip: `${t('messages.edit_service_provider')}`,
-        iconProps: { style: { color: customColors.darkGray } },
-        onClick: (
-          _event: React.MouseEvent,
-          rowData: TrustRelationship | TrustRelationship[],
-        ): void => {
-          if (Array.isArray(rowData)) return
-          handleGoToEditPage(rowData)
-        },
-      })
-      actions.push({
-        icon: 'add',
-        tooltip: `${t('messages.add_service_provider')}`,
-        iconProps: { color: 'primary' },
-        isFreeAction: true,
-        onClick: () => handleGoToAddPage(),
+      list.push({
+        icon: <Edit className={classes.editIcon} />,
+        tooltip: t('messages.edit_service_provider'),
+        onClick: (row) => handleGoToEditPage(row),
       })
     }
     if (canReadWebsiteSsoServiceProviders) {
-      actions.push({
-        icon: 'visibility',
-        tooltip: `${t('messages.view_service_provider')}`,
-        onClick: (
-          _event: React.MouseEvent,
-          rowData: TrustRelationship | TrustRelationship[],
-        ): void => {
-          if (Array.isArray(rowData)) return
-          handleGoToEditPage(rowData, true)
-        },
+      list.push({
+        icon: <VisibilityOutlined className={classes.viewIcon} />,
+        tooltip: t('messages.view_service_provider'),
+        onClick: (row) => handleGoToEditPage(row, true),
       })
     }
     if (canDeleteWebsiteSsoServiceProviders) {
-      actions.push({
-        icon: DeleteOutlinedIcon,
-        iconProps: { color: 'secondary' },
-        tooltip: `${t('messages.delete_service_provider')}`,
-        onClick: (
-          _event: React.MouseEvent,
-          rowData: TrustRelationship | TrustRelationship[],
-        ): void => {
-          if (Array.isArray(rowData)) return
-          handleDelete(rowData)
-        },
+      list.push({
+        icon: <DeleteOutlined className={classes.deleteIcon} />,
+        tooltip: t('messages.delete_service_provider'),
+        onClick: handleDelete,
       })
     }
-    actions.push({
-      icon: 'refresh',
-      tooltip: `${t('messages.refresh')}`,
-      iconProps: { color: 'primary' },
-      isFreeAction: true,
-      onClick: handleRefresh,
-    })
-    return actions
+    return list
   }, [
-    canReadWebsiteSsoServiceProviders,
     canWriteWebsiteSsoServiceProviders,
+    canReadWebsiteSsoServiceProviders,
     canDeleteWebsiteSsoServiceProviders,
     t,
+    classes,
     handleGoToEditPage,
-    handleGoToAddPage,
     handleDelete,
-    handleRefresh,
   ])
 
-  const tableColumns = useMemo(() => getServiceProviderTableCols(t), [t])
+  const pagination: PaginationConfig = useMemo(
+    () => ({
+      page: pageNumber,
+      rowsPerPage: limit,
+      totalItems: filteredProviders.length,
+      rowsPerPageOptions: LIMIT_OPTIONS,
+      onPageChange: handlePageChange,
+      onRowsPerPageChange: handleRowsPerPageChange,
+    }),
+    [pageNumber, limit, filteredProviders.length, handlePageChange, handleRowsPerPageChange],
+  )
+
+  const primaryAction = useMemo(
+    () => ({
+      label: t('messages.add_service_provider'),
+      icon: <Add className={classes.addIcon} />,
+      onClick: handleGoToAddPage,
+      disabled: !canWriteWebsiteSsoServiceProviders,
+    }),
+    [t, classes.addIcon, handleGoToAddPage, canWriteWebsiteSsoServiceProviders],
+  )
+
+  const getRowKey = useCallback(
+    (row: TrustRelationship, index: number) => row.inum ?? `row-${index}`,
+    [],
+  )
 
   return (
     <GluuLoader blocking={isLoading}>
-      <GluuViewWrapper canShow={canReadWebsiteSsoServiceProviders}>
-        <MaterialTable
-          components={{
-            Container: PaperContainer,
-          }}
-          columns={tableColumns}
-          data={websiteSsoServiceProviders}
-          isLoading={isLoading}
-          title=""
-          actions={tableActions}
-          options={{
-            search: true,
-            searchFieldAlignment: 'left',
-            selection: false,
-            pageSize: 10,
-            idSynonym: 'inum',
-            headerStyle: {
-              ...applicationStyle.tableHeaderStyle,
-              backgroundColor: themeColors.background,
-              color: themeColors.fontColor,
-            } as React.CSSProperties,
-            actionsColumnIndex: -1,
-          }}
-        />
-      </GluuViewWrapper>
-      {canDeleteWebsiteSsoServiceProviders && (
-        <GluuDialog
-          row={item}
-          name={item?.displayName || ''}
-          handler={toggle}
-          modal={modal}
-          subject="saml website sso service provider"
-          onAccept={onDeletionConfirmed}
-          feature={adminUiFeatures.saml_delete}
-        />
-      )}
+      <div className={classes.page}>
+        <GluuViewWrapper canShow={canReadWebsiteSsoServiceProviders}>
+          <div className={classes.searchCard}>
+            <div className={classes.searchCardContent}>
+              <GluuSearchToolbar
+                searchLabel={`${t('fields.pattern')}:`}
+                searchPlaceholder={t('placeholders.search_pattern')}
+                searchValue={pattern}
+                searchOnType
+                onSearch={handleSearch}
+                onSearchSubmit={handleSearch}
+                onRefresh={canReadWebsiteSsoServiceProviders ? handleRefresh : undefined}
+                refreshLoading={isLoading}
+                primaryAction={primaryAction}
+                disabled={isLoading}
+              />
+            </div>
+          </div>
+
+          <div className={classes.tableCard}>
+            <GluuTable<TrustRelationship>
+              columns={columns}
+              data={pagedProviders}
+              loading={false}
+              pagination={pagination}
+              onPagingSizeSync={onPagingSizeSync}
+              actions={actions}
+              getRowKey={getRowKey}
+              emptyMessage={t('messages.no_data')}
+            />
+          </div>
+        </GluuViewWrapper>
+        {canDeleteWebsiteSsoServiceProviders && (
+          <GluuDialog
+            row={item}
+            name={item?.displayName || ''}
+            handler={toggle}
+            modal={modal}
+            subject="saml website sso service provider"
+            onAccept={onDeletionConfirmed}
+            feature={adminUiFeatures.saml_delete}
+          />
+        )}
+      </div>
     </GluuLoader>
   )
 })
 
 WebsiteSsoServiceProviderList.displayName = 'WebsiteSsoServiceProviderList'
 
+export { matchesPattern }
 export default WebsiteSsoServiceProviderList
diff --git a/admin-ui/plugins/saml/components/styles/WebsiteSsoList.style.ts b/admin-ui/plugins/saml/components/styles/WebsiteSsoList.style.ts
new file mode 100644
index 0000000000..9649b4c5fe
--- /dev/null
+++ b/admin-ui/plugins/saml/components/styles/WebsiteSsoList.style.ts
@@ -0,0 +1,45 @@
+import { makeStyles } from 'tss-react/mui'
+import type { ThemeConfig } from '@/context/theme/config'
+import { BORDER_RADIUS, ICON_SIZE, SPACING } from '@/constants'
+import { getCardBorderStyle } from '@/styles/cardBorderStyles'
+import { createSearchCardStyle } from '@/styles/searchCardStyle'
+import { fontFamily } from '@/styles/fonts'
+
+const CARD_INNER_PADDING = 20
+
+export const useStyles = makeStyles<{ isDark: boolean; themeColors: ThemeConfig }>()((
+  _,
+  { isDark, themeColors },
+) => {
+  const cardBorderStyle = getCardBorderStyle({ isDark, borderRadius: BORDER_RADIUS.DEFAULT })
+  const cardBg = themeColors.settings?.cardBackground ?? themeColors.card.background
+  return {
+    page: { fontFamily, paddingTop: SPACING.PAGE },
+    searchCard: createSearchCardStyle({ cardBg, isDark }),
+    searchCardContent: {
+      position: 'relative' as const,
+      zIndex: 2,
+      isolation: 'isolate' as const,
+      pointerEvents: 'auto' as const,
+    },
+    tableCard: {
+      'width': '100%',
+      'maxWidth': '100%',
+      'minWidth': 0,
+      'marginTop': SPACING.PAGE,
+      'backgroundColor': cardBg,
+      ...cardBorderStyle,
+      'borderRadius': BORDER_RADIUS.DEFAULT,
+      'padding': `${CARD_INNER_PADDING}px`,
+      'position': 'relative' as const,
+      'overflow': 'visible',
+      'boxSizing': 'border-box' as const,
+      '& table td': { verticalAlign: 'middle' },
+      '& table th': { verticalAlign: 'middle' },
+    },
+    editIcon: { fontSize: ICON_SIZE.SM },
+    deleteIcon: { fontSize: ICON_SIZE.SM },
+    viewIcon: { fontSize: ICON_SIZE.SM },
+    addIcon: { fontSize: ICON_SIZE.MD },
+  }
+})
diff --git a/admin-ui/plugins/saml/helper/index.ts b/admin-ui/plugins/saml/helper/index.ts
index c29f45a1ea..9e1c94e744 100644
--- a/admin-ui/plugins/saml/helper/index.ts
+++ b/admin-ui/plugins/saml/helper/index.ts
@@ -13,8 +13,3 @@ export {
   buildIdentityProviderPayload,
   buildWebsiteSsoServiceProviderPayload,
 } from './utils'
-export {
-  PaperContainer,
-  getIdentityProviderTableCols,
-  getServiceProviderTableCols,
-} from './tableUtils'
diff --git a/admin-ui/plugins/saml/helper/tableUtils.tsx b/admin-ui/plugins/saml/helper/tableUtils.tsx
deleted file mode 100644
index d739bac3a7..0000000000
--- a/admin-ui/plugins/saml/helper/tableUtils.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import { Paper } from '@mui/material'
-import type { TFunction } from 'i18next'
-
-export interface TableColumn {
-  title: string
-  field: string
-}
-
-export const getIdentityProviderTableCols = (t: TFunction): TableColumn[] => [
-  {
-    title: `${t('fields.inum')}`,
-    field: 'inum',
-  },
-  {
-    title: `${t('fields.displayName')}`,
-    field: 'displayName',
-  },
-  {
-    title: `${t('fields.enabled')}`,
-    field: 'enabled',
-  },
-]
-
-export const getServiceProviderTableCols = (t: TFunction): TableColumn[] => [
-  {
-    title: `${t('fields.inum')}`,
-    field: 'inum',
-  },
-  {
-    title: `${t('fields.displayName')}`,
-    field: 'displayName',
-  },
-  {
-    title: `${t('fields.enabled')}`,
-    field: 'enabled',
-  },
-]
-
-export const PaperContainer = React.memo((props: React.ComponentProps<typeof Paper>) => (
-  <Paper {...props} elevation={0} />
-))
-
-PaperContainer.displayName = 'PaperContainer'
diff --git a/admin-ui/plugins/scripts/components/CustomScriptEditPage.tsx b/admin-ui/plugins/scripts/components/CustomScriptEditPage.tsx
index 4321d4340a..01597f44d9 100644
--- a/admin-ui/plugins/scripts/components/CustomScriptEditPage.tsx
+++ b/admin-ui/plugins/scripts/components/CustomScriptEditPage.tsx
@@ -69,6 +69,11 @@ const CustomScriptEditPage: React.FC = () => {
     [updateMutation, dispatch, t],
   )
 
+  const isBlocking = useMemo(
+    () => loadingScript || updateMutation.isPending,
+    [loadingScript, updateMutation.isPending],
+  )
+
   if (fetchError && !loadingScript) {
     return (
       <GluuPageContent>
@@ -89,11 +94,6 @@ const CustomScriptEditPage: React.FC = () => {
     )
   }
 
-  const isBlocking = useMemo(
-    () => loadingScript || updateMutation.isPending,
-    [loadingScript, updateMutation.isPending],
-  )
-
   return (
     <GluuPageContent>
       <GluuViewWrapper canShow={canRead}>
diff --git a/admin-ui/plugins/scripts/components/CustomScriptListPage.tsx b/admin-ui/plugins/scripts/components/CustomScriptListPage.tsx
index de7341910f..bfd2ecc70a 100644
--- a/admin-ui/plugins/scripts/components/CustomScriptListPage.tsx
+++ b/admin-ui/plugins/scripts/components/CustomScriptListPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useCallback, useMemo, memo } from 'react'
+import React, { useState, useEffect, use, useCallback, useMemo, memo } from 'react'
 import { Add, DeleteOutlined, Edit, VisibilityOutlined } from '@/components/icons'
 import { useAppDispatch } from '@/redux/hooks'
 import GluuText from 'Routes/Apps/Gluu/GluuText'
@@ -55,7 +55,7 @@ const CustomScriptListPage: React.FC = () => {
   const { navigateToRoute } = useAppNavigation()
   const { canRead, canWrite, canDelete } = usePermission(scriptsResourceId)
 
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const { themeColors, isDarkTheme } = useMemo(() => {
     const selected = theme?.state?.theme || DEFAULT_THEME
     return {
diff --git a/admin-ui/plugins/smtp/components/SmtpForm.tsx b/admin-ui/plugins/smtp/components/SmtpForm.tsx
index 6723000a09..51a528c4bd 100644
--- a/admin-ui/plugins/smtp/components/SmtpForm.tsx
+++ b/admin-ui/plugins/smtp/components/SmtpForm.tsx
@@ -16,9 +16,9 @@ import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { THEME_DARK } from '@/context/theme/constants'
 import { useAppDispatch, useAppSelector } from '@/redux/hooks'
-import { toast } from 'react-toastify'
 import { adminUiFeatures, OPACITY } from '@/constants'
 import { putConfigWorker } from 'Redux/features/authSlice'
+import { updateToast } from 'Redux/features/toastSlice'
 import { SmtpFormValues, SmtpFormProps } from 'Plugins/smtp/types'
 import { trimObjectStrings } from 'Utils/Util'
 import {
@@ -129,7 +129,7 @@ const SmtpForm = (props: Readonly<SmtpFormProps>) => {
           touched[k] = true
         }
         formik.setTouched(touched)
-        toast.error(t('messages.mandatory_fields_required'))
+        dispatch(updateToast(true, 'error', t('messages.mandatory_fields_required')))
         return
       }
       const { smtp_authentication_account_password, key_store_password, ...rest } = formik.values
@@ -143,7 +143,7 @@ const SmtpForm = (props: Readonly<SmtpFormProps>) => {
       }
       handleSubmit(toSmtpConfiguration(trimmedValues), userMessage)
     },
-    [readOnly, formik, handleSubmit, t],
+    [readOnly, formik, handleSubmit, t, dispatch],
   )
 
   const testSmtpConfig = useCallback(() => {
@@ -155,9 +155,9 @@ const SmtpForm = (props: Readonly<SmtpFormProps>) => {
         message: t('messages.smtp_test_message'),
       })
     } else {
-      toast.error(t('messages.mandatory_fields_required'))
+      dispatch(updateToast(true, 'error', t('messages.mandatory_fields_required')))
     }
-  }, [readOnly, formik.isValid, onTestSmtp, t])
+  }, [readOnly, formik.isValid, onTestSmtp, t, dispatch])
 
   const keystoreTooltip = useCallback(
     (fieldLabel: string) =>
diff --git a/admin-ui/plugins/user-claims/components/UserClaimsAddPage.tsx b/admin-ui/plugins/user-claims/components/UserClaimsAddPage.tsx
index 6e919a2921..69619932a9 100644
--- a/admin-ui/plugins/user-claims/components/UserClaimsAddPage.tsx
+++ b/admin-ui/plugins/user-claims/components/UserClaimsAddPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, type JSX } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
diff --git a/admin-ui/plugins/user-claims/components/UserClaimsEditPage.tsx b/admin-ui/plugins/user-claims/components/UserClaimsEditPage.tsx
index 85b2316ab1..f14a0483c7 100644
--- a/admin-ui/plugins/user-claims/components/UserClaimsEditPage.tsx
+++ b/admin-ui/plugins/user-claims/components/UserClaimsEditPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, type JSX } from 'react'
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useTheme } from '@/context/theme/themeContext'
diff --git a/admin-ui/plugins/user-claims/components/UserClaimsListPage.tsx b/admin-ui/plugins/user-claims/components/UserClaimsListPage.tsx
index 7988fd57af..119c8cf79b 100644
--- a/admin-ui/plugins/user-claims/components/UserClaimsListPage.tsx
+++ b/admin-ui/plugins/user-claims/components/UserClaimsListPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext, useCallback, useMemo, memo } from 'react'
+import React, { useState, use, useCallback, useMemo, memo } from 'react'
 import { Add, DeleteOutlined, Edit, VisibilityOutlined } from '@/components/icons'
 import { useAppNavigation, ROUTES } from '@/helpers/navigation'
 import { GluuBadge } from '@/components/GluuBadge'
@@ -43,7 +43,7 @@ const UserClaimsListPage: React.FC = () => {
 
   const { canRead, canWrite, canDelete } = usePermission(attributeResourceId)
 
-  const theme = useContext(ThemeContext)
+  const theme = use(ThemeContext)
   const { themeColors, isDarkTheme } = useMemo(() => {
     const selected = theme?.state?.theme || DEFAULT_THEME
     return {
diff --git a/admin-ui/plugins/user-claims/components/UserClaimsViewPage.tsx b/admin-ui/plugins/user-claims/components/UserClaimsViewPage.tsx
index 17e738f14f..48a4086903 100644
--- a/admin-ui/plugins/user-claims/components/UserClaimsViewPage.tsx
+++ b/admin-ui/plugins/user-claims/components/UserClaimsViewPage.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, type JSX } from 'react'
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useTheme } from '@/context/theme/themeContext'
diff --git a/admin-ui/plugins/user-management/__tests__/helpers/userManagementTestUtils.tsx b/admin-ui/plugins/user-management/__tests__/helpers/userManagementTestUtils.tsx
index e066f9cea9..0e5f0348bd 100644
--- a/admin-ui/plugins/user-management/__tests__/helpers/userManagementTestUtils.tsx
+++ b/admin-ui/plugins/user-management/__tests__/helpers/userManagementTestUtils.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { Provider } from 'react-redux'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { combineReducers, configureStore } from '@reduxjs/toolkit'
diff --git a/admin-ui/plugins/user-management/__tests__/utils/claimLabelUtils.test.ts b/admin-ui/plugins/user-management/__tests__/utils/claimLabelUtils.test.ts
index 865bce1351..fb37f1aa71 100644
--- a/admin-ui/plugins/user-management/__tests__/utils/claimLabelUtils.test.ts
+++ b/admin-ui/plugins/user-management/__tests__/utils/claimLabelUtils.test.ts
@@ -1,5 +1,10 @@
 import i18next from 'i18next'
-import { getClaimLabel, getClaimLabelKey } from 'Plugins/user-management/utils/claimLabelUtils'
+import {
+  getClaimLabel,
+  getClaimLabelKey,
+  getCountryName,
+} from 'Plugins/user-management/utils/claimLabelUtils'
+import { countries } from 'Plugins/user-management/common/countries'
 
 beforeAll(async () => {
   await i18next.init({
@@ -49,3 +54,18 @@ describe('getClaimLabelKey', () => {
     expect(result).toBe('nonExistentClaimXyz123')
   })
 })
+
+describe('getCountryName', () => {
+  it('should return the country name for a known cca2 code', () => {
+    const sample = countries[0]
+    expect(getCountryName(sample.cca2)).toBe(sample.name)
+  })
+
+  it('should fall back to the code itself when the code is unknown', () => {
+    expect(getCountryName('ZZ')).toBe('ZZ')
+  })
+
+  it('should fall back to an empty string input unchanged', () => {
+    expect(getCountryName('')).toBe('')
+  })
+})
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 39d4ab3331..9f97487bfa 100644
--- a/admin-ui/plugins/user-management/__tests__/utils/formValidationUtils.test.ts
+++ b/admin-ui/plugins/user-management/__tests__/utils/formValidationUtils.test.ts
@@ -1,7 +1,5 @@
 import {
   isEmptyValue,
-  shouldDisableApplyButton,
-  hasFormChanges,
   buildFormOperations,
   diffFormValues,
 } from 'Plugins/user-management/utils/formValidationUtils'
@@ -40,42 +38,6 @@ describe('isEmptyValue', () => {
   })
 })
 
-describe('shouldDisableApplyButton', () => {
-  it('should return true when submitting', () => {
-    expect(shouldDisableApplyButton(true, true, true, { field: 'value' })).toBe(true)
-  })
-
-  it('should return true when not dirty and no modified fields', () => {
-    expect(shouldDisableApplyButton(false, false, true, {})).toBe(true)
-  })
-
-  it('should return false when dirty and valid', () => {
-    expect(shouldDisableApplyButton(false, true, true, {})).toBe(false)
-  })
-
-  it('should return false when has modified fields and valid', () => {
-    expect(shouldDisableApplyButton(false, false, true, { field: 'value' })).toBe(false)
-  })
-
-  it('should return true when not valid', () => {
-    expect(shouldDisableApplyButton(false, true, false, {})).toBe(true)
-  })
-})
-
-describe('hasFormChanges', () => {
-  it('should return true when dirty', () => {
-    expect(hasFormChanges(true, {})).toBe(true)
-  })
-
-  it('should return true when has modified fields', () => {
-    expect(hasFormChanges(false, { field: 'value' })).toBe(true)
-  })
-
-  it('should return false when not dirty and no modified fields', () => {
-    expect(hasFormChanges(false, {})).toBe(false)
-  })
-})
-
 describe('buildFormOperations', () => {
   it('should convert modified fields to patch operations', () => {
     const modifiedFields = {
diff --git a/admin-ui/plugins/user-management/common/Constants.ts b/admin-ui/plugins/user-management/common/Constants.ts
index 6f5d9f489f..ffce2d347a 100644
--- a/admin-ui/plugins/user-management/common/Constants.ts
+++ b/admin-ui/plugins/user-management/common/Constants.ts
@@ -2,13 +2,13 @@ export const USER_ROLE_FORM_ATTR = 'role'
 export const COUNTRY_ATTR = 'c'
 export const BIRTHDATE_ATTR = 'birthdate'
 export const USER_PASSWORD_ATTR = 'userPassword'
-export const USER_ID_ATTR = 'userId'
-export const DISPLAY_NAME_ATTR = 'displayName'
-export const MAIL_ATTR = 'mail'
+const USER_ID_ATTR = 'userId'
+const DISPLAY_NAME_ATTR = 'displayName'
+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'
+const UID_ATTR = 'uid'
+const GIVEN_NAME_ATTR = 'givenName'
 export const MIDDLE_NAME_ATTR = 'middleName'
 export const SN_ATTR = 'sn'
 export const FAMILY_NAME_ATTR = 'familyName'
@@ -16,15 +16,19 @@ export const EMAIL_VERIFIED_ATTR = 'emailVerified'
 export const CREATED_AT_ATTR = 'createdAt'
 export const UPDATED_AT_ATTR = 'updatedAt'
 
-export const RESERVED_STANDARD_CLAIMS = [
+export const STANDARD_FORM_FIELDS = [
   USER_ID_ATTR,
-  UID_ATTR,
-  DISPLAY_NAME_ATTR,
   MAIL_ATTR,
+  DISPLAY_NAME_ATTR,
   STATUS_ATTR,
+  GIVEN_NAME_ATTR,
+] as const
+
+export const RESERVED_STANDARD_CLAIMS = [
+  ...STANDARD_FORM_FIELDS,
+  UID_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/User2FADevicesModal.tsx b/admin-ui/plugins/user-management/components/User2FADevicesModal.tsx
index 212259924d..0662f3e5b6 100644
--- a/admin-ui/plugins/user-management/components/User2FADevicesModal.tsx
+++ b/admin-ui/plugins/user-management/components/User2FADevicesModal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, useContext, useRef, useMemo } from 'react'
+import React, { useEffect, useState, useCallback, use, useRef, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Close, DeleteOutlined } from '@/components/icons'
 import GluuViewDetailModal from 'Routes/Apps/Gluu/GluuViewDetailsModal'
@@ -38,7 +38,7 @@ const User2FADevicesModal = ({ isOpen, onClose, userDetails, theme }: User2FADev
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
   const queryClient = useQueryClient()
-  const themeContext = useContext(ThemeContext)
+  const themeContext = use(ThemeContext)
   const selectedTheme = useMemo(
     () => theme || themeContext?.state?.theme || DEFAULT_THEME,
     [theme, themeContext?.state?.theme],
diff --git a/admin-ui/plugins/user-management/components/UserEditPage.tsx b/admin-ui/plugins/user-management/components/UserEditPage.tsx
index 1ad47a1605..07b615234e 100644
--- a/admin-ui/plugins/user-management/components/UserEditPage.tsx
+++ b/admin-ui/plugins/user-management/components/UserEditPage.tsx
@@ -39,7 +39,7 @@ import {
   getStandardFieldValues,
   isPersistenceInfo,
 } from '../utils'
-import { USER_ID_ATTR, MAIL_ATTR, DISPLAY_NAME_ATTR, STATUS_ATTR, GIVEN_NAME_ATTR } from '../common'
+import { STANDARD_FORM_FIELDS } from '../common'
 import { adminUiFeatures } from '@/constants'
 import { AXIOS_INSTANCE } from 'Orval'
 import { SESSION_ENDPOINT } from '@/redux/api/backend-api'
@@ -150,11 +150,6 @@ const UserEditPage = () => {
   })
   const isSubmitting = updateUserMutation.isPending
 
-  const standardFields = useMemo(
-    () => [USER_ID_ATTR, MAIL_ATTR, DISPLAY_NAME_ATTR, STATUS_ATTR, GIVEN_NAME_ATTR] as const,
-    [],
-  )
-
   const submitData = useCallback(
     async (values: UserEditFormValues, modifiedFields: ModifiedFields, userMessage: string) => {
       const baseCustomAttributes = buildCustomAttributesFromValues(values, personAttributes)
@@ -163,7 +158,7 @@ const UserEditPage = () => {
         modifiedFields,
         personAttributes,
       )
-      const standardFieldValues = getStandardFieldValues(values, standardFields)
+      const standardFieldValues = getStandardFieldValues(values, STANDARD_FORM_FIELDS)
 
       await updateUserMutation.mutateAsync({
         data: {
@@ -185,7 +180,7 @@ const UserEditPage = () => {
         } as CustomUser,
       })
     },
-    [personAttributes, userDetails, persistenceType, standardFields, updateUserMutation],
+    [personAttributes, userDetails, persistenceType, updateUserMutation],
   )
 
   return (
diff --git a/admin-ui/plugins/user-management/components/UserForm.tsx b/admin-ui/plugins/user-management/components/UserForm.tsx
index 7c0b55f313..6fdc629e5f 100644
--- a/admin-ui/plugins/user-management/components/UserForm.tsx
+++ b/admin-ui/plugins/user-management/components/UserForm.tsx
@@ -19,7 +19,8 @@ import UserClaimEntry from './UserClaimEntry'
 import PasswordChangeModal from './PasswordChangeModal'
 import AvailableClaimsPanel from './AvailableClaimsPanel'
 import { buildFormOperations, diffFormValues } from '../utils'
-import { getClaimLabel } from '../utils/claimLabelUtils'
+import { getClaimLabel, getCountryName } from '../utils/claimLabelUtils'
+import { COUNTRY_ATTR } from '../common'
 import type {
   FormFieldValue,
   UserFormProps,
@@ -197,7 +198,11 @@ const UserForm = ({
         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) }
+        const displayValue =
+          path === COUNTRY_ATTR && typeof value === 'string' && value !== ''
+            ? getCountryName(value)
+            : value
+        return { path, value: displayValue, label: getClaimLabel(t, path, displayName) }
       }),
     [operations, memoizedPersonAttributes, t],
   )
diff --git a/admin-ui/plugins/user-management/components/UserList.tsx b/admin-ui/plugins/user-management/components/UserList.tsx
index d74568f7f1..a263056ae4 100644
--- a/admin-ui/plugins/user-management/components/UserList.tsx
+++ b/admin-ui/plugins/user-management/components/UserList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, useMemo } from 'react'
+import React, { useEffect, useState, useCallback, useMemo, type JSX } from 'react'
 import { Add, DeleteOutlined, Edit, LockOpenIcon } from '@/components/icons'
 import UserDetailViewPage from './UserDetailViewPage'
 import User2FADevicesModal from './User2FADevicesModal'
diff --git a/admin-ui/plugins/user-management/utils/claimLabelUtils.ts b/admin-ui/plugins/user-management/utils/claimLabelUtils.ts
index 65d50a351f..bfbacc7383 100644
--- a/admin-ui/plugins/user-management/utils/claimLabelUtils.ts
+++ b/admin-ui/plugins/user-management/utils/claimLabelUtils.ts
@@ -1,4 +1,9 @@
 import type { TFunction } from 'i18next'
+import { countries } from '../common/countries'
+
+const countryNameByCode = new Map(countries.map((country) => [country.cca2, country.name]))
+
+export const getCountryName = (code: string): string => countryNameByCode.get(code) ?? code
 
 export const getClaimLabelKey = (t: TFunction, name: string, displayName?: string): string => {
   const key = `claims.${name}`
diff --git a/admin-ui/plugins/user-management/utils/formValidationUtils.ts b/admin-ui/plugins/user-management/utils/formValidationUtils.ts
index f276c4a36c..d82e985c9b 100644
--- a/admin-ui/plugins/user-management/utils/formValidationUtils.ts
+++ b/admin-ui/plugins/user-management/utils/formValidationUtils.ts
@@ -46,20 +46,6 @@ export const diffFormValues = (
   return result
 }
 
-export const shouldDisableApplyButton = (
-  isSubmitting: boolean,
-  isDirty: boolean,
-  isValid: boolean,
-  modifiedFields: ModifiedFields,
-): boolean => {
-  const hasModifiedFields = Object.keys(modifiedFields).length > 0
-  const isFormChanged = isDirty || hasModifiedFields
-
-  if (isSubmitting || !isFormChanged) return true
-  if (!isValid) return true
-  return false
-}
-
 export const buildFormOperations = (modifiedFields: ModifiedFields) => {
   return Object.keys(modifiedFields).map((key) => ({
     path: key,
@@ -67,7 +53,3 @@ export const buildFormOperations = (modifiedFields: ModifiedFields) => {
     op: 'replace' as const,
   }))
 }
-
-export const hasFormChanges = (isDirty: boolean, modifiedFields: ModifiedFields): boolean => {
-  return isDirty || Object.keys(modifiedFields).length > 0
-}
diff --git a/admin-ui/vite.config.ts b/admin-ui/vite.config.ts
index b3e3cfee28..9151d374c2 100644
--- a/admin-ui/vite.config.ts
+++ b/admin-ui/vite.config.ts
@@ -7,8 +7,6 @@ import { SondaVitePlugin } from 'sonda'
 import {
   REGEX_BACKSLASH,
   REGEX_CODE_BUILD_ASSET,
-  REGEX_DATE_FNS_BARE_SPECIFIER,
-  REGEX_DATE_FNS_SUBPATH_SPECIFIER,
   REGEX_FORWARD_SLASH,
   REGEX_NODE_MODULES_PREFIX,
   REGEX_NODE_MODULES_SEGMENT,
@@ -31,27 +29,6 @@ const timingPlugin = () => {
   }
 }
 
-const DATE_FNS_PACKAGE_DIR = path.resolve(process.cwd(), 'node_modules/date-fns')
-
-const dateFnsEsmResolverPlugin = () => {
-  return {
-    name: 'admin-ui:date-fns-esm',
-    enforce: 'pre' as const,
-    resolveId(source: string): string | null {
-      let mjsPath: string | null = null
-      if (REGEX_DATE_FNS_BARE_SPECIFIER.test(source)) {
-        mjsPath = path.join(DATE_FNS_PACKAGE_DIR, 'index.mjs')
-      } else {
-        const subpath = REGEX_DATE_FNS_SUBPATH_SPECIFIER.exec(source)?.[1]
-        if (subpath) {
-          mjsPath = path.join(DATE_FNS_PACKAGE_DIR, `${subpath}.mjs`)
-        }
-      }
-      return mjsPath && existsSync(mjsPath) ? mjsPath : null
-    },
-  }
-}
-
 const REGEX_WASM_ASSET = /\.wasm$/
 
 const wasmPreloadPlugin = (base: string) => {
@@ -188,8 +165,6 @@ const FEATURE_GROUPS: ReadonlyArray<readonly [name: string, packages: readonly s
   ],
   ['vendor-data', ['axios', 'dayjs', 'lodash']],
   ['vendor-forms', ['formik', 'yup']],
-  ['vendor-date', ['date-fns']],
-  ['vendor-feedback', ['react-toastify']],
 ]
 
 const getVendorPackageName = (id: string): string | null => {
@@ -308,7 +283,6 @@ export default defineConfig(({ mode }) => {
     base,
     publicDir: 'public',
     plugins: [
-      dateFnsEsmResolverPlugin(),
       timingPlugin(),
       wasm(),
       wasmPreloadPlugin(base),