diff --git a/.hygen/generate/resource/create/page-content.ejs.t b/.hygen/generate/resource/create/page-content.ejs.t
index c72357c5..1f196b05 100644
--- a/.hygen/generate/resource/create/page-content.ejs.t
+++ b/.hygen/generate/resource/create/page-content.ejs.t
@@ -6,7 +6,7 @@ to: src/app/[language]/admin-panel/<%= h.inflection.transform(name, ['pluralize'
 import Button from "@mui/material/Button";
 import { useForm, FormProvider, useFormState } from "react-hook-form";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import * as yup from "yup";
diff --git a/.hygen/generate/resource/page-content.ejs.t b/.hygen/generate/resource/page-content.ejs.t
index 297f32ac..16047981 100644
--- a/.hygen/generate/resource/page-content.ejs.t
+++ b/.hygen/generate/resource/page-content.ejs.t
@@ -7,7 +7,7 @@ import { RoleEnum } from "@/services/api/types/role";
 import withPageRequiredAuth from "@/services/auth/with-page-required-auth";
 import { useTranslation } from "@/services/i18n/client";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useGet<%= h.inflection.transform(name, ['pluralize']) %>Query, <%= h.inflection.camelize(h.inflection.pluralize(name), true) %>QueryKeys } from "./queries/queries";
@@ -190,12 +190,12 @@ function <%= h.inflection.transform(name, ['pluralize']) %>() {
   return (
     <Container maxWidth="xl">
       <Grid container spacing={3} pt={3}>
-        <Grid container item spacing={3} xs={12}>
-          <Grid item xs>
+        <Grid container size={{ xs: 12 }} spacing={3}>
+          <Grid size="grow">
             <Typography variant="h3">{t("title")}</Typography>
           </Grid>
-          <Grid container item xs="auto" wrap="nowrap" spacing={2}>
-            <Grid item xs="auto">
+          <Grid container size="auto" wrap="nowrap" spacing={2}>
+            <Grid size="auto">
               <Button
                 variant="contained"
                 LinkComponent={Link}
@@ -208,7 +208,7 @@ function <%= h.inflection.transform(name, ['pluralize']) %>() {
           </Grid>
         </Grid>
 
-        <Grid item xs={12} mb={2}>
+        <Grid size={{ xs: 12 }} mb={2}>
           <TableVirtuoso
             useWindowScroll
             data={tableData}
diff --git a/src/app/[language]/admin-panel/page-content.tsx b/src/app/[language]/admin-panel/page-content.tsx
index c5ca7234..5b82bde5 100644
--- a/src/app/[language]/admin-panel/page-content.tsx
+++ b/src/app/[language]/admin-panel/page-content.tsx
@@ -4,7 +4,7 @@ import { RoleEnum } from "@/services/api/types/role";
 import withPageRequiredAuth from "@/services/auth/with-page-required-auth";
 import { useTranslation } from "@/services/i18n/client";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 
 function AdminPanel() {
@@ -13,7 +13,7 @@ function AdminPanel() {
   return (
     <Container maxWidth="md">
       <Grid container spacing={3} wrap="nowrap" pt={3}>
-        <Grid item>
+        <Grid>
           <Typography variant="h3" gutterBottom>
             {t("title")}
           </Typography>
diff --git a/src/app/[language]/admin-panel/users/create/page-content.tsx b/src/app/[language]/admin-panel/users/create/page-content.tsx
index 575be717..060a3c5e 100644
--- a/src/app/[language]/admin-panel/users/create/page-content.tsx
+++ b/src/app/[language]/admin-panel/users/create/page-content.tsx
@@ -3,7 +3,7 @@
 import Button from "@mui/material/Button";
 import { useForm, FormProvider, useFormState } from "react-hook-form";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import * as yup from "yup";
@@ -151,19 +151,19 @@ function FormCreateUser() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit} autoComplete="create-new-user">
           <Grid container spacing={2} mb={3} mt={3}>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Typography variant="h6">
                 {t("admin-panel-users-create:title")}
               </Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormAvatarInput<CreateUserFormData>
                 name="photo"
                 testId="photo"
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<CreateUserFormData>
                 name="email"
                 testId="new-user-email"
@@ -172,7 +172,7 @@ function FormCreateUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<CreateUserFormData>
                 name="password"
                 type="password"
@@ -182,7 +182,7 @@ function FormCreateUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<CreateUserFormData>
                 name="passwordConfirmation"
                 testId="new-user-password-confirmation"
@@ -193,7 +193,7 @@ function FormCreateUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<CreateUserFormData>
                 name="firstName"
                 testId="first-name"
@@ -201,7 +201,7 @@ function FormCreateUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<CreateUserFormData>
                 name="lastName"
                 testId="last-name"
@@ -209,7 +209,7 @@ function FormCreateUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormSelectInput<CreateUserFormData, Pick<Role, "id">>
                 name="role"
                 testId="role"
@@ -229,7 +229,7 @@ function FormCreateUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <CreateUserFormActions />
               <Box ml={1} component="span">
                 <Button
diff --git a/src/app/[language]/admin-panel/users/edit/[id]/page-content.tsx b/src/app/[language]/admin-panel/users/edit/[id]/page-content.tsx
index 70676034..5d140ec3 100644
--- a/src/app/[language]/admin-panel/users/edit/[id]/page-content.tsx
+++ b/src/app/[language]/admin-panel/users/edit/[id]/page-content.tsx
@@ -3,7 +3,7 @@
 import Button from "@mui/material/Button";
 import { useForm, FormProvider, useFormState } from "react-hook-form";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import * as yup from "yup";
@@ -204,16 +204,16 @@ function FormEditUser() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={3} mt={3}>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Typography variant="h6">
                 {t("admin-panel-users-edit:title1")}
               </Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormAvatarInput<EditUserFormData> name="photo" testId="photo" />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditUserFormData>
                 name="email"
                 testId="email"
@@ -221,7 +221,7 @@ function FormEditUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditUserFormData>
                 name="firstName"
                 testId="first-name"
@@ -229,7 +229,7 @@ function FormEditUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditUserFormData>
                 name="lastName"
                 testId="last-name"
@@ -237,7 +237,7 @@ function FormEditUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormSelectInput<EditUserFormData, Pick<Role, "id">>
                 name="role"
                 testId="role"
@@ -257,7 +257,7 @@ function FormEditUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <EditUserFormActions />
               <Box ml={1} component="span">
                 <Button
@@ -326,13 +326,13 @@ function FormChangePasswordUser() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={3} mt={3}>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Typography variant="h6">
                 {t("admin-panel-users-edit:title2")}
               </Typography>
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<ChangeUserPasswordFormData>
                 name="password"
                 type="password"
@@ -340,7 +340,7 @@ function FormChangePasswordUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<ChangeUserPasswordFormData>
                 name="passwordConfirmation"
                 label={t(
@@ -350,7 +350,7 @@ function FormChangePasswordUser() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <ChangePasswordUserFormActions />
               <Box ml={1} component="span">
                 <Button
diff --git a/src/app/[language]/admin-panel/users/page-content.tsx b/src/app/[language]/admin-panel/users/page-content.tsx
index 1719329c..71c5e698 100644
--- a/src/app/[language]/admin-panel/users/page-content.tsx
+++ b/src/app/[language]/admin-panel/users/page-content.tsx
@@ -4,7 +4,7 @@ import { RoleEnum } from "@/services/api/types/role";
 import withPageRequiredAuth from "@/services/auth/with-page-required-auth";
 import { useTranslation } from "@/services/i18n/client";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import {
   PropsWithChildren,
@@ -297,17 +297,17 @@ function Users() {
   return (
     <Container maxWidth="xl">
       <Grid container spacing={3} pt={3}>
-        <Grid container item spacing={3} xs={12}>
-          <Grid item xs>
+        <Grid container spacing={3} size={{ xs: 12 }}>
+          <Grid size="grow">
             <Typography variant="h3">
               {tUsers("admin-panel-users:title")}
             </Typography>
           </Grid>
-          <Grid container item xs="auto" wrap="nowrap" spacing={2}>
-            <Grid item xs="auto">
+          <Grid container size="auto" wrap="nowrap" spacing={2}>
+            <Grid size="auto">
               <UserFilter />
             </Grid>
-            <Grid item xs="auto">
+            <Grid size="auto">
               <Button
                 variant="contained"
                 LinkComponent={Link}
@@ -320,7 +320,7 @@ function Users() {
           </Grid>
         </Grid>
 
-        <Grid item xs={12} mb={2}>
+        <Grid size={{ xs: 12 }} mb={2}>
           <TableVirtuoso
             style={{ height: 500 }}
             data={result}
diff --git a/src/app/[language]/admin-panel/users/user-filter.tsx b/src/app/[language]/admin-panel/users/user-filter.tsx
index 01e6beb1..14405b19 100644
--- a/src/app/[language]/admin-panel/users/user-filter.tsx
+++ b/src/app/[language]/admin-panel/users/user-filter.tsx
@@ -5,7 +5,7 @@ import { Role, RoleEnum } from "@/services/api/types/role";
 import { useTranslation } from "@/services/i18n/client";
 import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Popover from "@mui/material/Popover";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -76,7 +76,7 @@ function UserFilter() {
             })}
           >
             <Grid container spacing={2} mb={3} mt={3}>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <FormMultipleSelectInput<UserFilterFormData, Pick<Role, "id">>
                   name="roles"
                   testId="roles"
@@ -106,7 +106,7 @@ function UserFilter() {
                   }
                 />
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <Button variant="contained" type="submit">
                   {t("admin-panel-users:filter.actions.apply")}
                 </Button>
diff --git a/src/app/[language]/confirm-email/page-content.tsx b/src/app/[language]/confirm-email/page-content.tsx
index 99b90b5e..67dbd75b 100644
--- a/src/app/[language]/confirm-email/page-content.tsx
+++ b/src/app/[language]/confirm-email/page-content.tsx
@@ -7,7 +7,7 @@ import { useAuthConfirmEmailService } from "@/services/api/services/auth";
 import { useRouter } from "next/navigation";
 import { useSnackbar } from "notistack";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import HTTP_CODES_ENUM from "@/services/api/types/http-codes";
 import { useTranslation } from "@/services/i18n/client";
 
@@ -47,7 +47,7 @@ export default function ConfirmEmail() {
   return (
     <Container maxWidth="sm">
       <Grid container>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <Box
             sx={{
               display: "flex",
diff --git a/src/app/[language]/confirm-new-email/page-content.tsx b/src/app/[language]/confirm-new-email/page-content.tsx
index 150e2e6d..43221c80 100644
--- a/src/app/[language]/confirm-new-email/page-content.tsx
+++ b/src/app/[language]/confirm-new-email/page-content.tsx
@@ -10,7 +10,7 @@ import {
 import { useRouter } from "next/navigation";
 import { useSnackbar } from "notistack";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import HTTP_CODES_ENUM from "@/services/api/types/http-codes";
 import { useTranslation } from "@/services/i18n/client";
 import useAuthActions from "@/services/auth/use-auth-actions";
@@ -76,7 +76,7 @@ export default function ConfirmNewEmail() {
   return (
     <Container maxWidth="sm">
       <Grid container>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <Box
             sx={{
               display: "flex",
diff --git a/src/app/[language]/forgot-password/page-content.tsx b/src/app/[language]/forgot-password/page-content.tsx
index db37c0e2..edfabc8e 100644
--- a/src/app/[language]/forgot-password/page-content.tsx
+++ b/src/app/[language]/forgot-password/page-content.tsx
@@ -4,7 +4,7 @@ import withPageRequiredGuest from "@/services/auth/with-page-required-guest";
 import { useForm, FormProvider, useFormState } from "react-hook-form";
 import { useAuthForgotPasswordService } from "@/services/api/services/auth";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import * as yup from "yup";
@@ -90,10 +90,10 @@ function Form() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={2}>
-            <Grid item xs={12} mt={3}>
+            <Grid size={{ xs: 12 }} mt={3}>
               <Typography variant="h6">{t("forgot-password:title")}</Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<ForgotPasswordFormData>
                 name="email"
                 label={t("forgot-password:inputs.email.label")}
@@ -102,7 +102,7 @@ function Form() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormActions />
             </Grid>
           </Grid>
diff --git a/src/app/[language]/page.tsx b/src/app/[language]/page.tsx
index 7ad715fe..0c4a1971 100644
--- a/src/app/[language]/page.tsx
+++ b/src/app/[language]/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { getServerTranslation } from "@/services/i18n";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import MuiLink from "@mui/material/Link";
 import { Trans } from "react-i18next/TransWithoutContext";
@@ -31,7 +31,7 @@ export default async function Home({ params }: Props) {
         direction="column"
         sx={{ height: "90vh", justifyContent: "space-between" }}
       >
-        <Grid item>
+        <Grid size="grow">
           <Typography variant="h3" data-testid="home-title" gutterBottom>
             {t("title")}
           </Typography>
@@ -52,7 +52,7 @@ export default async function Home({ params }: Props) {
             />
           </Typography>
         </Grid>
-        <Grid item sx={{ mx: "auto" }}>
+        <Grid sx={{ mx: "auto" }}>
           <MuiLink href="/privacy-policy">Privacy Policy</MuiLink>
         </Grid>
       </Grid>
diff --git a/src/app/[language]/password-change/page-content.tsx b/src/app/[language]/password-change/page-content.tsx
index ade6eca4..8b1788bd 100644
--- a/src/app/[language]/password-change/page-content.tsx
+++ b/src/app/[language]/password-change/page-content.tsx
@@ -4,7 +4,7 @@ import withPageRequiredGuest from "@/services/auth/with-page-required-guest";
 import { useForm, FormProvider, useFormState } from "react-hook-form";
 import { useAuthResetPasswordService } from "@/services/api/services/auth";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import * as yup from "yup";
@@ -85,7 +85,7 @@ function ExpiresAlert() {
 
   return (
     isExpired && (
-      <Grid item xs={12}>
+      <Grid size={{ xs: 12 }}>
         <Alert severity="error" data-testid="reset-link-expired-alert">
           {t("password-change:alerts.expired")}
         </Alert>
@@ -150,11 +150,11 @@ function Form() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={2}>
-            <Grid item xs={12} mt={3}>
+            <Grid size={{ xs: 12 }} mt={3}>
               <Typography variant="h6">{t("password-change:title")}</Typography>
             </Grid>
             <ExpiresAlert />
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<PasswordChangeFormData>
                 name="password"
                 label={t("password-change:inputs.password.label")}
@@ -162,7 +162,7 @@ function Form() {
                 testId="password"
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<PasswordChangeFormData>
                 name="passwordConfirmation"
                 label={t("password-change:inputs.passwordConfirmation.label")}
@@ -171,7 +171,7 @@ function Form() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormActions />
             </Grid>
           </Grid>
diff --git a/src/app/[language]/profile/edit/page-content.tsx b/src/app/[language]/profile/edit/page-content.tsx
index a22992f4..de66a941 100644
--- a/src/app/[language]/profile/edit/page-content.tsx
+++ b/src/app/[language]/profile/edit/page-content.tsx
@@ -4,7 +4,7 @@ import { useForm, FormProvider, useFormState } from "react-hook-form";
 import { useAuthPatchMeService } from "@/services/api/services/auth";
 import useAuthActions from "@/services/auth/use-auth-actions";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import * as yup from "yup";
@@ -210,17 +210,17 @@ function FormBasicInfo() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={3} mt={3}>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Typography variant="h6">{t("profile:title1")}</Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormAvatarInput<EditProfileBasicInfoFormData>
                 name="photo"
                 testId="photo"
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditProfileBasicInfoFormData>
                 name="firstName"
                 label={t("profile:inputs.firstName.label")}
@@ -228,7 +228,7 @@ function FormBasicInfo() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditProfileBasicInfoFormData>
                 name="lastName"
                 label={t("profile:inputs.lastName.label")}
@@ -236,7 +236,7 @@ function FormBasicInfo() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <BasicInfoFormActions />
               <Box ml={1} component="span">
                 <Button
@@ -309,13 +309,13 @@ function FormChangeEmail() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={3}>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Typography variant="h6">{t("profile:title2")}</Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Typography variant="body1">{user?.email}</Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditProfileChangeEmailFormData>
                 name="email"
                 label={t("profile:inputs.email.label")}
@@ -324,7 +324,7 @@ function FormChangeEmail() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditProfileChangeEmailFormData>
                 name="emailConfirmation"
                 label={t("profile:inputs.emailConfirmation.label")}
@@ -333,7 +333,7 @@ function FormChangeEmail() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <ChangeEmailFormActions />
               <Box ml={1} component="span">
                 <Button
@@ -408,10 +408,10 @@ function FormChangePassword() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={2}>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Typography variant="h6">{t("profile:title3")}</Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditProfileChangePasswordFormData>
                 name="oldPassword"
                 label={t("profile:inputs.oldPassword.label")}
@@ -420,7 +420,7 @@ function FormChangePassword() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditProfileChangePasswordFormData>
                 name="password"
                 label={t("profile:inputs.password.label")}
@@ -429,7 +429,7 @@ function FormChangePassword() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<EditProfileChangePasswordFormData>
                 name="passwordConfirmation"
                 label={t("profile:inputs.passwordConfirmation.label")}
@@ -438,7 +438,7 @@ function FormChangePassword() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <ChangePasswordFormActions />
               <Box ml={1} component="span">
                 <Button
diff --git a/src/app/[language]/profile/page-content.tsx b/src/app/[language]/profile/page-content.tsx
index 21b19456..fbc3b079 100644
--- a/src/app/[language]/profile/page-content.tsx
+++ b/src/app/[language]/profile/page-content.tsx
@@ -2,7 +2,7 @@
 import useAuth from "@/services/auth/use-auth";
 import withPageRequiredAuth from "@/services/auth/with-page-required-auth";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import Avatar from "@mui/material/Avatar";
 import { styled } from "@mui/material/styles";
@@ -21,14 +21,14 @@ function Profile() {
   return (
     <Container maxWidth="sm">
       <Grid container spacing={3} wrap="nowrap" pt={3}>
-        <Grid item xs="auto">
+        <Grid size="auto">
           <StyledAvatar
             alt={user?.firstName + " " + user?.lastName}
             data-testid="user-icon"
             src={user?.photo?.path}
           />
         </Grid>
-        <Grid item>
+        <Grid size="grow">
           <Typography variant="h3" gutterBottom data-testid="user-name">
             {user?.firstName} {user?.lastName}
           </Typography>
@@ -36,7 +36,7 @@ function Profile() {
             {user?.email}
           </Typography>
           <Grid container>
-            <Grid item>
+            <Grid>
               <Button
                 variant="contained"
                 color="primary"
diff --git a/src/app/[language]/sign-in/page-content.tsx b/src/app/[language]/sign-in/page-content.tsx
index 2c4e247c..5473b817 100644
--- a/src/app/[language]/sign-in/page-content.tsx
+++ b/src/app/[language]/sign-in/page-content.tsx
@@ -7,7 +7,7 @@ import { useAuthLoginService } from "@/services/api/services/auth";
 import useAuthActions from "@/services/auth/use-auth-actions";
 import useAuthTokens from "@/services/auth/use-auth-tokens";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import * as yup from "yup";
@@ -110,10 +110,10 @@ function Form() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={2}>
-            <Grid item xs={12} mt={3}>
+            <Grid size={{ xs: 12 }} mt={3}>
               <Typography variant="h6">{t("sign-in:title")}</Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<SignInFormData>
                 name="email"
                 label={t("sign-in:inputs.email.label")}
@@ -123,7 +123,7 @@ function Form() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<SignInFormData>
                 name="password"
                 label={t("sign-in:inputs.password.label")}
@@ -131,7 +131,7 @@ function Form() {
                 testId="password"
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <LinkItem
                 component={Link}
                 href="/forgot-password"
@@ -141,7 +141,7 @@ function Form() {
               </LinkItem>
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormActions />
 
               {IS_SIGN_UP_ENABLED && (
@@ -160,7 +160,7 @@ function Form() {
             </Grid>
 
             {[isGoogleAuthEnabled, isFacebookAuthEnabled].some(Boolean) && (
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <Divider sx={{ mb: 2 }}>
                   <Chip label={t("sign-in:or")} />
                 </Divider>
diff --git a/src/app/[language]/sign-up/page-content.tsx b/src/app/[language]/sign-up/page-content.tsx
index 2160e028..cebd4d35 100644
--- a/src/app/[language]/sign-up/page-content.tsx
+++ b/src/app/[language]/sign-up/page-content.tsx
@@ -9,7 +9,7 @@ import {
 import useAuthActions from "@/services/auth/use-auth-actions";
 import useAuthTokens from "@/services/auth/use-auth-tokens";
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import Typography from "@mui/material/Typography";
 import FormTextInput from "@/components/form/text-input/form-text-input";
 import FormCheckboxInput from "@/components/form/checkbox/form-checkbox";
@@ -144,10 +144,10 @@ function Form() {
       <Container maxWidth="xs">
         <form onSubmit={onSubmit}>
           <Grid container spacing={2} mb={2}>
-            <Grid item xs={12} mt={3}>
+            <Grid size={{ xs: 12 }} mt={3}>
               <Typography variant="h6">{t("sign-up:title")}</Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<SignUpFormData>
                 name="firstName"
                 label={t("sign-up:inputs.firstName.label")}
@@ -157,7 +157,7 @@ function Form() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<SignUpFormData>
                 name="lastName"
                 label={t("sign-up:inputs.lastName.label")}
@@ -166,7 +166,7 @@ function Form() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<SignUpFormData>
                 name="email"
                 label={t("sign-up:inputs.email.label")}
@@ -175,7 +175,7 @@ function Form() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormTextInput<SignUpFormData>
                 name="password"
                 label={t("sign-up:inputs.password.label")}
@@ -183,7 +183,7 @@ function Form() {
                 testId="password"
               />
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormCheckboxInput
                 name="policy"
                 label=""
@@ -202,7 +202,7 @@ function Form() {
               />
             </Grid>
 
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <FormActions />
               <Box ml={1} component="span">
                 <Button
@@ -218,7 +218,7 @@ function Form() {
             </Grid>
 
             {[isGoogleAuthEnabled, isFacebookAuthEnabled].some(Boolean) && (
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <Divider sx={{ mb: 2 }}>
                   <Chip label={t("sign-up:or")} />
                 </Divider>
diff --git a/src/components/form/select-with-search/form-select-with-search.tsx b/src/components/form/select-extended/form-select-extended.tsx
similarity index 77%
rename from src/components/form/select-with-search/form-select-with-search.tsx
rename to src/components/form/select-extended/form-select-extended.tsx
index 1e37bc30..0299eb50 100644
--- a/src/components/form/select-with-search/form-select-with-search.tsx
+++ b/src/components/form/select-extended/form-select-extended.tsx
@@ -22,18 +22,19 @@ import { ItemProps, ListProps, Virtuoso } from "react-virtuoso";
 import ListItemText from "@mui/material/ListItemText";
 import Box from "@mui/material/Box";
 
-type SelectWithSearchInputProps<T extends object> = {
+type SelectExtendedInputProps<T extends object> = {
   label: string;
-  searchLabel: string;
-  searchPlaceholder: string;
   error?: string;
   testId?: string;
   disabled?: boolean;
   options: T[];
   renderOption: (option: T) => React.ReactNode;
+  onEndReached?: () => void;
+  searchable?: boolean;
+  searchLabel: string;
+  searchPlaceholder: string;
   search?: string;
   onSearchChange?: (search: string) => void;
-  onEndReached?: () => void;
 };
 
 const MUIComponents = {
@@ -61,8 +62,8 @@ const MUIComponents = {
   },
 };
 
-function SelectWithSearchInputRaw<T extends object>(
-  props: SelectWithSearchInputProps<T> & {
+function SelectExtendedInputRaw<T extends object>(
+  props: SelectExtendedInputProps<T> & {
     name: string;
     value: T | undefined | null;
     onChange: (value: T) => void;
@@ -99,11 +100,13 @@ function SelectWithSearchInputRaw<T extends object>(
           data-testid={props.testId}
           helperText={props.error}
           disabled={props.disabled}
-          FormHelperTextProps={{
-            ["data-testid" as string]: `${props.testId}-error`,
-          }}
-          InputProps={{
-            readOnly: true,
+          slotProps={{
+            input: {
+              readOnly: true,
+            },
+            formHelperText: {
+              ["data-testid" as string]: `${props.testId}-error`,
+            },
           }}
         />
       </Box>
@@ -111,18 +114,20 @@ function SelectWithSearchInputRaw<T extends object>(
       {isOpen && (
         <Card>
           <CardContent>
-            <Box mb={0.5}>
-              <TextField
-                placeholder={props.searchPlaceholder}
-                value={props.search}
-                onChange={(e) => props.onSearchChange?.(e.target.value)}
-                label={props.searchLabel}
-                variant="outlined"
-                autoFocus
-                fullWidth
-                data-testid={`${props.testId}-search`}
-              />
-            </Box>
+            {props.searchable && (
+              <Box mb={0.5}>
+                <TextField
+                  placeholder={props.searchPlaceholder}
+                  value={props.search}
+                  onChange={(e) => props.onSearchChange?.(e.target.value)}
+                  label={props.searchLabel}
+                  variant="outlined"
+                  autoFocus
+                  fullWidth
+                  data-testid={`${props.testId}-search`}
+                />
+              </Box>
+            )}
 
             <Virtuoso
               style={{ height: "400px" }}
@@ -151,32 +156,33 @@ function SelectWithSearchInputRaw<T extends object>(
   );
 }
 
-const SelectWithSearchInput = forwardRef(SelectWithSearchInputRaw) as never as <
+const SelectExtendedInput = forwardRef(SelectExtendedInputRaw) as never as <
   T extends object,
 >(
-  props: SelectWithSearchInputProps<T> & {
+  props: SelectExtendedInputProps<T> & {
     name: string;
     value: T | undefined | null;
     onChange: (value: T) => void;
     onBlur: () => void;
   } & { ref?: ForwardedRef<HTMLDivElement | null> }
-) => ReturnType<typeof SelectWithSearchInputRaw>;
+) => ReturnType<typeof SelectExtendedInputRaw>;
 
-function FormSelectWithSearchInput<
+function FormSelectExtendedInput<
   TFieldValues extends FieldValues = FieldValues,
   T extends object = object,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >(
   props: Pick<ControllerProps<TFieldValues, TName>, "name" | "defaultValue"> &
-    SelectWithSearchInputProps<T>
+    SelectExtendedInputProps<T>
 ) {
   return (
     <Controller
       name={props.name}
       defaultValue={props.defaultValue}
       render={({ field, fieldState }) => (
-        <SelectWithSearchInput<T>
+        <SelectExtendedInput<T>
           {...field}
+          searchable={props.searchable}
           label={props.label}
           error={fieldState.error?.message}
           disabled={props.disabled}
@@ -194,4 +200,4 @@ function FormSelectWithSearchInput<
   );
 }
 
-export default FormSelectWithSearchInput;
+export default FormSelectExtendedInput;
diff --git a/src/components/form/text-input/form-text-input.tsx b/src/components/form/text-input/form-text-input.tsx
index 44c1931c..53d62f10 100644
--- a/src/components/form/text-input/form-text-input.tsx
+++ b/src/components/form/text-input/form-text-input.tsx
@@ -67,28 +67,30 @@ const TextInput = forwardRef<
       helperText={props.error}
       disabled={props.disabled}
       autoComplete={props.autoComplete}
-      FormHelperTextProps={{
-        ["data-testid" as string]: `${props.testId}-error`,
-      }}
       multiline={props.multiline}
       minRows={props.minRows}
       maxRows={props.maxRows}
-      InputProps={{
-        readOnly: props.readOnly,
-        inputComponent: props.inputComponent,
-        endAdornment:
-          props.type === "password" ? (
-            <InputAdornment position="end">
-              <IconButton
-                aria-label="toggle password visibility"
-                onClick={handleClickShowPassword}
-                onMouseDown={handleMouseDownPassword}
-                edge="end"
-              >
-                {isShowPassword ? <VisibilityOff /> : <Visibility />}
-              </IconButton>
-            </InputAdornment>
-          ) : undefined,
+      slotProps={{
+        formHelperText: {
+          ["data-testid" as string]: `${props.testId}-error`,
+        },
+        input: {
+          readOnly: props.readOnly,
+          inputComponent: props.inputComponent,
+          endAdornment:
+            props.type === "password" ? (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={handleClickShowPassword}
+                  onMouseDown={handleMouseDownPassword}
+                  edge="end"
+                >
+                  {isShowPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ) : undefined,
+        },
       }}
     />
   );
diff --git a/src/services/i18n/locales/en/sign-in.json b/src/services/i18n/locales/en/sign-in.json
index 086a7d4c..67dc23d9 100644
--- a/src/services/i18n/locales/en/sign-in.json
+++ b/src/services/i18n/locales/en/sign-in.json
@@ -12,7 +12,8 @@
         "required": "Email is required",
         "invalid": "Email is not valid",
         "server": {
-          "emailNotExists": "Email does not exist"
+          "emailNotExists": "Email does not exist",
+          "notFound": "Email does not exist"
         }
       }
     },
diff --git a/src/services/social-auth/social-auth.tsx b/src/services/social-auth/social-auth.tsx
index 8faead5b..1bcf7537 100644
--- a/src/services/social-auth/social-auth.tsx
+++ b/src/services/social-auth/social-auth.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import FacebookAuth from "./facebook/facebook-auth";
 import { isFacebookAuthEnabled } from "./facebook/facebook-config";
 import GoogleAuth from "./google/google-auth";
@@ -10,12 +10,12 @@ export default function SocialAuth() {
   return (
     <Grid container spacing={2}>
       {isGoogleAuthEnabled && (
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12 }}>
           <GoogleAuth />
         </Grid>
       )}
       {isFacebookAuthEnabled && (
-        <Grid container item xs={12} direction="column">
+        <Grid container size={{ xs: 12 }} direction="column">
           <FacebookAuth />
         </Grid>
       )}