diff --git a/components/alet.js b/components/alet.js
index a1285d8..805f3c6 100644
--- a/components/alet.js
+++ b/components/alet.js
@@ -6,7 +6,7 @@ import {
   DialogContent,
   DialogTitle,
   DialogActions
-} from '@material-ui/core'
+} from '@mui/material'
 
 export default function Alet({esOuve, meteEsOuve, handleKonfime}) {
   const handleFemen = () => {
diff --git a/components/awtis/awtis-biyografi.js b/components/awtis/awtis-biyografi.js
index 882c643..64ec97c 100644
--- a/components/awtis/awtis-biyografi.js
+++ b/components/awtis/awtis-biyografi.js
@@ -10,7 +10,7 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle
-} from '@material-ui/core'
+} from '@mui/material'
 
 import MizikBadjMeni from './mizik-badj-meni'
 
diff --git a/components/awtis/awtis-kat.js b/components/awtis/awtis-kat.js
index a7c2e8a..4126914 100644
--- a/components/awtis/awtis-kat.js
+++ b/components/awtis/awtis-kat.js
@@ -12,10 +12,10 @@ import {
   Collapse,
   IconButton,
   Typography
-} from '@material-ui/core'
+} from '@mui/material'
 
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import {styled} from '@material-ui/core/styles'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import {styled} from '@mui/material/styles'
 
 import MizikLis from './mizik-lis'
 import AwtisBiyografi from './awtis-biyografi'
@@ -73,58 +73,57 @@ export default function AwtisKat({anAwtis}) {
   }
 
   return (
-    (
-      <Root>
-        <Grid item xs={12} sm={6} lg={4}>
-          <Card className={classes.root}>
-            <CardActionArea onClick={handleClick}>
-              <CardMedia
-                className={classes.media}
-                component='img'
-                alt={alias}
-                image={`${foto.length > 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`}
-                title={alias}
-              />
-              <CardContent>
-                <Typography gutterBottom align='center' variant='h5' component='h2'>
-                  {alias}
-                </Typography>
-                <Typography align='center' variant='body2' color='textSecondary' component='h5'>
-                  {anAwtis.teks.length} tèks
-                </Typography>
-              </CardContent>
-            </CardActionArea>
+    <Root>
+      <Grid item xs={12} sm={6} lg={4}>
+        <Card className={classes.root}>
+          <CardActionArea onClick={handleClick}>
+            <CardMedia
+              className={classes.media}
+              component='img'
+              alt={alias}
+              image={`${foto.length > 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`}
+              title={alias}
+            />
+            <CardContent>
+              <Typography gutterBottom align='center' variant='h5' component='h2'>
+                {alias}
+              </Typography>
+              <Typography align='center' variant='body2' color='textSecondary' component='h5'>
+                {anAwtis.teks.length} tèks
+              </Typography>
+            </CardContent>
+          </CardActionArea>
 
-            <CardActions disableSpacing>
-              <IconButton
-                className={clsx(classes.expand, {
-                  [classes.expandOpen]: expanded
-                })}
-                aria-expanded={expanded}
-                aria-label='show more'
-                onClick={handleExpandClick}
-              >
-                <ExpandMoreIcon />
-              </IconButton>
-            </CardActions>
-            <Collapse unmountOnExit in={expanded} timeout='auto'>
-              <CardContent>
-                <MizikLis teks={teks} />
-              </CardContent>
-            </Collapse>
-          </Card>
-        </Grid>
-        {esByografiOuve && (
-          <AwtisBiyografi
-            alias={alias}
-            teks={teks}
-            biyografi={biyografi}
-            esByografiOuve={esByografiOuve}
-            meteEsByografiOuve={meteEsByografiOuve}
-          />
-        )}
-      </Root>
-    )
+          <CardActions disableSpacing>
+            <IconButton
+              className={clsx(classes.expand, {
+                [classes.expandOpen]: expanded
+              })}
+              aria-expanded={expanded}
+              aria-label='show more'
+              size='large'
+              onClick={handleExpandClick}
+            >
+              <ExpandMoreIcon />
+            </IconButton>
+          </CardActions>
+          <Collapse unmountOnExit in={expanded} timeout='auto'>
+            <CardContent>
+              <MizikLis teks={teks} />
+            </CardContent>
+          </Collapse>
+        </Card>
+      </Grid>
+      {esByografiOuve && (
+        <AwtisBiyografi
+          alias={alias}
+          teks={teks}
+          biyografi={biyografi}
+          esByografiOuve={esByografiOuve}
+          meteEsByografiOuve={meteEsByografiOuve}
+        />
+      )}
+    </Root>
   )
 }
 
