From 05c4505f5aa2a6292c9b7e9ac8243658bab494ec Mon Sep 17 00:00:00 2001
From: KirillKirill <kirill@hmt.ai>
Date: Fri, 10 Jul 2026 16:17:35 +0300
Subject: [PATCH 1/6] chore: bump materialUI to v9

---
 packages/apps/human-app/frontend/package.json |   5 +-
 packages/apps/human-app/frontend/src/main.tsx |   2 -
 .../components/governance-banner.tsx          |  72 +++--
 .../choose-sign-up-account-type.tsx           |   2 +-
 .../homepage/components/logo-section.tsx      |  50 +--
 .../homepage/components/operator-sign-in.tsx  |   1 +
 .../homepage/components/operator-sign-up.tsx  |  60 ++--
 .../modules/homepage/components/welcome.tsx   |  10 +-
 .../homepage/components/worker-sign-up.tsx    |  64 ++--
 .../src/modules/homepage/views/home.page.tsx  |   2 +-
 .../profile/components/operator-info.tsx      |   6 +-
 .../profile/components/operator-stats.tsx     |   8 +-
 .../modules/operator/profile/profile.page.tsx |   6 +-
 .../modules/signin/worker/sign-in-form.tsx    |  15 +-
 .../components/add-keys/add-keys-form.tsx     |  14 +-
 .../add-keys/edit-existing-keys-form.tsx      |   7 +-
 .../add-keys/existing-keys-form.tsx           |  14 +-
 .../components/add-keys/existing-keys.tsx     |  26 +-
 .../operator/components/add-stake/buttons.tsx |   8 +-
 .../components/add-stake/stake-form.tsx       |   6 +-
 .../signup/operator/views/add-stake.page.tsx  |  10 +-
 .../views/edit-existing-keys-success.page.tsx |   2 +-
 .../worker/views/sign-up-worker.page.tsx      |   4 +-
 .../email-verification-success-message.tsx    |   2 +-
 .../resend-verification-email-form.tsx        |   8 +-
 .../components/user-stats-details.tsx         |  31 +-
 .../components/user-stats-drawer.tsx          |   6 +-
 .../hcaptcha-labeling/enable-labeler.page.tsx |  13 +-
 .../hcaptcha-labeling.page.tsx                |  15 +-
 .../components/oracles-table-item-mobile.tsx  |  14 +-
 .../components/oracles-table.tsx              |   2 +-
 .../jobs-discovery/jobs-discovery.page.tsx    |  34 +--
 .../available-jobs-filter-modal.tsx           |   9 +-
 .../mobile/available-jobs-list-mobile.tsx     |  29 +-
 ...ailable-jobs-reward-amount-sort-mobile.tsx |   2 +-
 .../components/escrow-address-search-form.tsx |  16 +-
 .../jobs/components/report-abuse-modal.tsx    |  32 +-
 .../worker/jobs/components/reward-amount.tsx  |   6 +-
 .../worker/jobs/components/sorting.tsx        |   4 +-
 .../src/modules/worker/jobs/jobs.page.tsx     |   6 +-
 .../components/desktop/status-chip.tsx        |   2 +-
 .../mobile/my-jobs-expires-at-sort-mobile.tsx |   2 +-
 .../mobile/my-jobs-filter-modal.tsx           |   9 +-
 .../components/mobile/my-jobs-list-mobile.tsx |  25 +-
 .../my-jobs-reward-amount-sort-mobile.tsx     |   2 +-
 .../oracle-registration/registration-form.tsx |   2 +-
 .../oracle-registration/registration.page.tsx |   6 +-
 .../profile/components/add-api-key-modal.tsx  | 259 ++++++++++++++++
 .../profile/components/api-key-data.tsx       | 105 +++++++
 .../components/delete-api-key-modal.tsx       | 123 ++++++++
 .../profile/components/edit-api-key-modal.tsx | 289 ++++++++++++++++++
 .../identity-verification-control.tsx         |   2 +-
 .../profile/components/modal-states.tsx       |  41 ++-
 .../profile/components/profile-data.tsx       |   5 +-
 .../profile/components/staking-info.tsx       | 225 ++++++++++++++
 .../components/wallet-connect-done.tsx        |  56 ++--
 .../worker/profile/views/profile.page.tsx     |   2 +-
 .../reset-password-success.page.tsx           |   2 +-
 .../reset-password/reset-password.page.tsx    |   2 +-
 .../send-reset-link-success.page.tsx          |  18 +-
 .../send-reset-link/send-reset-link.page.tsx  |   2 +-
 .../frontend/src/router/components/footer.tsx |  94 +++---
 .../protected/bottom-menu-items-list.tsx      |   9 +-
 .../layout/protected/drawer-navigation.tsx    |   7 +-
 .../components/layout/protected/layout.tsx    |  41 ++-
 .../components/layout/protected/navbar.tsx    |   8 +-
 .../layout/protected/page-header.tsx          |  76 ++---
 .../layout/protected/top-menu-items-list.tsx  |  30 +-
 .../components/layout/unprotected/layout.tsx  |  18 +-
 .../components/layout/unprotected/navbar.tsx  |   2 +-
 .../shared/components/data-entry/checkbox.tsx |   2 +-
 .../shared/components/data-entry/input.tsx    |  23 +-
 .../data-entry/password/password.tsx          |  50 ++-
 .../components/hcaptcha/h-captcha-form.tsx    |   2 +-
 .../src/shared/components/ui/chip.tsx         |   6 +-
 .../components/ui/empty-placeholder.tsx       |   2 +-
 .../components/ui/modal/global-modal.tsx      |  12 +-
 .../shared/components/ui/optional-text.tsx    |   2 +-
 .../components/ui/page-card/page-card.tsx     |  40 +--
 .../ui/profile/profile-list-item.tsx          |  17 +-
 .../shared/components/ui/success-label.tsx    |   2 +-
 .../src/shared/components/ui/table-button.tsx |   6 +-
 .../ui/table/table-header-menu/filtering.tsx  |  16 +-
 .../ui/table/table-header-menu/sorting.tsx    |  14 +-
 .../components/ui/text-header-with-icon.tsx   |   2 +-
 .../frontend/src/shared/styles/dark-theme.ts  |   1 -
 .../frontend/src/shared/styles/theme.ts       |   1 -
 .../frontend/src/shared/styles/typography.ts  |   1 +
 .../apps/human-app/frontend/tsconfig.json     |   1 -
 89 files changed, 1654 insertions(+), 633 deletions(-)
 create mode 100644 packages/apps/human-app/frontend/src/modules/worker/profile/components/add-api-key-modal.tsx
 create mode 100644 packages/apps/human-app/frontend/src/modules/worker/profile/components/api-key-data.tsx
 create mode 100644 packages/apps/human-app/frontend/src/modules/worker/profile/components/delete-api-key-modal.tsx
 create mode 100644 packages/apps/human-app/frontend/src/modules/worker/profile/components/edit-api-key-modal.tsx
 create mode 100644 packages/apps/human-app/frontend/src/modules/worker/profile/components/staking-info.tsx

diff --git a/packages/apps/human-app/frontend/package.json b/packages/apps/human-app/frontend/package.json
index a9fb3a8fd3..7d8fd7bce6 100644
--- a/packages/apps/human-app/frontend/package.json
+++ b/packages/apps/human-app/frontend/package.json
@@ -26,8 +26,7 @@
     "@hookform/resolvers": "^5.1.0",
     "@human-protocol/sdk": "workspace:*",
     "@mui/icons-material": "^7.3.8",
-    "@mui/material": "^5.16.7",
-    "@mui/system": "^9.0.1",
+    "@mui/material": "^9.2.0",
     "@mui/x-date-pickers": "^9.2.0",
     "@reown/appkit": "^1.8.20",
     "@reown/appkit-adapter-wagmi": "^1.8.20",
@@ -40,7 +39,6 @@
     "jwt-decode": "^4.0.0",
     "lodash": "^4.18.1",
     "material-react-table": "3.0.1",
-    "mui-image": "^1.0.7",
     "notistack": "^3.0.1",
     "prop-types": "^15.8.1",
     "query-string": "^9.0.0",
@@ -63,7 +61,6 @@
     "@tanstack/eslint-plugin-query": "^5.60.1",
     "@tanstack/react-query-devtools": "^5.59.16",
     "@types/lodash": "^4.17.24",
-    "@types/mui-image": "^1.0.5",
     "@types/node": "^22.10.5",
     "@types/prop-types": "^15",
     "@types/react": "^19.2.15",
diff --git a/packages/apps/human-app/frontend/src/main.tsx b/packages/apps/human-app/frontend/src/main.tsx
index ccf792a2b6..b50351ca33 100644
--- a/packages/apps/human-app/frontend/src/main.tsx
+++ b/packages/apps/human-app/frontend/src/main.tsx
@@ -7,12 +7,10 @@ import CssBaseline from '@mui/material/CssBaseline';
 import { BrowserRouter } from 'react-router-dom';
 import { AuthProvider } from '@/modules/auth/context/auth-context';
 import { Router } from '@/router/router';
-import '@fontsource/inter';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/600.css';
 import '@fontsource/inter/800.css';
-import '@fontsource/roboto';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import { WalletConnectProvider } from '@/shared/contexts/wallet-connect';
diff --git a/packages/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx b/packages/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx
index a1096e1d3d..a72404c85f 100644
--- a/packages/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx
+++ b/packages/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx
@@ -17,6 +17,7 @@ function getProposalStatus(proposal: ProposalResponse): ProposalStatus {
   if (voteStart <= now && now < voteEnd) return 'active';
   return 'pending';
 }
