diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
index d410f906..bd6d1b4b 100644
--- a/src/components/Loader.tsx
+++ b/src/components/Loader.tsx
@@ -6,7 +6,7 @@ const Loader: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <Stack alignItems="center" justifyContent="center" sx={{ m: 10 }}>
+    <Stack sx={{ alignItems: 'center', justifyContent: 'center', m: 10 }}>
       <CircularProgress size="3rem" />
       <Typography component="span" sx={{ pt: 2 }} variant="h5">
         {t('common.loading')}
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
index fd242f9d..79a5f7ea 100644
--- a/src/components/ProtectedRoute.tsx
+++ b/src/components/ProtectedRoute.tsx
@@ -1,5 +1,5 @@
 import { Container, Typography } from '@mui/material'
-import { FC } from 'react'
+import { FC, ReactElement } from 'react'
 import { Navigate, RouteProps } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { Roles } from '../contexts/AuthContext'
@@ -7,7 +7,7 @@ import useAuth from '../contexts/useAuth'
 
 type Props = RouteProps & {
   role: Roles
-  outlet: JSX.Element
+  outlet: ReactElement
 }
 
 const ProtectedRoute: FC<Props> = ({ role, outlet }) => {
diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
index 1711f350..563cca3c 100644
--- a/src/components/common/Modal.tsx
+++ b/src/components/common/Modal.tsx
@@ -36,7 +36,7 @@ const Modal: FC<Props> = ({
   return (
     <Dialog fullWidth={fullWidth} maxWidth={maxWidth} open={open}>
       <DialogTitle>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
           {title}
           <IconButton aria-label={t('action.close')} onClick={onClose}>
             <Close />
diff --git a/src/components/message/MessageFooter.tsx b/src/components/message/MessageFooter.tsx
index 563f133c..47d2ac30 100644
--- a/src/components/message/MessageFooter.tsx
+++ b/src/components/message/MessageFooter.tsx
@@ -23,12 +23,12 @@ const formatDate = (dateString: string): string => {
 
 const MessageFooter: FC<Props> = ({ message }) => {
   return (
-    <Stack alignItems="center" direction="row" justifyContent="space-between" sx={{ mt: 2, pr: 2.5 }}>
-      <Stack alignItems="center" direction="row" spacing={0.5}>
+    <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mt: 2, pr: 2.5 }}>
+      <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
         <FontAwesomeIcon aria-hidden="true" icon={faClock} size="2xs" color={colors.grey[600]} />
         <Typography variant="caption">{formatDate(message.createdAt)}</Typography>
       </Stack>
-      <Stack alignItems="center" direction="row" spacing="0.5">
+      <Stack direction="row" spacing="0.5" sx={{ alignItems: 'center' }}>
         <Icon icon={faTelegram} url={message.telegramUrl} label="Telegram" />
         <Icon icon={faMastodon} url={message.mastodonUrl} label="Mastodon" />
         <Icon icon={faBluesky} url={message.blueskyUrl} label="Bluesky" />
diff --git a/src/components/message/MessageForm.tsx b/src/components/message/MessageForm.tsx
index 05c2ebc8..a0fcfd16 100644
--- a/src/components/message/MessageForm.tsx
+++ b/src/components/message/MessageForm.tsx
@@ -133,8 +133,8 @@ const MessageForm: FC<Props> = ({ ticker }) => {
             disabled={!ticker.active}
           />
         </FormGroup>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
-          <Box display="flex">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+          <Box sx={{ display: 'flex' }}>
             <Button disabled={disabled} startIcon={<FontAwesomeIcon icon={faPaperPlane} />} sx={{ mr: 1 }} type="submit" variant="outlined">
               {t('action.send')}
             </Button>
diff --git a/src/components/settings/InactiveSettingsCard.tsx b/src/components/settings/InactiveSettingsCard.tsx
index 7a19a633..4fe730dc 100644
--- a/src/components/settings/InactiveSettingsCard.tsx
+++ b/src/components/settings/InactiveSettingsCard.tsx
@@ -37,7 +37,7 @@ const InactiveSettingsCard: FC = () => {
   return (
     <Card>
       <CardContent>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
           <Typography component="h3" variant="h5">
             {t('title.inactive')}
           </Typography>
@@ -45,26 +45,26 @@ const InactiveSettingsCard: FC = () => {
             {t('action.edit')}
           </Button>
         </Stack>
-        <Typography color="GrayText" component="span" variant="body2">
+        <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
           {t('status.description')}
         </Typography>
       </CardContent>
       <Divider variant="middle" />
       <CardContent>
         <Box sx={{ mb: 1 }}>
-          <Typography color="GrayText" component="span" variant="body2">
+          <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
             {t('common.headline')}
           </Typography>
           <Typography>{setting.value.headline}</Typography>
         </Box>
         <Box sx={{ mb: 1 }}>
-          <Typography color="GrayText" component="span" variant="body2">
+          <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
             {t('common.subheadline')}
           </Typography>
           <Typography>{setting.value.subHeadline}</Typography>
         </Box>
         <Box sx={{ mb: 1 }}>
-          <Typography color="GrayText" component="span" variant="body2">
+          <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
             {t('common.description')}
           </Typography>
           <Typography>{setting.value.description}</Typography>
@@ -72,7 +72,7 @@ const InactiveSettingsCard: FC = () => {
         <Grid container>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('common.author')}
               </Typography>
               <Typography>{setting.value.author}</Typography>
@@ -80,7 +80,7 @@ const InactiveSettingsCard: FC = () => {
           </Grid>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('integrations.homepage')}
               </Typography>
               <Typography>{setting.value.homepage}</Typography>
@@ -88,7 +88,7 @@ const InactiveSettingsCard: FC = () => {
           </Grid>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('user.email')}
               </Typography>
               <Typography>{setting.value.email}</Typography>
@@ -96,7 +96,7 @@ const InactiveSettingsCard: FC = () => {
           </Grid>
           <Grid size={{ lg: 6, xs: 12 }}>
             <Box sx={{ mb: 1 }}>
-              <Typography color="GrayText" component="span" variant="body2">
+              <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
                 {t('social.twitter')}
               </Typography>
               <Typography>{setting.value.twitter}</Typography>
diff --git a/src/components/settings/SettingsCard.tsx b/src/components/settings/SettingsCard.tsx
index 6244a57f..932d82d7 100644
--- a/src/components/settings/SettingsCard.tsx
+++ b/src/components/settings/SettingsCard.tsx
@@ -36,7 +36,7 @@ function SettingsCard<T>({ title, description, editTestId, queryKey, errorMessag
   return (
     <Card>
       <CardContent>
-        <Stack alignItems="center" direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
           <Typography component="h3" variant="h5">
             {t(title)}
           </Typography>
@@ -44,7 +44,7 @@ function SettingsCard<T>({ title, description, editTestId, queryKey, errorMessag
             {t('action.edit')}
           </Button>
         </Stack>
-        <Typography color="GrayText" component="span" variant="body2">
+        <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
           {t(description)}
         </Typography>
       </CardContent>
diff --git a/src/components/settings/SignalGroupSettingsCard.tsx b/src/components/settings/SignalGroupSettingsCard.tsx
index 47d658af..79f674ec 100644
--- a/src/components/settings/SignalGroupSettingsCard.tsx
+++ b/src/components/settings/SignalGroupSettingsCard.tsx
@@ -24,19 +24,19 @@ const SignalGroupSettingsCard: FC<{ onSaved?: () => void }> = ({ onSaved }) => {
       {({ data, formOpen, onFormClose }) => (
         <>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.signalGroup.apiUrl')}
             </Typography>
             <Typography>{data.setting.value.apiUrl || '—'}</Typography>
           </Box>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.signalGroup.account')}
             </Typography>
             <Typography>{data.setting.value.account || '—'}</Typography>
           </Box>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.signalGroup.avatar')}
             </Typography>
             <Typography>{data.setting.value.avatar || '—'}</Typography>
diff --git a/src/components/settings/TelegramSettingsCard.tsx b/src/components/settings/TelegramSettingsCard.tsx
index fbdd8870..7d843d5f 100644
--- a/src/components/settings/TelegramSettingsCard.tsx
+++ b/src/components/settings/TelegramSettingsCard.tsx
@@ -24,13 +24,13 @@ const TelegramSettingsCard: FC<{ onSaved?: () => void }> = ({ onSaved }) => {
       {({ data, formOpen, onFormClose }) => (
         <>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.telegram.botUsername')}
             </Typography>
             <Typography>{data.setting.value.botUsername || '—'}</Typography>
           </Box>
           <Box sx={{ mb: 1 }}>
-            <Typography color="GrayText" component="span" variant="body2">
+            <Typography component="span" variant="body2" sx={{ color: 'GrayText' }}>
               {t('settings.telegram.token')}
             </Typography>
             <Typography>{data.setting.value.token || '—'}</Typography>
diff --git a/src/components/ticker/BlueskyCard.tsx b/src/components/ticker/BlueskyCard.tsx
index 2a1db3e3..e1910b1c 100644
--- a/src/components/ticker/BlueskyCard.tsx
+++ b/src/components/ticker/BlueskyCard.tsx
@@ -47,10 +47,10 @@ const BlueskyCard: FC<Props> = ({ ticker }) => {
   const details = bluesky.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.profile')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={profileUrl} rel="noreferrer" target="_blank" variant="body2">
             {bluesky.handle}
           </Link>
@@ -58,7 +58,7 @@ const BlueskyCard: FC<Props> = ({ ticker }) => {
         </Stack>
       </div>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.bluesky.replyRestriction')}
         </Typography>
         <Typography variant="body2">{replyRestrictionLabel(bluesky.replyRestriction)}</Typography>
diff --git a/src/components/ticker/IntegrationCard.tsx b/src/components/ticker/IntegrationCard.tsx
index 62949b67..a7d68a19 100644
--- a/src/components/ticker/IntegrationCard.tsx
+++ b/src/components/ticker/IntegrationCard.tsx
@@ -83,13 +83,13 @@ const IntegrationCard: FC<IntegrationCardProps> = ({
     <>
       <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
         <CardContent>
-          <Stack alignItems="center" direction="row" justifyContent="space-between" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
             <Typography component="h5" variant="h5">
               <FontAwesomeIcon aria-hidden="true" icon={icon} /> {title}
             </Typography>
             <Chip label={t(`integrations.integrationStatus.${status}`)} color={color} size="small" variant="outlined" />
           </Stack>
-          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+          <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
             {description}
           </Typography>
         </CardContent>
diff --git a/src/components/ticker/LocationSearch.tsx b/src/components/ticker/LocationSearch.tsx
index 29374416..0880afb8 100644
--- a/src/components/ticker/LocationSearch.tsx
+++ b/src/components/ticker/LocationSearch.tsx
@@ -28,7 +28,7 @@ interface Props {
 const LocationSearch: FC<Props> = ({ callback }) => {
   const { t } = useTranslation()
   const [options, setOptions] = useState<SearchResult[]>([])
-  const previousController = useRef<AbortController>()
+  const previousController = useRef<AbortController | null>(null)
 
   const handleInputChange = (_: React.SyntheticEvent, value: string) => {
     if (previousController.current) {
diff --git a/src/components/ticker/MastodonCard.tsx b/src/components/ticker/MastodonCard.tsx
index 73c1420e..886186ee 100644
--- a/src/components/ticker/MastodonCard.tsx
+++ b/src/components/ticker/MastodonCard.tsx
@@ -33,10 +33,10 @@ const MastodonCard: FC<Props> = ({ ticker }) => {
   const details = mastodon.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.profile')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={profileUrl} rel="noreferrer" target="_blank" variant="body2">
             {profileHandle}
           </Link>
diff --git a/src/components/ticker/SignalGroupAdminForm.tsx b/src/components/ticker/SignalGroupAdminForm.tsx
index 8d3418dc..8ea18b6b 100644
--- a/src/components/ticker/SignalGroupAdminForm.tsx
+++ b/src/components/ticker/SignalGroupAdminForm.tsx
@@ -63,12 +63,14 @@ const SignalGroupAdminForm: FC<Props> = ({ callback, ticker, setSubmitting }) =>
               required
               helperText={errors.number ? errors.number?.message : null}
               error={errors.number ? true : false}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <FontAwesomeIcon icon={faPhone} />
-                  </InputAdornment>
-                ),
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FontAwesomeIcon icon={faPhone} />
+                    </InputAdornment>
+                  ),
+                },
               }}
             />
           </FormGroup>
diff --git a/src/components/ticker/SignalGroupCard.tsx b/src/components/ticker/SignalGroupCard.tsx
index 74315f3d..234dcac5 100644
--- a/src/components/ticker/SignalGroupCard.tsx
+++ b/src/components/ticker/SignalGroupCard.tsx
@@ -91,10 +91,10 @@ const SignalGroupCard: FC<Props> = ({ ticker }) => {
   const details = signalGroup.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.signal.inviteLink')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={signalGroup.groupInviteLink} rel="noreferrer" target="_blank" variant="body2">
             {ticker.title}
           </Link>
diff --git a/src/components/ticker/TelegramCard.tsx b/src/components/ticker/TelegramCard.tsx
index 06d05dad..14beca48 100644
--- a/src/components/ticker/TelegramCard.tsx
+++ b/src/components/ticker/TelegramCard.tsx
@@ -34,10 +34,10 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
   const details = telegram.connected ? (
     <Stack spacing={1}>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.telegram.channel')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <Link href={channelUrl} rel="noreferrer" target="_blank" variant="body2">
             {telegram.channelName}
           </Link>
@@ -45,10 +45,10 @@ const TelegramCard: FC<Props> = ({ ticker }) => {
         </Stack>
       </div>
       <div>
-        <Typography variant="caption" color="text.secondary">
+        <Typography variant="caption" color="textSecondary">
           {t('integrations.telegram.botLabel')}
         </Typography>
-        <Stack direction="row" alignItems="center" spacing={0.5}>
+        <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
           <Typography variant="body2">{telegram.botUsername}</Typography>
           <Tooltip title={t('integrations.telegram.botHint')}>
             <FontAwesomeIcon icon={faCircleInfo} size="sm" style={{ color: 'gray', cursor: 'help' }} />
diff --git a/src/components/ticker/Ticker.tsx b/src/components/ticker/Ticker.tsx
index af1770da..66e14ebe 100644
--- a/src/components/ticker/Ticker.tsx
+++ b/src/components/ticker/Ticker.tsx
@@ -25,7 +25,7 @@ const Ticker: FC<Props> = ({ ticker, isLoading }) => {
   const [formModalOpen, setFormModalOpen] = useState<boolean>(false)
 
   const headline = () => (
-    <Stack alignItems="center" direction="row" justifyContent="space-between" mb={2}>
+    <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
       <Typography component="h2" gutterBottom variant="h3">
         {t('title.ticker')}
       </Typography>
@@ -67,7 +67,7 @@ const Ticker: FC<Props> = ({ ticker, isLoading }) => {
           <Alert severity="warning">{t('tickers.disabled')}</Alert>
         </Grid>
       ) : null}
-      <Grid display={{ xs: 'none', md: 'block' }} size={{ md: 4, xs: 12 }}>
+      <Grid size={{ md: 4, xs: 12 }} sx={{ display: { xs: 'none', md: 'block' } }}>
         <TickerCard ticker={ticker} />
         {user?.roles.includes('admin') ? (
           <>
diff --git a/src/components/ticker/TickerCard.tsx b/src/components/ticker/TickerCard.tsx
index 690f5d29..317c1c40 100644
--- a/src/components/ticker/TickerCard.tsx
+++ b/src/components/ticker/TickerCard.tsx
@@ -24,9 +24,9 @@ const TickerCard: FC<Props> = ({ ticker }) => {
   return (
     <Card>
       <CardContent>
-        <Stack direction="row" spacing={1} alignItems="center">
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
           <FontAwesomeIcon aria-hidden="true" icon={faCircleInfo} />
-          <Typography component="h5" variant="h5" flexGrow={1}>
+          <Typography component="h5" variant="h5" sx={{ flexGrow: 1 }}>
             {t('common.info')}
           </Typography>
         </Stack>
@@ -36,7 +36,7 @@ const TickerCard: FC<Props> = ({ ticker }) => {
         </Stack>
         <Chip icon={icon} label={status} variant="outlined" sx={{ mt: 2 }} size="small" color={color} />
         <Divider sx={{ mt: 2 }} />
-        <Stack direction="row" spacing={1} alignItems="center" sx={{ mt: 2 }}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center', mt: 2 }}>
           <Campaign />
           <Typography component="h6" variant="h6">
             {t('title.integrations')}
@@ -57,9 +57,9 @@ const Integrations = ({ ticker }: { ticker: Ticker }) => {
         <TickerProperty
           label="Websites"
           value={ticker.websites.map(website => (
-            <Stack key={website.origin} direction="row" alignItems="center" spacing={0.5}>
+            <Stack key={website.origin} direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
               <FontAwesomeIcon aria-hidden="true" icon={faGlobeEurope} color={grey[800]} />
-              <Typography variant="body2" flexGrow={1}>
+              <Typography variant="body2" sx={{ flexGrow: 1 }}>
                 <Link href={website.origin} target="_blank" rel="noopener noreferrer">
                   {website.origin.replace(/(^\w+:|^)\/\//, '')}
                 </Link>
@@ -122,13 +122,13 @@ const IntegrationChip = ({ active, title, link }: { active: boolean; title: stri
   const { t } = useTranslation()
 
   return (
-    <Stack direction="row" alignItems="center" spacing={0.5}>
+    <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
       <Tooltip title={t(active ? 'status.active' : 'status.inactive')} arrow placement="top">
         <span>
           <FontAwesomeIcon aria-hidden="true" icon={active ? faToggleOn : faToggleOff} color={grey[800]} />
         </span>
       </Tooltip>
-      <Typography variant="body2" flexGrow={1}>
+      <Typography variant="body2" sx={{ flexGrow: 1 }}>
         <Link href={link} target="_blank" rel="noopener noreferrer">
           {title}
         </Link>
diff --git a/src/components/ticker/TickerListFilter.tsx b/src/components/ticker/TickerListFilter.tsx
index 49229c36..8bc850e8 100644
--- a/src/components/ticker/TickerListFilter.tsx
+++ b/src/components/ticker/TickerListFilter.tsx
@@ -16,7 +16,7 @@ const TickerListFilter: FC<Props> = ({ params, onTitleChange, onOriginChange, on
   const { t } = useTranslation()
 
   return (
-    <Stack direction="row" alignItems="center">
+    <Stack direction="row" sx={{ alignItems: 'center' }}>
       <Box sx={{ px: 1 }}>
         <FontAwesomeIcon aria-hidden="true" icon={faFilter} />
       </Box>
diff --git a/src/components/ticker/TickerListItem.tsx b/src/components/ticker/TickerListItem.tsx
index ca20a719..5a94ed99 100644
--- a/src/components/ticker/TickerListItem.tsx
+++ b/src/components/ticker/TickerListItem.tsx
@@ -1,7 +1,7 @@
 import { faCheck, faHandPointer, faPencil, faTrash, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { MoreVert } from '@mui/icons-material'
-import { colors, IconButton, MenuItem, Popover, TableCell, TableRow, Typography } from '@mui/material'
+import { colors, IconButton, MenuItem, MenuList, Popover, TableCell, TableRow, Typography } from '@mui/material'
 import React, { FC, memo, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { Ticker } from '../../api/Ticker'
@@ -51,13 +51,15 @@ const TickerListItem: FC<Props> = ({ ticker }: Props) => {
           <MoreVert />
         </IconButton>
         <Popover
-          PaperProps={{
-            sx: {
-              p: 1,
-              width: 140,
-              '& .MuiMenuItem-root': {
-                px: 1,
-                borderRadius: 0.75,
+          slotProps={{
+            paper: {
+              sx: {
+                p: 1,
+                width: 140,
+                '& .MuiMenuItem-root': {
+                  px: 1,
+                  borderRadius: 0.75,
+                },
               },
             },
           }}
@@ -67,38 +69,40 @@ const TickerListItem: FC<Props> = ({ ticker }: Props) => {
           open={Boolean(anchorEl)}
           transformOrigin={{ vertical: 'top', horizontal: 'right' }}
         >
-          <MenuItem
-            onClick={() => {
-              handleClose()
-              handleUse()
-            }}
-          >
-            <FontAwesomeIcon aria-hidden="true" icon={faHandPointer} />
-            <Typography sx={{ ml: 2 }}>{t('action.use')}</Typography>
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              handleClose()
-              setFormModalOpen(true)
-            }}
-          >
-            <FontAwesomeIcon aria-hidden="true" icon={faPencil} />
-            <Typography sx={{ ml: 2 }}>{t('action.edit')}</Typography>
-          </MenuItem>
-          {user?.roles.includes('admin') ? (
-            <>
-              <MenuItem
-                onClick={() => {
-                  handleClose()
-                  setDeleteModalOpen(true)
-                }}
-                sx={{ color: colors.red[400] }}
-              >
-                <FontAwesomeIcon aria-hidden="true" icon={faTrash} />
-                <Typography sx={{ ml: 2 }}>{t('action.delete')}</Typography>
-              </MenuItem>
-            </>
-          ) : null}
+          <MenuList>
+            <MenuItem
+              onClick={() => {
+                handleClose()
+                handleUse()
+              }}
+            >
+              <FontAwesomeIcon aria-hidden="true" icon={faHandPointer} />
+              <Typography sx={{ ml: 2 }}>{t('action.use')}</Typography>
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                handleClose()
+                setFormModalOpen(true)
+              }}
+            >
+              <FontAwesomeIcon aria-hidden="true" icon={faPencil} />
+              <Typography sx={{ ml: 2 }}>{t('action.edit')}</Typography>
+            </MenuItem>
+            {user?.roles.includes('admin') ? (
+              <>
+                <MenuItem
+                  onClick={() => {
+                    handleClose()
+                    setDeleteModalOpen(true)
+                  }}
+                  sx={{ color: colors.red[400] }}
+                >
+                  <FontAwesomeIcon aria-hidden="true" icon={faTrash} />
+                  <Typography sx={{ ml: 2 }}>{t('action.delete')}</Typography>
+                </MenuItem>
+              </>
+            ) : null}
+          </MenuList>
         </Popover>
         <TickerModalForm onClose={() => setFormModalOpen(false)} open={formModalOpen} ticker={ticker} />
         <TickerModalDelete onClose={() => setDeleteModalOpen(false)} open={deleteModalOpen} ticker={ticker} />
diff --git a/src/components/ticker/TickerListItems.tsx b/src/components/ticker/TickerListItems.tsx
index 7a48e56b..be0eb641 100644
--- a/src/components/ticker/TickerListItems.tsx
+++ b/src/components/ticker/TickerListItems.tsx
@@ -20,7 +20,7 @@ const TickerListItems: FC<Props> = ({ token, params }) => {
       <TableBody>
         <TableRow>
           <TableCell colSpan={5}>
-            <Stack alignItems="center" justifyContent="center">
+            <Stack sx={{ alignItems: 'center', justifyContent: 'center' }}>
               <CircularProgress size="2rem" />
               <Typography component="span" sx={{ pt: 1 }}>
                 {t('common.loading')}
@@ -49,7 +49,7 @@ const TickerListItems: FC<Props> = ({ token, params }) => {
       <TableBody>
         <TableRow>
           <TableCell colSpan={5}>
-            <Stack alignItems="center" justifyContent="center">
+            <Stack sx={{ alignItems: 'center', justifyContent: 'center' }}>
               <Typography variant="body1">{t('tickers.error0Found')}</Typography>
             </Stack>
           </TableCell>
diff --git a/src/components/ticker/WebsiteCard.tsx b/src/components/ticker/WebsiteCard.tsx
index 9fd14ec9..c4ad4567 100644
--- a/src/components/ticker/WebsiteCard.tsx
+++ b/src/components/ticker/WebsiteCard.tsx
@@ -27,7 +27,7 @@ const WebsiteCard: FC<Props> = ({ ticker }) => {
 
   const details = isConfigured ? (
     <Stack spacing={0.5}>
-      <Typography variant="caption" color="text.secondary">
+      <Typography variant="caption" color="textSecondary">
         {t('integrations.website.allowed')}
       </Typography>
       {websites.map(website => (
diff --git a/src/components/user/UserListItem.tsx b/src/components/user/UserListItem.tsx
index cf30176e..f7791247 100644
--- a/src/components/user/UserListItem.tsx
+++ b/src/components/user/UserListItem.tsx
@@ -50,13 +50,15 @@ const UserListItem: FC<Props> = ({ user }) => {
           <MoreVert />
         </IconButton>
         <Popover
-          PaperProps={{
-            sx: {
-              p: 1,
-              width: 140,
-              '& .MuiMenuItem-root': {
-                px: 1,
-                borderRadius: 0.75,
+          slotProps={{
+            paper: {
+              sx: {
+                p: 1,
+                width: 140,
+                '& .MuiMenuItem-root': {
+                  px: 1,
+                  borderRadius: 0.75,
+                },
               },
             },
           }}
diff --git a/src/contexts/AuthContext.test.tsx b/src/contexts/AuthContext.test.tsx
index d72341b9..256cbf33 100644
--- a/src/contexts/AuthContext.test.tsx
+++ b/src/contexts/AuthContext.test.tsx
@@ -20,7 +20,7 @@ const mockedLocalStorage = {
   length: 0,
   key: vi.fn(),
 }
-global.localStorage = mockedLocalStorage
+globalThis.localStorage = mockedLocalStorage
 
 beforeEach(() => {
   vi.clearAllMocks()
diff --git a/src/contexts/FeatureContext.tsx b/src/contexts/FeatureContext.tsx
index 951b0db3..634f17de 100644
--- a/src/contexts/FeatureContext.tsx
+++ b/src/contexts/FeatureContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
+import { createContext, ReactElement, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { ApiResponse } from '../api/Api'
 import { Features, fetchFeaturesApi } from '../api/Features'
 import useAuth from './useAuth'
@@ -23,7 +23,7 @@ const initialFeatures: Features = {
   signalGroupEnabled: false,
 }
 
-export function FeatureProvider({ children }: Readonly<{ children: ReactNode }>): JSX.Element {
+export function FeatureProvider({ children }: Readonly<{ children: ReactNode }>): ReactElement {
   const { token } = useAuth()
   const [state, setState] = useState<FeatureState>({
     features: initialFeatures,
diff --git a/src/contexts/NotificationContext.tsx b/src/contexts/NotificationContext.tsx
index 64654f09..b334fc8a 100644
--- a/src/contexts/NotificationContext.tsx
+++ b/src/contexts/NotificationContext.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, createContext, useMemo, useState } from 'react'
+import { ReactElement, ReactNode, createContext, useMemo, useState } from 'react'
 
 type Severity = 'success' | 'error' | 'warning' | 'info'
 
@@ -16,7 +16,7 @@ interface NotificationContextType {
 
 const NotificationContext = createContext<NotificationContextType | undefined>(undefined)
 
-export function NotificationProvider({ children }: Readonly<{ children: ReactNode }>): JSX.Element {
+export function NotificationProvider({ children }: Readonly<{ children: ReactNode }>): ReactElement {
   const [notification, setNotification] = useState<Notification | undefined>(undefined)
   const [isOpen, setIsOpen] = useState<boolean>(false)
 
diff --git a/src/hooks/useDebounce.tsx b/src/hooks/useDebounce.tsx
index 2c51ff76..d794cbb6 100644
--- a/src/hooks/useDebounce.tsx
+++ b/src/hooks/useDebounce.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 
 function useDebounce<T>(value: T, delay: number, initialValue: T): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(initialValue)
-  const timerRef = useRef<NodeJS.Timeout | null>()
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
     if (timerRef.current) {
diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx
index 07bb82a5..25353ee7 100644
--- a/src/theme/ThemeProvider.tsx
+++ b/src/theme/ThemeProvider.tsx
@@ -36,34 +36,51 @@ theme.components = {
         '&:hover': {
           boxShadow: 'none',
         },
+        variants: [
+          {
+            props: { variant: 'contained', color: 'inherit' },
+            style: {
+              color: palette.grey[800],
+              boxShadow: customShadows.z8,
+              '&:hover': {
+                backgroundColor: palette.grey[400],
+              },
+            },
+          },
+          {
+            props: { variant: 'contained', color: 'primary' },
+            style: {
+              boxShadow: customShadows.primary,
+            },
+          },
+          {
+            props: { variant: 'contained', color: 'secondary' },
+            style: {
+              boxShadow: customShadows.secondary,
+            },
+          },
+          {
+            props: { variant: 'outlined', color: 'inherit' },
+            style: {
+              border: `1px solid ${alpha(palette.grey[500], 0.32)}`,
+              '&:hover': {
+                backgroundColor: palette.action.hover,
+              },
+            },
+          },
+          {
+            props: { variant: 'text', color: 'inherit' },
+            style: {
+              '&:hover': {
+                backgroundColor: palette.action.hover,
+              },
+            },
+          },
+        ],
       },
       sizeLarge: {
         height: 48,
       },
-      containedInherit: {
-        color: palette.grey[800],
-        boxShadow: customShadows.z8,
-        '&:hover': {
-          backgroundColor: palette.grey[400],
-        },
-      },
-      containedPrimary: {
-        boxShadow: customShadows.primary,
-      },
-      containedSecondary: {
-        boxShadow: customShadows.secondary,
-      },
-      outlinedInherit: {
-        border: `1px solid ${alpha(palette.grey[500], 0.32)}`,
-        '&:hover': {
-          backgroundColor: palette.action.hover,
-        },
-      },
-      textInherit: {
-        '&:hover': {
-          backgroundColor: palette.action.hover,
-        },
-      },
     },
   },
   MuiCard: {
@@ -78,8 +95,10 @@ theme.components = {
   },
   MuiCardHeader: {
     defaultProps: {
-      titleTypographyProps: { variant: 'h6' },
-      subheaderTypographyProps: { variant: 'body2' },
+      slotProps: {
+        title: { variant: 'h6' },
+        subheader: { variant: 'body2' },
+      },
     },
     styleOverrides: {
       root: {
@@ -193,9 +212,6 @@ theme.components = {
   },
   MuiTypography: {
     styleOverrides: {
-      paragraph: {
-        marginBottom: theme.spacing(1),
-      },
       gutterBottom: {
         marginBottom: theme.spacing(1),
       },
diff --git a/src/views/ErrorView.tsx b/src/views/ErrorView.tsx
index ba549973..07da923d 100644
--- a/src/views/ErrorView.tsx
+++ b/src/views/ErrorView.tsx
@@ -23,7 +23,7 @@ const ErrorView: FC<Props> = ({ children, queryKey }) => {
           {t('error.ohNo')}
         </Typography>
         <Divider sx={{ mt: 1, mb: 2 }} />
-        <Stack alignItems="center" direction="row" spacing={2}>
+        <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
           <Box>
             <Button color="secondary" onClick={handleClick} variant="contained">
               {t('action.reload')}
@@ -33,7 +33,7 @@ const ErrorView: FC<Props> = ({ children, queryKey }) => {
             <Typography component="div" variant="body1">
               {children}
             </Typography>
-            <Typography color={colors.grey[700]} component="p" variant="body2">
+            <Typography component="p" variant="body2" sx={{ color: colors.grey[700] }}>
               {t('error.contactAdmin')}
             </Typography>
           </Box>
diff --git a/src/views/SettingsView.tsx b/src/views/SettingsView.tsx
index 12656f76..8cbddf08 100644
--- a/src/views/SettingsView.tsx
+++ b/src/views/SettingsView.tsx
@@ -15,7 +15,7 @@ const SettingsView: FC = () => {
     <Layout>
       <Grid container spacing={2}>
         <Grid size={{ xs: 12 }}>
-          <Stack alignItems="center" direction="row" justifyContent="space-between" mb={2}>
+          <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
             <Typography component="h2" gutterBottom variant="h3">
               {t('title.settings')}
             </Typography>
diff --git a/src/views/TickerListView.tsx b/src/views/TickerListView.tsx
index 38bf9f99..34bb206f 100644
--- a/src/views/TickerListView.tsx
+++ b/src/views/TickerListView.tsx
@@ -17,7 +17,7 @@ const TickerListView: FC = () => {
     <Layout>
       <Grid container spacing={2}>
         <Grid size={{ xs: 12 }}>
-          <Stack alignItems="center" direction="row" justifyContent="space-between" mb={2}>
+          <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
             <Typography component="h2" gutterBottom variant="h3">
               {t('title.tickers')}
             </Typography>
diff --git a/src/views/UsersView.tsx b/src/views/UsersView.tsx
index 0f324eeb..ff68395a 100644
--- a/src/views/UsersView.tsx
+++ b/src/views/UsersView.tsx
@@ -15,7 +15,7 @@ const UsersView: FC = () => {
     <Layout>
       <Grid container spacing={2}>
         <Grid size={{ xs: 12 }}>
-          <Stack alignItems="center" direction="row" justifyContent="space-between" mb={2}>
+          <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
             <Typography component="h2" gutterBottom variant="h3">
               {t('title.users')}
             </Typography>