diff --git a/components/awtis/mizik-badj-meni.js b/components/awtis/mizik-badj-meni.js
index ea0214a..1a8b551 100644
--- a/components/awtis/mizik-badj-meni.js
+++ b/components/awtis/mizik-badj-meni.js
@@ -11,10 +11,10 @@ import {
   Paper,
   Popper,
   Badge
-} from '@material-ui/core'
+} from '@mui/material'
 
-import {styled} from '@material-ui/core/styles'
-import MenuBookIcon from '@material-ui/icons/MenuBook'
+import {styled} from '@mui/material/styles'
+import MenuBookIcon from '@mui/icons-material/MenuBook'
 
 const PREFIX = 'mizik-badj-meni'
 
diff --git a/components/awtis/mizik-lis.js b/components/awtis/mizik-lis.js
index 4409089..9c637ab 100644
--- a/components/awtis/mizik-lis.js
+++ b/components/awtis/mizik-lis.js
@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 
-import {styled} from '@material-ui/core/styles'
-import {List, ListItem, ListItemText} from '@material-ui/core'
-import FiberNewOutlinedIcon from '@material-ui/icons/FiberNewOutlined'
-import LibraryMusicIcon from '@material-ui/icons/LibraryMusic'
-import ExplicitIcon from '@material-ui/icons/Explicit'
+import {styled} from '@mui/material/styles'
+import {List, ListItem, ListItemText} from '@mui/material'
+import FiberNewOutlinedIcon from '@mui/icons-material/FiberNewOutlined'
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic'
+import ExplicitIcon from '@mui/icons-material/Explicit'
 
 import {esBrandNew} from '../../lib/date'
 
diff --git a/components/awtis/pajinasyon.js b/components/awtis/pajinasyon.js
index d031284..0f0a2eb 100644
--- a/components/awtis/pajinasyon.js
+++ b/components/awtis/pajinasyon.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
-import {styled} from '@material-ui/core/styles'
-import Pagination from '@material-ui/lab/Pagination'
-import {Grid} from '@material-ui/core'
+import {styled} from '@mui/material/styles'
+import Pagination from '@mui/material/Pagination'
+import {Grid} from '@mui/material'
 
 const PREFIX = 'pajinasyon'
 
diff --git a/components/cgu/cgu-dialog.js b/components/cgu/cgu-dialog.js
index c08bb34..f8ada69 100644
--- a/components/cgu/cgu-dialog.js
+++ b/components/cgu/cgu-dialog.js
@@ -1,7 +1,7 @@
 import {useRef, useEffect} from 'react'
 import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
-import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography} from '@material-ui/core'
+import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography} from '@mui/material'
 import {useRouter} from 'next/router'
 import Cgu from '.'
 
diff --git a/components/cgu/index.js b/components/cgu/index.js
index ed75789..c037e5d 100644
--- a/components/cgu/index.js
+++ b/components/cgu/index.js
@@ -1,6 +1,6 @@
-import {List, ListItem, ListItemText, Link, Typography, ListItemIcon} from '@material-ui/core'
+import {List, ListItem, ListItemText, Link, Typography, ListItemIcon} from '@mui/material'
 import {styled} from '@mui/material/styles'
-import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'
+import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
 
 const PREFIX = 'index'
 
diff --git a/components/footer.js b/components/footer.js
index 30a5739..be5aa2e 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,6 +1,6 @@
 import {useState} from 'react'
 import {styled} from '@mui/material/styles'
-import {Container, Link, Typography} from '@material-ui/core'
+import {Container, Link, Typography} from '@mui/material'
 import CGUDialog from './cgu/cgu-dialog'
 
 const PREFIX = 'footer'
@@ -19,7 +19,7 @@ const Root = styled('div')((
     padding: theme.spacing(3, 2),
     marginTop: 'auto',
     backgroundColor:
-      theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800]
+      theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[800]
   },
 
   [`& .${classes.text}`]: {
diff --git a/components/kat-kay-la.js b/components/kat-kay-la.js
index f5dc040..9741a35 100644
--- a/components/kat-kay-la.js
+++ b/components/kat-kay-la.js
@@ -6,8 +6,8 @@ import {
   CardActionArea,
   Typography,
   Grid
-} from '@material-ui/core'
-import {styled} from '@material-ui/core/styles'
+} from '@mui/material'
+import {styled} from '@mui/material/styles'
 
 const PREFIX = 'kat-kay-la'
 
