diff --git a/.gitignore b/.gitignore
index 503c3b8e270..c2682b44790 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,3 +51,4 @@ RTA-Jira-Tasks-Summary.md
 
 # PMM Demo backups (it would increase repository size significantly)
 dev/clickhouse-backups/
+node_modules/@percona/percona-ui
diff --git a/ui/.cursor/rules/percona_ui-styling.mdc b/ui/.cursor/rules/percona_ui-styling.mdc
new file mode 100644
index 00000000000..37313d4dbc0
--- /dev/null
+++ b/ui/.cursor/rules/percona_ui-styling.mdc
@@ -0,0 +1,50 @@
+---
+description: "Percona UI + PMM UI styling — MUI + @percona/percona-ui, theme tokens, layout conventions, what not to do"
+alwaysApply: true
+---
+
+## Stack order
+
+1. **MUI** (mostly `@mui/material`, `@mui/icons-material`, `@mui/x-date-pickers` — though other MUI dependencies may also be in use) is the base component and styling API. Use MUI primitives for layout and composition.
+2. **`@percona/percona-ui`** is the Percona design layer on top of MUI (theme, branded components, tables, dialogs). Prefer exports from `@percona/percona-ui` when they wrap or standardize behavior (e.g. `Table`, `Dialog`, `ThemeContextProvider`, `pmmThemeOptions`, `NotistackMuiSnackbar`, `primitives`).
+
+## Do not introduce
+
+- Do not introduce other CSS/UI frameworks (Tailwind, Bootstrap, styled-components, etc.) or ad-hoc global CSS that fights the theme.
+- Do not introduce hard-coded colors, font families, or spacing that bypass the theme. Prefer `sx` with `theme.palette`, `theme.spacing`, breakpoints, and MUI `Typography` variants.
+- Do not introduce custom component libraries outside MUI + `@percona/percona-ui` unless explicitly requested.
+
+## Theming and color mode
+
+- The app root uses `ThemeContextProvider` with `pmmThemeOptions` from `@percona/percona-ui` — do not replace with a separate `ThemeProvider` or duplicate theme objects in feature code.
+- Use `ColorModeContext` / existing hooks (e.g. `useColorMode` in `hooks/theme.ts`) for light/dark; avoid direct `document` or `localStorage` theme hacks.
+
+## Layout and PMM consistency
+
+- Follow established layout patterns: MUI `Stack`, `Box`, `Grid`, page shells like `components/page/Page.tsx` (max width, padding, `gap` aligned with existing `sx`).
+- Avoid one-off page structures that break alignment with the rest of PMM (arbitrary full-viewport hacks, inconsistent gutters).
+
+## Styling mechanics
+
+- Prefer **`sx`** and **`useTheme()`** from `@mui/material/styles` for component-level styling.
+- For icons, use **`@mui/icons-material`** (Outlined variants where the codebase already does).
+
+## When something is missing
+
+- If a token or component behavior should be shared across products, explain it to them, plan a change, present it as a proposal to extend **`@percona/percona-ui`** (theme / components) rather than embedding one-off design in PMM only.
+- If unsure whether a primitive exists in `percona-ui`, check that package or Storybook before inventing a parallel implementation in PMM.
+
+## Examples
+
+```tsx
+// Good — MUI + theme tokens
+<Stack spacing={2} sx={{ pt: 1, color: 'text.secondary' }}>
+
+// Bad — unrelated styling stack
+<div className="tailwind-p-4 text-gray-500">
+
+// Good — branded table from design system
+import { Table } from '@percona/percona-ui';
+
+// Bad — pulling in another data-table library for the same job
+```
diff --git a/ui/apps/pmm-compat/src/compat.ts b/ui/apps/pmm-compat/src/compat.ts
index d6631738647..1975d7094b7 100644
--- a/ui/apps/pmm-compat/src/compat.ts
+++ b/ui/apps/pmm-compat/src/compat.ts
@@ -158,6 +158,11 @@ export const initialize = () => {
     },
   });
 
