diff --git a/src/apps/dashboard/routes/notifications.tsx b/src/apps/dashboard/routes/notifications.tsx
index 6f673c753f..7642ee033b 100644
--- a/src/apps/dashboard/routes/notifications.tsx
+++ b/src/apps/dashboard/routes/notifications.tsx
@@ -1,23 +1,13 @@
+import Alert from '@mui/material/Alert/Alert';
+import Box from '@mui/material/Box/Box';
+import Button from '@mui/material/Button/Button';
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import Page from 'components/Page';
 import globalize from 'scripts/globalize';
 
-const PluginLink = () => (
-    <div
-        dangerouslySetInnerHTML={{
-            __html: `<a
-                is='emby-linkbutton'
-                class='button-link'
-                href='#/dashboard/plugins/add?name=Webhook&guid=71552a5a5c5c4350a2aeebe451a30173'
-            >
-                ${globalize.translate('GetThePlugin')}
-            </a>`
-        }}
-    />
-);
-
-const Notifications = () => (
+const NotificationsPage = () => (
     <Page
         id='notificationSettingPage'
         title={globalize.translate('Notifications')}
@@ -25,12 +15,20 @@ const Notifications = () => (
     >
         <div className='content-primary'>
             <h2>{globalize.translate('Notifications')}</h2>
-            <p>
-                {globalize.translate('NotificationsMovedMessage')}
-            </p>
-            <PluginLink />
+
+            <Alert severity='info'>
+                <Box sx={{ marginBottom: 2 }}>
+                    {globalize.translate('NotificationsMovedMessage')}
+                </Box>
+                <Button
+                    component={Link}
+                    to='/dashboard/plugins/add?name=Webhook&guid=71552a5a5c5c4350a2aeebe451a30173'
+                >
+                    {globalize.translate('GetThePlugin')}
+                </Button>
+            </Alert>
         </div>
     </Page>
 );
 
-export default Notifications;
+export default NotificationsPage;