diff --git a/components/komante/ekri-komante.js b/components/komante/ekri-komante.js
index 5c9bba7..db6d734 100644
--- a/components/komante/ekri-komante.js
+++ b/components/komante/ekri-komante.js
@@ -8,8 +8,8 @@ import {
   Snackbar,
   LinearProgress,
   Typography
-} from '@material-ui/core'
-import MuiAlert from '@material-ui/lab/Alert'
+} from '@mui/material'
+import MuiAlert from '@mui/material/Alert'
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
 
diff --git a/components/komante/komante-list.js b/components/komante/komante-list.js
index cfb0b42..adb3c65 100644
--- a/components/komante/komante-list.js
+++ b/components/komante/komante-list.js
@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types'
 import {format} from 'date-fns'
 import {fr} from 'date-fns/locale'
-import {styled} from '@material-ui/core/styles'
+import {styled} from '@mui/material/styles'
 
 import {
   Typography,
   Divider,
   List,
   ListItemText
-} from '@material-ui/core'
+} from '@mui/material'
 
 import {formatJsonString} from '../../lib/utils/format'
 
diff --git a/components/komante/vwe-komante.js b/components/komante/vwe-komante.js
index f8d4025..712c07c 100644
--- a/components/komante/vwe-komante.js
+++ b/components/komante/vwe-komante.js
@@ -13,8 +13,8 @@ import {
   Typography,
   Tooltip,
   Zoom
-} from '@material-ui/core'
-import AddCommentIcon from '@material-ui/icons/AddComment'
+} from '@mui/material'
+import AddCommentIcon from '@mui/icons-material/AddComment'
 import {useRouter} from 'next/router'
 import Koneksyon from '../sesyon/koneksyon'
 import KomanteList from './komante-list'