+  messenger.addListener({
+    type: 'SETTINGS_CHANGED',
+    onMessage: () => getAppEvents().publish(new SettingsUpdatedEvent()),
+  });
+
   getAppEvents().subscribe(SettingsUpdatedEvent, () => {
     messenger.sendMessage({
       type: 'SETTINGS_CHANGED',
diff --git a/ui/apps/pmm/README.md b/ui/apps/pmm/README.md
index 1912c40897c..15be98de381 100644
--- a/ui/apps/pmm/README.md
+++ b/ui/apps/pmm/README.md
@@ -12,6 +12,7 @@ See the [PMM Documentation](https://www.percona.com/doc/percona-monitoring-and-m
 See detailed information about prerequisites and setup [here](../../README.md)
 
 # Locally testing @percona/percona-ui
+
 - Checkout code from https://github.com/percona/percona-ui
 - From the lib folder, run `pnpm build:watch` and `yarn link`
 - On this repo's `ui/apps/pmm` folder, run `yarn link @percona/percona-ui` and uncomment the `exclude` block from `vite.config.ts`
diff --git a/ui/apps/pmm/package.json b/ui/apps/pmm/package.json
index 0392e21d070..bf51b86c11d 100644
--- a/ui/apps/pmm/package.json
+++ b/ui/apps/pmm/package.json
@@ -25,7 +25,7 @@
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
     "@mui/x-date-pickers": "^7.5.0",
-    "@percona/percona-ui": "1.0.13",
+    "@percona/percona-ui": "1.0.14",
     "@pmm/shared": "*",
     "@reactour/tour": "^3.8.0",
     "@tanstack/react-query": "^5.45.1",
@@ -35,6 +35,7 @@
     "notistack": "^3.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.71.2",
     "react-is": "18.3.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.30.2",
diff --git a/ui/apps/pmm/src/Providers.tsx b/ui/apps/pmm/src/Providers.tsx
index 2750979fc6a..073c25c4e18 100644
--- a/ui/apps/pmm/src/Providers.tsx
+++ b/ui/apps/pmm/src/Providers.tsx
@@ -26,6 +26,9 @@ const Providers: FC<PropsWithChildren> = () => (
                 <TourProvider>
                   <GlobalStyles
                     styles={{
+                      html: {
+                        scrollbarGutter: 'stable',
+                      },
                       'html, body, div#root': {
                         minHeight: '100vh',
                       },
diff --git a/ui/apps/pmm/src/api/settings.ts b/ui/apps/pmm/src/api/settings.ts
index 467561781fb..9ca8326bcb3 100644
--- a/ui/apps/pmm/src/api/settings.ts
+++ b/ui/apps/pmm/src/api/settings.ts
@@ -1,6 +1,8 @@
 import {
   GetFrontendSettingsResponse,
   GetSettingsResponse,
+  Settings,
+  UpdateSettingsPayload,
 } from 'types/settings.types';
 import { api, grafanaApi } from './api';
 
@@ -19,3 +21,10 @@ export const getFrontendSettings = async () => {
     await grafanaApi.get<GetFrontendSettingsResponse>('/frontend/settings');
   return res.data;
 };
+
+export const updateSettings = async (
+  payload: UpdateSettingsPayload
+): Promise<Settings> => {
+  const res = await api.put<GetSettingsResponse>('/server/settings', payload);
+  return res.data.settings;
+};
diff --git a/ui/apps/pmm/src/components/ha-badge/HighAvailabilityBadge.styles.ts b/ui/apps/pmm/src/components/ha-badge/HighAvailabilityBadge.styles.ts
index 09263cabdf4..4dbd5e705a8 100644
--- a/ui/apps/pmm/src/components/ha-badge/HighAvailabilityBadge.styles.ts
+++ b/ui/apps/pmm/src/components/ha-badge/HighAvailabilityBadge.styles.ts
@@ -20,8 +20,8 @@ export const getStyles = (theme: Theme) => ({
         : theme.palette.error.dark,
     backgroundColor:
       theme.palette.mode === 'light'
-      ? theme.palette.error.surface
-      : theme.palette.error.dark,
+        ? theme.palette.error.surface
+        : theme.palette.error.dark,
     transition: 'none',
   },
   down: {
diff --git a/ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.styles.ts b/ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.styles.ts
index eb647ad3bfd..744c8ba14c3 100644
--- a/ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.styles.ts
+++ b/ui/apps/pmm/src/components/ha-icon/HighAvailabilityIcon.styles.ts
@@ -1,6 +1,8 @@
 import { Theme } from '@mui/material';
 
-export const getStyles = ({ palette: { background, warning, error, info } }: Theme) => ({
+export const getStyles = ({
+  palette: { background, warning, error, info },
+}: Theme) => ({
   icon: {
     width: 20,
     height: 20,
diff --git a/ui/apps/pmm/src/components/main/MainWithNav.test.tsx b/ui/apps/pmm/src/components/main/MainWithNav.test.tsx
index 1cddbefdb2a..d1c8f1e6bd9 100644
--- a/ui/apps/pmm/src/components/main/MainWithNav.test.tsx
+++ b/ui/apps/pmm/src/components/main/MainWithNav.test.tsx
@@ -32,7 +32,7 @@ const setup = ({
       )}
     </TestWrapper>
   );
-}
+};
 
 describe('MainWithNav', () => {
   it('shows loading', () => {
@@ -60,12 +60,16 @@ describe('MainWithNav', () => {
   });
 
   it('hides sidebar so the renderer gets a minimal layout', () => {
-    setup({ isLoading: false, isLoggedIn: true, kioskModeActive: false, search: 'render=1' });
+    setup({
+      isLoading: false,
+      isLoggedIn: true,
+      kioskModeActive: false,
+      search: 'render=1',
+    });
 
     expect(screen.queryByTestId('pmm-sidebar')).toBeNull();
   });
 
-
   it('shows sidebar when not in renderer mode', () => {
     setup({ isLoading: false, isLoggedIn: true, kioskModeActive: false });
 
diff --git a/ui/apps/pmm/src/components/main/header/qan-header/qan-header-actions/QanHeaderActions.tsx b/ui/apps/pmm/src/components/main/header/qan-header/qan-header-actions/QanHeaderActions.tsx
index 4f6492fa54e..093d33a2e0e 100644
--- a/ui/apps/pmm/src/components/main/header/qan-header/qan-header-actions/QanHeaderActions.tsx
+++ b/ui/apps/pmm/src/components/main/header/qan-header/qan-header-actions/QanHeaderActions.tsx
@@ -12,7 +12,10 @@ export const QanHeaderActions: FC = () => {
 
   const handleCopy = async () => {
     try {
-      const path = constructUrl(location).replace(/\/pmm-ui\/(next\/)?graph\//, '');
+      const path = constructUrl(location).replace(
+        /\/pmm-ui\/(next\/)?graph\//,
+        ''
+      );
       const res = location.pathname.includes('/graph')
         ? await createShortUrl(path)
         : { url: window.location.href };
diff --git a/ui/apps/pmm/src/components/page/Page.tsx b/ui/apps/pmm/src/components/page/Page.tsx
index 55e568f1c1e..25f20f304d3 100644
--- a/ui/apps/pmm/src/components/page/Page.tsx
+++ b/ui/apps/pmm/src/components/page/Page.tsx
@@ -2,8 +2,11 @@ import { FC } from 'react';
 import { PageProps } from './Page.types';
 import {
   Alert,
+  Box,
   Card,
   CardActions,
+  Divider,
+  GlobalStyles,
   Link,
   Stack,
   Typography,
@@ -14,46 +17,70 @@ import { PMM_HOME_URL } from 'lib/constants';
 import { Footer } from 'components/footer';
 import { updateDocumentTitle } from 'utils/document.utils';
 
-export const Page: FC<PageProps> = ({ title, topBar, footer, children }) => {
+export const Page: FC<PageProps> = ({
+  title,
+  topBar,
+  footer,
+  children,
+  fullWidth,
+  surface,
+}) => {
   const { user } = useUser();
   updateDocumentTitle(title);
 
   return (
-    <Stack
-      sx={(theme) => ({
+    <>
+      {surface && (
+        <GlobalStyles
+          styles={(theme) => ({
+            'html, body': {
+              backgroundColor: surface === 'paper'
+                ? theme.palette.background.paper
+                : theme.palette.background.default,
+            },
+          })}
+        />
+      )}
+      <Stack
+      sx={{
         flex: 1,
-        [theme.breakpoints.up('lg')]: {
-          width: 1000,
-        },
-        width: {
-          md: 'auto',
+        width: '100%',
+        maxWidth: {
+          lg: 1000,
         },
         p: {
           xs: 2,
         },
+        px: {
+          md: fullWidth ? 4 : undefined,
+        },
         mx: 'auto',
-        gap: 3,
+        gap: 2,
         mt: 1,
-      })}
+      }}
     >
       {topBar}
       {!!title && <Typography variant="h2">{title}</Typography>}
-      {user?.isAuthorized ? (
-        children
-      ) : (
-        <Card variant="outlined" sx={{ p: 2 }}>
-          <Alert severity="error" sx={{ mb: 1 }}>
-            {Messages.noAcccess}
-          </Alert>
-          <CardActions>
-            <Typography>
-              {Messages.goBack}
-              <Link href={PMM_HOME_URL}>{Messages.home}</Link>
-            </Typography>
-          </CardActions>
-        </Card>
-      )}
+      <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+        {user?.isAuthorized ? (
+          children
+        ) : (
+          <Card variant="outlined" sx={{ p: 2 }}>
+            <Alert severity="error" sx={{ mb: 1 }}>
+              {Messages.noAcccess}
+            </Alert>
+            <CardActions>
+              <Typography>
+                {Messages.goBack}
+                <Link href={PMM_HOME_URL}>{Messages.home}</Link>
+              </Typography>
+            </CardActions>
+          </Card>
+        )}
+      </Box>
+      <Divider />
       {footer !== undefined ? footer : <Footer />}
     </Stack>
+    </>
   );
 };
diff --git a/ui/apps/pmm/src/components/page/Page.types.ts b/ui/apps/pmm/src/components/page/Page.types.ts
index 994f960f30f..0392ae9d6b4 100644
--- a/ui/apps/pmm/src/components/page/Page.types.ts
+++ b/ui/apps/pmm/src/components/page/Page.types.ts
@@ -4,4 +4,6 @@ export interface PageProps extends PropsWithChildren {
   title?: string;
   footer?: ReactNode;
   topBar?: ReactNode;
+  fullWidth?: boolean;
+  surface?: 'default' | 'paper';
 }
diff --git a/ui/apps/pmm/src/components/sidebar/Sidebar.tsx b/ui/apps/pmm/src/components/sidebar/Sidebar.tsx
index 0a81aa01e92..7a8acb7ddef 100644
--- a/ui/apps/pmm/src/components/sidebar/Sidebar.tsx
+++ b/ui/apps/pmm/src/components/sidebar/Sidebar.tsx
@@ -4,6 +4,8 @@ import { NavigationHeading } from './nav-heading';
 import { Drawer } from './drawer';
 import { NavItem } from './nav-item';
 import List from '@mui/material/List';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
 import { findActiveNavItem } from 'utils/navigation.utils';
 import { useLocation } from 'react-router-dom';
 import { NavItem as NavItemType } from 'types/navigation.types';
@@ -13,6 +15,8 @@ export const Sidebar: FC = () => {
   const [activeItem, setActiveItem] = useState<NavItemType>(navTree[0]);
   const [animating, setAnimating] = useState(false);
   const location = useLocation();
+  const theme = useTheme();
+  const isNarrow = useMediaQuery(theme.breakpoints.down('md'));
 
   const toggleSidebar = useCallback(() => {
     setNavOpen(!navOpen);
@@ -35,6 +39,13 @@ export const Sidebar: FC = () => {
     }
   }, [navTree, location.pathname]);
 
+  const handleNavItemClick = () => {
+    // autoclose sidebar when layout is narrow
+    if (isNarrow) {
+      setNavOpen(false);
+    }
+  };
+
   return (
     <Drawer
       open={navOpen}
@@ -63,6 +74,7 @@ export const Sidebar: FC = () => {
             item={item}
             activeItem={activeItem}
             drawerOpen={navOpen}
+            onClick={handleNavItemClick}
           />
         ))}
       </List>
diff --git a/ui/apps/pmm/src/components/sidebar/drawer/Drawer.tsx b/ui/apps/pmm/src/components/sidebar/drawer/Drawer.tsx
index 5d3cd1ad54c..15b20e4e88a 100644
--- a/ui/apps/pmm/src/components/sidebar/drawer/Drawer.tsx
+++ b/ui/apps/pmm/src/components/sidebar/drawer/Drawer.tsx
@@ -16,6 +16,17 @@ const Drawer = styled(MuiDrawer, {
       style: {
         ...openedMixin(theme),
         '& .MuiDrawer-paper': openedMixin(theme),
+        [theme.breakpoints.down('md')]: {
+          ...closedMixin(theme),
+          '& .MuiDrawer-paper': {
+            ...openedMixin(theme),
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            height: '100vh',
+            zIndex: theme.zIndex.drawer + 1,
+          },
+        },
       },
     },
     {
diff --git a/ui/apps/pmm/src/components/sidebar/nav-item/NavItem.tsx b/ui/apps/pmm/src/components/sidebar/nav-item/NavItem.tsx
index 914f001de1e..2cc2ad840a4 100644
--- a/ui/apps/pmm/src/components/sidebar/nav-item/NavItem.tsx
+++ b/ui/apps/pmm/src/components/sidebar/nav-item/NavItem.tsx
@@ -26,6 +26,7 @@ const NavItem: FC<NavItemProps> = ({
   item,
   drawerOpen,
   level = 0,
+  onClick,
 }) => {
   const active = useMemo(
     () => activeItem === item || hasChildMatch(item, activeItem),
@@ -62,6 +63,20 @@ const NavItem: FC<NavItemProps> = ({
     if (drawerOpen) {
       setIsOpen(true);
     }
+
+    if (onClick) {
+      onClick();
+    }
+  };
+
+  const handleItemClick = () => {
+    if (linkProps.onClick) {
+      linkProps.onClick();
+    }
+
+    if (onClick) {
+      onClick();
+    }
   };
 
   if (item.children?.length) {
@@ -145,6 +160,7 @@ const NavItem: FC<NavItemProps> = ({
                 activeItem={activeItem}
                 drawerOpen={drawerOpen}
                 level={level + 1}
+                onClick={handleItemClick}
               />
             ))}
           </List>
@@ -209,6 +225,7 @@ const NavItem: FC<NavItemProps> = ({
           ]}
           selected={active}
           {...linkProps}
+          onClick={handleItemClick}
           data-testid={dataTestid}
           data-navlevel={level}
         >
diff --git a/ui/apps/pmm/src/components/sidebar/nav-item/NavItem.types.ts b/ui/apps/pmm/src/components/sidebar/nav-item/NavItem.types.ts
index 148be39dab1..9d547570a41 100644
--- a/ui/apps/pmm/src/components/sidebar/nav-item/NavItem.types.ts
+++ b/ui/apps/pmm/src/components/sidebar/nav-item/NavItem.types.ts
@@ -5,4 +5,5 @@ export interface NavItemProps {
   level?: number;
   drawerOpen: boolean;
   activeItem: NavItem;
+  onClick?: () => void;
 }
diff --git a/ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.tsx b/ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.tsx
index 3de9a156ea3..f8ee01b9756 100644
--- a/ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.tsx
+++ b/ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.tsx
@@ -38,7 +38,9 @@ const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
         await navigator.clipboard.writeText(content);
         enqueueSnackbar('Query copied to clipboard', { variant: 'success' });
       } catch (error) {
-        enqueueSnackbar('Failed to copy query to clipboard', { variant: 'error' });
+        enqueueSnackbar('Failed to copy query to clipboard', {
+          variant: 'error',
+        });
       }
     } else {
       enqueueSnackbar('Clipboard is not available', { variant: 'error' });
diff --git a/ui/apps/pmm/src/contexts/grafana/grafana.provider.tsx b/ui/apps/pmm/src/contexts/grafana/grafana.provider.tsx
index 0e963fdfcff..59e47e24724 100644
--- a/ui/apps/pmm/src/contexts/grafana/grafana.provider.tsx
+++ b/ui/apps/pmm/src/contexts/grafana/grafana.provider.tsx
@@ -36,6 +36,7 @@ const isBrowser = () =>
 export const GrafanaProvider: FC<PropsWithChildren> = ({ children }) => {
   const navigationType = useNavigationType();
   const location = useLocation();
+  const isGrafanaPageRef = useRef<boolean>();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
@@ -48,6 +49,7 @@ export const GrafanaProvider: FC<PropsWithChildren> = ({ children }) => {
 
   const src = location.pathname.replace(PMM_NEW_NAV_PATH, '');
   const isGrafanaPage = src.startsWith(GRAFANA_SUB_PATH);
+  isGrafanaPageRef.current = isGrafanaPage;
 
   const [isLoaded, setIsLoaded] = useState(false);
   const frameRef = useRef<HTMLIFrameElement>(null);
@@ -89,7 +91,11 @@ export const GrafanaProvider: FC<PropsWithChildren> = ({ children }) => {
     messenger.addListener({
       type: 'LOCATION_CHANGE',
       onMessage: ({ payload: location }: LocationChangeMessage) => {
-        if (!location) {
+        if (
+          !location ||
+          // dont navigate if we are not on grafana page
+          !isGrafanaPageRef.current
+        ) {
           return;
         }
 
diff --git a/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts b/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts
index 5480fc056ba..83234357af0 100644
--- a/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts
+++ b/ui/apps/pmm/src/contexts/navigation/navigation.constants.ts
@@ -616,8 +616,10 @@ export const NAV_CONFIGURATION: NavItem = {
   id: 'configuration',
   icon: 'configuration',
   text: 'Configuration',
-  url: `${PMM_NEW_NAV_GRAFANA_PATH}/settings`,
+  url: `${PMM_NEW_NAV_PATH}/settings`,
   matches: [
+    `${PMM_NEW_NAV_PATH}/settings`,
+    `${PMM_NEW_NAV_PATH}/settings/*`,
     `${PMM_NEW_NAV_GRAFANA_PATH}/plugins`,
     `${PMM_NEW_NAV_GRAFANA_PATH}/admin`,
     `${PMM_NEW_NAV_GRAFANA_PATH}/admin/general`,
@@ -630,8 +632,11 @@ export const NAV_CONFIGURATION: NavItem = {
     {
       id: 'configuration-settings',
       text: 'Settings',
-      url: `${PMM_NEW_NAV_GRAFANA_PATH}/settings/advanced-settings`,
-      matches: [`${PMM_NEW_NAV_GRAFANA_PATH}/settings/*`],
+      url: `${PMM_NEW_NAV_PATH}/settings`,
+      matches: [
+        `${PMM_NEW_NAV_PATH}/settings`,
+        `${PMM_NEW_NAV_PATH}/settings/*`,
+      ],
     },
     {
       id: 'updates',
diff --git a/ui/apps/pmm/src/contexts/navigation/navigation.provider.tsx b/ui/apps/pmm/src/contexts/navigation/navigation.provider.tsx
index aacf59750f9..fc1df0ea70d 100644
--- a/ui/apps/pmm/src/contexts/navigation/navigation.provider.tsx
+++ b/ui/apps/pmm/src/contexts/navigation/navigation.provider.tsx
@@ -70,7 +70,6 @@ export const NavigationProvider: FC<PropsWithChildren> = ({ children }) => {
     items.push(NAV_QAN);
 
     if (user && settings) {
-
       if (settings.frontend.exploreEnabled && user.isEditor) {
         items.push(addExplore(settings.frontend));
       }
diff --git a/ui/apps/pmm/src/hooks/api/useSettings.ts b/ui/apps/pmm/src/hooks/api/useSettings.ts
index c0b44269d35..330a8eeac5f 100644
--- a/ui/apps/pmm/src/hooks/api/useSettings.ts
+++ b/ui/apps/pmm/src/hooks/api/useSettings.ts
@@ -1,14 +1,28 @@
-import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import {
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions,
+} from '@tanstack/react-query';
 import {
   getFrontendSettings,
   getReadonlySettings,
   getSettings,
+  updateSettings,
 } from 'api/settings';
-import { FrontendSettings, Settings } from 'types/settings.types';
+import messenger from 'lib/messenger';
+import {
+  FrontendSettings,
+  Settings,
+  UpdateSettingsPayload,
+} from 'types/settings.types';
+
+export const SETTINGS_QUERY_KEY = ['settings'] as const;
 
 export const useSettings = (options?: Partial<UseQueryOptions<Settings>>) =>
   useQuery({
-    queryKey: ['settings'],
+    queryKey: SETTINGS_QUERY_KEY,
     queryFn: () => getSettings(),
     ...options,
   });
@@ -30,3 +44,21 @@ export const useFrontendSettings = (
     queryFn: () => getFrontendSettings(),
     ...options,
   });
+
+export const useUpdateSettings = (
+  options?: Partial<UseMutationOptions<Settings, Error, UpdateSettingsPayload>>
+) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (payload) => updateSettings(payload),
+    ...options,
+    onSuccess: (data, variables, onMutate, context) => {
+      void queryClient.invalidateQueries({ queryKey: SETTINGS_QUERY_KEY });
+      messenger.sendMessage({
+        type: 'SETTINGS_CHANGED',
+      });
+      options?.onSuccess?.(data, variables, onMutate, context);
+    },
+  });
+};
diff --git a/ui/apps/pmm/src/hooks/updates.ts b/ui/apps/pmm/src/hooks/updates.ts
index 80cf707ad60..dbc10666bef 100644
--- a/ui/apps/pmm/src/hooks/updates.ts
+++ b/ui/apps/pmm/src/hooks/updates.ts
@@ -32,10 +32,8 @@ export const useSnooze = () => {
       return false;
     }
 
-    return (
-      diffFromNow(user.info.snoozedAt) <=
-      parseDuration(settings.updateSnoozeDuration)
-    );
+    const duration = settings.updateSnoozeDuration ?? '10s';
+    return diffFromNow(user.info.snoozedAt) <= parseDuration(duration);
   }, [latest, user, settings]);
 
   const snoozeUpdate = useCallback(async () => {
diff --git a/ui/apps/pmm/src/lib/constants.ts b/ui/apps/pmm/src/lib/constants.ts
index 28d8abcaa5b..cc28370b528 100644
--- a/ui/apps/pmm/src/lib/constants.ts
+++ b/ui/apps/pmm/src/lib/constants.ts
@@ -9,7 +9,7 @@ export const PMM_BASE_PATH = `/pmm-ui${PMM_NEW_NAV_PATH}`;
 export const PMM_NEW_NAV_GRAFANA_PATH = `${PMM_NEW_NAV_PATH}${GRAFANA_SUB_PATH}`;
 export const PMM_HOME_URL = `${GRAFANA_SUB_PATH}/d/pmm-home`;
 export const PMM_LOGIN_URL = `${GRAFANA_SUB_PATH}/login`;
-export const PMM_SETTINGS_URL = `${GRAFANA_SUB_PATH}/settings/advanced-settings`;
+export const PMM_SETTINGS_URL = `${PMM_BASE_PATH}/settings`;
 export const PMM_NEW_NAV_UPDATES_PATH = `${PMM_NEW_NAV_PATH}/updates`;
 export const PMM_SUPPORT_URL = 'https://per.co.na/pmm_documentation';
 export const PMM_DOCS_UPDATES_URL = 'https://per.co.na/pmm-upgrade';
diff --git a/ui/apps/pmm/src/pages/help-center/HelpCenter.tsx b/ui/apps/pmm/src/pages/help-center/HelpCenter.tsx
index 6ba0c037732..76878fbf4b5 100644
--- a/ui/apps/pmm/src/pages/help-center/HelpCenter.tsx
+++ b/ui/apps/pmm/src/pages/help-center/HelpCenter.tsx
@@ -1,4 +1,3 @@
-
 import Box from '@mui/material/Box';
 import { Page } from 'components/page';
 import { FC, useMemo } from 'react';
diff --git a/ui/apps/pmm/src/pages/rta/components/selection-form/RealtimeSelectionForm.tsx b/ui/apps/pmm/src/pages/rta/components/selection-form/RealtimeSelectionForm.tsx
index 362cdd6bf32..d55f41c3b63 100644
--- a/ui/apps/pmm/src/pages/rta/components/selection-form/RealtimeSelectionForm.tsx
+++ b/ui/apps/pmm/src/pages/rta/components/selection-form/RealtimeSelectionForm.tsx
@@ -47,7 +47,9 @@ const RealtimeSelectionForm: FC<Props> = ({ onSuccess }) => {
         size="large"
         onClick={handleStart}
         disabled={
-          serviceIds.length === 0 || startSessions.isPending || !user?.isPMMAdmin
+          serviceIds.length === 0 ||
+          startSessions.isPending ||
+          !user?.isPMMAdmin
         }
         sx={{
           borderRadius: 999,
diff --git a/ui/apps/pmm/src/pages/rta/components/services-autocomplete-input/components/ServiceTags.tsx b/ui/apps/pmm/src/pages/rta/components/services-autocomplete-input/components/ServiceTags.tsx
index 774a70157aa..e656d2cba6a 100644
--- a/ui/apps/pmm/src/pages/rta/components/services-autocomplete-input/components/ServiceTags.tsx
+++ b/ui/apps/pmm/src/pages/rta/components/services-autocomplete-input/components/ServiceTags.tsx
@@ -45,7 +45,12 @@ const ServiceTags: FC<Props> = ({ tagPresentation, value, getTagProps }) => {
       flexWrap="wrap"
     >
       {value.slice(0, 2).map((option, index) => (
-        <Chip size="small" label={option.label} {...getTagProps({ index })} key={option.label} />
+        <Chip
+          size="small"
+          label={option.label}
+          {...getTagProps({ index })}
+          key={option.label}
+        />
       ))}
       {value.length > 2 && (
         <Typography variant="inputText">+{count - 2}</Typography>
diff --git a/ui/apps/pmm/src/pages/rta/overview/details-pane/BigNumberMetric.tsx b/ui/apps/pmm/src/pages/rta/overview/details-pane/BigNumberMetric.tsx
index 06543485292..9849254ea9d 100644
--- a/ui/apps/pmm/src/pages/rta/overview/details-pane/BigNumberMetric.tsx
+++ b/ui/apps/pmm/src/pages/rta/overview/details-pane/BigNumberMetric.tsx
@@ -10,12 +10,21 @@ type Props = {
   props?: {
     mainText?: TypographyProps;
     subText?: TypographyProps;
-  }
+  };
   dataTestId?: string;
 };
 
-const BigNumberMetric: FC<Props> = ({ mainText, subText, size = 'medium', props, dataTestId }) => (
-  <Box style={{ display: 'flex', alignItems: 'baseline' }} data-testid={dataTestId}>
+const BigNumberMetric: FC<Props> = ({
+  mainText,
+  subText,
+  size = 'medium',
+  props,
+  dataTestId,
+}) => (
+  <Box
+    style={{ display: 'flex', alignItems: 'baseline' }}
+    data-testid={dataTestId}
+  >
     {mainText ? (
       <Typography
         variant={size === 'small' ? 'body1' : 'h5'}
diff --git a/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.test.tsx b/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.test.tsx
index 3ddbf41026b..5ebd424c6cf 100644
--- a/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.test.tsx
+++ b/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.test.tsx
@@ -50,7 +50,10 @@ describe('QueryAndDetails', () => {
     // 2021-01-01T00:00:00Z in America/New_York (EST, UTC-5) is 2020-12-31 19:00:00
     const userWithTimezone = {
       ...TEST_USER_ADMIN,
-      preferences: { ...TEST_USER_ADMIN.preferences, timezone: 'America/New_York' },
+      preferences: {
+        ...TEST_USER_ADMIN.preferences,
+        timezone: 'America/New_York',
+      },
     };
     renderComponent(userWithTimezone);
 
diff --git a/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.tsx b/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.tsx
index b2cc3c4c2a2..52d587d8688 100644
--- a/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.tsx
+++ b/ui/apps/pmm/src/pages/rta/overview/details-pane/QueryAndDetails.tsx
@@ -1,7 +1,7 @@
 import Grid from '@mui/material/Grid';
 import { FC } from 'react';
 import { format, formatDuration } from 'date-fns';
-import { tz } from "@date-fns/tz";
+import { tz } from '@date-fns/tz';
 import { SyntaxHighlighter } from 'components/syntax-highlighter';
 import { QueryData } from 'types/rta.types';
 import DetailsMetric from './DetailsMetric';
@@ -45,13 +45,13 @@ const QueryAndDetails: FC<Props> = ({
 
   const formattedQueryExecutionDuration = queryExecutionDurationMs
     ? formatDuration(
-      {
-        seconds: queryExecutionDurationMs,
-      },
-      {
-        format: ['seconds'],
-      }
-    )
+        {
+          seconds: queryExecutionDurationMs,
+        },
+        {
+          format: ['seconds'],
+        }
+      )
     : '';
 
   const formattedQueryExecutionDurationParts = formattedQueryExecutionDuration
@@ -63,7 +63,10 @@ const QueryAndDetails: FC<Props> = ({
       <Grid size={{ xs: 12, md: 6 }}>
         <Grid container spacing={3}>
           <GridItem>
-            <DetailsMetric title={Messages.titles.operationId} tooltip={Messages.tooltips.operationId}>
+            <DetailsMetric
+              title={Messages.titles.operationId}
+              tooltip={Messages.tooltips.operationId}
+            >
               <BigNumberMetric
                 mainText={queryId}
                 dataTestId="operation-id-value"
@@ -71,7 +74,10 @@ const QueryAndDetails: FC<Props> = ({
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.elapsedExecTime} tooltip={Messages.tooltips.elapsedExecTime}>
+            <DetailsMetric
+              title={Messages.titles.elapsedExecTime}
+              tooltip={Messages.tooltips.elapsedExecTime}
+            >
               <BigNumberMetric
                 mainText={
                   formattedQueryExecutionDurationParts.length > 1
@@ -88,7 +94,10 @@ const QueryAndDetails: FC<Props> = ({
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.dbInstanceAddress} tooltip={Messages.tooltips.dbInstanceAddress}>
+            <DetailsMetric
+              title={Messages.titles.dbInstanceAddress}
+              tooltip={Messages.tooltips.dbInstanceAddress}
+            >
               <BigNumberMetric
                 mainText={dbInstanceAddress}
                 size="small"
@@ -97,7 +106,10 @@ const QueryAndDetails: FC<Props> = ({
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.clientAddress} tooltip={Messages.tooltips.clientAddress}>
+            <DetailsMetric
+              title={Messages.titles.clientAddress}
+              tooltip={Messages.tooltips.clientAddress}
+            >
               <BigNumberMetric
                 mainText={clientAddress}
                 size="small"
@@ -106,7 +118,10 @@ const QueryAndDetails: FC<Props> = ({
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.databaseName} tooltip={Messages.tooltips.databaseName}>
+            <DetailsMetric
+              title={Messages.titles.databaseName}
+              tooltip={Messages.tooltips.databaseName}
+            >
               <BigNumberMetric
                 mainText={databaseName}
                 size="small"
@@ -115,7 +130,10 @@ const QueryAndDetails: FC<Props> = ({
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.service} tooltip={Messages.tooltips.service}>
+            <DetailsMetric
+              title={Messages.titles.service}
+              tooltip={Messages.tooltips.service}
+            >
               <BigNumberMetric
                 mainText={serviceName}
                 size="small"
@@ -124,7 +142,10 @@ const QueryAndDetails: FC<Props> = ({
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.username} tooltip={Messages.tooltips.username}>
+            <DetailsMetric
+              title={Messages.titles.username}
+              tooltip={Messages.tooltips.username}
+            >
               <BigNumberMetric
                 mainText={username}
                 size="small"
@@ -133,7 +154,10 @@ const QueryAndDetails: FC<Props> = ({
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.collection} tooltip={Messages.tooltips.collection}>
+            <DetailsMetric
+              title={Messages.titles.collection}
+              tooltip={Messages.tooltips.collection}
+            >
               <BigNumberMetric
                 mainText={collection}
                 size="small"
@@ -142,7 +166,10 @@ const QueryAndDetails: FC<Props> = ({
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.operation} tooltip={Messages.tooltips.operation}>
+            <DetailsMetric
+              title={Messages.titles.operation}
+              tooltip={Messages.tooltips.operation}
+            >
               <BigNumberMetric
                 mainText={operation}
                 size="small"
@@ -151,7 +178,10 @@ const QueryAndDetails: FC<Props> = ({
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.planSummary} tooltip={Messages.tooltips.planSummary}>
+            <DetailsMetric
+              title={Messages.titles.planSummary}
+              tooltip={Messages.tooltips.planSummary}
+            >
               <BigNumberMetric
                 mainText={planSummary.replace(/,/g, ',\n')}
                 props={{
@@ -167,7 +197,10 @@ const QueryAndDetails: FC<Props> = ({
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.clientAppName} tooltip={Messages.tooltips.clientAppName}>
+            <DetailsMetric
+              title={Messages.titles.clientAppName}
+              tooltip={Messages.tooltips.clientAppName}
+            >
               <BigNumberMetric
                 mainText={clientAppName}
                 size="small"
@@ -176,20 +209,28 @@ const QueryAndDetails: FC<Props> = ({
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.operationStartTime} tooltip={Messages.tooltips.operationStartTime}>
+            <DetailsMetric
+              title={Messages.titles.operationStartTime}
+              tooltip={Messages.tooltips.operationStartTime}
+            >
               <BigNumberMetric
-                mainText={
-                  format((new Date(operationStartTime)), TIME_FORMAT, { in: tz(timezone) })
-                }
+                mainText={format(new Date(operationStartTime), TIME_FORMAT, {
+                  in: tz(timezone),
+                })}
                 size="small"
                 dataTestId="operation-start-time-value"
               />
             </DetailsMetric>
           </GridItem>
           <GridItem>
-            <DetailsMetric title={Messages.titles.dataCaptureTime} tooltip={Messages.tooltips.dataCaptureTime}>
+            <DetailsMetric
+              title={Messages.titles.dataCaptureTime}
+              tooltip={Messages.tooltips.dataCaptureTime}
+            >
               <BigNumberMetric
-                mainText={format(new Date(queryCollectTime), TIME_FORMAT, { in: tz(timezone) })}
+                mainText={format(new Date(queryCollectTime), TIME_FORMAT, {
+                  in: tz(timezone),
+                })}
                 size="small"
                 dataTestId="data-capture-time-value"
               />
diff --git a/ui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsx b/ui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsx
index 0fd6a231a6d..6fa73b5326b 100644
--- a/ui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsx
+++ b/ui/apps/pmm/src/pages/rta/overview/table/query-cell/QueryCell.tsx
@@ -7,7 +7,10 @@ export interface Props {
 
 const QueryCell: FC<Props> = ({ query }) => (
   <CodeBlock
-    code={query.replace(/[\n\r\t]/g, '').replace(/\s{2,}/g, ' ').trim()}
+    code={query
+      .replace(/[\n\r\t]/g, '')
+      .replace(/\s{2,}/g, ' ')
+      .trim()}
     containerProps={{
       sx: {
         width: '100%',
diff --git a/ui/apps/pmm/src/pages/rta/selection/RealtimeSelection.test.tsx b/ui/apps/pmm/src/pages/rta/selection/RealtimeSelection.test.tsx
index e067865d10e..a69eebd3f36 100644
--- a/ui/apps/pmm/src/pages/rta/selection/RealtimeSelection.test.tsx
+++ b/ui/apps/pmm/src/pages/rta/selection/RealtimeSelection.test.tsx
@@ -236,7 +236,7 @@ describe('RealtimeSelection', () => {
   describe('Loading States', () => {
     it('shows loading indicator while fetching services', () => {
       vi.mocked(realtimeApi.getAvailableServices).mockImplementation(
-        () => new Promise(() => { })
+        () => new Promise(() => {})
       );
 
       renderComponent();
diff --git a/ui/apps/pmm/src/pages/settings/Settings.messages.ts b/ui/apps/pmm/src/pages/settings/Settings.messages.ts
new file mode 100644
index 00000000000..807a94038f8
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/Settings.messages.ts
@@ -0,0 +1,88 @@
+export const Messages = {
+  title: 'Settings',
+  tabs: {
+    ssh: 'SSH key',
+    metrics: 'Metrics resolution',
+    advanced: 'Advanced settings',
+  },
+  advanced: {
+    action: 'Apply changes',
+    retentionLabel: 'Data retention',
+    retentionTooltip: 'How long PMM keeps collected data. Older data is automatically deleted.',
+    retentionUnits: 'days',
+    retentionLink: 'https://per.co.na/data_retention',
+    telemetryLabel: 'Telemetry',
+    telemetryLink: 'https://per.co.na/telemetry',
+    telemetryDialogLink: 'What we collect',
+    telemetryTooltip:
+      'Sends anonymous usage statistics to help improve PMM. No personal or database content is collected.',
+    telemetrySummaryTitle:
+      'We gather and send the following information to Percona:',
+    updatesLabel: 'Check for updates',
+    updatesLink: 'https://per.co.na/updates',
+    updatesTooltip:
+      'Option to check new versions and ability to update PMM from UI.',
+    advisorsLabel: 'Advisors',
+    sttRareIntervalLabel: 'Rare',
+    sttStandardIntervalLabel: 'Standard',
+    sttFrequentIntervalLabel: 'Frequent',
+    sttCheckIntervalTooltip: 'How often Advisor checks run. Lower values catch issues faster but increase resource usage.',
+    advisorsLink: 'https://per.co.na/advisors',
+    advisorsTooltip: 'Run automated checks to identify potential database performance and configuration issues.',
+    azureDiscoverLabel: 'Microsoft Azure monitoring',
+    azureDiscoverTooltip:
+      'Option to enable/disable Microsoft Azure DB instances discovery and monitoring',
+    azureDiscoverLink: 'https://per.co.na/azure_monitoring',
+    accessControl: 'Access control',
+    accessControlTooltip: 'Restrict data visibility based on user roles and labels.',
+    accessControlLink: 'https://per.co.na/roles_permissions',
+    publicAddressLabel: 'Public address',
+    publicAddressTooltip: 'The address or hostname PMM Server will be accessible at.',
+    publicAddressButton: 'Get from browser',
+    alertingLabel: 'Percona Alerting',
+    alertingTooltip: 'Option to enable/disable Percona Alerting features.',
+    alertingLink: 'https://per.co.na/alerting',
+    backupLabel: 'Backup Management',
+    backupTooltip: 'Enable scheduled and on-demand backups for supported databases.',
+    backupLink: 'https://per.co.na/backup_management',
+    enableInternalPgQanLabel: 'QAN for PMM Server',
+    enableInternalPgQanTooltip:
+      "Displays queries from PMM Server's internal PostgreSQL database in Query Analytics (QAN). Enable to troubleshoot PMM Server's database performance alongside your monitored instances.",
+    enableInternalPgQanLink: 'https://per.co.na/qan-pmm-server',
+    technicalPreviewLegend: 'Technical preview features',
+    technicalPreviewDescription:
+      'These are technical preview features, ',
+    technicalPreviewWarning: 'not recommended',
+    technicalPreviewDescriptionSuffix:
+      ' to be used in production environments. Read more about feature status',
+    technicalPreviewLinkText: 'here',
+  },
+  metrics: {
+    action: 'Apply changes',
+    label: 'Metrics resolution',
+    link: 'https://per.co.na/metrics_resolution',
+    options: {
+      rare: 'Rare',
+      standard: 'Standard',
+      frequent: 'Frequent',
+      custom: 'Custom',
+    },
+    intervals: {
+      low: 'Low',
+      medium: 'Medium',
+      high: 'High',
+    },
+    tooltip: 'How often PMM collects metrics, in seconds. Lower values provide more detail but use more resources.',
+  },
+  ssh: {
+    action: 'Apply changes',
+    label: 'SSH key',
+    link: 'https://per.co.na/ssh_key',
+    tooltip: 'Paste your public SSH key (ssh-rsa format) to enable SSH access to PMM Server.',
+  },
+  service: {
+    success: 'Settings updated',
+  },
+  tooltipLinkText: 'Read more',
+  unauthorized: 'Insufficient access permissions.',
+};
diff --git a/ui/apps/pmm/src/pages/settings/Settings.test.tsx b/ui/apps/pmm/src/pages/settings/Settings.test.tsx
new file mode 100644
index 00000000000..e4e9c988b7b
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/Settings.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { Settings } from './Settings';
+import { TestWrapper } from 'utils/testWrapper';
+import { wrapWithQueryProvider } from 'utils/testUtils';
+import * as settingsApi from 'api/settings';
+
+vi.mock('api/settings');
+
+const getSettingsMock = vi.mocked(settingsApi.getSettings);
+
+describe('Settings', () => {
+  beforeEach(() => {
+    getSettingsMock.mockImplementation(() => new Promise(() => {}));
+  });
+
+  it('shows loading state when settings are not yet loaded', () => {
+    render(
+      <TestWrapper>
+        {wrapWithQueryProvider(
+          <Settings />
+        )}
+      </TestWrapper>
+    );
+
+    expect(screen.getByTestId('settings-loading')).toBeInTheDocument();
+  });
+});
diff --git a/ui/apps/pmm/src/pages/settings/Settings.tsx b/ui/apps/pmm/src/pages/settings/Settings.tsx
new file mode 100644
index 00000000000..fcd2b085f86
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/Settings.tsx
@@ -0,0 +1,64 @@
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Stack from '@mui/material/Stack';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import { FC, useState } from 'react';
+import { Page } from 'components/page';
+import { useSettings } from 'hooks/api/useSettings';
+import { SshKeyForm } from './components/ssh-key/SshKeyForm';
+import { MetricsResolutionForm } from './components/metrics-resolution/MetricsResolutionForm';
+import { AdvancedSettingsForm } from './components/advanced/AdvancedSettingsForm';
+import { Messages } from './Settings.messages';
+import { TabValue } from './Settings.types';
+
+export const Settings: FC = () => {
+  const [tab, setTab] = useState<TabValue>('metrics');
+  const { data: settings, isLoading } = useSettings();
+
+  if (isLoading || !settings) {
+    return (
+      <Page title={Messages.title}>
+        <Stack alignItems="center" py={4}>
+          <CircularProgress data-testid="settings-loading" />
+        </Stack>
+      </Page>
+    );
+  }
+
+  return (
+    <Page title={Messages.title} fullWidth surface="paper">
+      <Stack gap={3} sx={{ flex: 1 }}>
+        <Tabs
+          value={tab}
+          onChange={(_, value: TabValue) => setTab(value)}
+          variant="scrollable"
+          scrollButtons="auto"
+          sx={{ borderBottom: 1, borderColor: 'divider' }}
+        >
+          <Tab
+            data-testid="settings-tab-metrics"
+            value="metrics"
+            label={Messages.tabs.metrics}
+          />
+          <Tab
+            data-testid="settings-tab-advanced"
+            value="advanced"
+            label={Messages.tabs.advanced}
+          />
+          <Tab
+            data-testid="settings-tab-ssh"
+            value="ssh"
+            label={Messages.tabs.ssh}
+          />
+        </Tabs>
+
+        <Box sx={{ flex: 1 }}>
+          {tab === 'metrics' && <MetricsResolutionForm settings={settings} />}
+          {tab === 'advanced' && <AdvancedSettingsForm settings={settings} />}
+          {tab === 'ssh' && <SshKeyForm settings={settings} />}
+        </Box>
+      </Stack>
+    </Page>
+  );
+};
diff --git a/ui/apps/pmm/src/pages/settings/Settings.types.ts b/ui/apps/pmm/src/pages/settings/Settings.types.ts
new file mode 100644
index 00000000000..57fcc0f0d71
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/Settings.types.ts
@@ -0,0 +1 @@
+export type TabValue = 'ssh' | 'metrics' | 'advanced';
diff --git a/ui/apps/pmm/src/pages/settings/components/advanced/Advanced.constants.ts b/ui/apps/pmm/src/pages/settings/components/advanced/Advanced.constants.ts
new file mode 100644
index 00000000000..0b8fede1a5c
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/components/advanced/Advanced.constants.ts
@@ -0,0 +1,28 @@
+import { Messages } from '../../Settings.messages';
+
+export const SECONDS = 60;
+export const MINUTES = 60;
+export const HOURS = 24;
+export const SECONDS_IN_DAY = SECONDS * MINUTES * HOURS;
+export const MINUTES_IN_HOUR = MINUTES * HOURS;
+export const MIN_DAYS = 1;
+export const MAX_DAYS = 3650;
+export const MIN_STT_CHECK_INTERVAL = 0.1;
+export const STT_CHECK_INTERVAL_STEP = 0.1;
+
+export const STT_CHECK_INTERVALS = [
+  {
+    label: Messages.advanced.sttRareIntervalLabel,
+    name: 'rareInterval' as const,
+  },
+  {
+    label: Messages.advanced.sttStandardIntervalLabel,
+    name: 'standardInterval' as const,
+  },
+  {
+    label: Messages.advanced.sttFrequentIntervalLabel,
+    name: 'frequentInterval' as const,
+  },
+];
+
+export const TECHNICAL_PREVIEW_DOC_URL = 'https://per.co.na/pmm-feature-status';
diff --git a/ui/apps/pmm/src/pages/settings/components/advanced/Advanced.utils.ts b/ui/apps/pmm/src/pages/settings/components/advanced/Advanced.utils.ts
new file mode 100644
index 00000000000..3c1ea3712c1
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/components/advanced/Advanced.utils.ts
@@ -0,0 +1,48 @@
+import { AdvisorRunIntervals } from 'types/settings.types';
+import { HOURS, MINUTES_IN_HOUR, SECONDS_IN_DAY } from './Advanced.constants';
+
+export const convertSecondsToDays = (dataRetention: string): number | '' => {
+  if (!dataRetention) return '';
+  const value = parseFloat(dataRetention.replace(/[^\d.-]/g, ''));
+  const units = dataRetention.slice(-1).toLowerCase();
+
+  switch (units) {
+    case 'h':
+      return value / HOURS;
+    case 'm':
+      return value / MINUTES_IN_HOUR;
+    case 's':
+      return value / SECONDS_IN_DAY;
+    case 'd':
+      return value;
+    default:
+      return '';
+  }
+};
+
+const parseSeconds = (s: string): number => {
+  const match = String(s).match(/^(\d+)s?$/);
+  return match ? parseInt(match[1], 10) : 0;
+};
+
+export const convertSecondsStringToHour = (secondsStr: string): number =>
+  parseSeconds(secondsStr) / 3600;
+
+export const convertHoursStringToSeconds = (hours: string | number): number =>
+  Math.round(parseFloat(String(hours)) * 3600);
+
+export const convertCheckIntervalsToHours = (
+  sttCheckIntervals: AdvisorRunIntervals | undefined
+) => {
+  if (!sttCheckIntervals)
+    return {
+      rareInterval: '24',
+      standardInterval: '24',
+      frequentInterval: '24',
+    };
+  return {
+    rareInterval: `${convertSecondsStringToHour(sttCheckIntervals.rareInterval)}`,
+    standardInterval: `${convertSecondsStringToHour(sttCheckIntervals.standardInterval)}`,
+    frequentInterval: `${convertSecondsStringToHour(sttCheckIntervals.frequentInterval)}`,
+  };
+};
diff --git a/ui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.tsx b/ui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.tsx
new file mode 100644
index 00000000000..e9492784353
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.tsx
@@ -0,0 +1,542 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
+import CloseIcon from '@mui/icons-material/Close';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import WarningIcon from '@mui/icons-material/Warning';
+import { FC, useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { enqueueSnackbar } from 'notistack';
+import { useUpdateSettings } from 'hooks/api/useSettings';
+import { Messages } from '../../Settings.messages';
+import {
+  MAX_DAYS,
+  MIN_DAYS,
+  MIN_STT_CHECK_INTERVAL,
+  SECONDS_IN_DAY,
+  STT_CHECK_INTERVALS,
+  TECHNICAL_PREVIEW_DOC_URL,
+} from './Advanced.constants';
+import {
+  convertCheckIntervalsToHours,
+  convertHoursStringToSeconds,
+  convertSecondsToDays,
+} from './Advanced.utils';
+import {
+  AdvancedSettingsFormProps,
+  AdvancedSettingsFormValues,
+  LabelWithTooltipProps,
+} from './AdvancedSettingsForm.types';
+
+const LabelWithTooltip: FC<LabelWithTooltipProps> = ({
+  label,
+  tooltip,
+  link,
+}) => (
+  <Stack direction="row" alignItems="center">
+    <Typography variant="body1">{label}</Typography>
+    <Tooltip
+      title={
+        <Typography variant="caption">
+            {tooltip}
+            {' '}
+            {link && (
+              <Link
+                href={link}
+                target="_blank"
+                rel="noopener noreferrer"
+                color="inherit"
+                sx={{ textDecorationColor: 'inherit' }}
+              >
+                {Messages.tooltipLinkText}
+              </Link>
+            )}
+        </Typography>
+      }
+      arrow
+    >
+      <IconButton size="small">
+        <InfoOutlinedIcon fontSize="small" />
+      </IconButton>
+    </Tooltip>
+  </Stack>
+);
+
+export const AdvancedSettingsForm: FC<AdvancedSettingsFormProps> = ({
+  settings,
+}) => {
+  const { mutateAsync: updateSettings, isPending } = useUpdateSettings();
+  const intervals = convertCheckIntervalsToHours(settings.advisorRunIntervals);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    watch,
+    setValue,
+    formState: { isDirty, errors },
+  } = useForm<AdvancedSettingsFormValues>({
+    defaultValues: {
+      retention: String(
+        convertSecondsToDays(settings.dataRetention ?? '86400s') || '1'
+      ),
+      telemetry: settings.telemetryEnabled ?? false,
+      updates: settings.updatesEnabled ?? false,
+      alerting: settings.alertingEnabled ?? false,
+      backup: settings.backupManagementEnabled ?? false,
+      enableInternalPgQan: settings.enableInternalPgQan ?? false,
+      publicAddress: settings.pmmPublicAddress ?? '',
+      stt: settings.advisorEnabled ?? false,
+      rareInterval: intervals.rareInterval,
+      standardInterval: intervals.standardInterval,
+      frequentInterval: intervals.frequentInterval,
+      azureDiscover: settings.azurediscoverEnabled ?? false,
+      accessControl: settings.enableAccessControl ?? false,
+    },
+  });
+
+  const sttEnabled = watch('stt');
+  const [telemetryDialogOpen, setTelemetryDialogOpen] = useState(false);
+
+  useEffect(() => {
+    reset({
+      retention: String(
+        convertSecondsToDays(settings.dataRetention ?? '86400s') || '1'
+      ),
+      telemetry: settings.telemetryEnabled ?? false,
+      updates: settings.updatesEnabled ?? false,
+      alerting: settings.alertingEnabled ?? false,
+      backup: settings.backupManagementEnabled ?? false,
+      enableInternalPgQan: settings.enableInternalPgQan ?? false,
+      publicAddress: settings.pmmPublicAddress ?? '',
+      stt: settings.advisorEnabled ?? false,
+      ...convertCheckIntervalsToHours(settings.advisorRunIntervals),
+      azureDiscover: settings.azurediscoverEnabled ?? false,
+      accessControl: settings.enableAccessControl ?? false,
+    });
+  }, [settings, reset]);
+
+  const onSubmit = async (values: AdvancedSettingsFormValues) => {
+    const retentionNum = parseFloat(values.retention);
+    const dataRetention = `${Math.round(retentionNum * SECONDS_IN_DAY)}s`;
+    const sttCheckIntervals = {
+      rareInterval: `${convertHoursStringToSeconds(values.rareInterval)}s`,
+      standardInterval: `${convertHoursStringToSeconds(values.standardInterval)}s`,
+      frequentInterval: `${convertHoursStringToSeconds(values.frequentInterval)}s`,
+    };
+
+    await updateSettings(
+      {
+        dataRetention,
+        pmmPublicAddress: values.publicAddress,
+        enableTelemetry: values.telemetry,
+        enableUpdates: values.updates,
+        enableAlerting: values.alerting,
+        enableBackupManagement: values.backup,
+        enableInternalPgQan: values.enableInternalPgQan,
+        enableAdvisor: values.stt,
+        advisorRunIntervals: values.stt ? sttCheckIntervals : undefined,
+        enableAzurediscover: values.azureDiscover,
+        enableAccessControl: values.accessControl,
+      },
+      {
+        onSuccess: () => {
+          enqueueSnackbar(Messages.service.success, { variant: 'success' });
+          reset(values);
+        },
+        onError: (error) => {
+          enqueueSnackbar(
+            error instanceof Error ? error.message : Messages.unauthorized,
+            { variant: 'error' }
+          );
+        },
+      }
+    );
+  };
+
+  const { action } = Messages.advanced;
+  const m = Messages.advanced;
+
+  const validateRetention = (v: string) => {
+    const n = parseFloat(v);
+    if (isNaN(n) || v === '') return 'Required';
+    if (n < MIN_DAYS || n > MAX_DAYS)
+      return `Must be between ${MIN_DAYS} and ${MAX_DAYS}`;
+    return true;
+  };
+
+  const validateInterval = (v: string) => {
+    const n = parseFloat(v);
+    if (isNaN(n) || v === '') return 'Required';
+    if (n < MIN_STT_CHECK_INTERVAL) return `Min ${MIN_STT_CHECK_INTERVAL}`;
+    return true;
+  };
+
+  return (
+    <Stack
+      component="form"
+      onSubmit={handleSubmit(onSubmit)}
+      gap={5}
+    >
+      <Stack gap={1}>
+        <Stack maxWidth={640}>
+          <Typography variant="h6">
+            {m.publicAddressLabel}
+          </Typography>
+          <Typography variant="body2">
+            {m.publicAddressTooltip}
+          </Typography>
+        </Stack>
+        <Stack direction="row" flexWrap="wrap" gap={2} alignItems="center">
+          <Controller
+            name="publicAddress"
+            control={control}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                size="small"
+                placeholder="https://..."
+                sx={{ flex: 1, minWidth: 240 }}
+              />
+            )}
+          />
+          <Button
+            type="button"
+            variant="text"
+            startIcon={<ContentCopyIcon />}
+            onClick={() =>
+              setValue('publicAddress', window.location.host, {
+                shouldDirty: true,
+              })
+            }
+          >
+            {m.publicAddressButton}
+          </Button>
+        </Stack>
+      </Stack>
+
+      <Stack gap={1}>
+        <Stack maxWidth={640}>
+          <Typography variant="h6">
+            {m.retentionLabel}
+          </Typography>
+          <Typography variant="body2">
+            {m.retentionTooltip}
+            {' '}
+            <Link
+              href={m.retentionLink}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {Messages.tooltipLinkText}
+              <ArrowOutwardIcon sx={{ fontSize: 14 }} />
+            </Link>
+          </Typography>
+        </Stack>
+        <Stack direction="row" alignItems="baseline" gap={1}>
+          <Controller
+            name="retention"
+            control={control}
+            rules={{ validate: validateRetention }}
+            render={({ field, fieldState }) => (
+              <TextField
+                {...field}
+                type="number"
+                error={!!fieldState.error}
+                helperText={fieldState.error?.message}
+                slotProps={{
+                  htmlInput: { min: MIN_DAYS, max: MAX_DAYS, step: 1 },
+                }}
+                sx={{ minWidth: 120, maxWidth: 240 }}
+                size="small"
+              />
+            )}
+          />
+          <Typography variant="body1" color="text.secondary">
+            {m.retentionUnits}
+          </Typography>
+        </Stack>
+      </Stack>
+
+      <Stack gap={1}>
+        <Stack maxWidth={640}>
+          <Typography variant="h6">
+            {m.telemetryLabel}
+          </Typography>
+          <Typography variant="body2">
+            {m.telemetryTooltip}
+            {' '}
+            <Link
+              href={m.telemetryLink}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {Messages.tooltipLinkText}
+              <ArrowOutwardIcon sx={{ fontSize: 14 }} />
+            </Link>
+          </Typography>
+        </Stack>
+        <Stack direction="row" alignItems="center" gap={0.5}>
+          <Controller
+            name="telemetry"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                control={<Switch {...field} checked={field.value} />}
+                label={m.telemetryLabel}
+                sx={{ mr: 0 }}
+              />
+            )}
+          />
+          {'—'}
+          <Link
+            component="button"
+            type="button"
+            variant="body1"
+            onClick={() => setTelemetryDialogOpen(true)}
+          >
+            {m.telemetryDialogLink}
+          </Link>
+        </Stack>
+        <Dialog
+          open={telemetryDialogOpen}
+          onClose={() => setTelemetryDialogOpen(false)}
+          maxWidth="sm"
+          fullWidth
+          slotProps={{ paper: { elevation: 1 } }}
+        >
+          <DialogTitle>
+            {m.telemetryLabel}
+            <IconButton
+              aria-label="close"
+              size='medium'
+              onClick={() => setTelemetryDialogOpen(false)}
+              sx={{ position: 'absolute', right: 8, top: 8 }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </DialogTitle>
+          <DialogContent>
+            <Typography variant="body1" mb={2}>
+              {m.telemetrySummaryTitle}
+            </Typography>
+            {(settings.telemetrySummaries ?? []).map((s) => (
+              <Typography key={s} variant="body1" component="li" sx={{ ml: 3 }}>
+                {s}
+              </Typography>
+            ))}
+          </DialogContent>
+        </Dialog>
+      </Stack>
+
+      <Stack gap={2}>
+        <Stack maxWidth={640}>
+          <Typography variant="h6">
+            Feature management
+          </Typography>
+          <Typography variant="body2">
+            Enable or disable core PMM capabilities. Turning off unused features can help conserve system resources and simplify your navigation menu.
+          </Typography>
+        </Stack>
+        <Stack gap={2}>
+          {[
+            {
+              name: 'updates' as const,
+              label: m.updatesLabel,
+              tooltip: m.updatesTooltip,
+              link: m.updatesLink,
+            },
+            {
+              name: 'alerting' as const,
+              label: m.alertingLabel,
+              tooltip: m.alertingTooltip,
+              link: m.alertingLink,
+            },
+            {
+              name: 'backup' as const,
+              label: m.backupLabel,
+              tooltip: m.backupTooltip,
+              link: m.backupLink,
+            },
+            {
+              name: 'enableInternalPgQan' as const,
+              label: m.enableInternalPgQanLabel,
+              tooltip: m.enableInternalPgQanTooltip,
+              link: m.enableInternalPgQanLink,
+            },
+          ].map(({ name, label, tooltip, link }) => (
+            <Controller
+              key={name}
+              name={name}
+              control={control}
+              render={({ field }) => (
+                <FormControlLabel
+                  control={<Switch {...field} checked={field.value} />}
+                  label={
+                    <LabelWithTooltip label={label} tooltip={tooltip} link={link} />
+                  }
+                />
+              )}
+            />
+          ))}
+        </Stack>
+      </Stack>
+
+      <Stack gap={1}>
+        <Stack gap={1}>
+          <Stack maxWidth={640}>
+            <Typography variant="h6">
+              {m.advisorsLabel}
+            </Typography>
+            <Typography variant="body2">
+              {m.advisorsTooltip}
+              {' '}
+              <Link
+                href={m.advisorsLink}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {Messages.tooltipLinkText}
+                <ArrowOutwardIcon sx={{ fontSize: 14 }} />
+              </Link>
+            </Typography>
+          </Stack>
+          <Controller
+            name="stt"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                control={<Switch {...field} checked={field.value} />}
+                label={m.advisorsLabel}
+              />
+            )}
+          />
+        </Stack>
+        {sttEnabled && (
+          <Stack gap={2}>
+            <Typography variant="body1" sx={{ maxWidth: 640 }}>
+              {m.sttCheckIntervalTooltip}
+            </Typography>
+            <Stack direction="row" columnGap={2} rowGap={3} flexWrap="wrap">
+              {STT_CHECK_INTERVALS.map(({ name, label }) => (
+                <Controller
+                  key={name}
+                  name={name}
+                  control={control}
+                  rules={{ validate: validateInterval }}
+                  render={({ field, fieldState }) => (
+                    <TextField
+                      {...field}
+                      label={label}
+                      type="number"
+                      error={!!fieldState.error}
+                      helperText={fieldState.error?.message}
+                      slotProps={{
+                        htmlInput: { min: MIN_STT_CHECK_INTERVAL, step: 0.1 },
+                      }}
+                      size="small"
+                      sx={{ minWidth: 80, maxWidth: 120 }}
+                    />
+                  )}
+                />
+              ))}
+            </Stack>
+          </Stack>
+        )}
+      </Stack>
+
+      <Stack gap={2}>
+        <Stack maxWidth={640}>
+          <Typography variant="h6">
+            <WarningIcon color="warning" sx={{ fontSize: 26, verticalAlign: '-6px' }} /> {m.technicalPreviewLegend}
+          </Typography>
+          <Typography variant="body2">
+            {m.technicalPreviewDescription}
+            <strong>{m.technicalPreviewWarning}</strong>
+            {m.technicalPreviewDescriptionSuffix}
+            {' '}
+            <Link
+              href={TECHNICAL_PREVIEW_DOC_URL}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {m.technicalPreviewLinkText}
+              <ArrowOutwardIcon sx={{ fontSize: 14 }} />
+            </Link>
+            {'.'}
+          </Typography>
+        </Stack>
+        <Stack gap={2}>
+          <Controller
+            name="azureDiscover"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                control={<Switch {...field} checked={field.value} />}
+                label={
+                  <LabelWithTooltip
+                    label={m.azureDiscoverLabel}
+                    tooltip={m.azureDiscoverTooltip}
+                    link={m.azureDiscoverLink}
+                  />
+                }
+              />
+            )}
+          />
+          <Controller
+            name="accessControl"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                control={<Switch {...field} checked={field.value} />}
+                label={
+                  <LabelWithTooltip
+                    label={m.accessControl}
+                    tooltip={m.accessControlTooltip}
+                    link={m.accessControlLink}
+                  />
+                }
+              />
+            )}
+          />
+        </Stack>
+      </Stack>
+
+      <Stack
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          py: 2,
+          bgcolor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          mt: 'auto',
+          zIndex: 1,
+          boxShadow: (theme) =>
+            `-8px 0 0 0 ${theme.palette.background.paper}, 30px 0 0 0 ${theme.palette.background.paper}`,
+        }}
+      >
+        <Button
+          type="submit"
+          variant="contained"
+          disabled={!isDirty || isPending || Object.keys(errors).length > 0}
+          data-testid="advanced-settings-submit"
+          sx={{ alignSelf: 'flex-start' }}
+        >
+          {isPending ? 'Applying...' : action}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/ui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.types.ts b/ui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.types.ts
new file mode 100644
index 00000000000..404f0b5cac9
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/components/advanced/AdvancedSettingsForm.types.ts
@@ -0,0 +1,27 @@
+import { Settings } from 'types/settings.types';
+
+export interface AdvancedSettingsFormProps {
+  settings: Settings;
+}
+
+export interface AdvancedSettingsFormValues {
+  retention: string;
+  telemetry: boolean;
+  updates: boolean;
+  alerting: boolean;
+  backup: boolean;
+  enableInternalPgQan: boolean;
+  publicAddress: string;
+  stt: boolean;
+  rareInterval: string;
+  standardInterval: string;
+  frequentInterval: string;
+  azureDiscover: boolean;
+  accessControl: boolean;
+}
+
+export interface LabelWithTooltipProps {
+  label: string;
+  tooltip: React.ReactNode;
+  link?: string;
+}
diff --git a/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolution.constants.ts b/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolution.constants.ts
new file mode 100644
index 00000000000..0103b66f7f0
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolution.constants.ts
@@ -0,0 +1,26 @@
+import { Messages } from '../../Settings.messages';
+import { MetricsResolutions } from 'types/settings.types';
+
+export const RESOLUTION_PRESETS = [
+  'rare',
+  'standard',
+  'frequent',
+  'custom',
+] as const;
+export type ResolutionPreset = (typeof RESOLUTION_PRESETS)[number];
+
+export const resolutionOptions: { value: ResolutionPreset; label: string }[] = [
+  { value: 'rare', label: Messages.metrics.options.rare },
+  { value: 'standard', label: Messages.metrics.options.standard },
+  { value: 'frequent', label: Messages.metrics.options.frequent },
+  { value: 'custom', label: Messages.metrics.options.custom },
+];
+
+export const defaultResolutions: MetricsResolutions[] = [
+  { hr: '60s', mr: '180s', lr: '300s' },
+  { hr: '5s', mr: '10s', lr: '60s' },
+  { hr: '1s', mr: '5s', lr: '30s' },
+];
+
+export const RESOLUTION_MIN = 1;
+export const RESOLUTION_MAX = 1000000000;
diff --git a/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolution.utils.ts b/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolution.utils.ts
new file mode 100644
index 00000000000..2e34af0141f
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolution.utils.ts
@@ -0,0 +1,41 @@
+import { MetricsResolutions } from 'types/settings.types';
+import {
+  defaultResolutions,
+  resolutionOptions,
+  ResolutionPreset,
+} from './MetricsResolution.constants';
+
+const replaceS = (r: string) => r.replace(/s$/, '');
+
+export const removeUnits = (
+  r: MetricsResolutions
+): { lr: string; mr: string; hr: string } => ({
+  lr: replaceS(r.lr),
+  mr: replaceS(r.mr),
+  hr: replaceS(r.hr),
+});
+
+export const addUnits = (r: {
+  lr: string;
+  mr: string;
+  hr: string;
+}): MetricsResolutions => ({
+  lr: `${r.lr}s`,
+  mr: `${r.mr}s`,
+  hr: `${r.hr}s`,
+});
+
+const resolutionsEqual = (a: MetricsResolutions, b: MetricsResolutions) =>
+  a.hr === b.hr && a.mr === b.mr && a.lr === b.lr;
+
+export const getResolutionPreset = (
+  metricsResolutions: MetricsResolutions | undefined
+): ResolutionPreset => {
+  if (!metricsResolutions) return 'custom';
+  const index = defaultResolutions.findIndex((r) =>
+    resolutionsEqual(r, metricsResolutions)
+  );
+  return index !== -1
+    ? (resolutionOptions[index].value as ResolutionPreset)
+    : 'custom';
+};
diff --git a/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.tsx b/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.tsx
new file mode 100644
index 00000000000..a6c59f43654
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.tsx
@@ -0,0 +1,257 @@
+import Button from '@mui/material/Button';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Link from '@mui/material/Link';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
+import { FC, useEffect, useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { enqueueSnackbar } from 'notistack';
+import { useUpdateSettings } from 'hooks/api/useSettings';
+import { MetricsResolutions } from 'types/settings.types';
+import { Messages } from '../../Settings.messages';
+import {
+  defaultResolutions,
+  resolutionOptions,
+  RESOLUTION_MAX,
+  RESOLUTION_MIN,
+} from './MetricsResolution.constants';
+import {
+  addUnits,
+  getResolutionPreset,
+  removeUnits,
+} from './MetricsResolution.utils';
+import {
+  MetricsResolutionFormProps,
+  MetricsResolutionFormValues,
+} from './MetricsResolutionForm.types';
+
+const DEFAULT_METRICS = { hr: '5s', mr: '10s', lr: '60s' } as const;
+
+export const MetricsResolutionForm: FC<MetricsResolutionFormProps> = ({
+  settings,
+}) => {
+  const { mutateAsync: updateSettings, isPending } = useUpdateSettings();
+  const metricsResolutions = useMemo(
+    () => settings.metricsResolutions ?? DEFAULT_METRICS,
+    [settings.metricsResolutions]
+  );
+  const preset = getResolutionPreset(metricsResolutions);
+  const raw = removeUnits(metricsResolutions);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    watch,
+    setValue,
+    formState: { isDirty, errors },
+  } = useForm<MetricsResolutionFormValues>({
+    defaultValues: {
+      preset,
+      lr: raw.lr,
+      mr: raw.mr,
+      hr: raw.hr,
+    },
+  });
+
+  const currentPreset = watch('preset');
+
+  useEffect(() => {
+    reset({
+      preset: getResolutionPreset(metricsResolutions),
+      ...removeUnits(metricsResolutions),
+    });
+  }, [metricsResolutions, reset]);
+
+  useEffect(() => {
+    if (currentPreset && currentPreset !== 'custom') {
+      const idx = resolutionOptions.findIndex((o) => o.value === currentPreset);
+      if (idx >= 0) {
+        const def = removeUnits(defaultResolutions[idx]);
+        setValue('lr', def.lr, { shouldDirty: false });
+        setValue('mr', def.mr, { shouldDirty: false });
+        setValue('hr', def.hr, { shouldDirty: false });
+      }
+    }
+  }, [currentPreset, setValue]);
+
+  const onSubmit = async (values: MetricsResolutionFormValues) => {
+    const payload: MetricsResolutions = addUnits({
+      lr: values.lr,
+      mr: values.mr,
+      hr: values.hr,
+    });
+    await updateSettings(
+      { metricsResolutions: payload },
+      {
+        onSuccess: () => {
+          enqueueSnackbar(Messages.service.success, { variant: 'success' });
+          reset({
+            preset: values.preset,
+            lr: values.lr,
+            mr: values.mr,
+            hr: values.hr,
+          });
+        },
+        onError: (error) => {
+          enqueueSnackbar(
+            error instanceof Error ? error.message : Messages.unauthorized,
+            { variant: 'error' }
+          );
+        },
+      }
+    );
+  };
+
+  const { label, link, tooltip, action, intervals } = Messages.metrics;
+  const { tooltipLinkText } = Messages;
+
+  const validateNumber = (v: string) => {
+    const n = parseInt(v, 10);
+    if (isNaN(n) || v === '') return 'Required';
+    if (n < RESOLUTION_MIN || n > RESOLUTION_MAX)
+      return `Must be between ${RESOLUTION_MIN} and ${RESOLUTION_MAX}`;
+    return true;
+  };
+
+  return (
+    <Stack
+      component="form"
+      onSubmit={handleSubmit(onSubmit)}
+      gap={2}
+    >
+      <Stack>
+        <Typography variant="h6" sx={{ maxWidth: 640 }}>
+          {label}
+        </Typography>
+        <Typography variant="body2" sx={{ maxWidth: 640 }}>
+          {tooltip}
+          {' '}
+          <Link
+            href={link}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {tooltipLinkText}
+            <ArrowOutwardIcon sx={{ fontSize: 14 }} />
+          </Link>
+        </Typography>
+      </Stack>
+
+      <Controller
+        name="preset"
+        control={control}
+        render={({ field }) => (
+          <FormControl sx={{ mb: 1 }}>
+            <RadioGroup {...field} row sx={{ columnGap: 2, rowGap: 1 }}>
+              {resolutionOptions.map((opt) => (
+                <FormControlLabel
+                  key={opt.value}
+                  value={opt.value}
+                  control={<Radio />}
+                  label={opt.label}
+                />
+              ))}
+            </RadioGroup>
+          </FormControl>
+        )}
+      />
+
+      <Stack direction="row" columnGap={2} rowGap={3} flexWrap="wrap" mb={2}>
+        <Controller
+          name="lr"
+          control={control}
+          rules={{ validate: validateNumber }}
+          render={({ field, fieldState }) => (
+            <TextField
+              {...field}
+              label={intervals.low}
+              type="number"
+              disabled={currentPreset !== 'custom'}
+              error={!!fieldState.error}
+              helperText={fieldState.error?.message}
+              slotProps={{
+                htmlInput: { min: RESOLUTION_MIN, max: RESOLUTION_MAX },
+              }}
+              data-testid="metrics-resolution-lr"
+              sx={{ minWidth: 80, maxWidth: 120 }}
+              size="small"
+            />
+          )}
+        />
+        <Controller
+          name="mr"
+          control={control}
+          rules={{ validate: validateNumber }}
+          render={({ field, fieldState }) => (
+            <TextField
+              {...field}
+              label={intervals.medium}
+              type="number"
+              disabled={currentPreset !== 'custom'}
+              error={!!fieldState.error}
+              helperText={fieldState.error?.message}
+              slotProps={{
+                htmlInput: { min: RESOLUTION_MIN, max: RESOLUTION_MAX },
+              }}
+              data-testid="metrics-resolution-mr"
+              sx={{ minWidth: 80, maxWidth: 120 }}
+              size="small"
+            />
+          )}
+        />
+        <Controller
+          name="hr"
+          control={control}
+          rules={{ validate: validateNumber }}
+          render={({ field, fieldState }) => (
+            <TextField
+              {...field}
+              label={intervals.high}
+              type="number"
+              disabled={currentPreset !== 'custom'}
+              error={!!fieldState.error}
+              helperText={fieldState.error?.message}
+              slotProps={{
+                htmlInput: { min: RESOLUTION_MIN, max: RESOLUTION_MAX },
+              }}
+              data-testid="metrics-resolution-hr"
+              sx={{ minWidth: 80, maxWidth: 120 }}
+              size="small"
+            />
+          )}
+        />
+      </Stack>
+
+      <Stack
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          py: 2,
+          bgcolor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          mt: 'auto',
+          zIndex: 1,
+          boxShadow: (theme) =>
+            `-8px 0 0 0 ${theme.palette.background.paper}, 30px 0 0 0 ${theme.palette.background.paper}`,
+        }}
+      >
+        <Button
+          type="submit"
+          variant="contained"
+          disabled={!isDirty || isPending || Object.keys(errors).length > 0}
+          data-testid="metrics-resolution-submit"
+          sx={{ alignSelf: 'flex-start' }}
+        >
+          {isPending ? 'Applying...' : action}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.types.ts b/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.types.ts
new file mode 100644
index 00000000000..505659e2e20
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/components/metrics-resolution/MetricsResolutionForm.types.ts
@@ -0,0 +1,12 @@
+import { Settings } from 'types/settings.types';
+
+export interface MetricsResolutionFormProps {
+  settings: Settings;
+}
+
+export interface MetricsResolutionFormValues {
+  preset: 'rare' | 'standard' | 'frequent' | 'custom';
+  lr: string;
+  mr: string;
+  hr: string;
+}
diff --git a/ui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.tsx b/ui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.tsx
new file mode 100644
index 00000000000..41a1876a1af
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.tsx
@@ -0,0 +1,111 @@
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
+import { FC, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { enqueueSnackbar } from 'notistack';
+import { useUpdateSettings } from 'hooks/api/useSettings';
+import { Messages } from '../../Settings.messages';
+import { SshKeyFormProps, SshKeyFormValues } from './SshKeyForm.types';
+
+export const SshKeyForm: FC<SshKeyFormProps> = ({ settings }) => {
+  const { mutateAsync: updateSettings, isPending } = useUpdateSettings();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { isDirty },
+  } = useForm<SshKeyFormValues>({
+    defaultValues: { sshKey: settings.sshKey ?? '' },
+  });
+
+  useEffect(() => {
+    reset({ sshKey: settings.sshKey ?? '' });
+  }, [settings.sshKey, reset]);
+
+  const onSubmit = async (values: SshKeyFormValues) =>
+    await updateSettings(
+      { sshKey: values.sshKey },
+      {
+        onSuccess: () => {
+          enqueueSnackbar(Messages.service.success, { variant: 'success' });
+          reset({ sshKey: values.sshKey });
+        },
+        onError: (error) => {
+          enqueueSnackbar(
+            error instanceof Error ? error.message : Messages.unauthorized,
+            { variant: 'error' }
+          );
+        },
+      }
+    );
+
+  const { label, link, tooltip, action } = Messages.ssh;
+  const { tooltipLinkText } = Messages;
+
+  return (
+    <Stack
+      component="form"
+      onSubmit={handleSubmit(onSubmit)}
+      gap={2}
+    >
+      <Stack gap={1} mb={2}>
+        <Stack maxWidth={640}>
+          <Typography variant="h6">
+            {label}
+          </Typography>
+          <Typography variant="body2">
+            {tooltip}
+            {' '}
+            <Link
+              href={link}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {tooltipLinkText}
+              <ArrowOutwardIcon sx={{ fontSize: 14 }} />
+            </Link>
+          </Typography>
+        </Stack>
+        <Stack >
+          <TextField
+            {...register('sshKey')}
+            multiline
+            minRows={4}
+            placeholder="ssh-rsa AAAA..."
+            data-testid="ssh-key-input"
+            disabled={isPending}
+          />
+        </Stack>
+      </Stack>
+
+      <Stack
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          py: 2,
+          bgcolor: 'background.paper',
+          borderTop: 1,
+          borderColor: 'divider',
+          mt: 'auto',
+          zIndex: 1,
+          boxShadow: (theme) =>
+            `-8px 0 0 0 ${theme.palette.background.paper}, 30px 0 0 0 ${theme.palette.background.paper}`,
+        }}
+      >
+        <Button
+          type="submit"
+          variant="contained"
+          disabled={!isDirty || isPending}
+          data-testid="ssh-key-submit"
+          sx={{ alignSelf: 'flex-start' }}
+        >
+          {isPending ? 'Applying...' : action}
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/ui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.types.ts b/ui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.types.ts
new file mode 100644
index 00000000000..fabe2ac150b
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/components/ssh-key/SshKeyForm.types.ts
@@ -0,0 +1,9 @@
+import { Settings } from 'types/settings.types';
+
+export interface SshKeyFormProps {
+  settings: Settings;
+}
+
+export interface SshKeyFormValues {
+  sshKey: string;
+}
diff --git a/ui/apps/pmm/src/pages/settings/index.ts b/ui/apps/pmm/src/pages/settings/index.ts
new file mode 100644
index 00000000000..ec5d9791b6b
--- /dev/null
+++ b/ui/apps/pmm/src/pages/settings/index.ts
@@ -0,0 +1 @@
+export { Settings } from './Settings';
diff --git a/ui/apps/pmm/src/router.tsx b/ui/apps/pmm/src/router.tsx
index 1565d6ead58..be3cde38c3a 100644
--- a/ui/apps/pmm/src/router.tsx
+++ b/ui/apps/pmm/src/router.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Navigate, createBrowserRouter } from 'react-router-dom';
+import { Settings } from 'pages/settings';
 import { Updates } from 'pages/updates';
 import { UpdateClients } from 'pages/update-clients/UpdateClients';
 import { MainWithNav } from 'components/main/MainWithNav';
@@ -39,6 +40,10 @@ const router = createBrowserRouter(
               path: 'help',
               element: <HelpCenter />,
             },
+            {
+              path: 'settings',
+              element: <Settings />,
+            },
             {
               path: 'rta',
               children: [
diff --git a/ui/apps/pmm/src/types/settings.types.ts b/ui/apps/pmm/src/types/settings.types.ts
index 772553f659d..283dffa7b1b 100644
--- a/ui/apps/pmm/src/types/settings.types.ts
+++ b/ui/apps/pmm/src/types/settings.types.ts
@@ -1,4 +1,3 @@
-// doesn't yet have the complete response
 export interface ReadonlySettings {
   updatesEnabled: boolean;
   telemetryEnabled: boolean;
@@ -10,12 +9,51 @@ export interface ReadonlySettings {
   enableAccessControl: boolean;
 }
 
+export interface MetricsResolutions {
+  hr: string;
+  mr: string;
+  lr: string;
+}
+
+export interface AdvisorRunIntervals {
+  rareInterval: string;
+  standardInterval: string;
+  frequentInterval: string;
+}
+
 export interface GetReadonlySettingsResponse {
   settings: ReadonlySettings;
 }
 
 export interface Settings extends ReadonlySettings {
-  updateSnoozeDuration: string;
+  updateSnoozeDuration?: string;
+  metricsResolutions?: MetricsResolutions;
+  dataRetention?: string;
+  sshKey?: string;
+  awsPartitions?: string[];
+  advisorRunIntervals?: AdvisorRunIntervals;
+  telemetrySummaries?: string[];
+  enableInternalPgQan?: boolean;
+  defaultRoleId?: number;
+}
+
+/** Payload for PUT /server/settings - partial updates supported */
+export interface UpdateSettingsPayload {
+  sshKey?: string;
+  metricsResolutions?: MetricsResolutions;
+  dataRetention?: string;
+  pmmPublicAddress?: string;
+  enableTelemetry?: boolean;
+  enableAlerting?: boolean;
+  enableAdvisor?: boolean;
+  advisorRunIntervals?: AdvisorRunIntervals;
+  enableBackupManagement?: boolean;
+  enableAzurediscover?: boolean;
+  enableUpdates?: boolean;
+  enableAccessControl?: boolean;
+  enableInternalPgQan?: boolean;
+  awsPartitions?: string[];
+  updateSnoozeDuration?: string;
 }
 
 export interface FrontendSettings extends GetFrontendSettingsResponse {}
@@ -24,6 +62,10 @@ export interface GetSettingsResponse {
   settings: Settings;
 }
 
+export interface ChangeSettingsResponse {
+  settings: Settings;
+}
+
 export interface GetFrontendSettingsResponse {
   anonymousEnabled: boolean;
   appSubUrl: string;
diff --git a/ui/apps/pmm/vitest.config.ts b/ui/apps/pmm/vitest.config.ts
index d889ac4e21e..79b4d442374 100644
--- a/ui/apps/pmm/vitest.config.ts
+++ b/ui/apps/pmm/vitest.config.ts
@@ -15,16 +15,28 @@ export default defineConfig({
       'react/jsx-runtime',
       'react/jsx-dev-runtime',
       '@emotion/react',
-      '@emotion/styled'
+      '@emotion/styled',
     ],
     alias: {
       // Force React to resolve from main project's node_modules
-      'react': path.resolve(__dirname, '../../node_modules/react'),
+      react: path.resolve(__dirname, '../../node_modules/react'),
       'react-dom': path.resolve(__dirname, '../../node_modules/react-dom'),
-      'react/jsx-runtime': path.resolve(__dirname, '../../node_modules/react/jsx-runtime'),
-      'react/jsx-dev-runtime': path.resolve(__dirname, '../../node_modules/react/jsx-dev-runtime'),
-      '@emotion/react': path.resolve(__dirname, '../../node_modules/@emotion/react'),
-      '@emotion/styled': path.resolve(__dirname, '../../node_modules/@emotion/styled')
+      'react/jsx-runtime': path.resolve(
+        __dirname,
+        '../../node_modules/react/jsx-runtime'
+      ),
+      'react/jsx-dev-runtime': path.resolve(
+        __dirname,
+        '../../node_modules/react/jsx-dev-runtime'
+      ),
+      '@emotion/react': path.resolve(
+        __dirname,
+        '../../node_modules/@emotion/react'
+      ),
+      '@emotion/styled': path.resolve(
+        __dirname,
+        '../../node_modules/@emotion/styled'
+      ),
     },
   },
   optimizeDeps: {
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 33f4bcdd7ae..be69d35bbb5 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1568,10 +1568,10 @@
   resolved "https://registry.yarnpkg.com/@percona/eslint-config-react/-/eslint-config-react-1.1.0.tgz#db69fcf5d6bb43e6c842f462e2c1c84d5f3eb281"
   integrity sha512-Tk9mNYslXrxW/gdS/rzxHbLuEXoNCw8r2t/pB8CXZjBl46VLMGspljbyI6525uNNfyO5H0iJQKCJu0Ckf+5erA==
 
-"@percona/percona-ui@1.0.13":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@percona/percona-ui/-/percona-ui-1.0.13.tgz#7940f6feae4103c09a5021bfc8663cbb89e1afa4"
-  integrity sha512-I4jMkQf3l8pwT/j15L7X6rOynpcCwOypvcP75FXbM67TadG2FajkB3XQiMrUfGqvd8qZ0V9CEwiUANEzbZg2uQ==
+"@percona/percona-ui@1.0.14":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@percona/percona-ui/-/percona-ui-1.0.14.tgz#af81881d2023f6e285a36ef5e2ed295b662344f5"
+  integrity sha512-ahDHoj3JXlsk8L13OOuswWbSTtk6ngGGSujX/xY3oKKRSSzLYAMlPA1ccty8is0d2rEpzQ1InDA/4wLXyET6IQ==
   dependencies:
     "@fontsource/poppins" "^5.2.7"
     "@fontsource/roboto" "^5.2.9"
@@ -3652,9 +3652,9 @@ boolbase@^1.0.0:
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
 brace-expansion@^2.0.2, brace-expansion@~1.1.12:
-  version "1.1.12"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.12.tgz#ab9b454466e5a8cc3a187beaad580412a9c5b843"
-  integrity sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.13.tgz#d37875c01dc9eff988dd49d112a57cb67b54efe6"
+  integrity sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==
   dependencies:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
@@ -4762,9 +4762,9 @@ domhandler@^4.2.0, domhandler@^4.3.1:
     domelementtype "^2.2.0"
 
 dompurify@3.2.4, dompurify@^3.2.7:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.3.2.tgz#58c515d0f8508b8749452a028aa589ad80b36325"
-  integrity sha512-6obghkliLdmKa56xdbLOpUZ43pAR6xFy1uOrxBaIDjT+yaRuuybLjGS9eVBoSR/UPU5fq3OXClEHLJNGvbxKpQ==
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.3.3.tgz#680cae8af3e61320ddf3666a3bc843f7b291b2b6"
+  integrity sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==
   optionalDependencies:
     "@types/trusted-types" "^2.0.7"
 
@@ -9186,6 +9186,11 @@ react-hook-form@^7.68.0:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.71.1.tgz#6a758958861682cf0eb22131eead684ba3618f66"
   integrity sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w==
 
+react-hook-form@^7.71.2:
+  version "7.71.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.71.2.tgz#a5f1d2b855be9ecf1af6e74df9b80f54beae7e35"
+  integrity sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA==
+
 react-i18next@^15.0.0:
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-15.7.4.tgz#146e50f220d204b842e22c75d1a3d23c6c589a30"
@@ -10201,7 +10206,6 @@ string-template@~0.2.1:
   integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -11387,7 +11391,6 @@ wordwrap@^1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==