+
 export function GovernanceBanner() {
   const { t } = useTranslation();
   const { data: proposal, isLoading, isError } = useProposalQuery();
@@ -53,45 +54,49 @@ export function GovernanceBanner() {
   return (
     <Grid
       container
-      alignItems={{ xs: 'flex-start', sm: 'center' }}
-      justifyContent={{ xs: 'flex-start', sm: 'space-between' }}
-      bgcolor={background.primary}
-      color={text.secondary}
-      borderRadius="8px"
-      p={2}
-      gap={2}
-      mt={{ xs: 0, md: -8 }}
+      sx={{
+        alignItems: { xs: 'flex-start', sm: 'center' },
+        justifyContent: { xs: 'flex-start', sm: 'space-between' },
+        bgcolor: background.primary,
+        color: text.secondary,
+        borderRadius: '8px',
+        p: 2,
+        gap: 2,
+        mt: { xs: 0, md: -8 },
+      }}
     >
       {/* Left side: Countdown & "X votes" */}
       <Grid
-        item
-        xs={12}
-        sm="auto"
-        display="flex"
-        alignItems="center"
-        flexWrap={{ xs: 'wrap', sm: 'nowrap' }}
-        gap={{ xs: 2, md: 0 }}
+        size={{ xs: 12, sm: 'auto' }}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: { xs: 'wrap', sm: 'nowrap' },
+          gap: { xs: 2, md: 0 },
+        }}
       >
-        <Box display="flex" alignItems="center">
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <AccessTimeIcon sx={{ mr: 1 }} />
-          <Typography variant="body2" color={text.secondary}>
+          <Typography variant="body2" sx={{ color: text.secondary }}>
             {status === 'pending'
               ? t('governance.timeToStart', 'Voting starts in')
               : t('governance.timeToReveal', 'Time to reveal vote')}
             :
           </Typography>
-          <Typography variant="body1" ml={1} color={text.primary}>
+          <Typography variant="body1" sx={{ ml: 1, color: text.primary }}>
             {timeRemaining}
           </Typography>
         </Box>
         {status === 'active' && (
           <Typography
             variant="body1"
-            ml={{ xs: 0, md: 8 }}
-            color={text.primary}
-            bgcolor={background.secondary}
-            borderRadius="8px"
-            padding="4px 8px"
+            sx={{
+              ml: { xs: 0, md: 8 },
+              color: text.primary,
+              bgcolor: background.secondary,
+              borderRadius: '8px',
+              p: '4px 8px',
+            }}
           >
             {totalVotes} {t('governance.votes', 'votes')}
           </Typography>
@@ -100,19 +105,24 @@ export function GovernanceBanner() {
 
       {/* Right side: "More details" link */}
       <Grid
-        item
-        xs={12}
-        sm
-        display="flex"
-        justifyContent={{ xs: 'flex-start', sm: 'flex-end' }}
+        size={{ xs: 12, sm: 12 }}
+        sx={{
+          display: 'flex',
+          justifyContent: { xs: 'flex-start', sm: 'flex-end' },
+        }}
       >
         <MuiLink
           href={env.VITE_GOVERNANCE_URL}
-          underline="none"
           target="_blank"
           rel="noopener noreferrer"
-          color={text.secondary}
-          fontWeight={500}
+          sx={{
+            color: text.secondary,
+            fontWeight: 500,
+            textDecoration: 'none',
+            '&:hover': {
+              textDecoration: 'underline',
+            },
+          }}
         >
           {t('governance.moreDetails', 'More details')} &rarr;
         </MuiLink>
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx
index a0c2415e16..bb7ebfe479 100644
--- a/packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx
+++ b/packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx
@@ -27,7 +27,7 @@ export function ChooseSignUpAccountType() {
       title={<Typography variant="h4">{t('homepage.welcome')} 👋</Typography>}
     >
       <Grid container spacing={4}>
-        <Grid item sx={{ paddingBottom: '16px' }} xs={12}>
+        <Grid size={12} sx={{ pb: 2 }}>
           <Typography variant="h4">{t('homepage.howWillUse')}</Typography>
         </Grid>
         <WorkerSignUp />
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/logo-section.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/logo-section.tsx
index 6116bb99a3..d8666f3fac 100644
--- a/packages/apps/human-app/frontend/src/modules/homepage/components/logo-section.tsx
+++ b/packages/apps/human-app/frontend/src/modules/homepage/components/logo-section.tsx
@@ -15,55 +15,65 @@ export function LogoSection() {
   const isMobile = useIsMobile('lg');
 
   return (
-    <Grid container direction="column" justifyContent="center">
+    <Grid
+      container
+      sx={{
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: { xs: 'center', lg: 'flex-start' },
+      }}
+    >
       {isMobile ? (
         <Stack
-          alignItems="center"
           direction="row"
-          justifyContent="center"
-          sx={{ svg: { margin: '-1.4rem' } }}
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'center',
+            svg: { margin: '-1.4rem' },
+          }}
         >
           <MobileHomeIcons />
         </Stack>
       ) : (
         <Stack
           direction="row"
-          maxHeight="80px"
-          mb="1.5rem"
-          sx={{ transform: 'translateX(-4.5%)' }}
+          sx={{
+            maxHeight: '80px',
+            mb: 3,
+            transform: 'translateX(-4.5%)',
+          }}
         >
-          <Grid sx={{ mx: '24px' }}>
+          <Grid sx={{ mx: 3 }}>
             <HomepageWorkIcon />
           </Grid>
-          <Grid sx={{ mx: '24px' }}>
+          <Grid sx={{ mx: 3 }}>
             <HomepageUserIcon />
           </Grid>
-          <Grid sx={{ mx: '24px' }}>
+          <Grid sx={{ mx: 3 }}>
             <HomepageLogoIcon />
           </Grid>
         </Stack>
       )}
       <Stack
         direction="row"
-        justifyContent={isMobile ? 'center' : 'flex-start'}
-        sx={{ marginTop: '0' }}
+        sx={{
+          justifyContent: { xs: 'center', md: 'flex-start' },
+          mt: 0,
+        }}
       >
         <Typography variant="h1">{logoTextSplit[0]}</Typography>
-        <Typography
-          sx={{ fontWeight: '400', marginLeft: '1.25rem' }}
-          variant="h1"
-        >
+        <Typography variant="h1" sx={{ fontWeight: '400', ml: 2.5 }}>
           {logoTextSplit[1]}
         </Typography>
       </Stack>
       <Typography
+        variant="h6"
         sx={{
-          marginTop: '1.875rem',
-          marginBottom: '3.8125rem',
+          mt: '1.875rem',
+          mb: '3.8125rem',
           typography: { md: 'h5' },
+          textAlign: { xs: 'center', md: 'left' },
         }}
-        textAlign={isMobile ? 'center' : 'left'}
-        variant="h6"
       >
         {t('homepage.completeJobs')}
       </Typography>
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-in.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-in.tsx
index 2c215be780..a09315b084 100644
--- a/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-in.tsx
+++ b/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-in.tsx
@@ -26,6 +26,7 @@ export function OperatorSignIn() {
   }, [address, isConnected, signInMutation]);
 
   const getSnackBar = () => {
+    console.log('1');
     return (
       <Snackbar
         message={getErrorMessageForError(signInMutationError)}
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-up.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-up.tsx
index 7ec945c879..488b5d88d5 100644
--- a/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-up.tsx
+++ b/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-up.tsx
@@ -1,35 +1,38 @@
-import { Grid, Typography, List, ListItemText, Button } from '@mui/material';
+import {
+  Grid,
+  Typography,
+  List,
+  ListItemText,
+  Button,
+  Stack,
+} from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { routerPaths } from '@/router/router-paths';
 import { useColorMode } from '@/shared/contexts/color-mode';
-import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
 
 export function OperatorSignUp() {
   const { colorPalette, isDarkMode } = useColorMode();
   const { t } = useTranslation();
-  const isMobile = useIsMobile('lg');
 
   return (
     <Grid
-      item
+      size={{ xs: 12, lg: 6 }}
       sx={{
-        paddingTop: '44px',
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'space-between',
       }}
-      xs={isMobile ? 12 : 6}
     >
-      <div>
+      <Stack>
         <Typography
-          color={
-            isDarkMode
-              ? onlyDarkModeColor.additionalTextColor
-              : colorPalette.primary.light
-          }
           variant="h6"
+          sx={{
+            color: isDarkMode
+              ? onlyDarkModeColor.additionalTextColor
+              : colorPalette.primary.light,
+          }}
         >
           {t('homepage.joinAsOperator')}
         </Typography>
@@ -37,45 +40,48 @@ export function OperatorSignUp() {
           sx={{
             listStyleType: 'disc',
             listStylePosition: 'inside',
-            paddingLeft: '0.5rem',
+            pl: 1,
           }}
         >
           <ListItemText
             primary={t('homepage.becomePartner')}
-            primaryTypographyProps={{
-              variant: 'subtitle2',
-              sx: {
-                display: 'list-item',
+            slotProps={{
+              primary: {
+                variant: 'subtitle2',
+                sx: {
+                  display: 'list-item',
+                },
               },
             }}
           />
           <ListItemText
             primary={t('homepage.runAsOracle')}
-            primaryTypographyProps={{
-              variant: 'subtitle2',
-              sx: {
-                display: 'list-item',
+            slotProps={{
+              primary: {
+                variant: 'subtitle2',
+                sx: {
+                  display: 'list-item',
+                },
               },
             }}
           />
         </List>
-      </div>
+      </Stack>
       <Grid
+        size={12}
         sx={{
           display: 'flex',
           alignItems: 'flex-end',
           justifyContent: 'flex-end',
-          paddingTop: '2rem',
+          pt: 4,
         }}
-        xs={12}
       >
         <Button
           component={Link}
-          fullWidth
-          size="large"
-          sx={{ fontFamily: 'Inter' }}
           to={routerPaths.operator.connectWallet}
           variant="contained"
+          size="large"
+          fullWidth
         >
           {t('homepage.signAsOperator')}
         </Button>
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/welcome.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/welcome.tsx
index 2737034284..c6ba4099bb 100644
--- a/packages/apps/human-app/frontend/src/modules/homepage/components/welcome.tsx
+++ b/packages/apps/human-app/frontend/src/modules/homepage/components/welcome.tsx
@@ -1,6 +1,5 @@
 import { Grid } from '@mui/material';
 import { useEffect } from 'react';
-import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { useColorMode } from '@/shared/contexts/color-mode';
 import { useBackgroundContext } from '@/shared/contexts/background';
 import { SignInSection } from './sign-in-section';
@@ -9,7 +8,6 @@ import { LogoSection } from './logo-section';
 export function Welcome() {
   const { isDarkMode } = useColorMode();
   const { setWhiteBackground } = useBackgroundContext();
-  const isMobile = useIsMobile('lg');
 
   useEffect(() => {
     if (!isDarkMode) {
@@ -20,13 +18,13 @@ export function Welcome() {
   return (
     <Grid
       container
-      spacing={isMobile ? 0 : 10}
-      sx={{ paddingBottom: isMobile ? '44px' : 0 }}
+      spacing={{ xs: 0, lg: 10 }}
+      sx={{ width: '100%', pb: { xs: '44px', lg: 0 } }}
     >
-      <Grid container item justifyContent="center" xs={isMobile ? 12 : 6}>
+      <Grid size={{ xs: 12, lg: 6 }} sx={{ justifyContent: 'center' }}>
         <LogoSection />
       </Grid>
-      <Grid item justifyContent="flex-end" xs={isMobile ? 12 : 6}>
+      <Grid size={{ xs: 12, lg: 6 }} sx={{ justifyContent: 'flex-end' }}>
         <SignInSection />
       </Grid>
     </Grid>
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/worker-sign-up.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/worker-sign-up.tsx
index 8ec2dcab12..7fe567bce4 100644
--- a/packages/apps/human-app/frontend/src/modules/homepage/components/worker-sign-up.tsx
+++ b/packages/apps/human-app/frontend/src/modules/homepage/components/worker-sign-up.tsx
@@ -1,24 +1,23 @@
-import { Grid, Typography, List, ListItemText, Button } from '@mui/material';
+import {
+  Grid,
+  Typography,
+  List,
+  ListItemText,
+  Button,
+  Stack,
+} from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { routerPaths } from '@/router/router-paths';
 import { useColorMode } from '@/shared/contexts/color-mode';
-import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
 
 export function WorkerSignUp() {
   const { colorPalette, isDarkMode } = useColorMode();
   const { t } = useTranslation();
-  const isMobile = useIsMobile('lg');
 
   return (
-    <Grid
-      item
-      sx={{
-        paddingTop: '44px',
-      }}
-      xs={isMobile ? 12 : 6}
-    >
+    <Grid size={{ xs: 12, lg: 6 }}>
       <Grid
         sx={{
           display: 'flex',
@@ -27,14 +26,14 @@ export function WorkerSignUp() {
           justifyContent: 'space-between',
         }}
       >
-        <div>
+        <Stack>
           <Typography
-            color={
-              isDarkMode
-                ? onlyDarkModeColor.additionalTextColor
-                : colorPalette.primary.light
-            }
             variant="h6"
+            sx={{
+              color: isDarkMode
+                ? onlyDarkModeColor.additionalTextColor
+                : colorPalette.primary.light,
+            }}
           >
             {t('homepage.iWantToEarn')}
           </Typography>
@@ -42,45 +41,48 @@ export function WorkerSignUp() {
             sx={{
               listStyleType: 'disc',
               listStylePosition: 'inside',
-              paddingLeft: '0.5rem',
+              pl: '0.5rem',
             }}
           >
             <ListItemText
               primary={t('homepage.completeTask')}
-              primaryTypographyProps={{
-                variant: 'subtitle2',
-                sx: {
-                  display: 'list-item',
+              slotProps={{
+                primary: {
+                  variant: 'subtitle2',
+                  sx: {
+                    display: 'list-item',
+                  },
                 },
               }}
             />
             <ListItemText
               primary={t('homepage.workAnywhere')}
-              primaryTypographyProps={{
-                variant: 'subtitle2',
-                sx: {
-                  display: 'list-item',
+              slotProps={{
+                primary: {
+                  variant: 'subtitle2',
+                  sx: {
+                    display: 'list-item',
+                  },
                 },
               }}
             />
           </List>
-        </div>
+        </Stack>
         <Grid
+          size={12}
           sx={{
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-            paddingTop: '2rem',
+            pt: 4,
           }}
-          xs={12}
         >
           <Button
             component={Link}
-            fullWidth
-            size="large"
-            sx={{ fontFamily: 'Inter' }}
             to={routerPaths.worker.signUp}
             variant="contained"
+            size="large"
+            fullWidth
           >
             {t('homepage.signUpToComplete')}
           </Button>
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx b/packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx
index 7176f2fa77..35ba3e9221 100644
--- a/packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx
@@ -34,7 +34,7 @@ export function HomePage() {
   })();
 
   return (
-    <Box width="100%">
+    <Box sx={{ width: '100%' }}>
       <Paper
         sx={{
           backgroundColor:
diff --git a/packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-info.tsx b/packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-info.tsx
index 36dfb88519..6512e24625 100644
--- a/packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-info.tsx
+++ b/packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-info.tsx
@@ -30,15 +30,15 @@ export function OperatorInfo({
       }}
     >
       <Typography
-        color={colorPalette.text.primary}
+        variant="h5"
         sx={{
           fontWeight: 600,
+          color: colorPalette.text.primary,
         }}
-        variant="h5"
       >
         {t('operator.profile.about.header')}
       </Typography>
-      <Stack flexDirection="row">
+      <Stack direction="row">
         <List sx={{ overflow: 'hidden' }}>
           <ProfileListItem
             header={t('operator.profile.about.role')}
diff --git a/packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-stats.tsx b/packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-stats.tsx
index a0a8b06723..89e121827e 100644
--- a/packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-stats.tsx
+++ b/packages/apps/human-app/frontend/src/modules/operator/profile/components/operator-stats.tsx
@@ -2,7 +2,6 @@ import { Paper, Typography, Stack, List } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { ProfileListItem } from '@/shared/components/ui/profile';
 import { useColorMode } from '@/shared/contexts/color-mode';
-import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { type OperatorStatsResponse } from '../types';
 
 export function OperatorStats({
@@ -10,7 +9,6 @@ export function OperatorStats({
 }: Readonly<{
   statsData: OperatorStatsResponse;
 }>) {
-  const isMobile = useIsMobile('lg');
   const { colorPalette } = useColorMode();
   const { t } = useTranslation();
 
@@ -22,21 +20,21 @@ export function OperatorStats({
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
-        padding: isMobile ? '20px' : '40px',
+        padding: { xs: 2.5, md: 5 },
         borderRadius: '20px',
       }}
     >
       <Typography
-        color={colorPalette.text.primary}
         sx={{
           fontWeight: 600,
           width: '100%',
+          color: colorPalette.text.primary,
         }}
         variant="h5"
       >
         {t('operator.profile.statistics.header')}
       </Typography>
-      <Stack flexDirection="row" justifyContent="space-between">
+      <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
         <List>
           <ProfileListItem
             header={t('operator.profile.statistics.escrowsProcessed')}
diff --git a/packages/apps/human-app/frontend/src/modules/operator/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/modules/operator/profile/profile.page.tsx
index 6e0e610130..9a53c25b34 100644
--- a/packages/apps/human-app/frontend/src/modules/operator/profile/profile.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/operator/profile/profile.page.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { Grid } from '@mui/material';
-import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { useGetKeys } from '@/modules/operator/hooks/use-get-keys';
 import {
   PageCardError,
@@ -11,7 +10,6 @@ import { useGetOperatorStats } from './hooks';
 import { OperatorInfo, OperatorStats } from './components';
 
 export function OperatorProfilePage() {
-  const isMobile = useIsMobile('lg');
   const {
     data: keysData,
     error: keysError,
@@ -47,10 +45,10 @@ export function OperatorProfilePage() {
 
   return (
     <Grid container spacing={4}>
-      <Grid item xs={isMobile ? 12 : 8}>
+      <Grid size={{ xs: 12, md: 8 }}>
         <OperatorInfo keysData={keysData} />
       </Grid>
-      <Grid item xs={isMobile ? 12 : 4}>
+      <Grid size={{ xs: 12, md: 4 }}>
         <OperatorStats statsData={statsData} />
       </Grid>
     </Grid>
diff --git a/packages/apps/human-app/frontend/src/modules/signin/worker/sign-in-form.tsx b/packages/apps/human-app/frontend/src/modules/signin/worker/sign-in-form.tsx
index 5aeca3562a..f08174d2cd 100644
--- a/packages/apps/human-app/frontend/src/modules/signin/worker/sign-in-form.tsx
+++ b/packages/apps/human-app/frontend/src/modules/signin/worker/sign-in-form.tsx
@@ -1,5 +1,5 @@
 import { FormProvider, useForm } from 'react-hook-form';
-import { Box, Grid, Typography } from '@mui/material';
+import { Box, Grid, Link as MuiLink, Typography } from '@mui/material';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -44,7 +44,7 @@ export function SignInForm({
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit}>
-        <Grid container gap="1.5rem">
+        <Grid container sx={{ gap: 3 }}>
           <Input
             fullWidth
             label={t('worker.signInForm.fields.email')}
@@ -55,18 +55,19 @@ export function SignInForm({
             label={t('worker.signInForm.fields.password')}
             name="password"
           />
-          <Box width="100%">
+          <Box sx={{ width: '100%' }}>
             <Typography variant="body1">
-              <Link
-                style={{
+              <MuiLink
+                component={Link}
+                to={routerPaths.worker.sendResetLink}
+                sx={{
                   textDecoration: 'none',
                   fontWeight: 600,
                   color: 'inherit',
                 }}
-                to={routerPaths.worker.sendResetLink}
               >
                 {t('worker.signInForm.forgotPassword')}
-              </Link>
+              </MuiLink>
             </Typography>
           </Box>
           <HCaptchaForm error={error} name="h_captcha_token" />
diff --git a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/add-keys-form.tsx b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/add-keys-form.tsx
index 84491fee32..fd45b334c5 100644
--- a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/add-keys-form.tsx
+++ b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/add-keys-form.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import { Grid, Stack } from '@mui/material';
 import { t } from 'i18next';
 import { Link } from 'react-router-dom';
 import { routerPaths } from '@/router/router-paths';
@@ -27,13 +27,11 @@ export function AddKeysForm({
   });
 
   return (
-    <Grid container gap="2rem">
-      <div
-        style={{
+    <Grid container spacing={2}>
+      <Stack
+        sx={{
           width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '3rem',
+          gap: 6,
         }}
       >
         {hasSomeNotEmptyKeys ? <ExistingKeysForm keysData={keysData} /> : null}
@@ -47,7 +45,7 @@ export function AddKeysForm({
             {t('operator.addKeysPage.skipBtn')}
           </Button>
         ) : null}
-      </div>
+      </Stack>
     </Grid>
   );
 }
diff --git a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/edit-existing-keys-form.tsx b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/edit-existing-keys-form.tsx
index 7ef7b929f3..20914684fd 100644
--- a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/edit-existing-keys-form.tsx
+++ b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/edit-existing-keys-form.tsx
@@ -107,9 +107,9 @@ export function EditExistingKeysForm({
         {noChangesError ? (
           <div>
             <Typography
-              color={colorPalette.error.main}
               component="div"
               variant="helperText"
+              sx={{ color: colorPalette.error.main }}
             >
               {noChangesError}
             </Typography>
@@ -117,7 +117,10 @@ export function EditExistingKeysForm({
         ) : null}
         <div>
           <Button {...formButtonProps}>
-            <Typography color={colorPalette.white} variant="buttonMedium">
+            <Typography
+              variant="buttonMedium"
+              sx={{ color: colorPalette.white }}
+            >
               {t('operator.addKeysPage.editKeysForm.btn')}
             </Typography>
           </Button>
diff --git a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys-form.tsx b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys-form.tsx
index d7b0687727..b78d59326b 100644
--- a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys-form.tsx
+++ b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys-form.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Grid } from '@mui/material';
+import { Grid, Stack } from '@mui/material';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
 import type { GetEthKVStoreValuesSuccessResponse } from '@/modules/operator/hooks/use-get-keys';
@@ -31,13 +31,11 @@ export function ExistingKeysForm({
   useResetMutationErrors(existingKeysMethods.watch, existingKeysMutation.reset);
 
   return (
-    <Grid container gap="2rem">
-      <div
-        style={{
+    <Grid container sx={{ gap: 4 }}>
+      <Stack
+        sx={{
           width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '3rem',
+          gap: 6,
         }}
       >
         <FormProvider {...existingKeysMethods}>
@@ -66,7 +64,7 @@ export function ExistingKeysForm({
             )}
           </form>
         </FormProvider>
-      </div>
+      </Stack>
     </Grid>
   );
 }
diff --git a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys.tsx b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys.tsx
index 1eb854a9fc..272bdb3083 100644
--- a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys.tsx
+++ b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-keys/existing-keys.tsx
@@ -18,7 +18,7 @@ const existingKeysConfig: Record<
   (values: GetEthKVStoreValuesSuccessResponse) => React.ReactElement
 > = {
   [EthKVStoreKeys.Fee]: ({ fee }) => (
-    <Grid container sx={{ flexDirection: 'column', gap: '0.75rem' }}>
+    <Grid container sx={{ flexDirection: 'column', gap: 1.5 }}>
       <Typography variant="subtitle2">
         {t('operator.addKeysPage.existingKeys.fee')}
       </Typography>
@@ -30,38 +30,38 @@ const existingKeysConfig: Record<
     </Grid>
   ),
   [EthKVStoreKeys.PublicKey]: ({ public_key }) => (
-    <Grid container sx={{ flexDirection: 'column', gap: '0.75rem' }}>
-      <Typography variant="subtitle2" width="100%">
+    <Grid container sx={{ flexDirection: 'column', gap: 1.5 }}>
+      <Typography variant="subtitle2" sx={{ width: '100%' }}>
         {t('operator.addKeysPage.existingKeys.publicKey')}
       </Typography>
-      <Typography variant="body1" width="100%">
+      <Typography variant="body1" sx={{ width: '100%' }}>
         <OptionalText text={public_key} />
       </Typography>
     </Grid>
   ),
   [EthKVStoreKeys.Url]: ({ url }) => (
-    <Grid container sx={{ flexDirection: 'column', gap: '0.75rem' }}>
-      <Typography variant="subtitle2" width="100%">
+    <Grid container sx={{ flexDirection: 'column', gap: 1.5 }}>
+      <Typography variant="subtitle2" sx={{ width: '100%' }}>
         {t('operator.addKeysPage.existingKeys.url')}
       </Typography>
-      <Typography variant="body1" width="100%">
+      <Typography variant="body1" sx={{ width: '100%' }}>
         <OptionalText text={url} />
       </Typography>
     </Grid>
   ),
   [EthKVStoreKeys.WebhookUrl]: ({ webhook_url }) => (
     <Grid container sx={{ flexDirection: 'column', gap: '0.75rem' }}>
-      <Typography variant="subtitle2" width="100%">
+      <Typography variant="subtitle2" sx={{ width: '100%' }}>
         {t('operator.addKeysPage.existingKeys.webhookUrl')}
       </Typography>
-      <Typography variant="body1" width="100%">
+      <Typography variant="body1" sx={{ width: '100%' }}>
         <OptionalText text={webhook_url} />
       </Typography>
     </Grid>
   ),
   [EthKVStoreKeys.Role]: ({ role }) => (
     <Grid container sx={{ flexDirection: 'column', gap: '0.75rem' }}>
-      <Typography variant="subtitle2" width="100%">
+      <Typography variant="subtitle2" sx={{ width: '100%' }}>
         {t('operator.addKeysPage.existingKeys.role')}
       </Typography>
       <div>{role ? <Chip label={role} /> : <EmptyPlaceholder />}</div>
@@ -69,7 +69,7 @@ const existingKeysConfig: Record<
   ),
   [EthKVStoreKeys.JobTypes]: ({ job_types }) => (
     <Grid container sx={{ flexDirection: 'column', gap: '0.75rem' }}>
-      <Typography variant="subtitle2" width="100%">
+      <Typography variant="subtitle2" sx={{ width: '100%' }}>
         {t('operator.addKeysPage.existingKeys.jobType')}
       </Typography>
       <div>{job_types ? <Chips data={job_types} /> : <EmptyPlaceholder />}</div>
@@ -94,7 +94,7 @@ export function ExistingKeys({
   );
 
   return (
-    <Grid container sx={{ flexDirection: 'column', gap: '2rem' }}>
+    <Grid container sx={{ flexDirection: 'column', gap: 4 }}>
       <Typography variant="body4">
         {t('operator.addKeysPage.existingKeys.title')}
       </Typography>
@@ -111,7 +111,7 @@ export function ExistingKeys({
           startIcon={<ModeEditIcon sx={{ fill: colorPalette.white }} />}
           variant="contained"
         >
-          <Typography color={colorPalette.white} variant="buttonMedium">
+          <Typography variant="buttonMedium" sx={{ color: colorPalette.white }}>
             {t('operator.addKeysPage.existingKeys.editBtn')}
           </Typography>
         </Button>
diff --git a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/buttons.tsx b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/buttons.tsx
index b3a4b84a83..4a677bdaf8 100644
--- a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/buttons.tsx
+++ b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/buttons.tsx
@@ -16,9 +16,9 @@ export function Buttons({
   return (
     <Grid
       container
-      gap="1rem"
       sx={{
-        flex: '1',
+        flex: 1,
+        gap: 2,
         flexWrap: 'nowrap',
         [breakpoints.mobile]: {
           flexWrap: 'wrap',
@@ -26,19 +26,19 @@ export function Buttons({
       }}
     >
       <Button
+        variant="contained"
         fullWidth
         onClick={() => {
           openForm();
         }}
-        variant="contained"
       >
         {t('operator.addStake.actionBtn')}
       </Button>
       <Button
         component={Link}
-        fullWidth
         to={routerPaths.operator.addKeys}
         variant="outlined"
+        fullWidth
       >
         {isStaked
           ? t('operator.addStake.nextBtn')
diff --git a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/stake-form.tsx b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/stake-form.tsx
index c19476e112..ecfc28ca1c 100644
--- a/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/stake-form.tsx
+++ b/packages/apps/human-app/frontend/src/modules/signup/operator/components/add-stake/stake-form.tsx
@@ -55,7 +55,7 @@ export function StakeForm({
             void methods.handleSubmit(addStake)(event);
           }}
         >
-          <Grid container gap="2rem">
+          <Grid container sx={{ gap: 4 }}>
             <Input
               fullWidth
               label={t('operator.stakeForm.label')}
@@ -65,9 +65,9 @@ export function StakeForm({
             />
             <Grid
               container
-              gap="1rem"
               sx={{
-                flex: '1',
+                flex: 1,
+                gap: 2,
                 flexWrap: 'nowrap',
                 [breakpoints.mobile]: {
                   flexWrap: 'wrap',
diff --git a/packages/apps/human-app/frontend/src/modules/signup/operator/views/add-stake.page.tsx b/packages/apps/human-app/frontend/src/modules/signup/operator/views/add-stake.page.tsx
index 0a32dc50f7..9f3bb5c5b0 100644
--- a/packages/apps/human-app/frontend/src/modules/signup/operator/views/add-stake.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/signup/operator/views/add-stake.page.tsx
@@ -88,12 +88,12 @@ export function AddStakeOperatorPage() {
           {t('operator.addStake.label')}
         </Typography>
         <Typography
-          color={
-            isDarkMode
-              ? onlyDarkModeColor.additionalTextColor
-              : colorPalette.primary.light
-          }
           variant="body5"
+          sx={{
+            color: isDarkMode
+              ? onlyDarkModeColor.additionalTextColor
+              : colorPalette.primary.light,
+          }}
         >
           {stakedAmountFormatter(stakedAmount)}
         </Typography>
diff --git a/packages/apps/human-app/frontend/src/modules/signup/operator/views/edit-existing-keys-success.page.tsx b/packages/apps/human-app/frontend/src/modules/signup/operator/views/edit-existing-keys-success.page.tsx
index f7560bfcef..96fc9a322e 100644
--- a/packages/apps/human-app/frontend/src/modules/signup/operator/views/edit-existing-keys-success.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/signup/operator/views/edit-existing-keys-success.page.tsx
@@ -63,7 +63,7 @@ export function EditExistingKeysSuccessPage() {
       showCancelButton={false}
       title={t('operator.editExistingKeysSuccess.title')}
     >
-      <Grid container gap="2rem">
+      <Grid container sx={{ gap: 4 }}>
         <Grid>
           <Typography variant="subtitle1">
             {t('operator.editExistingKeysSuccess.paragraph1')}
diff --git a/packages/apps/human-app/frontend/src/modules/signup/worker/views/sign-up-worker.page.tsx b/packages/apps/human-app/frontend/src/modules/signup/worker/views/sign-up-worker.page.tsx
index c2f8f63f0b..94a1bc65d2 100644
--- a/packages/apps/human-app/frontend/src/modules/signup/worker/views/sign-up-worker.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/signup/worker/views/sign-up-worker.page.tsx
@@ -55,7 +55,7 @@ export function SignUpWorkerPage() {
     >
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit}>
-          <Grid container gap="1.5rem">
+          <Grid container sx={{ gap: 3 }}>
             <Input label={t('worker.signUpForm.fields.email')} name="email" />
             <Password
               label={t('worker.signUpForm.fields.password')}
@@ -66,7 +66,7 @@ export function SignUpWorkerPage() {
               name="confirmPassword"
             />
             <Grid>
-              <Typography fontSize="0.75rem" variant="textField">
+              <Typography variant="textField" sx={{ fontSize: '0.75rem' }}>
                 <Trans
                   components={{
                     1: (
diff --git a/packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-success-message.tsx b/packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-success-message.tsx
index 1fcd31c0ab..8d3107bd1f 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-success-message.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/email-verification/components/email-verification-success-message.tsx
@@ -14,7 +14,7 @@ export function EmailVerificationSuccessMessage() {
       showCancelButton={false}
       title={<SuccessLabel>{t('worker.emailVerification.title')}</SuccessLabel>}
     >
-      <Grid container gap="2rem">
+      <Grid container sx={{ gap: 4 }}>
         <Typography variant="body1">
           {t('worker.emailVerification.description')}
         </Typography>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/email-verification/components/resend-verification-email-form.tsx b/packages/apps/human-app/frontend/src/modules/worker/email-verification/components/resend-verification-email-form.tsx
index 76b22ebd60..bb001a2317 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/email-verification/components/resend-verification-email-form.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/email-verification/components/resend-verification-email-form.tsx
@@ -39,11 +39,11 @@ export function ResendVerificationEmailForm({
           void methods.handleSubmit(handleResend)(event);
         }}
       >
-        <Grid container gap="2rem" sx={{ paddingTop: '1rem' }}>
+        <Grid container sx={{ gap: 4, pt: 2 }}>
           <Typography>
             <Trans
               components={{
-                1: <Typography component="span" fontWeight={600} />,
+                1: <Typography component="span" sx={{ fontWeight: 600 }} />,
               }}
               i18nKey="worker.verifyEmail.paragraph1"
               values={{ email }}
@@ -55,7 +55,7 @@ export function ResendVerificationEmailForm({
           <Typography variant="body1">
             <Trans
               components={{
-                1: <Typography component="span" fontWeight={600} />,
+                1: <Typography component="span" sx={{ fontWeight: 600 }} />,
               }}
               i18nKey="worker.verifyEmail.paragraph3"
             />
@@ -66,8 +66,8 @@ export function ResendVerificationEmailForm({
                 1: (
                   <Typography
                     component="span"
-                    fontWeight={600}
                     variant="body1"
+                    sx={{ fontWeight: 600 }}
                   />
                 ),
                 2: <MailTo mail={env.VITE_HUMAN_SUPPORT_EMAIL} />,
diff --git a/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/components/user-stats-details.tsx b/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/components/user-stats-details.tsx
index 36100f1aab..6196dfd4be 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/components/user-stats-details.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/components/user-stats-details.tsx
@@ -25,22 +25,20 @@ export function UserStatsDetails({
   return (
     <Stack>
       <Divider sx={{ borderBottomWidth: '2px' }} />
-      <Stack py={3}>
-        <Stack gap={{ xs: 3, md: 2 }}>
+      <Stack sx={{ py: 3 }}>
+        <Stack sx={{ gap: { xs: 3, md: 2 } }}>
           <Typography variant={isMobile ? 'mobileHeaderLarge' : 'body7'}>
             {t('worker.hcaptchaLabelingStats.allTime')}
           </Typography>
           <Stack
             direction="row"
-            flexWrap="wrap"
-            gap="1rem"
-            justifyContent="space-between"
+            sx={{ flexWrap: 'wrap', gap: 2, justifyContent: 'space-between' }}
           >
             <Stack>
               <Typography variant="caption">
                 {t('worker.hcaptchaLabelingStats.jobsServed')}
               </Typography>
-              <Typography color={statsColor} variant="h6">
+              <Typography variant="h6" sx={{ color: statsColor }}>
                 {stats.served}
               </Typography>
             </Stack>
@@ -48,7 +46,7 @@ export function UserStatsDetails({
               <Typography variant="caption">
                 {t('worker.hcaptchaLabelingStats.jobsComplete')}
               </Typography>
-              <Typography color={statsColor} variant="h6">
+              <Typography variant="h6" sx={{ color: statsColor }}>
                 {stats.solved}
               </Typography>
             </Stack>
@@ -56,7 +54,7 @@ export function UserStatsDetails({
               <Typography variant="caption">
                 {t('worker.hcaptchaLabelingStats.hmtEarned')}
               </Typography>
-              <Typography color={statsColor} variant="h6">
+              <Typography variant="h6" sx={{ color: statsColor }}>
                 {stats.balance.total}{' '}
                 <span style={{ color: colorPalette.text.primary }}>
                   {t('inputMasks.humanCurrencySuffix')}
@@ -67,14 +65,14 @@ export function UserStatsDetails({
         </Stack>
         <Divider sx={{ mt: { xs: 2, md: 3 }, mb: { xs: 4, md: 2 } }} />
         <Stack>
-          <Typography variant="body7" mb={{ xs: 3, md: 2 }}>
+          <Typography variant="body7" sx={{ mb: { xs: 3, md: 2 } }}>
             {t('worker.hcaptchaLabelingStats.lastHour')}
           </Typography>
           <Stack>
             <Typography variant="caption">
               {t('worker.hcaptchaLabelingStats.earnedLastHour')}
             </Typography>
-            <Typography color={statsColor} variant="h6">
+            <Typography variant="h6" sx={{ color: statsColor }}>
               {stats.balance.recent}{' '}
               <span style={{ color: colorPalette.text.primary }}>
                 {t('inputMasks.humanCurrencySuffix')}
@@ -84,15 +82,16 @@ export function UserStatsDetails({
         </Stack>
         <Stack
           direction="row"
-          justifyContent="space-between"
-          alignItems="center"
-          mt={3}
-          gap={{ xs: 1, md: 2 }}
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            mt: 3,
+            gap: { xs: 1, md: 2 },
+          }}
         >
           <Typography
             variant="body8"
-            lineHeight="1.3"
-            sx={{ whiteSpace: 'pre-line' }}
+            sx={{ lineHeight: '1.3', whiteSpace: 'pre-line' }}
           >
             {t('worker.hcaptchaLabelingStats.statisticsNotLive')}
           </Typography>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/components/user-stats-drawer.tsx b/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/components/user-stats-drawer.tsx
index 1e584e4322..db65ccd070 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/components/user-stats-drawer.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/components/user-stats-drawer.tsx
@@ -38,7 +38,7 @@ export function UserStatsDrawer({
           },
         }}
       >
-        <Box position="relative">
+        <Box sx={{ position: 'relative' }}>
           {isHcaptchaUserStatsRefetching && (
             <LoadingOverlay
               sx={{
@@ -51,10 +51,10 @@ export function UserStatsDrawer({
               }}
             />
           )}
-          <Stack px={6.5} py={3}>
+          <Stack sx={{ px: 6.5, py: 3 }}>
             {hcaptchaUserStatsStatus === 'success' ? (
               <>
-                <Typography variant="mobileHeaderLarge" mb={3}>
+                <Typography variant="mobileHeaderLarge" sx={{ mb: 3 }}>
                   {t('worker.hcaptchaLabelingStats.hCapchaStatistics')}
                 </Typography>
                 <UserStatsDetails
diff --git a/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/enable-labeler.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/enable-labeler.page.tsx
index 338d41c3a8..71b64fa101 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/enable-labeler.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/enable-labeler.page.tsx
@@ -3,7 +3,6 @@ import Paper from '@mui/material/Paper';
 import { t } from 'i18next';
 import Typography from '@mui/material/Typography';
 import { Navigate } from 'react-router-dom';
-import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { Button } from '@/shared/components/ui/button';
 import { PageCardError } from '@/shared/components/ui/page-card';
 import { getErrorMessageForError } from '@/shared/errors';
@@ -13,7 +12,6 @@ import { routerPaths } from '@/router/router-paths';
 import { useEnableHCaptchaLabelingMutation } from './hooks';
 
 export function EnableLabelerPage() {
-  const isMobile = useIsMobile();
   const { user } = useAuthenticatedUser();
   const { mutate, error, isError, isPending } =
     useEnableHCaptchaLabelingMutation();
@@ -28,17 +26,14 @@ export function EnableLabelerPage() {
 
   return (
     <Grid
-      alignItems="center"
-      height="100%"
-      item
-      justifyContent="center"
-      xs={12}
+      size={12}
+      sx={{ alignItems: 'center', height: '100%', justifyContent: 'center' }}
     >
       <Paper
         sx={{
           height: '100%',
           boxShadow: 'none',
-          padding: isMobile ? '20px' : '40px',
+          padding: { xs: 2.5, md: 5 },
           borderRadius: '20px',
         }}
       >
@@ -69,12 +64,12 @@ export function EnableLabelerPage() {
             </Typography>
 
             <Button
+              variant="contained"
               fullWidth
               loading={isPending}
               onClick={() => {
                 mutate();
               }}
-              variant="contained"
             >
               {t('worker.enableHCaptchaLabeling.enableButton')}
             </Button>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/hcaptcha-labeling.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/hcaptcha-labeling.page.tsx
index 3efadc29da..232f127f4d 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/hcaptcha-labeling.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/hcaptcha-labeling.page.tsx
@@ -4,7 +4,6 @@ import { Paper, Typography } from '@mui/material';
 import { t } from 'i18next';
 import { Navigate, useNavigate } from 'react-router-dom';
 import { useRef } from 'react';
-import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { env } from '@/shared/env';
 import { breakpoints } from '@/shared/styles/breakpoints';
 import { Counter } from '@/shared/components/ui/counter';
@@ -67,7 +66,6 @@ export function HcaptchaLabelingPage() {
     error: dailyHmtSpentError,
   } = useDailyHmtSpent();
 
-  const isMobile = useIsMobile();
   const navigate = useNavigate();
 
   const canSolveCaptcha =
@@ -102,17 +100,14 @@ export function HcaptchaLabelingPage() {
 
   return (
     <Grid
-      alignItems="center"
-      height="100%"
-      item
-      justifyContent="center"
-      xs={12}
+      size={12}
+      sx={{ alignItems: 'center', justifyContent: 'center', height: '100%' }}
     >
       <Paper
         sx={{
           height: '100%',
           boxShadow: 'none',
-          padding: isMobile ? '20px' : '40px',
+          padding: { xs: 2.5, md: 5 },
           borderRadius: '20px',
         }}
       >
@@ -155,11 +150,11 @@ export function HcaptchaLabelingPage() {
                 />
               </Grid>
             ) : (
-              <Grid container sx={{ flexDirection: 'column', gap: '24px' }}>
+              <Grid container sx={{ flexDirection: 'column', gap: 3 }}>
                 <Typography variant="subtitle2">
                   {t('worker.hcaptchaLabeling.noJobs')}
                 </Typography>
-                <Typography color={statsColor} variant="h4">
+                <Typography variant="h4" sx={{ color: statsColor }}>
                   <Counter
                     date={getTomorrowDate().toISOString()}
                     onFinish={() => {
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table-item-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table-item-mobile.tsx
index 085b952125..730f41db79 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table-item-mobile.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table-item-mobile.tsx
@@ -1,4 +1,4 @@
-import { Grid, Paper, type SxProps, Typography } from '@mui/material';
+import { Stack, Paper, type SxProps, Typography } from '@mui/material';
 import { t } from 'i18next';
 import { Chips } from '@/shared/components/ui/chips';
 import { TableButton } from '@/shared/components/ui/table-button';
@@ -14,13 +14,13 @@ interface OraclesTableItemMobileProps {
 }
 
 const styles: SxProps = {
-  px: '16px',
-  py: '32px',
-  marginBottom: '20px',
+  px: 2,
+  py: 4,
+  mb: 2.5,
   borderRadius: '20px',
   display: 'flex',
   flexDirection: 'column',
-  gap: '1rem',
+  gap: 2,
   boxShadow: 'none',
 };
 
@@ -32,7 +32,7 @@ export function OraclesTableItemMobile({
 
   return (
     <Paper sx={{ ...styles, backgroundColor: colorPalette.backgroundColor }}>
-      <Grid item>
+      <Stack>
         <ListItem label={t('worker.oraclesTable.oracleAddress')}>
           <EvmAddress address={oracle.address} />
         </ListItem>
@@ -46,7 +46,7 @@ export function OraclesTableItemMobile({
             )}
           />
         </ListItem>
-      </Grid>
+      </Stack>
       <TableButton
         fullWidth
         onClick={() => {
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table.tsx
index abb5fe312c..9e19e8af0e 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table.tsx
@@ -51,7 +51,7 @@ export function OraclesTable() {
   }
 
   return isMobile ? (
-    <Stack flexDirection="column">
+    <Stack direction="column">
       {oraclesData.map((oracle) => (
         <OraclesTableItemMobile
           key={`${oracle.address}-${oracle.chainId}`}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/jobs-discovery.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/jobs-discovery.page.tsx
index 4f5aefa0db..64cf16fe06 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/jobs-discovery.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/jobs-discovery.page.tsx
@@ -1,5 +1,4 @@
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import { Paper, Stack } from '@mui/material';
 import { Navigate } from 'react-router-dom';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { useWorkerIdentityVerificationStatus } from '@/modules/worker/profile/hooks';
@@ -15,21 +14,20 @@ export function JobsDiscoveryPage() {
   }
 
   return (
-    <Grid alignItems="center" container justifyContent="center">
-      <Grid item xs={12}>
-        <Paper
-          sx={{
-            height: '100%',
-            boxShadow: 'none',
-            padding: isMobile ? '20px' : '64px 144px',
-            minHeight: '800px',
-            borderRadius: '20px',
-          }}
-        >
-          <OraclesTableJobTypesSelect />
-          <OraclesTable />
-        </Paper>
-      </Grid>
-    </Grid>
+    <Stack sx={{ alignItems: 'center', justifyContent: 'center' }}>
+      <Paper
+        elevation={0}
+        sx={{
+          width: '100%',
+          height: '100%',
+          padding: isMobile ? '20px' : '64px 144px',
+          minHeight: '800px',
+          borderRadius: '20px',
+        }}
+      >
+        <OraclesTableJobTypesSelect />
+        <OraclesTable />
+      </Paper>
+    </Stack>
   );
 }
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/available-jobs-filter-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/available-jobs-filter-modal.tsx
index 087a512020..f66e008a16 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/available-jobs-filter-modal.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/available-jobs-filter-modal.tsx
@@ -43,16 +43,15 @@ export function AvailableJobsFilterModal({
         variant="persistent"
       >
         <Stack
-          alignItems="center"
           component="header"
           direction="row"
-          justifyContent="space-between"
           sx={{
             position: 'absolute',
             left: '0',
             top: '0',
             background: colorPalette.backgroundColor,
-            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
             width: '100%',
             px: '44px',
             pt: '32px',
@@ -99,7 +98,7 @@ export function AvailableJobsFilterModal({
         <Typography variant="mobileHeaderMid">
           {t('worker.jobs.network')}
         </Typography>
-        <Stack alignItems="center" flexDirection="row">
+        <Stack direction="row" sx={{ alignItems: 'center' }}>
           <AvailableJobsNetworkFilter chainIdsEnabled={chainIdsEnabled} />
         </Stack>
 
@@ -112,7 +111,7 @@ export function AvailableJobsFilterModal({
         <Typography variant="mobileHeaderMid">
           {t('worker.jobs.jobType')}
         </Typography>
-        <Stack alignItems="center" flexDirection="row">
+        <Stack direction="row" sx={{ alignItems: 'center' }}>
           <AvailableJobsJobTypeFilter />
         </Stack>
       </Drawer>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/components/mobile/available-jobs-list-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/components/mobile/available-jobs-list-mobile.tsx
index 0ece918fc8..da1da55a87 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/components/mobile/available-jobs-list-mobile.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/components/mobile/available-jobs-list-mobile.tsx
@@ -40,34 +40,34 @@ export function AvailableJobsListMobile() {
   }, [resetFilterParams]);
 
   return (
-    <Stack flexDirection="column">
+    <Stack>
       {isTableError && (
         <Alert color="error" severity="error">
           {getErrorMessageForError(tableError)}
         </Alert>
       )}
       {tableStatus === 'pending' && (
-        <Stack alignItems="center" justifyContent="center">
+        <Stack sx={{ alignItems: 'center', justifyContent: 'center' }}>
           <Loader size={90} />
         </Stack>
       )}
-
       {allPages.map((d) => (
         <Paper
           key={`${d.escrow_address}-${d.chain_id}-${d.job_type}`}
           sx={{
-            px: '16px',
-            py: '32px',
-            marginBottom: '20px',
+            px: 2,
+            py: 4,
+            mb: 2.5,
             borderRadius: '20px',
             boxShadow: 'unset',
           }}
         >
           <List>
-            <Grid columnSpacing="2rem" container>
-              <Grid item xs={12}>
+            <Grid container sx={{ columnSpacing: 4 }}>
+              <Grid size={12}>
                 <ListItem label={t('worker.jobs.jobDescription')}>
                   <Typography
+                    variant="subtitle1"
                     sx={{
                       textOverflow: 'ellipsis',
                       overflow: 'hidden',
@@ -75,13 +75,12 @@ export function AvailableJobsListMobile() {
                       wordBreak: 'break-word',
                       overflowWrap: 'anywhere',
                     }}
-                    variant="subtitle1"
                   >
                     {d.job_description}
                   </Typography>
                 </ListItem>
               </Grid>
-              <Grid item xs={6}>
+              <Grid size={6}>
                 <ListItem label={t('worker.jobs.escrowAddress')}>
                   <EvmAddress address={d.escrow_address} />
                 </ListItem>
@@ -93,22 +92,22 @@ export function AvailableJobsListMobile() {
                   />
                 </ListItem>
               </Grid>
-              <Grid item xs={6}>
+              <Grid size={6}>
                 <ListItem label={t('worker.jobs.network')}>
                   <Typography
-                    color={colorPalette.secondary.light}
                     variant="body2"
+                    sx={{ color: colorPalette.secondary.light }}
                   >
                     {getNetworkName(d.chain_id)}
                   </Typography>
                 </ListItem>
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <ListItem label={t('worker.jobs.jobType')}>
                   <Chip label={t(`jobTypeLabels.${d.job_type as JobType}`)} />
                 </ListItem>
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={12}>
                 <AvailableJobsAssignJobButtonMobile
                   assignJobPayload={{
                     escrow_address: d.escrow_address,
@@ -122,11 +121,11 @@ export function AvailableJobsListMobile() {
       ))}
       {hasNextPage ? (
         <Button
+          variant="outlined"
           onClick={() => {
             setPageParams(filterParams.page + 1, filterParams.page_size);
             void fetchNextPage();
           }}
-          variant="outlined"
         >
           {t('worker.jobs.next')}
         </Button>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/components/mobile/available-jobs-reward-amount-sort-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/components/mobile/available-jobs-reward-amount-sort-mobile.tsx
index 5aa9807f7f..3f78e5fec9 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/components/mobile/available-jobs-reward-amount-sort-mobile.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/available-jobs/components/mobile/available-jobs-reward-amount-sort-mobile.tsx
@@ -12,7 +12,7 @@ export function AvailableJobsRewardAmountSortMobile() {
   return (
     <Sorting
       label={
-        <Typography color={colorPalette.text.secondary} variant="body2">
+        <Typography variant="body2" sx={{ color: colorPalette.text.secondary }}>
           {t('worker.jobs.rewardAmount')}
         </Typography>
       }
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/escrow-address-search-form.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/escrow-address-search-form.tsx
index 77cebcfca9..472dbc17ca 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/escrow-address-search-form.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/escrow-address-search-form.tsx
@@ -73,16 +73,18 @@ export function EscrowAddressSearchForm({
     >
       <FormProvider {...methods}>
         <Input
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <Search sx={{ fill: colorPalette.text.primary }} />
-              </InputAdornment>
-            ),
-          }}
           fullWidth
           label={label}
           name="searchValue"
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment position="start">
+                  <Search sx={{ fill: colorPalette.text.primary }} />
+                </InputAdornment>
+              ),
+            },
+          }}
           onChange={(e) => {
             methods.setValue('searchValue', e.target.value);
           }}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-modal.tsx
index 7db3ca047b..5cbfa52622 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-modal.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/report-abuse-modal.tsx
@@ -45,24 +45,23 @@ function ErrorState({ error }: { error: string }) {
   const errorColor = colorPalette.error.main;
 
   return (
-    <Stack alignItems="center" textAlign="center" gap={2} my={5}>
+    <Stack sx={{ alignItems: 'center', textAlign: 'center', gap: 2, my: 5 }}>
       <ErrorIcon sx={{ color: errorColor, width: 40, height: 40 }} />
       {isAbuseError ? (
         <>
           <Typography
             component="p"
             variant="h5"
-            fontWeight={700}
-            color={errorColor}
+            sx={{ fontWeight: 700, color: errorColor }}
           >
             {t('worker.reportAbuse.modalHeaderAlreadyReportedError')}
           </Typography>
-          <Typography variant="body1" color={errorColor}>
+          <Typography variant="body1" sx={{ color: errorColor }}>
             {t('worker.reportAbuse.modalParagraphAlreadyReportedError')}
           </Typography>
         </>
       ) : (
-        <Typography variant="body1" color={errorColor}>
+        <Typography variant="body1" sx={{ color: errorColor }}>
           {t('worker.reportAbuse.modalUnknownError')}
         </Typography>
       )}
@@ -73,11 +72,11 @@ function ErrorState({ error }: { error: string }) {
 function SuccessState() {
   const { t } = useTranslation();
   return (
-    <Stack alignItems="center" textAlign="center" gap={2} my={5}>
+    <Stack sx={{ alignItems: 'center', textAlign: 'center', gap: 2, my: 5 }}>
       <SuccessIcon
         sx={{ color: colorPalette.success.main, width: 40, height: 40 }}
       />
-      <Typography component="p" variant="h5" fontWeight={700}>
+      <Typography component="p" variant="h5" sx={{ fontWeight: 700 }}>
         {t('worker.reportAbuse.modalSuccessHeader')}
       </Typography>
       <Typography variant="body1">
@@ -129,17 +128,22 @@ export function ReportAbuseModal({
 
   return (
     <Stack
-      px={{ xs: 1, md: 5 }}
-      pt={{ xs: 0, md: 3.5 }}
-      pb={{ xs: 1.5, md: 5.5 }}
-      alignItems="center"
+      sx={{
+        px: { xs: 1, md: 5 },
+        pt: { xs: 0, md: 3.5 },
+        pb: { xs: 1.5, md: 5.5 },
+        alignItems: 'center',
+      }}
     >
-      <Typography variant="h4" mb={2}>
+      <Typography variant="h4" sx={{ mb: 2 }}>
         {t('worker.reportAbuse.modalHeader')}
       </Typography>
       {isIdleOrLoading && (
         <>
-          <Typography variant={isMobile ? 'body2' : 'body1'} textAlign="center">
+          <Typography
+            variant={isMobile ? 'body2' : 'body1'}
+            sx={{ textAlign: 'center' }}
+          >
             {t('worker.reportAbuse.modalParagraph')}
           </Typography>
           <FormControl fullWidth sx={{ my: { xs: 2, md: 3 } }}>
@@ -162,7 +166,7 @@ export function ReportAbuseModal({
       {isPending && <CircularProgress size={40} sx={{ mx: 'auto', my: 7 }} />}
       {isError && <ErrorState error={error} />}
       {isSuccess && <SuccessState />}
-      <Box display="flex" gap={2} width="100%">
+      <Box sx={{ display: 'flex', gap: 2, width: '100%' }}>
         <Button
           fullWidth
           onClick={close}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/reward-amount.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/reward-amount.tsx
index bf1861dc0c..f4af594c6c 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/reward-amount.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/reward-amount.tsx
@@ -17,7 +17,7 @@ export function RewardAmount({
   const isNumeric = Number.isFinite(parsedReward);
   if (!isNumeric) {
     return (
-      <Typography color={color} variant="body2">
+      <Typography variant="body2" sx={{ color }}>
         {`${reward_amount} ${reward_token}`}
       </Typography>
     );
@@ -26,14 +26,14 @@ export function RewardAmount({
   if (hasDecimals) {
     return (
       <Tooltip title={`${reward_amount} ${reward_token}`}>
-        <Typography color={color} variant="body2">
+        <Typography variant="body2" sx={{ color }}>
           {`${parsedReward.toFixed(2)} ${reward_token}`}
         </Typography>
       </Tooltip>
     );
   }
   return (
-    <Typography color={color} variant="body2">
+    <Typography variant="body2" sx={{ color }}>
       {`${reward_amount} ${reward_token}`}
     </Typography>
   );
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/sorting.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/sorting.tsx
index 037d5d0042..4126e5fc53 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/components/sorting.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/components/sorting.tsx
@@ -85,12 +85,12 @@ export function Sorting({
         >
           <Button>
             <Typography
-              color={colorPalette.primary.main}
+              variant="buttonMedium"
               onClick={clear}
               sx={{
+                color: colorPalette.primary.main,
                 cursor: 'pointer',
               }}
-              variant="buttonMedium"
             >
               {t('components.table.clearBtn')}
             </Typography>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/jobs.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/jobs.page.tsx
index 5e65b627ae..a4e79bd62c 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/jobs.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/jobs.page.tsx
@@ -64,13 +64,13 @@ export function JobsPage() {
   }
 
   return (
-    <Grid alignItems="center" container justifyContent="center">
-      <Grid item xs={12}>
+    <Grid container sx={{ alignItems: 'center', justifyContent: 'center' }}>
+      <Grid sx={{ width: '100%' }}>
         <Paper
           sx={{
             display: 'flex',
             flexDirection: 'column',
-            gap: '24px',
+            gap: 3,
             height: '100%',
             boxShadow: 'none',
             padding: isMobile ? '20px' : '64px 144px',
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/status-chip.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/status-chip.tsx
index 55172fa9f0..0d7523530e 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/status-chip.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/status-chip.tsx
@@ -19,7 +19,7 @@ export function StatusChip({ status }: Readonly<{ status: MyJob['status'] }>) {
         borderRadius: '16px',
       }}
     >
-      <Typography color={colorPalette.white} variant="chip">
+      <Typography variant="chip" sx={{ color: colorPalette.white }}>
         {status}
       </Typography>
     </Box>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-expires-at-sort-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-expires-at-sort-mobile.tsx
index 9b186669f9..3ae5d921aa 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-expires-at-sort-mobile.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-expires-at-sort-mobile.tsx
@@ -12,7 +12,7 @@ export function MyJobsExpiresAtSortMobile() {
   return (
     <Sorting
       label={
-        <Typography color={colorPalette.text.secondary} variant="body2">
+        <Typography variant="body2" sx={{ color: colorPalette.text.secondary }}>
           {t('worker.jobs.expiresAt')}
         </Typography>
       }
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx
index 291f36a6eb..ef40385c0f 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx
@@ -43,16 +43,15 @@ export function MyJobsFilterModal({
         variant="persistent"
       >
         <Stack
-          alignItems="center"
           component="header"
           direction="row"
-          justifyContent="space-between"
           sx={{
             position: 'absolute',
             left: '0',
             top: '0',
             background: colorPalette.backgroundColor,
-            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
             width: '100%',
             px: '44px',
             pt: '32px',
@@ -105,7 +104,7 @@ export function MyJobsFilterModal({
         <Typography variant="mobileHeaderMid">
           {t('worker.jobs.network')}
         </Typography>
-        <Stack alignItems="center" flexDirection="row">
+        <Stack direction="row" sx={{ alignItems: 'center' }}>
           <MyJobsNetworkFilterMobile chainIdsEnabled={chainIdsEnabled} />
         </Stack>
 
@@ -118,7 +117,7 @@ export function MyJobsFilterModal({
         <Typography variant="mobileHeaderMid">
           {t('worker.jobs.jobType')}
         </Typography>
-        <Stack alignItems="center" flexDirection="row">
+        <Stack direction="row" sx={{ alignItems: 'center' }}>
           <MyJobsJobTypeFilterMobile />
         </Stack>
         <Divider
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx
index bc03195ef0..fa38a01fca 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx
@@ -69,21 +69,21 @@ export function MyJobsListMobile() {
         updater={setSearchEscrowAddress}
       />
       <Grid container spacing={2}>
-        <Grid item xs={6}>
+        <Grid size={6}>
           <Button
+            variant="outlined"
             fullWidth
             onClick={openModal}
             sx={{
-              marginBottom: '32px',
-              marginTop: '21px',
+              mb: 4,
+              mt: 2.5,
             }}
-            variant="outlined"
           >
             {t('worker.jobs.mobileFilterDrawer.filters')}
             <FiltersButtonIcon />
           </Button>
         </Grid>
-        <Grid item xs={6}>
+        <Grid size={6}>
           <Button
             fullWidth
             size="small"
@@ -106,14 +106,14 @@ export function MyJobsListMobile() {
         </Grid>
       </Grid>
 
-      <Stack flexDirection="column">
+      <Stack>
         {isTableError ? (
           <Alert color="error" severity="error">
             {getErrorMessageForError(tableError)}
           </Alert>
         ) : null}
         {tableStatus === 'pending' ? (
-          <Stack alignItems="center" justifyContent="center">
+          <Stack sx={{ alignItems: 'center', justifyContent: 'center' }}>
             <Loader size={90} />
           </Stack>
         ) : null}
@@ -131,7 +131,7 @@ export function MyJobsListMobile() {
             >
               <List>
                 <Grid container>
-                  <Grid item xs={6}>
+                  <Grid size={6}>
                     <ListItem label={t('worker.jobs.escrowAddress')}>
                       <EvmAddress address={d.escrow_address} />
                     </ListItem>
@@ -148,11 +148,11 @@ export function MyJobsListMobile() {
                       />
                     </ListItem>
                   </Grid>
-                  <Grid item xs={6}>
+                  <Grid size={6}>
                     <ListItem label={t('worker.jobs.network')}>
                       <Typography
-                        color={colorPalette.primary.light}
                         variant="body2"
+                        sx={{ color: colorPalette.primary.light }}
                       >
                         {getNetworkName(d.chain_id)}
                       </Typography>
@@ -164,7 +164,10 @@ export function MyJobsListMobile() {
                           colorPalette
                         )}
                         label={
-                          <Typography color={colorPalette.white} variant="chip">
+                          <Typography
+                            variant="chip"
+                            sx={{ color: colorPalette.white }}
+                          >
                             {d.status}
                           </Typography>
                         }
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-reward-amount-sort-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-reward-amount-sort-mobile.tsx
index f517d1940f..3362987213 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-reward-amount-sort-mobile.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-reward-amount-sort-mobile.tsx
@@ -14,7 +14,7 @@ export function MyJobsRewardAmountSortMobile() {
   return (
     <Sorting
       label={
-        <Typography color={colorPalette.text.secondary} variant="body2">
+        <Typography variant="body2" sx={{ color: colorPalette.text.secondary }}>
           {t('worker.jobs.rewardAmount')}
         </Typography>
       }
diff --git a/packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration-form.tsx b/packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration-form.tsx
index d1e926da11..8d3398ed7c 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration-form.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration-form.tsx
@@ -55,7 +55,7 @@ export function RegistrationForm({
       <Box>{t('worker.registrationInExchangeOracle.completeMessage')}</Box>
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit}>
-          <Stack alignItems="center" spacing={2}>
+          <Stack sx={{ alignItems: 'center', gap: 2 }}>
             <HCaptchaForm error={error} name="h_captcha_token" />
             <Button
               disabled={disabled}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration.page.tsx
index e3b708a5bf..6aad9ac7e8 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/oracle-registration/registration.page.tsx
@@ -53,10 +53,10 @@ export function RegistrationPage() {
   }
 
   return (
-    <Grid alignItems="center" container justifyContent="center">
-      <Grid item xs={12}>
+    <Grid container sx={{ alignItems: 'center', justifyContent: 'center' }}>
+      <Grid size={12}>
         <Paper sx={styles}>
-          <Stack maxWidth="350px" spacing={2}>
+          <Stack sx={{ gap: 2, maxWidth: '350px' }}>
             <Box>
               {t('worker.registrationInExchangeOracle.requiredMessage')}
             </Box>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/add-api-key-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/add-api-key-modal.tsx
new file mode 100644
index 0000000000..cb84fb1b0d
--- /dev/null
+++ b/packages/apps/human-app/frontend/src/modules/worker/profile/components/add-api-key-modal.tsx
@@ -0,0 +1,259 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Autocomplete,
+  Box,
+  FormControl,
+  FormHelperText,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { Button } from '@/shared/components/ui/button';
+import { useIsMobile } from '@/shared/hooks';
+import {
+  useEnrollExchangeApiKeys,
+  useGetSupportedExchanges,
+} from '../../hooks/use-exchange-api-keys';
+import { ModalError, ModalLoading, ModalSuccess } from './modal-states';
+import { useEffect } from 'react';
+
+interface AddApiKeyModalProps {
+  onClose: () => void;
+  disableClose: (disable: boolean) => void;
+}
+
+export function AddApiKeyModal({ onClose, disableClose }: AddApiKeyModalProps) {
+  const { t } = useTranslation();
+  const {
+    mutate: enrollExchangeApiKey,
+    reset: resetMutation,
+    error,
+    isSuccess,
+    isPending,
+    isError,
+    isIdle,
+  } = useEnrollExchangeApiKeys();
+  const isMobile = useIsMobile();
+  const { data: supportedExchanges } = useGetSupportedExchanges();
+
+  useEffect(() => {
+    disableClose(isPending);
+  }, [isPending, disableClose]);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    defaultValues: {
+      exchange: '',
+      apiKey: '',
+      secretKey: '',
+    },
+    resolver: zodResolver(
+      z.object({
+        exchange: z.string().min(1, t('validation.required')),
+        apiKey: z.string().trim().min(1, t('validation.required')),
+        secretKey: z.string().trim().min(1, t('validation.required')),
+      })
+    ),
+  });
+
+  useEffect(() => {
+    return () => {
+      reset();
+      resetMutation();
+    };
+  }, [reset, resetMutation]);
+
+  const onSubmit = (data: {
+    exchange: string;
+    apiKey: string;
+    secretKey: string;
+  }) => {
+    enrollExchangeApiKey(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack sx={{ gap: 2 }}>
+        <Typography variant="h4" sx={{ p: 1, textAlign: 'center' }}>
+          {isMobile
+            ? t('worker.profile.apiKeyData.connectApiKey')
+            : t('worker.profile.apiKeyData.connectYourApiKey')}
+        </Typography>
+        {isPending && <ModalLoading />}
+        {isIdle && (
+          <>
+            <Typography
+              variant="body2"
+              sx={{ textAlign: 'center', p: { xs: 1, md: 0 } }}
+            >
+              {t('worker.profile.apiKeyData.modalDescription')}
+            </Typography>
+            <Stack
+              direction={{ xs: 'column', md: 'row' }}
+              sx={{
+                gap: { xs: 2, md: 1 },
+                width: '100%',
+              }}
+            >
+              <FormControl
+                error={!!errors.exchange}
+                sx={{ width: { xs: '100%', md: '30%' } }}
+              >
+                <Controller
+                  name="exchange"
+                  control={control}
+                  render={({ field }) => (
+                    <Autocomplete
+                      options={
+                        supportedExchanges?.map((exchange) => exchange.name) ||
+                        []
+                      }
+                      getOptionLabel={(option) => {
+                        const exchange = supportedExchanges?.find(
+                          (exchange) => exchange.name === option
+                        );
+                        return exchange?.display_name || option || '';
+                      }}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label={t('worker.profile.apiKeyData.exchange')}
+                        />
+                      )}
+                      renderOption={(props, option) => {
+                        const exchange = supportedExchanges?.find(
+                          (exchange) => exchange.name === option
+                        );
+                        return (
+                          <Box {...props} key={option} component="li">
+                            <Typography
+                              variant="body1"
+                              sx={{
+                                color: 'text.primary',
+                                textTransform: 'capitalize',
+                              }}
+                            >
+                              {exchange?.display_name || exchange?.name}
+                            </Typography>
+                          </Box>
+                        );
+                      }}
+                      {...field}
+                      onChange={(_, value) => field.onChange(value)}
+                    />
+                  )}
+                />
+                {errors.exchange && (
+                  <FormHelperText error>
+                    {errors.exchange.message}
+                  </FormHelperText>
+                )}
+              </FormControl>
+              <FormControl
+                error={!!errors.apiKey}
+                sx={{ width: { xs: '100%', md: '70%' } }}
+              >
+                <Controller
+                  name="apiKey"
+                  control={control}
+                  render={({ field }) => (
+                    <TextField
+                      type="text"
+                      label={t('worker.profile.apiKeyData.apiKey')}
+                      placeholder={t('worker.profile.apiKeyData.apiKey')}
+                      {...field}
+                    />
+                  )}
+                />
+                {errors.apiKey && (
+                  <FormHelperText error>{errors.apiKey.message}</FormHelperText>
+                )}
+              </FormControl>
+            </Stack>
+            <FormControl
+              error={!!errors.secretKey}
+              sx={{ mt: { xs: 0, md: 1 } }}
+            >
+              <Controller
+                name="secretKey"
+                control={control}
+                render={({ field }) => (
+                  <TextField
+                    type="password"
+                    autoComplete="new-password" // disables autofill from browser
+                    label={t('worker.profile.apiKeyData.apiSecret')}
+                    placeholder={t('worker.profile.apiKeyData.apiSecret')}
+                    {...field}
+                  />
+                )}
+              />
+              {errors.secretKey && (
+                <FormHelperText error>
+                  {errors.secretKey.message}
+                </FormHelperText>
+              )}
+            </FormControl>
+          </>
+        )}
+        {isSuccess && (
+          <ModalSuccess>
+            <Typography variant="body2" sx={{ textAlign: 'center' }}>
+              {t('worker.profile.apiKeyData.connectSuccess')}
+            </Typography>
+          </ModalSuccess>
+        )}
+        {isError && (
+          <ModalError
+            message={
+              typeof error?.message === 'string'
+                ? error?.message
+                : t('worker.profile.apiKeyData.connectError')
+            }
+          />
+        )}
+        {isIdle && (
+          <Button
+            type="submit"
+            variant="contained"
+            size="large"
+            sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto' }}
+          >
+            {t('worker.profile.apiKeyData.connectApiKey')}
+          </Button>
+        )}
+        {(isPending || isSuccess) && (
+          <Button
+            variant="contained"
+            size="large"
+            disabled={isPending}
+            sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto' }}
+            onClick={onClose}
+          >
+            {t('worker.profile.apiKeyData.close')}
+          </Button>
+        )}
+        {isError && (
+          <Button
+            variant="contained"
+            size="large"
+            fullWidth={isMobile}
+            sx={{ width: 'fit-content', mx: 'auto' }}
+            onClick={resetMutation}
+          >
+            {t('worker.profile.apiKeyData.edit')}
+          </Button>
+        )}
+        <Typography variant="caption" sx={{ textAlign: 'center' }}>
+          {t('worker.profile.apiKeyData.modalFooterAgreement')}
+        </Typography>
+      </Stack>
+    </form>
+  );
+}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/api-key-data.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/api-key-data.tsx
new file mode 100644
index 0000000000..a483011d17
--- /dev/null
+++ b/packages/apps/human-app/frontend/src/modules/worker/profile/components/api-key-data.tsx
@@ -0,0 +1,105 @@
+import { IconButton, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Chip } from '@/shared/components/ui/chip';
+import { CustomTextField, CustomTextFieldDark } from './custom-text-field';
+import { useColorMode } from '@/shared/contexts/color-mode';
+import { DeleteIcon, EditIcon } from '@/shared/components/ui/icons';
+import {
+  useDeleteApiKeyModal,
+  useEditApiKeyModal,
+} from '../hooks/use-api-key-modals';
+import { useGetExchangeApiKeys } from '../../hooks/use-exchange-api-keys';
+
+export function ApiKeyData({
+  stakingExchangeError,
+}: {
+  stakingExchangeError?: string;
+}) {
+  const { isDarkMode } = useColorMode();
+  const { t } = useTranslation();
+  const { openModal: openEditApiKeyModal } = useEditApiKeyModal();
+  const { openModal: openDeleteApiKeyModal } = useDeleteApiKeyModal();
+  const { data: exchangeApiKeyData, isError: isExchangeApiKeyError } =
+    useGetExchangeApiKeys();
+
+  const textField = isDarkMode ? (
+    <CustomTextFieldDark
+      value={exchangeApiKeyData?.api_key || ''}
+      disabled
+      fullWidth
+      placeholder={t('worker.profile.apiKeyData.connectApiKey')}
+      sx={{
+        '& .MuiInputBase-input': {
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          pointerEvents: 'none',
+        },
+      }}
+    />
+  ) : (
+    <CustomTextField
+      value={exchangeApiKeyData?.api_key || ''}
+      disabled
+      fullWidth
+      placeholder={t('worker.profile.apiKeyData.connectApiKey')}
+      sx={{
+        '& .MuiInputBase-input': {
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          pointerEvents: 'none',
+        },
+      }}
+    />
+  );
+
+  return (
+    <Stack sx={{ gap: 1 }}>
+      <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
+        <Typography variant="buttonLarge">
+          {t('worker.profile.apiKeyData.apiKey')}
+        </Typography>
+        <Chip
+          label={
+            isExchangeApiKeyError || stakingExchangeError
+              ? t('worker.profile.apiKeyData.error')
+              : exchangeApiKeyData?.exchange_name
+                ? t('worker.profile.apiKeyData.apiKeyConnected')
+                : t('worker.profile.apiKeyData.apiKeyNotConnected')
+          }
+          backgroundColor={
+            isExchangeApiKeyError || stakingExchangeError
+              ? 'error.main'
+              : exchangeApiKeyData?.exchange_name
+                ? 'success.main'
+                : 'warning.main'
+          }
+        />
+      </Stack>
+      <Stack direction="row" sx={{ alignItems: 'center', gap: 2 }}>
+        {textField}
+        {exchangeApiKeyData?.exchange_name && (
+          <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
+            <IconButton
+              disableRipple
+              sx={{ p: 0, '&:hover': { bgcolor: 'inherit' } }}
+              onClick={() =>
+                openEditApiKeyModal(exchangeApiKeyData.exchange_name)
+              }
+            >
+              <EditIcon />
+            </IconButton>
+            <IconButton
+              disableRipple
+              sx={{ p: 0, '&:hover': { bgcolor: 'inherit' } }}
+              onClick={openDeleteApiKeyModal}
+            >
+              <DeleteIcon />
+            </IconButton>
+          </Stack>
+        )}
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/delete-api-key-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/delete-api-key-modal.tsx
new file mode 100644
index 0000000000..10bf84cd71
--- /dev/null
+++ b/packages/apps/human-app/frontend/src/modules/worker/profile/components/delete-api-key-modal.tsx
@@ -0,0 +1,123 @@
+import { Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/shared/components/ui/button';
+import { useIsMobile } from '@/shared/hooks';
+import { useDeleteExchangeApiKeys } from '../../hooks/use-exchange-api-keys';
+import { useEffect } from 'react';
+import { ModalError, ModalSuccess, ModalLoading } from './modal-states';
+
+interface DeleteApiKeyModalProps {
+  onClose: () => void;
+  disableClose: (disable: boolean) => void;
+}
+
+export function DeleteApiKeyModal({
+  onClose,
+  disableClose,
+}: DeleteApiKeyModalProps) {
+  const { t } = useTranslation();
+  const {
+    mutate: deleteExchangeApiKey,
+    reset: resetMutation,
+    isSuccess,
+    isError,
+    isPending,
+    isIdle,
+  } = useDeleteExchangeApiKeys();
+  const isMobile = useIsMobile();
+
+  const handleDeleteExchangeApiKey = () => {
+    deleteExchangeApiKey();
+  };
+
+  useEffect(() => {
+    disableClose(isPending);
+  }, [isPending, disableClose]);
+
+  useEffect(() => {
+    return () => {
+      resetMutation();
+    };
+  }, [resetMutation]);
+
+  return (
+    <Stack>
+      <Typography variant="h4" sx={{ p: 1, textAlign: 'center', mb: 2 }}>
+        {t('worker.profile.apiKeyData.deleteApiKey')}
+      </Typography>
+      {isPending && <ModalLoading />}
+      {isIdle && (
+        <>
+          <Typography variant="h6" sx={{ textAlign: 'center', mb: 1 }}>
+            {t('worker.profile.apiKeyData.deleteApiKeyConfirmation')}
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{ textAlign: 'center', mb: { xs: 2, md: 4 } }}
+          >
+            {t('worker.profile.apiKeyData.deleteApiKeyDescription')}
+          </Typography>
+        </>
+      )}
+      {isSuccess && (
+        <ModalSuccess>
+          <Typography variant="body2" sx={{ textAlign: 'center', my: 2 }}>
+            {t('worker.profile.apiKeyData.deleteKeySuccess')}
+          </Typography>
+        </ModalSuccess>
+      )}
+      {isError && (
+        <ModalError message={t('worker.profile.apiKeyData.deleteKeyError')} />
+      )}
+      {isIdle && (
+        <Stack
+          direction={{ xs: 'column', md: 'row' }}
+          sx={{
+            justifyContent: 'center',
+            width: '100%',
+            gap: 2,
+          }}
+        >
+          <Button
+            variant="contained"
+            size="large"
+            fullWidth={isMobile}
+            onClick={onClose}
+          >
+            {t('worker.profile.apiKeyData.cancel')}
+          </Button>
+          <Button
+            variant="contained"
+            size="large"
+            fullWidth={isMobile}
+            sx={{ bgcolor: 'primary.light' }}
+            onClick={handleDeleteExchangeApiKey}
+          >
+            {t('worker.profile.apiKeyData.deleteApiKey')}
+          </Button>
+        </Stack>
+      )}
+      {(isPending || isSuccess) && (
+        <Button
+          variant="contained"
+          size="large"
+          sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto', mt: 2 }}
+          onClick={isPending ? undefined : onClose}
+          disabled={isPending}
+        >
+          {t('worker.profile.apiKeyData.close')}
+        </Button>
+      )}
+      {isError && (
+        <Button
+          variant="contained"
+          size="large"
+          sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto' }}
+          onClick={resetMutation}
+        >
+          {t('worker.profile.apiKeyData.tryAgain')}
+        </Button>
+      )}
+    </Stack>
+  );
+}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/edit-api-key-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/edit-api-key-modal.tsx
new file mode 100644
index 0000000000..7d83d94dce
--- /dev/null
+++ b/packages/apps/human-app/frontend/src/modules/worker/profile/components/edit-api-key-modal.tsx
@@ -0,0 +1,289 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Autocomplete,
+  Box,
+  FormControl,
+  FormHelperText,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { Button } from '@/shared/components/ui/button';
+import { useIsMobile } from '@/shared/hooks';
+import { useEffect } from 'react';
+import {
+  useEnrollExchangeApiKeys,
+  useGetSupportedExchanges,
+} from '../../hooks/use-exchange-api-keys';
+import { ModalError, ModalLoading, ModalSuccess } from './modal-states';
+
+interface EditApiKeyModalProps {
+  exchangeName: string;
+  onClose: () => void;
+  disableClose: (disable: boolean) => void;
+}
+
+export function EditApiKeyModal({
+  onClose,
+  exchangeName,
+  disableClose,
+}: EditApiKeyModalProps) {
+  const { t } = useTranslation();
+  const isMobile = useIsMobile();
+  const {
+    mutate: postExchangeApiKey,
+    reset: resetMutation,
+    error,
+    isSuccess,
+    isError,
+    isPending,
+    isIdle,
+  } = useEnrollExchangeApiKeys();
+  const { data: supportedExchanges } = useGetSupportedExchanges();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    defaultValues: {
+      exchange: '',
+      apiKey: '',
+      secretKey: '',
+    },
+    resolver: zodResolver(
+      z.object({
+        exchange: z.string().min(1, t('validation.required')),
+        apiKey: z.string().trim().min(1, t('validation.required')),
+        secretKey: z.string().trim().min(1, t('validation.required')),
+      })
+    ),
+  });
+
+  useEffect(() => {
+    if (exchangeName && supportedExchanges) {
+      reset({
+        exchange: exchangeName,
+        apiKey: '',
+        secretKey: '',
+      });
+    }
+  }, [exchangeName, reset, supportedExchanges]);
+
+  useEffect(() => {
+    disableClose(isPending);
+  }, [isPending, disableClose]);
+
+  useEffect(() => {
+    return () => {
+      reset();
+      resetMutation();
+    };
+  }, [reset, resetMutation]);
+
+  const onSubmit = (data: {
+    exchange: string;
+    apiKey: string;
+    secretKey: string;
+  }) => {
+    postExchangeApiKey(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack sx={{ gap: 2 }}>
+        <Typography variant="h4" sx={{ p: 1, textAlign: 'center' }}>
+          {t('worker.profile.apiKeyData.editApiKey')}
+        </Typography>
+        {isPending && <ModalLoading />}
+        {isIdle && (
+          <>
+            <Typography
+              variant="body2"
+              sx={{ textAlign: 'center', p: { xs: 1, md: 0 } }}
+            >
+              {t('worker.profile.apiKeyData.modalDescription')}
+            </Typography>
+            <Stack
+              direction={{ xs: 'column', md: 'row' }}
+              sx={{
+                gap: { xs: 2, md: 1 },
+                width: '100%',
+              }}
+            >
+              <FormControl
+                error={!!errors.exchange}
+                sx={{ width: { xs: '100%', md: '30%' } }}
+              >
+                <Controller
+                  name="exchange"
+                  control={control}
+                  render={({ field }) => (
+                    <Autocomplete
+                      options={
+                        supportedExchanges?.map((exchange) => exchange.name) ||
+                        []
+                      }
+                      getOptionLabel={(option) => {
+                        const exchange = supportedExchanges?.find(
+                          (exchange) => exchange.name === option
+                        );
+                        return exchange?.display_name || option || '';
+                      }}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label={t('worker.profile.apiKeyData.exchange')}
+                        />
+                      )}
+                      renderOption={(props, option) => {
+                        const exchange = supportedExchanges?.find(
+                          (exchange) => exchange.name === option
+                        );
+                        return (
+                          <Box {...props} key={option} component="li">
+                            <Typography
+                              variant="body1"
+                              sx={{
+                                color: 'text.primary',
+                                textTransform: 'capitalize',
+                              }}
+                            >
+                              {exchange?.display_name || exchange?.name}
+                            </Typography>
+                          </Box>
+                        );
+                      }}
+                      {...field}
+                      onChange={(_, value) => field.onChange(value)}
+                    />
+                  )}
+                />
+                {errors.exchange && (
+                  <FormHelperText error>
+                    {errors.exchange.message}
+                  </FormHelperText>
+                )}
+              </FormControl>
+              <FormControl
+                error={!!errors.exchange}
+                sx={{ width: { xs: '100%', md: '70%' } }}
+              >
+                <Controller
+                  name="apiKey"
+                  control={control}
+                  render={({ field }) => (
+                    <TextField
+                      type="text"
+                      label={t('worker.profile.apiKeyData.apiKey')}
+                      placeholder={t('worker.profile.apiKeyData.apiKey')}
+                      multiline={isMobile}
+                      minRows={1}
+                      maxRows={4}
+                      {...field}
+                    />
+                  )}
+                />
+                {errors.apiKey && (
+                  <FormHelperText error>{errors.apiKey.message}</FormHelperText>
+                )}
+              </FormControl>
+            </Stack>
+            <FormControl
+              error={!!errors.secretKey}
+              sx={{ mt: { xs: 0, md: 1 } }}
+            >
+              <Controller
+                name="secretKey"
+                control={control}
+                render={({ field }) => (
+                  <TextField
+                    type="password"
+                    autoComplete="new-password" // disables autofill from browser
+                    label={t('worker.profile.apiKeyData.apiSecret')}
+                    placeholder={t('worker.profile.apiKeyData.apiSecret')}
+                    {...field}
+                  />
+                )}
+              />
+              {errors.secretKey && (
+                <FormHelperText error>
+                  {errors.secretKey.message}
+                </FormHelperText>
+              )}
+            </FormControl>
+          </>
+        )}
+        {isSuccess && (
+          <ModalSuccess>
+            <Typography variant="body2" sx={{ textAlign: 'center' }}>
+              {t('worker.profile.apiKeyData.editSuccess')}
+            </Typography>
+          </ModalSuccess>
+        )}
+        {isError && (
+          <ModalError
+            message={
+              typeof error?.message === 'string'
+                ? error?.message
+                : t('worker.profile.apiKeyData.editError')
+            }
+          />
+        )}
+        {isIdle && (
+          <Stack
+            direction={{ xs: 'column', md: 'row' }}
+            sx={{
+              justifyContent: 'center',
+              width: '100%',
+              gap: 2,
+            }}
+          >
+            <Button
+              variant="contained"
+              size="large"
+              fullWidth={isMobile}
+              onClick={onClose}
+            >
+              {t('worker.profile.apiKeyData.cancel')}
+            </Button>
+            <Button
+              type="submit"
+              variant="contained"
+              size="large"
+              fullWidth={isMobile}
+              sx={{ bgcolor: 'primary.light' }}
+            >
+              {t('worker.profile.apiKeyData.saveChanges')}
+            </Button>
+          </Stack>
+        )}
+        {(isPending || isSuccess) && (
+          <Button
+            variant="contained"
+            size="large"
+            disabled={isPending}
+            sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto' }}
+            onClick={onClose}
+          >
+            {t('worker.profile.apiKeyData.close')}
+          </Button>
+        )}
+        {isError && (
+          <Button
+            variant="contained"
+            size="large"
+            sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto' }}
+            onClick={resetMutation}
+          >
+            {t('worker.profile.apiKeyData.edit')}
+          </Button>
+        )}
+      </Stack>
+    </form>
+  );
+}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/identity-verification-control.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/identity-verification-control.tsx
index 6acd2ab252..cd0463b88e 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/profile/components/identity-verification-control.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/profile/components/identity-verification-control.tsx
@@ -27,7 +27,7 @@ export function IdentityVerificationControl() {
   }
 
   return (
-    <Stack direction="row" alignItems="center" gap={1}>
+    <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
       <Typography variant="buttonLarge">
         {t('worker.profile.identityVerificationStatus')}
       </Typography>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/modal-states.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/modal-states.tsx
index 5225e3bd2b..929d1219c2 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/profile/components/modal-states.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/profile/components/modal-states.tsx
@@ -7,11 +7,13 @@ import CloseIcon from '@mui/icons-material/Cancel';
 export function ModalLoading() {
   return (
     <Box
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      width="fit-content"
-      mx="auto"
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 'fit-content',
+        mx: 'auto',
+      }}
     >
       <Loader size={40} />
     </Box>
@@ -22,11 +24,13 @@ export function ModalSuccess({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Box
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        width="fit-content"
-        mx="auto"
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: 'fit-content',
+          mx: 'auto',
+        }}
       >
         <CheckIcon sx={{ width: 40, height: 40, color: 'success.main' }} />
       </Box>
@@ -39,15 +43,20 @@ export function ModalError({ message }: { message: string }) {
   return (
     <>
       <Box
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        width="fit-content"
-        mx="auto"
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: 'fit-content',
+          mx: 'auto',
+        }}
       >
         <CloseIcon sx={{ width: 40, height: 40, color: 'error.main' }} />
       </Box>
-      <Typography variant="body2" color="error.main" textAlign="center">
+      <Typography
+        variant="body2"
+        sx={{ color: 'error.main', textAlign: 'center' }}
+      >
         {message}
       </Typography>
     </>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-data.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-data.tsx
index 42278a97c8..79b9d36d82 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-data.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-data.tsx
@@ -12,13 +12,12 @@ export function ProfileData() {
   const { user } = useAuthenticatedUser();
   const { t } = useTranslation();
   return (
-    <Stack gap={3}>
+    <Stack sx={{ gap: 3 }}>
       <Stack>
         <Typography variant="subtitle2">{t('worker.profile.email')}</Typography>
         <Typography
-          color={colorPalette.text.primary}
-          sx={{ wordBreak: 'break-all' }}
           variant="subtitle1"
+          sx={{ color: colorPalette.text.primary, wordBreak: 'break-all' }}
         >
           {user.email}
         </Typography>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/staking-info.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/staking-info.tsx
new file mode 100644
index 0000000000..d1ae872907
--- /dev/null
+++ b/packages/apps/human-app/frontend/src/modules/worker/profile/components/staking-info.tsx
@@ -0,0 +1,225 @@
+import {
+  Button,
+  IconButton,
+  Link,
+  Skeleton,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Chip } from '@/shared/components/ui/chip';
+import { env } from '@/shared/env';
+import { useAddApiKeyModal } from '../hooks/use-api-key-modals';
+import { ApiKeyData } from './';
+import { useGetStakingSummary } from '../../hooks/use-staking';
+import { RefreshIcon } from '@/shared/components/ui/icons';
+import { useGetExchangeApiKeys } from '../../hooks/use-exchange-api-keys';
+import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user';
+import { useEffect, useRef, useState } from 'react';
+import { useAccessTokenRefresh } from '@/api/hooks/use-access-token-refresh';
+import { colorPalette } from '@/shared/styles/color-palette';
+import { useGetUiConfig } from '@/shared/hooks/use-get-ui-config';
+import {
+  TopNotificationType,
+  useNotification,
+} from '@/shared/hooks/use-notification';
+
+export function StakingInfo() {
+  const [isPromptExpanded, setIsPromptExpanded] = useState(false);
+  const tokenRefreshLock = useRef(false);
+
+  const { user, updateUserData } = useAuthenticatedUser();
+  const { refreshAccessTokenAsync } = useAccessTokenRefresh();
+  const { t } = useTranslation();
+  const { showNotification } = useNotification();
+
+  const { openModal: openAddApiKeyModal } = useAddApiKeyModal();
+  const { data: exchangeApiKeyData, isLoading: isExchangeApiKeyLoading } =
+    useGetExchangeApiKeys();
+  const {
+    data: stakingSummary,
+    isLoading,
+    isError,
+    refetch,
+    isRefetching,
+  } = useGetStakingSummary();
+  const { data: uiConfig, isLoading: isUiConfigLoading } = useGetUiConfig();
+
+  const isConnectButtonDisabled =
+    !!exchangeApiKeyData?.exchange_name || isExchangeApiKeyLoading;
+
+  const stakedAmount =
+    Number(stakingSummary?.on_chain_stake || 0) +
+    Number(stakingSummary?.exchange_stake || 0);
+
+  const isStaked =
+    isLoading || isError || isUiConfigLoading
+      ? false
+      : stakedAmount >= Number(uiConfig?.minThreshold || '0');
+
+  useEffect(() => {
+    const stakingSummaryError =
+      stakingSummary?.on_chain_error || stakingSummary?.exchange_error;
+    if (stakingSummaryError && !isLoading && !isRefetching) {
+      showNotification({
+        type: TopNotificationType.WARNING,
+        message: stakingSummaryError,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    isLoading,
+    isRefetching,
+    stakingSummary?.on_chain_error,
+    stakingSummary?.exchange_error,
+  ]);
+
+  useEffect(() => {
+    if (isRefetching || isLoading) return;
+
+    if (isStaked !== user.is_stake_eligible) {
+      if (!tokenRefreshLock.current) {
+        tokenRefreshLock.current = true;
+        updateUserData({ is_stake_eligible: isStaked });
+        void refreshAccessTokenAsync({ authType: 'web2' });
+      }
+    } else {
+      tokenRefreshLock.current = false;
+    }
+  }, [
+    isStaked,
+    user.is_stake_eligible,
+    refreshAccessTokenAsync,
+    isRefetching,
+    isLoading,
+    updateUserData,
+  ]);
+
+  const handleRefreshStakingInfo = () => {
+    if (isRefetching || isLoading) return;
+    tokenRefreshLock.current = false;
+    refetch();
+  };
+
+  return (
+    <Stack>
+      <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
+        <Typography variant="buttonLarge">
+          {t('worker.profile.stakingInfo.stakeHmt')}
+        </Typography>
+        {isLoading || isRefetching ? (
+          <Skeleton variant="text" width={100} height={23.5} />
+        ) : (
+          <Chip
+            label={
+              isError
+                ? t('worker.profile.stakingStatusValues.error')
+                : isStaked
+                  ? t('worker.profile.stakingStatusValues.staked')
+                  : t('worker.profile.stakingStatusValues.notStaked')
+            }
+            backgroundColor={isStaked ? 'success.main' : 'error.main'}
+          />
+        )}
+      </Stack>
+      <Typography variant="body2" sx={{ mt: 1 }}>
+        {isPromptExpanded
+          ? t('worker.profile.stakingInfo.prompt', {
+              amount: uiConfig?.minThreshold,
+            })
+          : t('worker.profile.stakingInfo.promptShort')}{' '}
+        {isPromptExpanded && (
+          <>
+            <br />
+            <Link
+              href="https://docs.humanprotocol.org/tutorials/workers/staking/#how-to-create-api-keys"
+              sx={{
+                textDecoration: 'underline',
+                fontWeight: '600',
+              }}
+              target="_blank"
+            >
+              {t('worker.profile.stakingInfo.howToCreateApiKeys')}
+            </Link>
+            <br />
+          </>
+        )}
+        <Button
+          variant="text"
+          size="small"
+          disableRipple
+          sx={{
+            p: 0,
+            minWidth: 'auto',
+            verticalAlign: 'baseline',
+            height: '20px',
+            textDecoration: 'underline',
+            '&:hover': {
+              textDecoration: 'underline',
+              backgroundColor: 'transparent',
+            },
+          }}
+          onClick={() => setIsPromptExpanded((prev) => !prev)}
+        >
+          {isPromptExpanded
+            ? t('worker.profile.stakingInfo.readLess')
+            : t('worker.profile.stakingInfo.readMore')}
+        </Button>
+      </Typography>
+      <Stack direction="row" sx={{ alignItems: 'center', mt: 2, gap: 1 }}>
+        <Typography variant="buttonLarge">
+          {t('worker.profile.stakingInfo.stakedAmount')}
+        </Typography>
+        <IconButton
+          disabled={isRefetching || isLoading}
+          sx={{
+            p: 0,
+            bgcolor: 'rgba(20, 6, 178, 0.04)',
+            borderRadius: '0px',
+            '& > svg > path': {
+              fill:
+                isRefetching || isLoading
+                  ? colorPalette.button.disabled
+                  : 'primary.main',
+            },
+          }}
+          onClick={handleRefreshStakingInfo}
+        >
+          <RefreshIcon />
+        </IconButton>
+      </Stack>
+      {isLoading || isRefetching ? (
+        <Skeleton variant="text" width={100} height={22.5} />
+      ) : (
+        <Typography
+          variant="buttonLarge"
+          sx={{ color: isStaked ? 'primary.light' : 'error.main' }}
+        >
+          <strong>{stakedAmount}</strong> HMT
+        </Typography>
+      )}
+      <Stack direction="row" sx={{ gap: 2, mt: 2, mb: 3 }}>
+        <Button
+          variant="contained"
+          size="small"
+          sx={{ py: 0.5, px: '10px' }}
+          onClick={() => window.open(env.VITE_STAKING_DASHBOARD_URL, '_blank')}
+        >
+          Add staking
+        </Button>
+        <Button
+          variant="contained"
+          size="small"
+          disabled={isConnectButtonDisabled}
+          sx={{ py: 0.5, px: '10px', bgcolor: 'primary.light' }}
+          onClick={() =>
+            isConnectButtonDisabled ? undefined : openAddApiKeyModal()
+          }
+        >
+          Connect API KEY
+        </Button>
+      </Stack>
+      <ApiKeyData stakingExchangeError={stakingSummary?.exchange_error} />
+    </Stack>
+  );
+}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/wallet-connect-done.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/wallet-connect-done.tsx
index f44d5580ed..f46d8592e1 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/profile/components/wallet-connect-done.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/profile/components/wallet-connect-done.tsx
@@ -45,18 +45,20 @@ export function WalletConnectDone() {
       disabled
       fullWidth
       value={shortAddress}
-      InputProps={{
-        endAdornment: (
-          <Tooltip
-            title={t('components.copyToClipboard')}
-            open={isCopied}
-            placement="top"
-          >
-            <IconButton onClick={handleCopyClick} disabled={isCopied}>
-              <CopyIcon />
-            </IconButton>
-          </Tooltip>
-        ),
+      slotProps={{
+        input: {
+          endAdornment: (
+            <Tooltip
+              title={t('components.copyToClipboard')}
+              open={isCopied}
+              placement="top"
+            >
+              <IconButton onClick={handleCopyClick} disabled={isCopied}>
+                <CopyIcon />
+              </IconButton>
+            </Tooltip>
+          ),
+        },
       }}
     />
   ) : (
@@ -64,25 +66,27 @@ export function WalletConnectDone() {
       disabled
       fullWidth
       value={shortAddress}
-      InputProps={{
-        endAdornment: (
-          <Tooltip
-            title={t('components.copyToClipboard')}
-            open={isCopied}
-            placement="top"
-          >
-            <IconButton onClick={handleCopyClick} disabled={isCopied}>
-              <CopyIcon />
-            </IconButton>
-          </Tooltip>
-        ),
+      slotProps={{
+        input: {
+          endAdornment: (
+            <Tooltip
+              title={t('components.copyToClipboard')}
+              open={isCopied}
+              placement="top"
+            >
+              <IconButton onClick={handleCopyClick} disabled={isCopied}>
+                <CopyIcon />
+              </IconButton>
+            </Tooltip>
+          ),
+        },
       }}
     />
   );
 
   return (
-    <Stack gap={1}>
-      <Stack direction="row" alignItems="center" gap={1}>
+    <Stack sx={{ gap: 1 }}>
+      <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
         <Typography variant="buttonLarge">
           {t('worker.profile.wallet')}
         </Typography>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/views/profile.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/views/profile.page.tsx
index d79116a913..017aad13fa 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/profile/views/profile.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/profile/views/profile.page.tsx
@@ -59,7 +59,7 @@ export function WorkerProfilePage() {
         justifyContent: 'center',
       }}
     >
-      <Stack width="100%" maxWidth="450px" gap={3}>
+      <Stack sx={{ width: '100%', maxWidth: '450px', gap: 3 }}>
         <ProfileData />
         <IdentityVerificationControl />
         <WalletConnectionControl />
diff --git a/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password-success.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password-success.page.tsx
index b499e83aeb..77cca00e4b 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password-success.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password-success.page.tsx
@@ -33,7 +33,7 @@ export function ResetPasswordWorkerSuccessPage() {
         </Grid>
       }
     >
-      <Grid container gap="1.5rem">
+      <Grid container sx={{ gap: 3 }}>
         <Typography variant="body1">
           {t('worker.resetPasswordSuccess.description')}
         </Typography>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password.page.tsx
index afab645953..7b8aebe0f9 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/reset-password/reset-password.page.tsx
@@ -66,7 +66,7 @@ export function ResetPasswordWorkerPage() {
             void methods.handleSubmit(handleWorkerResetPassword)(event);
           }}
         >
-          <Grid container gap="1.5rem">
+          <Grid container sx={{ gap: 3 }}>
             <Typography variant="body1">
               {t('worker.resetPassword.description')}
             </Typography>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link-success.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link-success.page.tsx
index d379198a55..4ab0d39ef7 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link-success.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link-success.page.tsx
@@ -60,30 +60,30 @@ export function SendResetLinkWorkerSuccessPage() {
             void methods.handleSubmit(handleWorkerSendResetLink)(event);
           }}
         >
-          <Grid container gap="1.5rem">
+          <Grid container sx={{ gap: 3 }}>
             <Typography>
               <Trans
                 components={{
-                  1: <Typography component="span" fontWeight={600} />,
+                  1: <Typography component="span" sx={{ fontWeight: 600 }} />,
                 }}
                 i18nKey="worker.sendResetLinkSuccess.paragraph1"
                 values={{ email }}
               />
             </Typography>
             <Typography
-              color={
-                isDarkMode
-                  ? onlyDarkModeColor.additionalTextColor
-                  : colorPalette.primary.light
-              }
               variant="body1"
+              sx={{
+                color: isDarkMode
+                  ? onlyDarkModeColor.additionalTextColor
+                  : colorPalette.primary.light,
+              }}
             >
               {t('worker.sendResetLinkSuccess.paragraph2')}
             </Typography>
             <Typography variant="body1">
               <Trans
                 components={{
-                  1: <Typography component="span" fontWeight={600} />,
+                  1: <Typography component="span" sx={{ fontWeight: 600 }} />,
                 }}
                 i18nKey="worker.sendResetLinkSuccess.paragraph3"
                 values={{ email }}
@@ -107,7 +107,7 @@ export function SendResetLinkWorkerSuccessPage() {
             <Typography variant="body1">
               <Trans
                 components={{
-                  1: <Typography component="span" fontWeight={600} />,
+                  1: <Typography component="span" sx={{ fontWeight: 600 }} />,
                   2: <MailTo mail={env.VITE_HUMAN_PROTOCOL_HELP_URL} />,
                 }}
                 i18nKey="worker.sendResetLinkSuccess.paragraph4"
diff --git a/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link.page.tsx
index 912399b95d..c5a904db07 100644
--- a/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link.page.tsx
+++ b/packages/apps/human-app/frontend/src/modules/worker/send-reset-link/send-reset-link.page.tsx
@@ -58,7 +58,7 @@ export function SendResetLinkWorkerPage() {
             void methods.handleSubmit(handleWorkerSendResetLink)(event);
           }}
         >
-          <Grid container gap="1.5rem">
+          <Grid container sx={{ gap: 3 }}>
             <Typography variant="body1">
               {t('worker.sendResetLinkForm.description')}
             </Typography>
diff --git a/packages/apps/human-app/frontend/src/router/components/footer.tsx b/packages/apps/human-app/frontend/src/router/components/footer.tsx
index 25e00a70f5..116c060564 100644
--- a/packages/apps/human-app/frontend/src/router/components/footer.tsx
+++ b/packages/apps/human-app/frontend/src/router/components/footer.tsx
@@ -10,57 +10,43 @@ interface FooterProps {
   displayChatIcon?: boolean;
   isProtected?: boolean;
 }
-export function Footer({
-  isProtected,
-  displayChatIcon = true,
-}: Readonly<FooterProps>) {
+
+export function Footer({ isProtected, displayChatIcon = true }: FooterProps) {
   const { colorPalette } = useColorMode();
   const { t } = useTranslation();
   const isMobile = useIsMobile('md');
 
-  const getLeftPadding = () => {
-    if (isMobile) {
-      return '0';
-    }
-    if (isProtected) {
-      return '200px';
-    }
-    return '0';
-  };
-
   return (
     <Grid
       component="footer"
       container
       sx={{
+        width: '100%',
         pr: 0,
-        pl: getLeftPadding(),
-        pb: isMobile ? 0 : '32px',
+        pl: { xs: 0, md: isProtected ? '200px' : '0' },
+        pb: { xs: 0, md: 4 },
         [breakpoints.mobile]: {
-          pr: 0,
-          pl: 0,
-          pb: 0,
-          pt: 0,
-          padding: '32px',
+          p: 4,
           backgroundColor: colorPalette.paper.main,
         },
       }}
     >
       <Grid
-        alignItems="flex-start"
-        display="flex"
-        flexDirection="column"
-        item
-        justifyContent="center"
-        xs={isMobile ? 12 : 11}
+        size={{ xs: 12, md: 11 }}
+        sx={{
+          alignItems: 'flex-start',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+        }}
       >
         <Stack
-          direction={isMobile ? 'column' : 'row'}
-          lineHeight="166%"
+          direction={{ xs: 'column', md: 'row' }}
           sx={{
-            gap: '24px',
+            gap: 3,
+            lineHeight: '166%',
             [breakpoints.mobile]: {
-              gap: '20px',
+              gap: 2.5,
             },
           }}
         >
@@ -68,9 +54,14 @@ export function Footer({
             href={env.VITE_PRIVACY_POLICY_URL}
             rel="noreferrer"
             target="_blank"
-            underline="none"
+            sx={{
+              textDecoration: 'none',
+            }}
           >
-            <Typography color={colorPalette.text.secondary} variant="caption">
+            <Typography
+              variant="caption"
+              sx={{ color: colorPalette.text.secondary }}
+            >
               {t('components.footer.privacyPolicy')}
             </Typography>
           </Link>
@@ -78,47 +69,60 @@ export function Footer({
             href={env.VITE_TERMS_OF_SERVICE_URL}
             rel="noreferrer"
             target="_blank"
-            underline="none"
+            sx={{
+              textDecoration: 'none',
+            }}
           >
-            <Typography color={colorPalette.text.secondary} variant="caption">
+            <Typography
+              variant="caption"
+              sx={{ color: colorPalette.text.secondary }}
+            >
               {t('components.footer.termsOfService')}
             </Typography>
           </Link>
           <Link
             href={env.VITE_HUMAN_PROTOCOL_URL}
+            target="_blank"
             rel="noreferrer"
             sx={{
-              mb: isMobile ? '10px' : 0,
+              mb: { xs: '10px', md: 0 },
+              textDecoration: 'none',
             }}
-            target="_blank"
-            underline="none"
           >
-            <Typography color={colorPalette.text.secondary} variant="caption">
+            <Typography
+              variant="caption"
+              sx={{ color: colorPalette.text.secondary }}
+            >
               {t('components.footer.humanProtocol')}
             </Typography>
           </Link>
           {isMobile ? (
-            <Typography color={colorPalette.text.secondary} variant="caption">
+            <Typography
+              variant="caption"
+              sx={{ color: colorPalette.text.secondary }}
+            >
               {t('components.footer.copyrightNote')}
             </Typography>
           ) : null}
         </Stack>
         {!isMobile ? (
-          <Typography color={colorPalette.text.secondary} variant="caption">
+          <Typography
+            variant="caption"
+            sx={{ color: colorPalette.text.secondary }}
+          >
             {t('components.footer.copyrightNote')}
           </Typography>
         ) : null}
       </Grid>
       <Grid
-        item
+        size={{ xs: 12, md: 1 }}
         sx={{
-          position: isMobile ? 'absolute' : 'relative',
-          right: isMobile ? '32px' : 0,
+          position: { xs: 'absolute', md: 'relative' },
+          right: { xs: '32px', md: 0 },
           display: 'flex',
           justifyContent: 'flex-end',
           alignItems: 'center',
         }}
-        xs={isMobile ? 12 : 1}
       >
         <Chat displayChatIcon={displayChatIcon} />
       </Grid>
diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/bottom-menu-items-list.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/bottom-menu-items-list.tsx
index 8bf0bafb4d..34d23acb0c 100644
--- a/packages/apps/human-app/frontend/src/router/components/layout/protected/bottom-menu-items-list.tsx
+++ b/packages/apps/human-app/frontend/src/router/components/layout/protected/bottom-menu-items-list.tsx
@@ -72,12 +72,13 @@ export function BottomMenuItemsList({
               }}
             >
               <Stack
-                alignItems="center"
                 direction="row"
-                gap="32px"
-                justifyContent="center"
                 sx={{
-                  padding: '8px 16px',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: 4,
+                  py: 1,
+                  px: 2,
                 }}
               >
                 {icon}
diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/drawer-navigation.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/drawer-navigation.tsx
index ac6d46a6b5..8dd0730b46 100644
--- a/packages/apps/human-app/frontend/src/router/components/layout/protected/drawer-navigation.tsx
+++ b/packages/apps/human-app/frontend/src/router/components/layout/protected/drawer-navigation.tsx
@@ -72,6 +72,7 @@ export function DrawerNavigation({
       <CssBaseline />
       <Drawer
         anchor="left"
+        variant="persistent"
         open={open}
         sx={{
           width: drawerWidth,
@@ -82,12 +83,10 @@ export function DrawerNavigation({
             paddingTop: '44px',
           },
         }}
-        variant="persistent"
       >
         {!isMobile && (
           <Stack
-            alignItems="flex-start"
-            sx={{ paddingLeft: '26px', cursor: 'pointer' }}
+            sx={{ alignItems: 'flex-start', pl: 3, cursor: 'pointer' }}
             onClick={() => {
               handleMainNavIconClick();
             }}
@@ -96,8 +95,8 @@ export function DrawerNavigation({
           </Stack>
         )}
         <Stack
-          justifyContent="space-between"
           sx={{
+            justifyContent: 'space-between',
             height: '100%',
           }}
         >
diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/layout.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/layout.tsx
index ebe1e2ead6..2659f5304b 100644
--- a/packages/apps/human-app/frontend/src/router/components/layout/protected/layout.tsx
+++ b/packages/apps/human-app/frontend/src/router/components/layout/protected/layout.tsx
@@ -1,4 +1,4 @@
-import { Grid, styled } from '@mui/material';
+import { Box, Stack, styled } from '@mui/material';
 import type { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { Outlet } from 'react-router-dom';
@@ -74,15 +74,12 @@ export function ProtectedLayout({
   }, [setGrayBackground]);
 
   return (
-    <Grid
-      alignItems="center"
-      container
-      direction="column"
-      flexWrap="nowrap"
-      justifyContent="space-between"
+    <Stack
       sx={{
         display: 'flex',
-        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexWrap: 'nowrap',
         minHeight: '100vh',
         height: '100%',
         width: '100%',
@@ -103,32 +100,28 @@ export function ProtectedLayout({
         ? renderHCaptchaStatisticsDrawer(hcaptchaDrawerOpen)
         : null}
       <Main isMobile={isMobile} open={drawerOpen}>
-        <Grid
-          component="div"
-          container
+        <Stack
           sx={{
+            width: '100%',
             margin: !isMobile ? '5.2rem 0 1rem 0' : '1rem 0',
-            display: 'flex',
-            gap: '2rem',
-            flexDirection: 'column',
-            padding: '0 2rem',
+            py: 0,
+            px: 4,
+            gap: 4,
             flexWrap: 'nowrap',
             [breakpoints.mobile]: {
-              gap: '1rem',
-              padding: '0 1rem',
+              gap: 2,
+              px: 2,
             },
           }}
         >
           {renderGovernanceBanner && <GovernanceBanner />}
-          <Grid item>
-            <PageHeader {...pageHeaderProps} />
-          </Grid>
-          <Grid component="div" ref={layoutElementRef} sx={{ height: '100%' }}>
+          <PageHeader {...pageHeaderProps} />
+          <Box ref={layoutElementRef} sx={{ height: '100%' }}>
             <Outlet />
-          </Grid>
-        </Grid>
+          </Box>
+        </Stack>
       </Main>
       <Footer displayChatIcon={!isMobile || !drawerOpen} isProtected />
-    </Grid>
+    </Stack>
   );
 }
diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx
index 685c95bc61..90c5817106 100644
--- a/packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx
+++ b/packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx
@@ -64,11 +64,11 @@ export function Navbar({
 
   return (
     <Stack
-      alignItems="center"
       component="header"
       direction="row"
-      justifyContent="space-between"
       sx={{
+        alignItems: 'center',
+        justifyContent: 'space-between',
         backgroundColor: colorPalette.backgroundColor,
         display: { xs: 'flex', md: 'none' },
         width: '100%',
@@ -80,7 +80,7 @@ export function Navbar({
       }}
     >
       <Grid
-        sx={{ cursor: 'pointer', paddingLeft: '8px' }}
+        sx={{ cursor: 'pointer', pl: 1 }}
         onClick={() => {
           if (isMobile) {
             setOpen(false);
@@ -97,7 +97,7 @@ export function Navbar({
         sx={{
           display: 'flex',
           justifyContent: 'center',
-          gap: '1rem',
+          gap: 2,
         }}
       >
         {isHCaptchaLabelingPage && toggleUserStatsDrawer ? (
diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx
index 466c169333..057cc57101 100644
--- a/packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx
+++ b/packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx
@@ -1,4 +1,4 @@
-import { Grid, Typography } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
 import React from 'react';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { breakpoints } from '@/shared/styles/breakpoints';
@@ -13,55 +13,57 @@ export function PageHeader({
   headerIcon,
   headerText,
   headerItem,
-}: Readonly<PageHeaderProps>) {
+}: PageHeaderProps) {
   const isMobile = useIsMobile();
   return (
     <Grid
-      alignContent="space-between"
       container
-      gap="1rem"
-      justifyContent="space-between"
       sx={{
-        padding: '0 34px',
+        alignItems: 'space-between',
+        justifyContent: 'space-between',
+        px: 4,
+        gap: 2,
         [breakpoints.mobile]: {
-          padding: '0',
+          px: 0,
         },
       }}
     >
-      <div>
-        <Grid alignContent="center" container gap="1rem" justifyContent="start">
-          <Grid
+      <Grid
+        container
+        sx={{ alignItems: 'center', justifyContent: 'start', gap: 2 }}
+      >
+        <Grid
+          sx={{
+            height: '76px',
+            width: '70px',
+            position: 'relative',
+          }}
+        >
+          <Box
+            component="span"
             sx={{
-              height: '76px',
-              width: '70px',
-              position: 'relative',
+              position: 'absolute',
+              top: '30%',
+              left: '50%',
+              transform: 'translate(-50%,-30%)',
             }}
           >
-            <span
-              style={{
-                position: 'absolute',
-                top: '30%',
-                left: '50%',
-                transform: 'translate(-50%,-30%)',
-              }}
-            >
-              {headerIcon}
-            </span>
-          </Grid>
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              flexWrap: 'nowrap',
-            }}
-          >
-            <Typography sx={{ textWrap: 'nowrap' }} variant="h3">
-              {headerText}
-            </Typography>
-          </div>
+            {headerIcon}
+          </Box>
         </Grid>
-      </div>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexWrap: 'nowrap',
+          }}
+        >
+          <Typography sx={{ textWrap: 'nowrap' }} variant="h3">
+            {headerText}
+          </Typography>
+        </Box>
+      </Grid>
       {!isMobile ? <Grid>{headerItem}</Grid> : null}
     </Grid>
   );
diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/top-menu-items-list.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/top-menu-items-list.tsx
index 972ea1ee56..b8ed1d5933 100644
--- a/packages/apps/human-app/frontend/src/router/components/layout/protected/top-menu-items-list.tsx
+++ b/packages/apps/human-app/frontend/src/router/components/layout/protected/top-menu-items-list.tsx
@@ -28,16 +28,12 @@ export function TopMenuItemsList({
   const location = useLocation();
 
   return (
-    <List
-      sx={{
-        marginTop: isMobile ? '66px' : '16px',
-      }}
-    >
-      {items?.map((item, index) => {
+    <List sx={{ mt: { xs: 8, md: 2 } }}>
+      {items?.map((item) => {
         if (!isDrawerItem(item)) {
           return (
             <ListItem key={`list-item-${item.key}`}>
-              <Stack direction="row" ml={{ xs: 7, md: 2 }}>
+              <Stack direction="row" sx={{ ml: { xs: 7, md: 2 } }}>
                 {item}
               </Stack>
             </ListItem>
@@ -51,7 +47,13 @@ export function TopMenuItemsList({
           <ListItem
             disablePadding
             key={label}
-            sx={{ padding: '0 8px', borderRadius: '4px' }}
+            sx={{
+              padding: '0 8px',
+              borderRadius: '4px',
+              '&:first-of-type .MuiListItemText-root': {
+                ml: '10px',
+              },
+            }}
           >
             <ListItemButton
               disabled={disabled}
@@ -70,12 +72,13 @@ export function TopMenuItemsList({
               }}
             >
               <Stack
-                alignItems="center"
                 direction="row"
-                gap="32px"
-                justifyContent="center"
                 sx={{
-                  padding: '8px 16px',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  py: 1,
+                  px: 2,
+                  gap: 4,
                 }}
               >
                 {icon}
@@ -89,9 +92,6 @@ export function TopMenuItemsList({
                       {label}
                     </Typography>
                   }
-                  sx={{
-                    marginLeft: index === 0 ? '10px' : '0px',
-                  }}
                 />
               </Stack>
             </ListItemButton>
diff --git a/packages/apps/human-app/frontend/src/router/components/layout/unprotected/layout.tsx b/packages/apps/human-app/frontend/src/router/components/layout/unprotected/layout.tsx
index e1804f91a8..20b365009b 100644
--- a/packages/apps/human-app/frontend/src/router/components/layout/unprotected/layout.tsx
+++ b/packages/apps/human-app/frontend/src/router/components/layout/unprotected/layout.tsx
@@ -1,4 +1,4 @@
-import { Container, Grid } from '@mui/material';
+import { Container, Stack } from '@mui/material';
 import { Outlet } from 'react-router-dom';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { breakpoints } from '@/shared/styles/breakpoints';
@@ -27,16 +27,14 @@ export function UnprotectedLayout({
   })();
 
   return (
-    <Grid
-      alignItems="center"
-      container
-      direction="column"
-      flexWrap="nowrap"
+    <Stack
       sx={{
+        alignItems: 'center',
+        flexWrap: 'nowrap',
         height: '100%',
         minHeight: '100vh',
         width: '100%',
-        pt: '0',
+        pt: 0,
         px: isMobile ? 0 : '120px',
         backgroundColor: layoutBackgroundColor,
       }}
@@ -46,19 +44,19 @@ export function UnprotectedLayout({
         component="main"
         maxWidth="xl"
         sx={{
-          p: '0',
+          p: 0,
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
           flex: 1,
           [breakpoints.mobile]: {
-            pt: '32px',
+            pt: 4,
           },
         }}
       >
         <Outlet />
       </Container>
       <Footer />
-    </Grid>
+    </Stack>
   );
 }
diff --git a/packages/apps/human-app/frontend/src/router/components/layout/unprotected/navbar.tsx b/packages/apps/human-app/frontend/src/router/components/layout/unprotected/navbar.tsx
index 00c3d0ff79..3f1f16376c 100644
--- a/packages/apps/human-app/frontend/src/router/components/layout/unprotected/navbar.tsx
+++ b/packages/apps/human-app/frontend/src/router/components/layout/unprotected/navbar.tsx
@@ -28,8 +28,8 @@ export function Navbar({ withNavigation }: Readonly<NavbarProps>) {
 
   return (
     <Box
-      position="static"
       sx={{
+        position: 'static',
         background: 'transparent',
         margin: '20px 0',
         width: '100%',
diff --git a/packages/apps/human-app/frontend/src/shared/components/data-entry/checkbox.tsx b/packages/apps/human-app/frontend/src/shared/components/data-entry/checkbox.tsx
index 47c02ce7e8..6a479d3d10 100644
--- a/packages/apps/human-app/frontend/src/shared/components/data-entry/checkbox.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/data-entry/checkbox.tsx
@@ -18,7 +18,7 @@ export function Checkbox({ name, label = '', ...rest }: InputProps) {
     <Controller
       name={name}
       render={({ field: { value, ...restField }, fieldState }) => (
-        <Stack alignItems="center" direction="row" display="inline">
+        <Stack direction="row" sx={{ display: 'inline', alignItems: 'center' }}>
           <FormControlLabel
             control={
               <CheckboxMui
diff --git a/packages/apps/human-app/frontend/src/shared/components/data-entry/input.tsx b/packages/apps/human-app/frontend/src/shared/components/data-entry/input.tsx
index ba1cb12ec9..0cab598fd8 100644
--- a/packages/apps/human-app/frontend/src/shared/components/data-entry/input.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/data-entry/input.tsx
@@ -30,22 +30,15 @@ export function Input({
       render={({ field, fieldState }) => (
         <TextField
           {...field}
-          FormHelperTextProps={{ component: 'div' }}
-          InputProps={
-            mask
-              ? {
-                  inputComponent: mask as any,
-                }
-              : undefined
-          }
+          variant="outlined"
           autoComplete={autoComplete ?? name}
           error={Boolean(fieldState.error)}
           fullWidth
           helperText={
             <Typography
-              color={customError ? undefined : colorPalette.error.main}
               component="div"
               variant="helperText"
+              sx={{ color: customError ? undefined : colorPalette.error.main }}
             >
               {customError ? customError : fieldState.error?.message}
             </Typography>
@@ -62,8 +55,18 @@ export function Input({
               },
             },
           }}
-          variant="outlined"
           {...rest}
+          slotProps={{
+            ...rest.slotProps,
+            formHelperText: {
+              component: 'div',
+              ...rest.slotProps?.formHelperText,
+            },
+            input: {
+              ...rest.slotProps?.input,
+              ...(mask ? { inputComponent: mask as any } : {}),
+            },
+          }}
         />
       )}
     />
diff --git a/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx b/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx
index fe1a11443c..4555770659 100644
--- a/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx
@@ -1,6 +1,6 @@
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import React, { useState } from 'react';
+import { useState, MouseEvent } from 'react';
 import InputAdornment from '@mui/material/InputAdornment';
 import IconButton from '@mui/material/IconButton';
 import { Input, type InputProps } from '@/shared/components/data-entry/input';
@@ -16,41 +16,35 @@ export function Password(props: PasswordProps) {
     setShowPassword((show) => !show);
   };
 
-  const handleMouseDownPassword = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => {
+  const handleMouseDownPassword = (event: MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
   };
 
   return (
     <Input
       {...props}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment
-            position="end"
-            sx={{
-              marginLeft: 0,
-            }}
-          >
-            <IconButton
-              aria-label="toggle password visibility"
-              edge="end"
-              onClick={handleClickShowPassword}
-              onMouseDown={handleMouseDownPassword}
-            >
-              {showPassword ? (
-                <VisibilityOff sx={{ fill: colorPalette.primary.dark }} />
-              ) : (
-                <Visibility sx={{ fill: colorPalette.primary.dark }} />
-              )}
-            </IconButton>
-          </InputAdornment>
-        ),
+      slotProps={{
+        input: {
+          endAdornment: (
+            <InputAdornment position="end" sx={{ ml: 0 }}>
+              <IconButton
+                aria-label="toggle password visibility"
+                edge="end"
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+              >
+                {showPassword ? (
+                  <VisibilityOff sx={{ fill: colorPalette.primary.dark }} />
+                ) : (
+                  <Visibility sx={{ fill: colorPalette.primary.dark }} />
+                )}
+              </IconButton>
+            </InputAdornment>
+          ),
+        },
       }}
       onKeyDown={(e) => {
-        // ignore space
-        if (e.keyCode === 32) {
+        if (e.key === 'Space') {
           e.preventDefault();
           e.stopPropagation();
         }
diff --git a/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha-form.tsx b/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha-form.tsx
index 256e64362a..9fb5d1bac2 100644
--- a/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha-form.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha-form.tsx
@@ -30,9 +30,9 @@ export function HCaptchaForm({ name, error }: Readonly<HCaptchaFormProps>) {
     <div>
       <CustomHCaptcha onVerify={setCaptchaValue} ref={customCaptchaRef} />
       <Typography
-        color={colorPalette.error.main}
         component="div"
         variant="helperText"
+        sx={{ color: colorPalette.error.main }}
       >
         {formState.errors[name]?.message}
       </Typography>
diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx
index 50c6226520..9289815451 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx
@@ -23,8 +23,12 @@ export function Chip({ label, backgroundColor }: Readonly<ChipProps>) {
       }}
     >
       <Typography
-        color={backgroundColor ? colorPalette.white : colorPalette.text.primary}
         variant="chip"
+        sx={{
+          color: backgroundColor
+            ? colorPalette.white
+            : colorPalette.text.primary,
+        }}
       >
         {label}
       </Typography>
diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/empty-placeholder.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/empty-placeholder.tsx
index fa2eadfade..af69611f13 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/empty-placeholder.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/empty-placeholder.tsx
@@ -6,7 +6,7 @@ export function EmptyPlaceholder() {
   const { colorPalette } = useColorMode();
 
   return (
-    <Typography color={colorPalette.text.disabled} variant="helperText">
+    <Typography variant="helperText" sx={{ color: colorPalette.text.disabled }}>
       {t('operator.addKeysPage.existingKeys.noValue')}
     </Typography>
   );
diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/modal/global-modal.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/modal/global-modal.tsx
index 7a73af61b8..360a2c3867 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/modal/global-modal.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/modal/global-modal.tsx
@@ -17,11 +17,13 @@ export function GlobalModal() {
       open={open}
       onClose={!disableClose ? closeModal : undefined}
       onTransitionExited={onTransitionExited}
-      PaperProps={{
-        sx: {
-          flex: 1,
-          maxWidth: '800px',
-          position: 'relative',
+      slotProps={{
+        paper: {
+          sx: {
+            flex: 1,
+            maxWidth: '800px',
+            position: 'relative',
+          },
         },
       }}
     >
diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/optional-text.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/optional-text.tsx
index a129a8b8e2..9d016fe0ae 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/optional-text.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/optional-text.tsx
@@ -7,7 +7,7 @@ export function OptionalText({ text }: { text?: string }) {
   }
 
   return (
-    <Grid sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }} width="100%">
+    <Grid sx={{ width: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
       {text}
     </Grid>
   );
diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card.tsx
index ee4ad585a4..a1abcd6eaf 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card.tsx
@@ -49,7 +49,7 @@ export function PageCard({
   cancelNavigation = routerPaths.homePage,
   showCancelButton = true,
   showBackButton = true,
-}: Readonly<PageCardProps>) {
+}: PageCardProps) {
   const { isDarkMode, colorPalette } = useColorMode();
   const navigate = useNavigate();
   const isMobile = useIsMobile('md');
@@ -125,11 +125,8 @@ export function PageCard({
         <Grid
           container
           sx={{
-            rowGap: '1rem',
             columnGap: '1rem',
-            [breakpoints.mobile]: {
-              rowGap: '0.4rem',
-            },
+            rowGap: { xs: '0.4rem', md: '1rem' },
           }}
         >
           <Grid
@@ -166,36 +163,33 @@ export function PageCard({
               </Button>
             )}
           </Grid>
-          <Grid item md={1} order={{ xs: 3, md: 1 }} xs={12} />
+          <Grid size={{ xs: 12, md: 1 }} sx={{ order: { xs: 3, md: 1 } }} />
           <Grid
-            item
-            md={10}
-            order={{ xs: 2, md: 2 }}
+            size={{ xs: 12, md: 10 }}
             sx={{
               minHeight: '3rem',
               width: '100%',
+              order: 2,
               [breakpoints.mobile]: {
                 height: 'auto',
                 minHeight: 'unset',
               },
             }}
-            xs={12}
           >
             <Grid sx={contentStyles}>{alert && <>{alert}</>}</Grid>
           </Grid>
           <Grid
-            item
-            md={1}
-            order={{ xs: 1, md: 3 }}
+            size={{ xs: 12, md: 1 }}
             sx={{
               display: 'flex',
               justifyContent: 'flex-end',
               mt: '5px',
+              order: 3,
               [breakpoints.mobile]: {
                 display: 'none',
+                order: 1,
               },
             }}
-            xs={12}
           >
             {showBackButton && (
               <IconWrapper
@@ -210,19 +204,17 @@ export function PageCard({
               </IconWrapper>
             )}
           </Grid>
-          <Grid
-            item
-            md={10}
-            order={{ xs: 4, md: 4 }}
-            sx={{ marginBottom: '24px' }}
-            xs={12}
-          >
+          <Grid size={{ xs: 12, md: 10 }} sx={{ mb: 3, order: 4 }}>
             <Grid sx={contentStyles}>
-              <Typography variant="h4">{title}</Typography>
+              {typeof title === 'string' ? (
+                <Typography variant="h4">{title}</Typography>
+              ) : (
+                title
+              )}
             </Grid>
           </Grid>
-          <Grid item md={1} order={{ xs: 5, md: 5 }} xs={1} />
-          <Grid item md={10} order={{ xs: 6, md: 6 }} xs={12}>
+          <Grid size={1} sx={{ order: 5 }} />
+          <Grid size={{ xs: 12, md: 10 }} sx={{ order: 6 }}>
             <Grid sx={contentStyles}>{children}</Grid>
           </Grid>
         </Grid>
diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/profile/profile-list-item.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/profile/profile-list-item.tsx
index 759c6fb8cd..2e0cc2471b 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/profile/profile-list-item.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/profile/profile-list-item.tsx
@@ -40,21 +40,22 @@ export function ProfileListItem({
           <Chips data={paragraph} />
         ) : (
           <Stack
-            alignItems="center"
             direction="row"
             sx={{
-              marginBottom: '10px',
+              alignItems: 'center',
+              mb: '10px',
             }}
           >
             <Typography
-              color={
-                isStatusListItem === false
-                  ? colorPalette.text.secondary
-                  : colorPalette.text.primary
-              }
               component="span"
-              sx={{ wordBreak: 'break-all' }}
               variant="body1"
+              sx={{
+                color:
+                  isStatusListItem === false
+                    ? colorPalette.text.secondary
+                    : colorPalette.text.primary,
+                wordBreak: 'break-all',
+              }}
             >
               {paragraph}
             </Typography>
diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/success-label.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/success-label.tsx
index e6f8c96501..a7646b7de5 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/success-label.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/success-label.tsx
@@ -6,7 +6,7 @@ export function SuccessLabel({ children }: { children: string }) {
   const { colorPalette } = useColorMode();
 
   return (
-    <Grid container gap="1rem" sx={{ alignItems: 'center' }}>
+    <Grid container sx={{ alignItems: 'center', gap: '1rem' }}>
       <span>{children}</span>
       <CheckCircleIcon
         fontSize="large"
diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/table-button.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/table-button.tsx
index 0901fc0099..3b2d2209ce 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/table-button.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/table-button.tsx
@@ -6,6 +6,9 @@ export function TableButton(props: CustomButtonProps) {
     <Button
       {...props}
       size="small"
+      type="button"
+      variant="contained"
+      color="secondary"
       sx={{
         paddingTop: '0.4rem',
         paddingBottom: '0.4rem',
@@ -14,9 +17,6 @@ export function TableButton(props: CustomButtonProps) {
         fontSize: '13px',
         ...props.sx,
       }}
-      type="button"
-      variant="contained"
-      color="secondary"
     >
       <div>{props.children}</div>
     </Button>
diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu/filtering.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu/filtering.tsx
index 32023a5d48..ed71180808 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu/filtering.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu/filtering.tsx
@@ -34,9 +34,8 @@ export function Filtering<T>({
     <List sx={{ padding: 0 }}>
       {showTitle ? (
         <Typography
-          color={colorPalette.text.secondary}
-          sx={{ padding: '0.5rem' }}
           variant="body2"
+          sx={{ color: colorPalette.text.secondary, p: 1 }}
         >
           {t('components.table.filter')}
         </Typography>
@@ -54,15 +53,18 @@ export function Filtering<T>({
                 }
                 setFiltering(option);
               }}
-              sx={{ paddingLeft: 0, ':hover': { background: 'none' } }}
+              sx={{ pl: 0, ':hover': { background: 'none' } }}
             />
             <ListItem
               component="span"
               sx={{
-                paddingLeft: 0,
+                pl: 0,
               }}
             >
-              <Typography color={colorPalette.primary.main} variant="body1">
+              <Typography
+                variant="body1"
+                sx={{ color: colorPalette.primary.main }}
+              >
                 {name}
               </Typography>
             </ListItem>
@@ -74,11 +76,11 @@ export function Filtering<T>({
           <Divider component="li" variant="fullWidth" />
           <ListItem sx={{ padding: '0.5rem', cursor: 'pointer' }}>
             <Typography
-              color={colorPalette.primary.main}
+              variant="buttonMedium"
+              sx={{ color: colorPalette.primary.main }}
               onClick={() => {
                 clear();
               }}
-              variant="buttonMedium"
             >
               {t('components.table.clearBtn')}
             </Typography>
diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu/sorting.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu/sorting.tsx
index 5d5749b639..835197d3fd 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu/sorting.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu/sorting.tsx
@@ -15,9 +15,8 @@ export function Sorting({ sortingOptions, clear }: SortingMenuProps) {
   return (
     <List sx={{ padding: 0 }}>
       <Typography
-        color={colorPalette.text.secondary}
-        sx={{ padding: '0.5rem' }}
         variant="body2"
+        sx={{ color: colorPalette.text.secondary, p: 1 }}
       >
         {t('components.table.sort')}
       </Typography>
@@ -30,7 +29,10 @@ export function Sorting({ sortingOptions, clear }: SortingMenuProps) {
             }}
             sx={{ padding: '0.2rem 0.5rem', cursor: 'pointer' }}
           >
-            <Typography color={colorPalette.primary.main} variant="subtitle2">
+            <Typography
+              variant="subtitle2"
+              sx={{ color: colorPalette.primary.main }}
+            >
               {label}
             </Typography>
           </ListItemText>
@@ -39,9 +41,11 @@ export function Sorting({ sortingOptions, clear }: SortingMenuProps) {
       <Divider component="li" variant="fullWidth" />
       <ListItemText sx={{ padding: '0.5rem', cursor: 'pointer' }}>
         <Typography
-          color={colorPalette.primary.main}
-          onClick={clear}
           variant="buttonMedium"
+          sx={{ color: colorPalette.primary.main }}
+          onClick={() => {
+            clear();
+          }}
         >
           {t('components.table.clearBtn')}
         </Typography>
diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/text-header-with-icon.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/text-header-with-icon.tsx
index 0af093146e..57a2d2b727 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/text-header-with-icon.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/text-header-with-icon.tsx
@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid/Grid';
+import { Grid } from '@mui/material';
 import { FiltersIcon } from '@/shared/components/ui/icons';
 
 export type IconType = 'filter';
diff --git a/packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts b/packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts
index 0158695420..56a635b86c 100644
--- a/packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts
+++ b/packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts
@@ -20,7 +20,6 @@ export const darkTheme: ThemeOptions = {
       defaultProps: {
         variant: 'body1',
         color: darkColorPalette.text.primary,
-        fontFamily: 'Inter',
         variantMapping: {
           subtitle1: 'p',
           subtitle2: 'p',
diff --git a/packages/apps/human-app/frontend/src/shared/styles/theme.ts b/packages/apps/human-app/frontend/src/shared/styles/theme.ts
index 44a04ae421..b655c57dc4 100644
--- a/packages/apps/human-app/frontend/src/shared/styles/theme.ts
+++ b/packages/apps/human-app/frontend/src/shared/styles/theme.ts
@@ -9,7 +9,6 @@ export const theme: ThemeOptions = {
       defaultProps: {
         variant: 'body1',
         color: colorPalette.primary.main,
-        fontFamily: 'Inter',
         variantMapping: {
           subtitle1: 'p',
           subtitle2: 'p',
diff --git a/packages/apps/human-app/frontend/src/shared/styles/typography.ts b/packages/apps/human-app/frontend/src/shared/styles/typography.ts
index 6f940bcf59..6d53f178e9 100644
--- a/packages/apps/human-app/frontend/src/shared/styles/typography.ts
+++ b/packages/apps/human-app/frontend/src/shared/styles/typography.ts
@@ -73,6 +73,7 @@ declare module '@mui/material/styles' {
 }
 
 export const typography: ThemeOptions['typography'] = {
+  fontFamily: 'Inter',
   h1: {
     fontSize: 80,
     fontWeight: 800,
diff --git a/packages/apps/human-app/frontend/tsconfig.json b/packages/apps/human-app/frontend/tsconfig.json
index f58b6f497d..ff07c5d0da 100644
--- a/packages/apps/human-app/frontend/tsconfig.json
+++ b/packages/apps/human-app/frontend/tsconfig.json
@@ -20,7 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     /* Absolute paths */
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     }

From 67be8eb7c8807daae61abfc0cea8772eec898820 Mon Sep 17 00:00:00 2001
From: KirillKirill <kirill@hmt.ai>
Date: Fri, 10 Jul 2026 16:18:53 +0300
Subject: [PATCH 2/6] chore: update makefile and lock file

---
 docker-setup/Makefile |   4 +-
 yarn.lock             | 179 ++++++++++++++++++++++++++++++++++++------
 2 files changed, 155 insertions(+), 28 deletions(-)

diff --git a/docker-setup/Makefile b/docker-setup/Makefile
index 724723d377..39d57fd2e6 100644
--- a/docker-setup/Makefile
+++ b/docker-setup/Makefile
@@ -16,15 +16,15 @@ infra-up: check-env-file
 infra-stop:
 	@docker compose --env-file .env.compose.local stop postgres redis minio minio-client
 
+# TODO: Revisit compose-native parallel builds once Docker Compose v5 parallel limits are reliable again.
 build-services: check-env-file
-	@# TODO: Revisit compose-native parallel builds once Docker Compose v5 parallel limits are reliable again.
 	@docker compose --env-file .env.compose.local config --services | \
 		xargs -n $(DOCKER_PARALLEL) docker compose --env-file .env.compose.local build
 	@docker compose --env-file .env.compose.local up --no-start
 
+# TODO: Revisit compose-native parallel builds once Docker Compose v5 parallel limits are reliable again.
 services-up: check-env-file
 	@service_names="$(wordlist 2, $(words $(MAKECMDGOALS)), $(MAKECMDGOALS))"; \
-	@# TODO: Revisit compose-native parallel builds once Docker Compose v5 parallel limits are reliable again.
 	if [ -n "$$service_names" ]; then \
 		printf '%s\n' $$service_names | xargs -n $(DOCKER_PARALLEL) docker compose --env-file .env.compose.local up -d; \
 	else \
diff --git a/yarn.lock b/yarn.lock
index 1c92a2ea4f..92c620480e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -426,8 +426,7 @@ __metadata:
     "@hookform/resolvers": "npm:^5.1.0"
     "@human-protocol/sdk": "workspace:*"
     "@mui/icons-material": "npm:^7.3.8"
-    "@mui/material": "npm:^5.16.7"
-    "@mui/system": "npm:^9.0.1"
+    "@mui/material": "npm:^9.2.0"
     "@mui/x-date-pickers": "npm:^9.2.0"
     "@reown/appkit": "npm:^1.8.20"
     "@reown/appkit-adapter-wagmi": "npm:^1.8.20"
@@ -436,7 +435,6 @@ __metadata:
     "@tanstack/react-query": "npm:^5.91.3"
     "@tanstack/react-query-devtools": "npm:^5.59.16"
     "@types/lodash": "npm:^4.17.24"
-    "@types/mui-image": "npm:^1.0.5"
     "@types/node": "npm:^22.10.5"
     "@types/prop-types": "npm:^15"
     "@types/react": "npm:^19.2.15"
@@ -459,7 +457,6 @@ __metadata:
     jwt-decode: "npm:^4.0.0"
     lodash: "npm:^4.18.1"
     material-react-table: "npm:3.0.1"
-    mui-image: "npm:^1.0.7"
     notistack: "npm:^3.0.1"
     prettier: "npm:^3.8.1"
     prop-types: "npm:^15.8.1"
@@ -7034,6 +7031,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/core-downloads-tracker@npm:^9.2.0":
+  version: 9.2.0
+  resolution: "@mui/core-downloads-tracker@npm:9.2.0"
+  checksum: 10c0/644d5e78c9a305b4520889348649b6f89ced9ef1c5a60720b58d5fd4e743d703cd53249405cf236d60d2ccca1bd7813c59451acd02afcb04e24bc3c1439917a7
+  languageName: node
+  linkType: hard
+
 "@mui/icons-material@npm:^7.3.8":
   version: 7.3.8
   resolution: "@mui/icons-material@npm:7.3.8"
@@ -7150,6 +7154,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/material@npm:^9.2.0":
+  version: 9.2.0
+  resolution: "@mui/material@npm:9.2.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.2"
+    "@mui/core-downloads-tracker": "npm:^9.2.0"
+    "@mui/system": "npm:^9.2.0"
+    "@mui/types": "npm:^9.1.1"
+    "@mui/utils": "npm:^9.2.0"
+    "@popperjs/core": "npm:^2.11.8"
+    "@types/react-transition-group": "npm:^4.4.12"
+    clsx: "npm:^2.1.1"
+    csstype: "npm:^3.2.3"
+    prop-types: "npm:^15.8.1"
+    react-is: "npm:^19.2.6"
+    react-transition-group: "npm:^4.4.5"
+  peerDependencies:
+    "@emotion/react": ^11.5.0
+    "@emotion/styled": ^11.3.0
+    "@mui/material-pigment-css": ^9.2.0
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+    "@mui/material-pigment-css":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: 10c0/058b10cd15b9d5c8b1d0a95200603e207f456ab7a52616e00e552e96a43be8081206486b4d7beea540e66f28e1b232cc8d75333a68d7bb0748dbdefbf11190da
+  languageName: node
+  linkType: hard
+
 "@mui/private-theming@npm:^5.17.1":
   version: 5.17.1
   resolution: "@mui/private-theming@npm:5.17.1"
@@ -7218,6 +7258,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/private-theming@npm:^9.2.0":
+  version: 9.2.0
+  resolution: "@mui/private-theming@npm:9.2.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.2"
+    "@mui/utils": "npm:^9.2.0"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/534fbf18f53ee641b09fd72c839adeec23975b4bca399493183b01a539c085de2e998ce914b148481d12d4e92f8ccbaf5aad139e7878c131cdcc6e70298d2f1f
+  languageName: node
+  linkType: hard
+
 "@mui/styled-engine-sc@npm:9.0.1":
   version: 9.0.1
   resolution: "@mui/styled-engine-sc@npm:9.0.1"
@@ -7324,6 +7381,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/styled-engine@npm:^9.1.1":
+  version: 9.1.1
+  resolution: "@mui/styled-engine@npm:9.1.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.2"
+    "@emotion/cache": "npm:^11.14.0"
+    "@emotion/serialize": "npm:^1.3.3"
+    "@emotion/sheet": "npm:^1.4.0"
+    csstype: "npm:^3.2.3"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    "@emotion/react": ^11.4.1
+    "@emotion/styled": ^11.3.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+  checksum: 10c0/250bb2a94ac3399a3a9c2ba81871419100fed51b823b87a935215c50781aace3022585697039898073964e661e749abd9e30a6a241ce7567ad5eec47ef082467
+  languageName: node
+  linkType: hard
+
 "@mui/system@npm:^5.18.0":
   version: 5.18.0
   resolution: "@mui/system@npm:5.18.0"
@@ -7436,6 +7516,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/system@npm:^9.2.0":
+  version: 9.2.0
+  resolution: "@mui/system@npm:9.2.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.2"
+    "@mui/private-theming": "npm:^9.2.0"
+    "@mui/styled-engine": "npm:^9.1.1"
+    "@mui/types": "npm:^9.1.1"
+    "@mui/utils": "npm:^9.2.0"
+    clsx: "npm:^2.1.1"
+    csstype: "npm:^3.2.3"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    "@emotion/react": ^11.5.0
+    "@emotion/styled": ^11.3.0
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: 10c0/ff7edecadfbd6a746ba8a401b68a32ddf0439d5caeeef27ebdd4a305ceb0d8c532276d03d2965c6cac75a4a80c7be7903830309b509839722ac8f0799aae6276
+  languageName: node
+  linkType: hard
+
 "@mui/types@npm:^7.4.12, @mui/types@npm:^7.4.6":
   version: 7.4.12
   resolution: "@mui/types@npm:7.4.12"
@@ -7478,6 +7586,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/types@npm:^9.1.1":
+  version: 9.1.1
+  resolution: "@mui/types@npm:9.1.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.2"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/83cb89cafba0c55c909a8a89bd165550a71f92a67bbd191823b6ec304e5f59b43438052fecc4f69cc27e4e557c6bce3d5a073b9f5d5787d62d8cdc055e479905
+  languageName: node
+  linkType: hard
+
 "@mui/types@npm:~7.2.15":
   version: 7.2.24
   resolution: "@mui/types@npm:7.2.24"
@@ -7590,6 +7712,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/utils@npm:^9.2.0":
+  version: 9.2.0
+  resolution: "@mui/utils@npm:9.2.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.2"
+    "@mui/types": "npm:^9.1.1"
+    "@types/prop-types": "npm:^15.7.15"
+    clsx: "npm:^2.1.1"
+    prop-types: "npm:^15.8.1"
+    react-is: "npm:^19.2.6"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/fb2a0b7f0bd24e0027f218743d03eb69d1067dfb4faccbe0483580dee5a0c6023c8b1e4611bc9810d704a01d06f2da699912f8080deccef8ae2460b5ab928170
+  languageName: node
+  linkType: hard
+
 "@mui/x-data-grid@npm:^8.7.0":
   version: 8.16.0
   resolution: "@mui/x-data-grid@npm:8.16.0"
@@ -12381,15 +12523,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mui-image@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "@types/mui-image@npm:1.0.5"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10c0/ac81f6e290571a7534271464203d6ab92d997ebb266c35b7611adbcc12c3ee5a0f65d67e072f234f3689cc38903e8c94d785fc164ca987f19e6b33b51083daed
-  languageName: node
-  linkType: hard
-
 "@types/node@npm:*, @types/node@npm:>=13.7.0, @types/node@npm:>=18, @types/node@npm:>=18.0.0, @types/node@npm:>=8.1.0":
   version: 24.10.0
   resolution: "@types/node@npm:24.10.0"
@@ -25088,19 +25221,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mui-image@npm:^1.0.7":
-  version: 1.0.9
-  resolution: "mui-image@npm:1.0.9"
-  peerDependencies:
-    "@emotion/react": ^11.4.1
-    "@emotion/styled": ^11.3.0
-    "@mui/material": ^5.0.1 || ^6.0.0 || ^7.0.0
-    prop-types: ^15.7.2
-    react: ^17.0.2 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/ad17200a32c3633776ee8351d2071ee7e38faaf41b2e1c26673cab75a2a1f6a94d6d2939d34ec65ba9b088fc34d55b56798afd71e9753818e2079306992ce3d1
-  languageName: node
-  linkType: hard
-
 "multer@npm:2.0.2":
   version: 2.0.2
   resolution: "multer@npm:2.0.2"
@@ -27578,6 +27698,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^19.2.6":
+  version: 19.2.7
+  resolution: "react-is@npm:19.2.7"
+  checksum: 10c0/419fe54d5bd7fdf5414a5bb7bd9a1e0e36f9fae28ffb4cb73290fbe342bde15d8584a90d1db62547f6aa03018dce517b178a041abb522136cd4b4b51b4e94c83
+  languageName: node
+  linkType: hard
+
 "react-loading-skeleton@npm:^3.3.1":
   version: 3.5.0
   resolution: "react-loading-skeleton@npm:3.5.0"

From 6cfcabc3071bb0044b76d173b2d2fa8dff3e0403 Mon Sep 17 00:00:00 2001
From: KirillKirill <kirill@hmt.ai>
Date: Fri, 10 Jul 2026 16:29:08 +0300
Subject: [PATCH 3/6] fix: wrong import

---
 .../src/shared/components/ui/table/table-header-cell.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-cell.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-cell.tsx
index b6730efb98..a0dfa345b0 100644
--- a/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-cell.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-cell.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import Popover from '@mui/material/Popover';
-import type { TableCellBaseProps } from '@mui/material/TableCell/TableCell';
+import type { TableCellBaseProps } from '@mui/material/TableCell';
 import { type IconType, TextHeaderWithIcon } from '../text-header-with-icon';
 
 type CommonProps = TableCellBaseProps & {

From 3319a22b23f76bd6205f0ab13ea76193bcde48e1 Mon Sep 17 00:00:00 2001
From: KirillKirill <kirill@hmt.ai>
Date: Fri, 10 Jul 2026 17:00:27 +0300
Subject: [PATCH 4/6] fix: address copilot feedback

---
 packages/apps/human-app/frontend/package.json  |  2 +-
 .../homepage/components/operator-sign-in.tsx   |  1 -
 .../layout/protected/page-header.tsx           |  2 +-
 .../data-entry/password/password.tsx           |  2 +-
 yarn.lock                                      | 18 +++++++++++++++++-
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/apps/human-app/frontend/package.json b/packages/apps/human-app/frontend/package.json
index 7d8fd7bce6..ab90b69bec 100644
--- a/packages/apps/human-app/frontend/package.json
+++ b/packages/apps/human-app/frontend/package.json
@@ -25,7 +25,7 @@
     "@hcaptcha/react-hcaptcha": "^1.14.0",
     "@hookform/resolvers": "^5.1.0",
     "@human-protocol/sdk": "workspace:*",
-    "@mui/icons-material": "^7.3.8",
+    "@mui/icons-material": "^9.2.0",
     "@mui/material": "^9.2.0",
     "@mui/x-date-pickers": "^9.2.0",
     "@reown/appkit": "^1.8.20",
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-in.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-in.tsx
index a09315b084..2c215be780 100644
--- a/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-in.tsx
+++ b/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-in.tsx
@@ -26,7 +26,6 @@ export function OperatorSignIn() {
   }, [address, isConnected, signInMutation]);
 
   const getSnackBar = () => {
-    console.log('1');
     return (
       <Snackbar
         message={getErrorMessageForError(signInMutationError)}
diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx
index 057cc57101..9d52ef024e 100644
--- a/packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx
+++ b/packages/apps/human-app/frontend/src/router/components/layout/protected/page-header.tsx
@@ -19,7 +19,7 @@ export function PageHeader({
     <Grid
       container
       sx={{
-        alignItems: 'space-between',
+        alignContent: 'space-between',
         justifyContent: 'space-between',
         px: 4,
         gap: 2,
diff --git a/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx b/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx
index 4555770659..5c51a96f55 100644
--- a/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx
+++ b/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx
@@ -44,7 +44,7 @@ export function Password(props: PasswordProps) {
         },
       }}
       onKeyDown={(e) => {
-        if (e.key === 'Space') {
+        if (e.key === ' ' || e.code === 'Space') {
           e.preventDefault();
           e.stopPropagation();
         }
diff --git a/yarn.lock b/yarn.lock
index 92c620480e..487e4236d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -425,7 +425,7 @@ __metadata:
     "@hcaptcha/react-hcaptcha": "npm:^1.14.0"
     "@hookform/resolvers": "npm:^5.1.0"
     "@human-protocol/sdk": "workspace:*"
-    "@mui/icons-material": "npm:^7.3.8"
+    "@mui/icons-material": "npm:^9.2.0"
     "@mui/material": "npm:^9.2.0"
     "@mui/x-date-pickers": "npm:^9.2.0"
     "@reown/appkit": "npm:^1.8.20"
@@ -7054,6 +7054,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/icons-material@npm:^9.2.0":
+  version: 9.2.0
+  resolution: "@mui/icons-material@npm:9.2.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.2"
+  peerDependencies:
+    "@mui/material": ^9.2.0
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/7fc499bdb1018f90c028983da136810ec7d0a9a9ecc7b40773d9c2d8c5d76c4c765d3859de2d9e3cccd9b0c44961d9a17417fbda9a68874f2bff5a471e1bd62f
+  languageName: node
+  linkType: hard
+
 "@mui/lab@npm:^7.0.0-beta.17":
   version: 7.0.0-beta.17
   resolution: "@mui/lab@npm:7.0.0-beta.17"

From d0ce15212ca4bd8f44d308e43ce149a77023650b Mon Sep 17 00:00:00 2001
From: KirillKirill <kirill@hmt.ai>
Date: Fri, 10 Jul 2026 17:21:05 +0300
Subject: [PATCH 5/6] chore: update typescript to v6

---
 packages/apps/human-app/frontend/package.json |  2 +-
 yarn.lock                                     | 22 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/apps/human-app/frontend/package.json b/packages/apps/human-app/frontend/package.json
index ab90b69bec..f3c078cde3 100644
--- a/packages/apps/human-app/frontend/package.json
+++ b/packages/apps/human-app/frontend/package.json
@@ -77,7 +77,7 @@
     "husky": "^9.1.6",
     "jsdom": "^29.1.1",
     "prettier": "^3.8.1",
-    "typescript": "^5.6.3",
+    "typescript": "^6.0.2",
     "typescript-eslint": "^8.57.0",
     "vite": "^6.2.4",
     "vitest": "^4.0.18"
diff --git a/yarn.lock b/yarn.lock
index 487e4236d4..8243482728 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -469,7 +469,7 @@ __metadata:
     react-number-format: "npm:^5.4.5"
     react-router-dom: "npm:^7.18.0"
     serve: "npm:^14.2.6"
-    typescript: "npm:^5.6.3"
+    typescript: "npm:^6.0.2"
     typescript-eslint: "npm:^8.57.0"
     viem: "npm:^2.52.2"
     vite: "npm:^6.2.4"
@@ -31092,6 +31092,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^6.0.2":
+  version: 6.0.3
+  resolution: "typescript@npm:6.0.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/4a25ff5045b984370f48f196b3a0120779b1b343d40b9a68d114ea5e5fff099809b2bb777576991a63a5cd59cf7bffd96ff6fe10afcefbcb8bd6fb96ad4b6606
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.5.4#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.6.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.8.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.9.2#optional!builtin<compat/typescript>":
   version: 5.9.3
   resolution: "typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>::version=5.9.3&hash=5786d5"
@@ -31102,6 +31112,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A^6.0.2#optional!builtin<compat/typescript>":
+  version: 6.0.3
+  resolution: "typescript@patch:typescript@npm%3A6.0.3#optional!builtin<compat/typescript>::version=6.0.3&hash=5786d5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/2f25c74e65663c248fa1ade2b8459d9ce5372ff9dad07067310f132966ebec1d93f6c42f0baf77a6b6a7a91460463f708e6887013aaade22111037457c6b25df
+  languageName: node
+  linkType: hard
+
 "typical@npm:^4.0.0":
   version: 4.0.0
   resolution: "typical@npm:4.0.0"

From 91137000e5bc1c3bf0ee2806a3358946b175e47f Mon Sep 17 00:00:00 2001
From: KirillKirill <kirill@hmt.ai>
Date: Tue, 14 Jul 2026 14:19:23 +0300
Subject: [PATCH 6/6] chore: remove unused files

---
 .../profile/components/add-api-key-modal.tsx  | 259 ----------------
 .../profile/components/api-key-data.tsx       | 105 -------
 .../components/delete-api-key-modal.tsx       | 123 --------
 .../profile/components/edit-api-key-modal.tsx | 289 ------------------
 .../profile/components/staking-info.tsx       | 225 --------------
 5 files changed, 1001 deletions(-)
 delete mode 100644 packages/apps/human-app/frontend/src/modules/worker/profile/components/add-api-key-modal.tsx
 delete mode 100644 packages/apps/human-app/frontend/src/modules/worker/profile/components/api-key-data.tsx
 delete mode 100644 packages/apps/human-app/frontend/src/modules/worker/profile/components/delete-api-key-modal.tsx
 delete mode 100644 packages/apps/human-app/frontend/src/modules/worker/profile/components/edit-api-key-modal.tsx
 delete mode 100644 packages/apps/human-app/frontend/src/modules/worker/profile/components/staking-info.tsx

diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/add-api-key-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/add-api-key-modal.tsx
deleted file mode 100644
index cb84fb1b0d..0000000000
--- a/packages/apps/human-app/frontend/src/modules/worker/profile/components/add-api-key-modal.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  Autocomplete,
-  Box,
-  FormControl,
-  FormHelperText,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { Controller, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import { Button } from '@/shared/components/ui/button';
-import { useIsMobile } from '@/shared/hooks';
-import {
-  useEnrollExchangeApiKeys,
-  useGetSupportedExchanges,
-} from '../../hooks/use-exchange-api-keys';
-import { ModalError, ModalLoading, ModalSuccess } from './modal-states';
-import { useEffect } from 'react';
-
-interface AddApiKeyModalProps {
-  onClose: () => void;
-  disableClose: (disable: boolean) => void;
-}
-
-export function AddApiKeyModal({ onClose, disableClose }: AddApiKeyModalProps) {
-  const { t } = useTranslation();
-  const {
-    mutate: enrollExchangeApiKey,
-    reset: resetMutation,
-    error,
-    isSuccess,
-    isPending,
-    isError,
-    isIdle,
-  } = useEnrollExchangeApiKeys();
-  const isMobile = useIsMobile();
-  const { data: supportedExchanges } = useGetSupportedExchanges();
-
-  useEffect(() => {
-    disableClose(isPending);
-  }, [isPending, disableClose]);
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-    reset,
-  } = useForm({
-    defaultValues: {
-      exchange: '',
-      apiKey: '',
-      secretKey: '',
-    },
-    resolver: zodResolver(
-      z.object({
-        exchange: z.string().min(1, t('validation.required')),
-        apiKey: z.string().trim().min(1, t('validation.required')),
-        secretKey: z.string().trim().min(1, t('validation.required')),
-      })
-    ),
-  });
-
-  useEffect(() => {
-    return () => {
-      reset();
-      resetMutation();
-    };
-  }, [reset, resetMutation]);
-
-  const onSubmit = (data: {
-    exchange: string;
-    apiKey: string;
-    secretKey: string;
-  }) => {
-    enrollExchangeApiKey(data);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack sx={{ gap: 2 }}>
-        <Typography variant="h4" sx={{ p: 1, textAlign: 'center' }}>
-          {isMobile
-            ? t('worker.profile.apiKeyData.connectApiKey')
-            : t('worker.profile.apiKeyData.connectYourApiKey')}
-        </Typography>
-        {isPending && <ModalLoading />}
-        {isIdle && (
-          <>
-            <Typography
-              variant="body2"
-              sx={{ textAlign: 'center', p: { xs: 1, md: 0 } }}
-            >
-              {t('worker.profile.apiKeyData.modalDescription')}
-            </Typography>
-            <Stack
-              direction={{ xs: 'column', md: 'row' }}
-              sx={{
-                gap: { xs: 2, md: 1 },
-                width: '100%',
-              }}
-            >
-              <FormControl
-                error={!!errors.exchange}
-                sx={{ width: { xs: '100%', md: '30%' } }}
-              >
-                <Controller
-                  name="exchange"
-                  control={control}
-                  render={({ field }) => (
-                    <Autocomplete
-                      options={
-                        supportedExchanges?.map((exchange) => exchange.name) ||
-                        []
-                      }
-                      getOptionLabel={(option) => {
-                        const exchange = supportedExchanges?.find(
-                          (exchange) => exchange.name === option
-                        );
-                        return exchange?.display_name || option || '';
-                      }}
-                      renderInput={(params) => (
-                        <TextField
-                          {...params}
-                          label={t('worker.profile.apiKeyData.exchange')}
-                        />
-                      )}
-                      renderOption={(props, option) => {
-                        const exchange = supportedExchanges?.find(
-                          (exchange) => exchange.name === option
-                        );
-                        return (
-                          <Box {...props} key={option} component="li">
-                            <Typography
-                              variant="body1"
-                              sx={{
-                                color: 'text.primary',
-                                textTransform: 'capitalize',
-                              }}
-                            >
-                              {exchange?.display_name || exchange?.name}
-                            </Typography>
-                          </Box>
-                        );
-                      }}
-                      {...field}
-                      onChange={(_, value) => field.onChange(value)}
-                    />
-                  )}
-                />
-                {errors.exchange && (
-                  <FormHelperText error>
-                    {errors.exchange.message}
-                  </FormHelperText>
-                )}
-              </FormControl>
-              <FormControl
-                error={!!errors.apiKey}
-                sx={{ width: { xs: '100%', md: '70%' } }}
-              >
-                <Controller
-                  name="apiKey"
-                  control={control}
-                  render={({ field }) => (
-                    <TextField
-                      type="text"
-                      label={t('worker.profile.apiKeyData.apiKey')}
-                      placeholder={t('worker.profile.apiKeyData.apiKey')}
-                      {...field}
-                    />
-                  )}
-                />
-                {errors.apiKey && (
-                  <FormHelperText error>{errors.apiKey.message}</FormHelperText>
-                )}
-              </FormControl>
-            </Stack>
-            <FormControl
-              error={!!errors.secretKey}
-              sx={{ mt: { xs: 0, md: 1 } }}
-            >
-              <Controller
-                name="secretKey"
-                control={control}
-                render={({ field }) => (
-                  <TextField
-                    type="password"
-                    autoComplete="new-password" // disables autofill from browser
-                    label={t('worker.profile.apiKeyData.apiSecret')}
-                    placeholder={t('worker.profile.apiKeyData.apiSecret')}
-                    {...field}
-                  />
-                )}
-              />
-              {errors.secretKey && (
-                <FormHelperText error>
-                  {errors.secretKey.message}
-                </FormHelperText>
-              )}
-            </FormControl>
-          </>
-        )}
-        {isSuccess && (
-          <ModalSuccess>
-            <Typography variant="body2" sx={{ textAlign: 'center' }}>
-              {t('worker.profile.apiKeyData.connectSuccess')}
-            </Typography>
-          </ModalSuccess>
-        )}
-        {isError && (
-          <ModalError
-            message={
-              typeof error?.message === 'string'
-                ? error?.message
-                : t('worker.profile.apiKeyData.connectError')
-            }
-          />
-        )}
-        {isIdle && (
-          <Button
-            type="submit"
-            variant="contained"
-            size="large"
-            sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto' }}
-          >
-            {t('worker.profile.apiKeyData.connectApiKey')}
-          </Button>
-        )}
-        {(isPending || isSuccess) && (
-          <Button
-            variant="contained"
-            size="large"
-            disabled={isPending}
-            sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto' }}
-            onClick={onClose}
-          >
-            {t('worker.profile.apiKeyData.close')}
-          </Button>
-        )}
-        {isError && (
-          <Button
-            variant="contained"
-            size="large"
-            fullWidth={isMobile}
-            sx={{ width: 'fit-content', mx: 'auto' }}
-            onClick={resetMutation}
-          >
-            {t('worker.profile.apiKeyData.edit')}
-          </Button>
-        )}
-        <Typography variant="caption" sx={{ textAlign: 'center' }}>
-          {t('worker.profile.apiKeyData.modalFooterAgreement')}
-        </Typography>
-      </Stack>
-    </form>
-  );
-}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/api-key-data.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/api-key-data.tsx
deleted file mode 100644
index a483011d17..0000000000
--- a/packages/apps/human-app/frontend/src/modules/worker/profile/components/api-key-data.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { IconButton, Stack, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Chip } from '@/shared/components/ui/chip';
-import { CustomTextField, CustomTextFieldDark } from './custom-text-field';
-import { useColorMode } from '@/shared/contexts/color-mode';
-import { DeleteIcon, EditIcon } from '@/shared/components/ui/icons';
-import {
-  useDeleteApiKeyModal,
-  useEditApiKeyModal,
-} from '../hooks/use-api-key-modals';
-import { useGetExchangeApiKeys } from '../../hooks/use-exchange-api-keys';
-
-export function ApiKeyData({
-  stakingExchangeError,
-}: {
-  stakingExchangeError?: string;
-}) {
-  const { isDarkMode } = useColorMode();
-  const { t } = useTranslation();
-  const { openModal: openEditApiKeyModal } = useEditApiKeyModal();
-  const { openModal: openDeleteApiKeyModal } = useDeleteApiKeyModal();
-  const { data: exchangeApiKeyData, isError: isExchangeApiKeyError } =
-    useGetExchangeApiKeys();
-
-  const textField = isDarkMode ? (
-    <CustomTextFieldDark
-      value={exchangeApiKeyData?.api_key || ''}
-      disabled
-      fullWidth
-      placeholder={t('worker.profile.apiKeyData.connectApiKey')}
-      sx={{
-        '& .MuiInputBase-input': {
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          pointerEvents: 'none',
-        },
-      }}
-    />
-  ) : (
-    <CustomTextField
-      value={exchangeApiKeyData?.api_key || ''}
-      disabled
-      fullWidth
-      placeholder={t('worker.profile.apiKeyData.connectApiKey')}
-      sx={{
-        '& .MuiInputBase-input': {
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          pointerEvents: 'none',
-        },
-      }}
-    />
-  );
-
-  return (
-    <Stack sx={{ gap: 1 }}>
-      <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
-        <Typography variant="buttonLarge">
-          {t('worker.profile.apiKeyData.apiKey')}
-        </Typography>
-        <Chip
-          label={
-            isExchangeApiKeyError || stakingExchangeError
-              ? t('worker.profile.apiKeyData.error')
-              : exchangeApiKeyData?.exchange_name
-                ? t('worker.profile.apiKeyData.apiKeyConnected')
-                : t('worker.profile.apiKeyData.apiKeyNotConnected')
-          }
-          backgroundColor={
-            isExchangeApiKeyError || stakingExchangeError
-              ? 'error.main'
-              : exchangeApiKeyData?.exchange_name
-                ? 'success.main'
-                : 'warning.main'
-          }
-        />
-      </Stack>
-      <Stack direction="row" sx={{ alignItems: 'center', gap: 2 }}>
-        {textField}
-        {exchangeApiKeyData?.exchange_name && (
-          <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
-            <IconButton
-              disableRipple
-              sx={{ p: 0, '&:hover': { bgcolor: 'inherit' } }}
-              onClick={() =>
-                openEditApiKeyModal(exchangeApiKeyData.exchange_name)
-              }
-            >
-              <EditIcon />
-            </IconButton>
-            <IconButton
-              disableRipple
-              sx={{ p: 0, '&:hover': { bgcolor: 'inherit' } }}
-              onClick={openDeleteApiKeyModal}
-            >
-              <DeleteIcon />
-            </IconButton>
-          </Stack>
-        )}
-      </Stack>
-    </Stack>
-  );
-}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/delete-api-key-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/delete-api-key-modal.tsx
deleted file mode 100644
index 10bf84cd71..0000000000
--- a/packages/apps/human-app/frontend/src/modules/worker/profile/components/delete-api-key-modal.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Stack, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Button } from '@/shared/components/ui/button';
-import { useIsMobile } from '@/shared/hooks';
-import { useDeleteExchangeApiKeys } from '../../hooks/use-exchange-api-keys';
-import { useEffect } from 'react';
-import { ModalError, ModalSuccess, ModalLoading } from './modal-states';
-
-interface DeleteApiKeyModalProps {
-  onClose: () => void;
-  disableClose: (disable: boolean) => void;
-}
-
-export function DeleteApiKeyModal({
-  onClose,
-  disableClose,
-}: DeleteApiKeyModalProps) {
-  const { t } = useTranslation();
-  const {
-    mutate: deleteExchangeApiKey,
-    reset: resetMutation,
-    isSuccess,
-    isError,
-    isPending,
-    isIdle,
-  } = useDeleteExchangeApiKeys();
-  const isMobile = useIsMobile();
-
-  const handleDeleteExchangeApiKey = () => {
-    deleteExchangeApiKey();
-  };
-
-  useEffect(() => {
-    disableClose(isPending);
-  }, [isPending, disableClose]);
-
-  useEffect(() => {
-    return () => {
-      resetMutation();
-    };
-  }, [resetMutation]);
-
-  return (
-    <Stack>
-      <Typography variant="h4" sx={{ p: 1, textAlign: 'center', mb: 2 }}>
-        {t('worker.profile.apiKeyData.deleteApiKey')}
-      </Typography>
-      {isPending && <ModalLoading />}
-      {isIdle && (
-        <>
-          <Typography variant="h6" sx={{ textAlign: 'center', mb: 1 }}>
-            {t('worker.profile.apiKeyData.deleteApiKeyConfirmation')}
-          </Typography>
-          <Typography
-            variant="body2"
-            sx={{ textAlign: 'center', mb: { xs: 2, md: 4 } }}
-          >
-            {t('worker.profile.apiKeyData.deleteApiKeyDescription')}
-          </Typography>
-        </>
-      )}
-      {isSuccess && (
-        <ModalSuccess>
-          <Typography variant="body2" sx={{ textAlign: 'center', my: 2 }}>
-            {t('worker.profile.apiKeyData.deleteKeySuccess')}
-          </Typography>
-        </ModalSuccess>
-      )}
-      {isError && (
-        <ModalError message={t('worker.profile.apiKeyData.deleteKeyError')} />
-      )}
-      {isIdle && (
-        <Stack
-          direction={{ xs: 'column', md: 'row' }}
-          sx={{
-            justifyContent: 'center',
-            width: '100%',
-            gap: 2,
-          }}
-        >
-          <Button
-            variant="contained"
-            size="large"
-            fullWidth={isMobile}
-            onClick={onClose}
-          >
-            {t('worker.profile.apiKeyData.cancel')}
-          </Button>
-          <Button
-            variant="contained"
-            size="large"
-            fullWidth={isMobile}
-            sx={{ bgcolor: 'primary.light' }}
-            onClick={handleDeleteExchangeApiKey}
-          >
-            {t('worker.profile.apiKeyData.deleteApiKey')}
-          </Button>
-        </Stack>
-      )}
-      {(isPending || isSuccess) && (
-        <Button
-          variant="contained"
-          size="large"
-          sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto', mt: 2 }}
-          onClick={isPending ? undefined : onClose}
-          disabled={isPending}
-        >
-          {t('worker.profile.apiKeyData.close')}
-        </Button>
-      )}
-      {isError && (
-        <Button
-          variant="contained"
-          size="large"
-          sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto' }}
-          onClick={resetMutation}
-        >
-          {t('worker.profile.apiKeyData.tryAgain')}
-        </Button>
-      )}
-    </Stack>
-  );
-}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/edit-api-key-modal.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/edit-api-key-modal.tsx
deleted file mode 100644
index 7d83d94dce..0000000000
--- a/packages/apps/human-app/frontend/src/modules/worker/profile/components/edit-api-key-modal.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  Autocomplete,
-  Box,
-  FormControl,
-  FormHelperText,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { Controller, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import { Button } from '@/shared/components/ui/button';
-import { useIsMobile } from '@/shared/hooks';
-import { useEffect } from 'react';
-import {
-  useEnrollExchangeApiKeys,
-  useGetSupportedExchanges,
-} from '../../hooks/use-exchange-api-keys';
-import { ModalError, ModalLoading, ModalSuccess } from './modal-states';
-
-interface EditApiKeyModalProps {
-  exchangeName: string;
-  onClose: () => void;
-  disableClose: (disable: boolean) => void;
-}
-
-export function EditApiKeyModal({
-  onClose,
-  exchangeName,
-  disableClose,
-}: EditApiKeyModalProps) {
-  const { t } = useTranslation();
-  const isMobile = useIsMobile();
-  const {
-    mutate: postExchangeApiKey,
-    reset: resetMutation,
-    error,
-    isSuccess,
-    isError,
-    isPending,
-    isIdle,
-  } = useEnrollExchangeApiKeys();
-  const { data: supportedExchanges } = useGetSupportedExchanges();
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-    reset,
-  } = useForm({
-    defaultValues: {
-      exchange: '',
-      apiKey: '',
-      secretKey: '',
-    },
-    resolver: zodResolver(
-      z.object({
-        exchange: z.string().min(1, t('validation.required')),
-        apiKey: z.string().trim().min(1, t('validation.required')),
-        secretKey: z.string().trim().min(1, t('validation.required')),
-      })
-    ),
-  });
-
-  useEffect(() => {
-    if (exchangeName && supportedExchanges) {
-      reset({
-        exchange: exchangeName,
-        apiKey: '',
-        secretKey: '',
-      });
-    }
-  }, [exchangeName, reset, supportedExchanges]);
-
-  useEffect(() => {
-    disableClose(isPending);
-  }, [isPending, disableClose]);
-
-  useEffect(() => {
-    return () => {
-      reset();
-      resetMutation();
-    };
-  }, [reset, resetMutation]);
-
-  const onSubmit = (data: {
-    exchange: string;
-    apiKey: string;
-    secretKey: string;
-  }) => {
-    postExchangeApiKey(data);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack sx={{ gap: 2 }}>
-        <Typography variant="h4" sx={{ p: 1, textAlign: 'center' }}>
-          {t('worker.profile.apiKeyData.editApiKey')}
-        </Typography>
-        {isPending && <ModalLoading />}
-        {isIdle && (
-          <>
-            <Typography
-              variant="body2"
-              sx={{ textAlign: 'center', p: { xs: 1, md: 0 } }}
-            >
-              {t('worker.profile.apiKeyData.modalDescription')}
-            </Typography>
-            <Stack
-              direction={{ xs: 'column', md: 'row' }}
-              sx={{
-                gap: { xs: 2, md: 1 },
-                width: '100%',
-              }}
-            >
-              <FormControl
-                error={!!errors.exchange}
-                sx={{ width: { xs: '100%', md: '30%' } }}
-              >
-                <Controller
-                  name="exchange"
-                  control={control}
-                  render={({ field }) => (
-                    <Autocomplete
-                      options={
-                        supportedExchanges?.map((exchange) => exchange.name) ||
-                        []
-                      }
-                      getOptionLabel={(option) => {
-                        const exchange = supportedExchanges?.find(
-                          (exchange) => exchange.name === option
-                        );
-                        return exchange?.display_name || option || '';
-                      }}
-                      renderInput={(params) => (
-                        <TextField
-                          {...params}
-                          label={t('worker.profile.apiKeyData.exchange')}
-                        />
-                      )}
-                      renderOption={(props, option) => {
-                        const exchange = supportedExchanges?.find(
-                          (exchange) => exchange.name === option
-                        );
-                        return (
-                          <Box {...props} key={option} component="li">
-                            <Typography
-                              variant="body1"
-                              sx={{
-                                color: 'text.primary',
-                                textTransform: 'capitalize',
-                              }}
-                            >
-                              {exchange?.display_name || exchange?.name}
-                            </Typography>
-                          </Box>
-                        );
-                      }}
-                      {...field}
-                      onChange={(_, value) => field.onChange(value)}
-                    />
-                  )}
-                />
-                {errors.exchange && (
-                  <FormHelperText error>
-                    {errors.exchange.message}
-                  </FormHelperText>
-                )}
-              </FormControl>
-              <FormControl
-                error={!!errors.exchange}
-                sx={{ width: { xs: '100%', md: '70%' } }}
-              >
-                <Controller
-                  name="apiKey"
-                  control={control}
-                  render={({ field }) => (
-                    <TextField
-                      type="text"
-                      label={t('worker.profile.apiKeyData.apiKey')}
-                      placeholder={t('worker.profile.apiKeyData.apiKey')}
-                      multiline={isMobile}
-                      minRows={1}
-                      maxRows={4}
-                      {...field}
-                    />
-                  )}
-                />
-                {errors.apiKey && (
-                  <FormHelperText error>{errors.apiKey.message}</FormHelperText>
-                )}
-              </FormControl>
-            </Stack>
-            <FormControl
-              error={!!errors.secretKey}
-              sx={{ mt: { xs: 0, md: 1 } }}
-            >
-              <Controller
-                name="secretKey"
-                control={control}
-                render={({ field }) => (
-                  <TextField
-                    type="password"
-                    autoComplete="new-password" // disables autofill from browser
-                    label={t('worker.profile.apiKeyData.apiSecret')}
-                    placeholder={t('worker.profile.apiKeyData.apiSecret')}
-                    {...field}
-                  />
-                )}
-              />
-              {errors.secretKey && (
-                <FormHelperText error>
-                  {errors.secretKey.message}
-                </FormHelperText>
-              )}
-            </FormControl>
-          </>
-        )}
-        {isSuccess && (
-          <ModalSuccess>
-            <Typography variant="body2" sx={{ textAlign: 'center' }}>
-              {t('worker.profile.apiKeyData.editSuccess')}
-            </Typography>
-          </ModalSuccess>
-        )}
-        {isError && (
-          <ModalError
-            message={
-              typeof error?.message === 'string'
-                ? error?.message
-                : t('worker.profile.apiKeyData.editError')
-            }
-          />
-        )}
-        {isIdle && (
-          <Stack
-            direction={{ xs: 'column', md: 'row' }}
-            sx={{
-              justifyContent: 'center',
-              width: '100%',
-              gap: 2,
-            }}
-          >
-            <Button
-              variant="contained"
-              size="large"
-              fullWidth={isMobile}
-              onClick={onClose}
-            >
-              {t('worker.profile.apiKeyData.cancel')}
-            </Button>
-            <Button
-              type="submit"
-              variant="contained"
-              size="large"
-              fullWidth={isMobile}
-              sx={{ bgcolor: 'primary.light' }}
-            >
-              {t('worker.profile.apiKeyData.saveChanges')}
-            </Button>
-          </Stack>
-        )}
-        {(isPending || isSuccess) && (
-          <Button
-            variant="contained"
-            size="large"
-            disabled={isPending}
-            sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto' }}
-            onClick={onClose}
-          >
-            {t('worker.profile.apiKeyData.close')}
-          </Button>
-        )}
-        {isError && (
-          <Button
-            variant="contained"
-            size="large"
-            sx={{ width: { xs: '100%', md: 'fit-content' }, mx: 'auto' }}
-            onClick={resetMutation}
-          >
-            {t('worker.profile.apiKeyData.edit')}
-          </Button>
-        )}
-      </Stack>
-    </form>
-  );
-}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/staking-info.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/staking-info.tsx
deleted file mode 100644
index d1ae872907..0000000000
--- a/packages/apps/human-app/frontend/src/modules/worker/profile/components/staking-info.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import {
-  Button,
-  IconButton,
-  Link,
-  Skeleton,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Chip } from '@/shared/components/ui/chip';
-import { env } from '@/shared/env';
-import { useAddApiKeyModal } from '../hooks/use-api-key-modals';
-import { ApiKeyData } from './';
-import { useGetStakingSummary } from '../../hooks/use-staking';
-import { RefreshIcon } from '@/shared/components/ui/icons';
-import { useGetExchangeApiKeys } from '../../hooks/use-exchange-api-keys';
-import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user';
-import { useEffect, useRef, useState } from 'react';
-import { useAccessTokenRefresh } from '@/api/hooks/use-access-token-refresh';
-import { colorPalette } from '@/shared/styles/color-palette';
-import { useGetUiConfig } from '@/shared/hooks/use-get-ui-config';
-import {
-  TopNotificationType,
-  useNotification,
-} from '@/shared/hooks/use-notification';
-
-export function StakingInfo() {
-  const [isPromptExpanded, setIsPromptExpanded] = useState(false);
-  const tokenRefreshLock = useRef(false);
-
-  const { user, updateUserData } = useAuthenticatedUser();
-  const { refreshAccessTokenAsync } = useAccessTokenRefresh();
-  const { t } = useTranslation();
-  const { showNotification } = useNotification();
-
-  const { openModal: openAddApiKeyModal } = useAddApiKeyModal();
-  const { data: exchangeApiKeyData, isLoading: isExchangeApiKeyLoading } =
-    useGetExchangeApiKeys();
-  const {
-    data: stakingSummary,
-    isLoading,
-    isError,
-    refetch,
-    isRefetching,
-  } = useGetStakingSummary();
-  const { data: uiConfig, isLoading: isUiConfigLoading } = useGetUiConfig();
-
-  const isConnectButtonDisabled =
-    !!exchangeApiKeyData?.exchange_name || isExchangeApiKeyLoading;
-
-  const stakedAmount =
-    Number(stakingSummary?.on_chain_stake || 0) +
-    Number(stakingSummary?.exchange_stake || 0);
-
-  const isStaked =
-    isLoading || isError || isUiConfigLoading
-      ? false
-      : stakedAmount >= Number(uiConfig?.minThreshold || '0');
-
-  useEffect(() => {
-    const stakingSummaryError =
-      stakingSummary?.on_chain_error || stakingSummary?.exchange_error;
-    if (stakingSummaryError && !isLoading && !isRefetching) {
-      showNotification({
-        type: TopNotificationType.WARNING,
-        message: stakingSummaryError,
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    isLoading,
-    isRefetching,
-    stakingSummary?.on_chain_error,
-    stakingSummary?.exchange_error,
-  ]);
-
-  useEffect(() => {
-    if (isRefetching || isLoading) return;
-
-    if (isStaked !== user.is_stake_eligible) {
-      if (!tokenRefreshLock.current) {
-        tokenRefreshLock.current = true;
-        updateUserData({ is_stake_eligible: isStaked });
-        void refreshAccessTokenAsync({ authType: 'web2' });
-      }
-    } else {
-      tokenRefreshLock.current = false;
-    }
-  }, [
-    isStaked,
-    user.is_stake_eligible,
-    refreshAccessTokenAsync,
-    isRefetching,
-    isLoading,
-    updateUserData,
-  ]);
-
-  const handleRefreshStakingInfo = () => {
-    if (isRefetching || isLoading) return;
-    tokenRefreshLock.current = false;
-    refetch();
-  };
-
-  return (
-    <Stack>
-      <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
-        <Typography variant="buttonLarge">
-          {t('worker.profile.stakingInfo.stakeHmt')}
-        </Typography>
-        {isLoading || isRefetching ? (
-          <Skeleton variant="text" width={100} height={23.5} />
-        ) : (
-          <Chip
-            label={
-              isError
-                ? t('worker.profile.stakingStatusValues.error')
-                : isStaked
-                  ? t('worker.profile.stakingStatusValues.staked')
-                  : t('worker.profile.stakingStatusValues.notStaked')
-            }
-            backgroundColor={isStaked ? 'success.main' : 'error.main'}
-          />
-        )}
-      </Stack>
-      <Typography variant="body2" sx={{ mt: 1 }}>
-        {isPromptExpanded
-          ? t('worker.profile.stakingInfo.prompt', {
-              amount: uiConfig?.minThreshold,
-            })
-          : t('worker.profile.stakingInfo.promptShort')}{' '}
-        {isPromptExpanded && (
-          <>
-            <br />
-            <Link
-              href="https://docs.humanprotocol.org/tutorials/workers/staking/#how-to-create-api-keys"
-              sx={{
-                textDecoration: 'underline',
-                fontWeight: '600',
-              }}
-              target="_blank"
-            >
-              {t('worker.profile.stakingInfo.howToCreateApiKeys')}
-            </Link>
-            <br />
-          </>
-        )}
-        <Button
-          variant="text"
-          size="small"
-          disableRipple
-          sx={{
-            p: 0,
-            minWidth: 'auto',
-            verticalAlign: 'baseline',
-            height: '20px',
-            textDecoration: 'underline',
-            '&:hover': {
-              textDecoration: 'underline',
-              backgroundColor: 'transparent',
-            },
-          }}
-          onClick={() => setIsPromptExpanded((prev) => !prev)}
-        >
-          {isPromptExpanded
-            ? t('worker.profile.stakingInfo.readLess')
-            : t('worker.profile.stakingInfo.readMore')}
-        </Button>
-      </Typography>
-      <Stack direction="row" sx={{ alignItems: 'center', mt: 2, gap: 1 }}>
-        <Typography variant="buttonLarge">
-          {t('worker.profile.stakingInfo.stakedAmount')}
-        </Typography>
-        <IconButton
-          disabled={isRefetching || isLoading}
-          sx={{
-            p: 0,
-            bgcolor: 'rgba(20, 6, 178, 0.04)',
-            borderRadius: '0px',
-            '& > svg > path': {
-              fill:
-                isRefetching || isLoading
-                  ? colorPalette.button.disabled
-                  : 'primary.main',
-            },
-          }}
-          onClick={handleRefreshStakingInfo}
-        >
-          <RefreshIcon />
-        </IconButton>
-      </Stack>
-      {isLoading || isRefetching ? (
-        <Skeleton variant="text" width={100} height={22.5} />
-      ) : (
-        <Typography
-          variant="buttonLarge"
-          sx={{ color: isStaked ? 'primary.light' : 'error.main' }}
-        >
-          <strong>{stakedAmount}</strong> HMT
-        </Typography>
-      )}
-      <Stack direction="row" sx={{ gap: 2, mt: 2, mb: 3 }}>
-        <Button
-          variant="contained"
-          size="small"
-          sx={{ py: 0.5, px: '10px' }}
-          onClick={() => window.open(env.VITE_STAKING_DASHBOARD_URL, '_blank')}
-        >
-          Add staking
-        </Button>
-        <Button
-          variant="contained"
-          size="small"
-          disabled={isConnectButtonDisabled}
-          sx={{ py: 0.5, px: '10px', bgcolor: 'primary.light' }}
-          onClick={() =>
-            isConnectButtonDisabled ? undefined : openAddApiKeyModal()
-          }
-        >
-          Connect API KEY
-        </Button>
-      </Stack>
-      <ApiKeyData stakingExchangeError={stakingSummary?.exchange_error} />
-    </Stack>
-  );
-}