@@ -70,75 +70,80 @@ export default function VweKomante({komante, teks}) {
   }, [esOuve])
 
   return (
-    (
-      <Root>
-        <KomanteTooltip
-          title='Komantè'
-          placement='bottom'
-          TransitionComponent={Zoom}
-          classes={{
-            tooltip: classes.tooltip
-          }}
+    <Root>
+      <KomanteTooltip
+        title='Komantè'
+        placement='bottom'
+        TransitionComponent={Zoom}
+        classes={{
+          tooltip: classes.tooltip
+        }}
+      >
+        <IconButton
+          className={classes.margin}
+          color='primary'
+          aria-label='commentaire'
+          component='span'
+          size='large'
+          onClick={handleClick}
         >
-          <IconButton className={classes.margin} color='primary' aria-label='commentaire' component='span' onClick={handleClick}>
-            <AddCommentIcon />
-          </IconButton>
-        </KomanteTooltip>
-        <Dialog
-          open={esOuve}
-          scroll='paper'
-          aria-labelledby='scroll-dialog-title'
-          aria-describedby='scroll-dialog-description'
-          onClose={handleClose}
-        >
-          <DialogTitle align='center' id='scroll-dialog-title'>Kòmantè</DialogTitle>
-          <DialogContent dividers>
-            <Typography
-              ref={descriptionElementRef}
-              variant='inherit'
-              id='scroll-dialog-description'
-              tabIndex={-1}
-            >
-              {komante.length > 0 ? (
-                <KomanteList komante={komante} />
-              ) : (
-                <Typography align='center'>
-                  Aucun
-                </Typography>
-              )}
-            </Typography>
-          </DialogContent>
-          <DialogActions align='center' >
-            {session && session.user && !esKomenteOuve && (
-              <Button fullWidth color='primary' onClick={() => meteEsKomanteOuve(true)}>
-                Ajouter un commentaire
-              </Button>
+          <AddCommentIcon />
+        </IconButton>
+      </KomanteTooltip>
+      <Dialog
+        open={esOuve}
+        scroll='paper'
+        aria-labelledby='scroll-dialog-title'
+        aria-describedby='scroll-dialog-description'
+        onClose={handleClose}
+      >
+        <DialogTitle align='center' id='scroll-dialog-title'>Kòmantè</DialogTitle>
+        <DialogContent dividers>
+          <Typography
+            ref={descriptionElementRef}
+            variant='inherit'
+            id='scroll-dialog-description'
+            tabIndex={-1}
+          >
+            {komante.length > 0 ? (
+              <KomanteList komante={komante} />
+            ) : (
+              <Typography align='center'>
+                Aucun
+              </Typography>
             )}
-            {!session && !esKoneksyonOuve && (
-              <Button fullWidth color='primary' onClick={() => meteEsKoneksyonOuve(true)}>
-                Se connecter pour commenter
-              </Button>
-            )}
-            {!session && esKoneksyonOuve && (
-              <Koneksyon chimen={router.asPath} />
-            )}
-          </DialogActions>
-          {!session && esKoneksyonOuve && (
-            <Button style={{marginBottom: 10}} color='primary' onClick={() => meteEsKoneksyonOuve(false)}>
-              Annuler
+          </Typography>
+        </DialogContent>
+        <DialogActions align='center' >
+          {session && session.user && !esKomenteOuve && (
+            <Button fullWidth color='primary' onClick={() => meteEsKomanteOuve(true)}>
+              Ajouter un commentaire
             </Button>
           )}
-          {session && session.user && esKomenteOuve && (
-            <>
-              <EkriKomante session={session} teks={teks} meteEsKomanteOuve={meteEsKomanteOuve} />
-              <Button fullWidth style={{marginBottom: 10}} color='primary' onClick={() => meteEsKomanteOuve(false)}>
-                Fermer
-              </Button>
-            </>
+          {!session && !esKoneksyonOuve && (
+            <Button fullWidth color='primary' onClick={() => meteEsKoneksyonOuve(true)}>
+              Se connecter pour commenter
+            </Button>
           )}
-        </Dialog>
-      </Root>
-    )
+          {!session && esKoneksyonOuve && (
+            <Koneksyon chimen={router.asPath} />
+          )}
+        </DialogActions>
+        {!session && esKoneksyonOuve && (
+          <Button style={{marginBottom: 10}} color='primary' onClick={() => meteEsKoneksyonOuve(false)}>
+            Annuler
+          </Button>
+        )}
+        {session && session.user && esKomenteOuve && (
+          <>
+            <EkriKomante session={session} teks={teks} meteEsKomanteOuve={meteEsKomanteOuve} />
+            <Button fullWidth style={{marginBottom: 10}} color='primary' onClick={() => meteEsKomanteOuve(false)}>
+              Fermer
+            </Button>
+          </>
+        )}
+      </Dialog>
+    </Root>
   )
 }
 
diff --git a/components/navigasyon.js b/components/navigasyon.js
index 588343c..69aa9a3 100644
--- a/components/navigasyon.js
+++ b/components/navigasyon.js
@@ -2,16 +2,16 @@ import {useState} from 'react'
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 
-import {styled} from '@material-ui/core/styles'
-import AppBar from '@material-ui/core/AppBar'
-import Tabs from '@material-ui/core/Tabs'
-import Tab from '@material-ui/core/Tab'
-import HomeIcon from '@material-ui/icons/Home'
-import MenuBookIcon from '@material-ui/icons/MenuBook'
-import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver'
-import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
-import Typography from '@material-ui/core/Typography'
-import Box from '@material-ui/core/Box'
+import {styled} from '@mui/material/styles'
+import AppBar from '@mui/material/AppBar'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import HomeIcon from '@mui/icons-material/Home'
+import MenuBookIcon from '@mui/icons-material/MenuBook'
+import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver'
+import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
 
 const PREFIX = 'navigasyon'
 
@@ -98,12 +98,12 @@ export default function Navigasyon({selectedTab}) {
         <Tabs
           value={selectedTab}
           variant='fullWidth'
-          scrollButtons='on'
+          scrollButtons
           indicatorColor='primary'
           textColor='primary'
           aria-label='scrollable force tabs example'
           onChange={handleChange}
-        >
+          allowScrollButtonsMobile>
           <Tab label='Kay-la' icon={<HomeIcon style={{fontSize: 30}} />} {...a11yProps(0)} />
           <Tab label='Tèks' icon={<MenuBookIcon style={{fontSize: 30}} />} {...a11yProps(1)} />
           <Tab label='Awtis' icon={<RecordVoiceOverIcon style={{fontSize: 30}} />} {...a11yProps(2)} />
@@ -115,7 +115,7 @@ export default function Navigasyon({selectedTab}) {
       <TabPanel value={value} index={2} />
       <TabPanel value={value} index={3} />
     </div>
-  )
+  );
 }
 
 Navigasyon.propTypes = {
diff --git a/components/rezo-menu.js b/components/rezo-menu.js
index 606b1f2..a22335f 100644
--- a/components/rezo-menu.js
+++ b/components/rezo-menu.js
@@ -2,8 +2,8 @@ import {useRef, useState} from 'react'
 import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
-import {Button, ListItemIcon, ListItemText, Menu, MenuItem} from '@material-ui/core'
-import PublicIcon from '@material-ui/icons/Public'
+import {Button, ListItemIcon, ListItemText, Menu, MenuItem} from '@mui/material'
+import PublicIcon from '@mui/icons-material/Public'
 
 const PREFIX = 'rezo-menu'
 
diff --git a/components/sesyon/dekoneksyon.js b/components/sesyon/dekoneksyon.js
index 2a8430a..e570ce0 100644
--- a/components/sesyon/dekoneksyon.js
+++ b/components/sesyon/dekoneksyon.js
@@ -3,8 +3,8 @@ import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import Link from 'next/link'
 import {signOut} from 'next-auth/client'
-import {Tooltip, Fab, Zoom} from '@material-ui/core'
-import ExitToAppIcon from '@material-ui/icons/ExitToApp'
+import {Tooltip, Fab, Zoom} from '@mui/material'
+import ExitToAppIcon from '@mui/icons-material/ExitToApp'
 
 import Alet from '../alet'
 
diff --git a/components/sesyon/koneksyon.js b/components/sesyon/koneksyon.js
index 3a227e0..1852f6d 100644
--- a/components/sesyon/koneksyon.js
+++ b/components/sesyon/koneksyon.js
@@ -15,9 +15,9 @@ import {
   LinearProgress,
   Snackbar,
   Typography
-} from '@material-ui/core'
-import {Visibility, VisibilityOff} from '@material-ui/icons'
-import MuiAlert from '@material-ui/lab/Alert'
+} from '@mui/material'
+import {Visibility, VisibilityOff} from '@mui/icons-material'
+import MuiAlert from '@mui/material/Alert'
 import {Google} from '@icons-pack/react-simple-icons'
 
 import {validateEmail} from '../../lib/utils/emails'
@@ -141,6 +141,7 @@ function Koneksyon({detay, tit, soutit, titGwose, chimen}) {
             <InputAdornment position='end'>
               <IconButton
                 aria-label='password visibility'
+                size='large'
                 onClick={handleClickShowPassword}
                 onMouseDown={handleMouseDownPassword}
               >
diff --git a/components/sesyon/login-provider.js b/components/sesyon/login-provider.js
index 5c5008a..89287b4 100644
--- a/components/sesyon/login-provider.js
+++ b/components/sesyon/login-provider.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import Link from 'next/link'
 import {signIn} from 'next-auth/client'
-import {Button} from '@material-ui/core'
+import {Button} from '@mui/material'
 
 export default function LoginProvider({id, title, icon, callbackUrl}) {
   const hanleClick = event => {
diff --git a/components/soumet/ajoute-tradiksyon.js b/components/soumet/ajoute-tradiksyon.js
index 0c5e7a2..8d33d9f 100644
--- a/components/soumet/ajoute-tradiksyon.js
+++ b/components/soumet/ajoute-tradiksyon.js
@@ -1,7 +1,7 @@
 import {useState} from 'react'
 import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
-import {MenuItem, Menu, Button} from '@material-ui/core'
+import {MenuItem, Menu, Button} from '@mui/material'
 import {uniq} from 'lodash'
 
 const PREFIX = 'AjouteTradiksyon'
diff --git a/components/soumet/ekri-teks.js b/components/soumet/ekri-teks.js
index 91892ad..976969e 100644
--- a/components/soumet/ekri-teks.js
+++ b/components/soumet/ekri-teks.js
@@ -18,9 +18,9 @@ import {
   TextField,
   Tooltip,
   Typography
-} from '@material-ui/core'
-import MuiAlert from '@material-ui/lab/Alert'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import MuiAlert from '@mui/material/Alert'
+import CloseIcon from '@mui/icons-material/Close'
 
 import AjouteTradiksyon from './ajoute-tradiksyon'
 
@@ -244,6 +244,7 @@ function EkriTeks({session}) {
                       style={{bottom: 75}}
                       aria-label='remove-tradiksyon'
                       edge='end'
+                      size='large'
                       onClick={() => handleRemoveTradiksyon(k)}
                     >
                       <CloseIcon />
diff --git a/components/switch-theme.js b/components/switch-theme.js
index d00aaef..99a3d51 100644
--- a/components/switch-theme.js
+++ b/components/switch-theme.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import {styled} from '@mui/material/styles'
-import WbSunnyIcon from '@material-ui/icons/WbSunny'
-import Brightness3Icon from '@material-ui/icons/Brightness3'
-import {Box} from '@material-ui/core'
+import WbSunnyIcon from '@mui/icons-material/WbSunny'
+import Brightness3Icon from '@mui/icons-material/Brightness3'
+import {Box} from '@mui/material'
 
 const PREFIX = 'switch-theme'
 
diff --git a/components/teks/denye-teks.js b/components/teks/denye-teks.js
index 89d4ecb..97bb23d 100644
--- a/components/teks/denye-teks.js
+++ b/components/teks/denye-teks.js
@@ -1,4 +1,4 @@
-import {Container, Grid} from '@material-ui/core'
+import {Container, Grid} from '@mui/material'
 
 import {styled} from '@mui/material/styles'
 
diff --git a/components/teks/drawer-bar.js b/components/teks/drawer-bar.js
index 34265a3..35c85b9 100644
--- a/components/teks/drawer-bar.js
+++ b/components/teks/drawer-bar.js
@@ -9,9 +9,9 @@ import {
   FormControl,
   InputAdornment,
   InputBase
-} from '@material-ui/core'
+} from '@mui/material'
 
-import SearchIcon from '@material-ui/icons/Search'
+import SearchIcon from '@mui/icons-material/Search'
 
 import MizikLis from '../awtis/mizik-lis'
 
diff --git a/components/teks/entegre-mizik.js b/components/teks/entegre-mizik.js
index 41e13c6..22fffb1 100644
--- a/components/teks/entegre-mizik.js
+++ b/components/teks/entegre-mizik.js
@@ -1,4 +1,4 @@
-import {Box, IconButton, Typography} from '@material-ui/core'
+import {Box, IconButton, Typography} from '@mui/material'
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 
@@ -126,7 +126,12 @@ function EntegreMizik({anTeks, isMobile}) {
       </Typography>
 
       {!okiMizikID && filteredKouteyAchtey.map(({_id, boutik, url}) => (
-        <IconButton key={_id} aria-label='player' onClick={() => handleClick(boutik, url)}>
+        <IconButton
+          key={_id}
+          aria-label='player'
+          size='large'
+          onClick={() => handleClick(boutik, url)}
+        >
           {kouteyAchteyIcons[boutik]}
         </IconButton>
       ))}
diff --git a/components/teks/oki-mizik.js b/components/teks/oki-mizik.js
index e8d5a8d..86b376a 100644
--- a/components/teks/oki-mizik.js
+++ b/components/teks/oki-mizik.js
@@ -1,4 +1,4 @@
-import {Typography, Link, Box} from '@material-ui/core'
+import {Typography, Link, Box} from '@mui/material'
 import PropTypes from 'prop-types'
 
 const MIZIK_URL = process.env.NEXT_PUBLIC_OKI_MIZIK_URL || 'https://funkwhale-server.com'
diff --git a/components/teks/pataje.js b/components/teks/pataje.js
index a7cbf16..ab4810f 100644
--- a/components/teks/pataje.js
+++ b/components/teks/pataje.js
@@ -1,14 +1,14 @@
 import {useState} from 'react'
 import PropTypes from 'prop-types'
 
-import {styled} from '@material-ui/core/styles'
-import SpeedDial from '@material-ui/lab/SpeedDial'
-import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon'
-import SpeedDialAction from '@material-ui/lab/SpeedDialAction'
-import FileCopyIcon from '@material-ui/icons/FileCopyOutlined'
-import ShareIcon from '@material-ui/icons/Share'
-import TwitterIcon from '@material-ui/icons/Twitter'
-import {Backdrop} from '@material-ui/core'
+import {styled} from '@mui/material/styles'
+import SpeedDial from '@mui/material/SpeedDial'
+import SpeedDialIcon from '@mui/material/SpeedDialIcon'
+import SpeedDialAction from '@mui/material/SpeedDialAction'
+import FileCopyIcon from '@mui/icons-material/FileCopyOutlined'
+import ShareIcon from '@mui/icons-material/Share'
+import TwitterIcon from '@mui/icons-material/Twitter'
+import {Backdrop} from '@mui/material'
 
 const PREFIX = 'pataje'
 
diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js
index ae7be1c..f2a98a5 100644
--- a/components/teks/teks-drawer.js
+++ b/components/teks/teks-drawer.js
@@ -18,16 +18,16 @@ import {
   Snackbar,
   Tooltip,
   Zoom
-} from '@material-ui/core'
+} from '@mui/material'
 
-import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
-import ExplicitIcon from '@material-ui/icons/Explicit'
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
+import ExplicitIcon from '@mui/icons-material/Explicit'
 
-import MenuIcon from '@material-ui/icons/Menu'
+import MenuIcon from '@mui/icons-material/Menu'
 
-import {useTheme, styled} from '@material-ui/core/styles'
+import {useTheme, styled} from '@mui/material/styles'
 
-import MuiAlert from '@material-ui/lab/Alert'
+import MuiAlert from '@mui/material/Alert'
 import {formatJsonString} from '../../lib/utils/format'
 
 import VweKomante from '../komante/vwe-komante'
@@ -253,6 +253,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
             aria-label='open drawer'
             edge='start'
             className={classes.menuButton}
+            size='large'
             onClick={handleDrawerToggle}
           >
             <MenuIcon />
@@ -300,7 +301,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
             <DrawerBar meteEsMobilOuve={meteEsMobilOuve} teks={teks} anTeks={anTeks} />
           </Drawer>
         </Hidden>
-        <Hidden xsDown implementation='css'>
+        <Hidden smDown implementation='css'>
           <Drawer
             open
             classes={{
@@ -357,7 +358,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
             {anTeks.okiMizikID && (
               <OkiMizik id={anTeks.okiMizikID} />
             )}
-            <Grid container justify='center' spacing={1}>
+            <Grid container justifyContent='center' spacing={1}>
               <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
                 <div className={classes.gridText}>
                   <Typography align='center' className={classes.text} variant='h4'>
diff --git a/components/teks/teks-kat.js b/components/teks/teks-kat.js
index d9a9e23..a3eecfe 100644
--- a/components/teks/teks-kat.js
+++ b/components/teks/teks-kat.js
@@ -9,9 +9,9 @@ import {
   CardMedia,
   Typography,
   Grid
-} from '@material-ui/core'
-import ExplicitIcon from '@material-ui/icons/Explicit'
-import {styled} from '@material-ui/core/styles'
+} from '@mui/material'
+import ExplicitIcon from '@mui/icons-material/Explicit'
+import {styled} from '@mui/material/styles'
 
 const PREFIX = 'teks-kat'
 
diff --git a/components/teks/vwe-koute-achte.js b/components/teks/vwe-koute-achte.js
index 5a0f3c1..690b325 100644
--- a/components/teks/vwe-koute-achte.js
+++ b/components/teks/vwe-koute-achte.js
@@ -13,12 +13,12 @@ import {
   Lbry,
   Peertube
 } from '@icons-pack/react-simple-icons'
-import VideocamIcon from '@material-ui/icons/Videocam'
-import MusicNoteIcon from '@material-ui/icons/MusicNote'
-import AlbumIcon from '@material-ui/icons/Album'
-import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'
-import {styled} from '@material-ui/core/styles'
-import {SpeedDial, SpeedDialIcon, SpeedDialAction} from '@material-ui/lab'
+import VideocamIcon from '@mui/icons-material/Videocam'
+import MusicNoteIcon from '@mui/icons-material/MusicNote'
+import AlbumIcon from '@mui/icons-material/Album'
+import PlayCircleFilledIcon from '@mui/icons-material/PlayCircleFilled'
+import {styled} from '@mui/material/styles'
+import {SpeedDial, SpeedDialIcon, SpeedDialAction} from '@mui/material'
 
 const PREFIX = 'vwe-koute-achte'
 
diff --git a/pages/404.js b/pages/404.js
index 3550e05..b1941dc 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,4 +1,4 @@
-import {Container, Typography} from '@material-ui/core'
+import {Container, Typography} from '@mui/material'
 import Link from 'next/link'
 import Image from 'next/image'
 
diff --git a/pages/_app.js b/pages/_app.js
index a702c3d..dc751a0 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,8 +1,8 @@
 import {useEffect, useMemo, useState} from 'react'
 import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
-import {createMuiTheme, ThemeProvider} from '@material-ui/core/styles'
-import CssBaseline from '@material-ui/core/CssBaseline'
+import {createTheme, ThemeProvider, StyledEngineProvider, adaptV4Theme} from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
 import {Provider, useSession} from 'next-auth/client'
 
 import SwitchTheme from '../components/switch-theme'
@@ -12,9 +12,9 @@ export default function MyApp(props) {
   const [darkMode, setDarkMode] = useState(false)
   const [switchFixed, setSwitchFixed] = useState(false)
 
-  const darkTheme = useMemo(() => createMuiTheme({
+  const darkTheme = useMemo(() => createTheme(adaptV4Theme({
     palette: {
-      type: darkMode ? 'dark' : 'light',
+      mode: darkMode ? 'dark' : 'light',
       primary: {
         light: '#81c784',
         main: '#4caf50',
@@ -22,7 +22,7 @@ export default function MyApp(props) {
         contrastText: '#fff'
       }
     }
-  }), [darkMode])
+  })), [darkMode])
 
   useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side')
@@ -49,17 +49,19 @@ export default function MyApp(props) {
   }, [])
 
   return (
-    <ThemeProvider theme={darkTheme}>
-      <CssBaseline />
-      <Provider session={pageProps.session}>
-        <SwitchTheme switchFixed={switchFixed} darkMode={darkMode} setDarkMode={setDarkMode} />
-        {Component.auth ? (
-          <Auth><Component {...pageProps} /></Auth>
-        ) : (
-          <Component {...pageProps} />
-        )}
-      </Provider>
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={darkTheme}>
+        <CssBaseline />
+        <Provider session={pageProps.session}>
+          <SwitchTheme switchFixed={switchFixed} darkMode={darkMode} setDarkMode={setDarkMode} />
+          {Component.auth ? (
+            <Auth><Component {...pageProps} /></Auth>
+          ) : (
+            <Component {...pageProps} />
+          )}
+        </Provider>
+      </ThemeProvider>
+    </StyledEngineProvider>
   )
 }
 
diff --git a/pages/_document.js b/pages/_document.js
index 39c9c61..e2d8fee 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -2,7 +2,7 @@ import React from 'react'
 import Document, {
   Html, Head, Main, NextScript
 } from 'next/document'
-import {ServerStyleSheets} from '@material-ui/core/styles'
+import ServerStyleSheets from '@mui/styles/ServerStyleSheets'
 
 export default class MyDocument extends Document {
   render() {
diff --git a/pages/awtis.js b/pages/awtis.js
index 8897982..4f2b3a6 100644
--- a/pages/awtis.js
+++ b/pages/awtis.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import {Container, Grid} from '@material-ui/core'
+import {Container, Grid} from '@mui/material'
 
 import {jwennAwtisKantite, jwennAwtisPajinasyon} from '../lib/oki-api'
 
diff --git a/pages/index.js b/pages/index.js
index 4ef8e82..72ede68 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types'
 import Image from 'next/image'
-import {Container, Grid, Typography, Button} from '@material-ui/core'
-import GroupIcon from '@material-ui/icons/Group'
-import MusicNoteIcon from '@material-ui/icons/MusicNote'
+import {Container, Grid, Typography, Button} from '@mui/material'
+import GroupIcon from '@mui/icons-material/Group'
+import MusicNoteIcon from '@mui/icons-material/MusicNote'
 import {Pleroma, Peertube, Paypal} from '@icons-pack/react-simple-icons'
-import TelegramIcon from '@material-ui/icons/Telegram'
-import TwitterIcon from '@material-ui/icons/Twitter'
+import TelegramIcon from '@mui/icons-material/Telegram'
+import TwitterIcon from '@mui/icons-material/Twitter'
 
 import KatKayLa from '../components/kat-kay-la'
 import HeadLayout from '../components/head-layout'
diff --git a/src/theme.js b/src/theme.js
index f936612..c3d71c8 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -1,7 +1,7 @@
-import {createMuiTheme} from '@material-ui/core/styles'
-import {red} from '@material-ui/core/colors'
+import {createTheme, adaptV4Theme} from '@mui/material/styles'
+import {red} from '@mui/material/colors'
 
-const theme = createMuiTheme({
+const theme = createTheme(adaptV4Theme({
   palette: {
     primary: {
       main: '#556cd6'
@@ -16,6 +16,6 @@ const theme = createMuiTheme({
       default: '#fff'
     }
   }
-})
+}))
 
 export default theme