humanprotocol · KirillKirill · Jul 10, 2026 · Jul 10, 2026 · Jul 10, 2026 · Jul 10, 2026
diff --git 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/packages/apps/human-app/frontend/package.json b/packages/apps/human-app/frontend/package.json
@@ -25,9 +25,8 @@
     "@hcaptcha/react-hcaptcha": "^1.14.0",
     "@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/icons-material": "^9.2.0",
+    "@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",
@@ -80,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/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/...es/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx b/...es/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/...s/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx b/...s/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
@@ -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-up.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/operator-sign-up.tsx
@@ -1,81 +1,87 @@
-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>
         <List
           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>