diff --git a/frontend/src/features/dashboard/announcements/GuestAnnouncement.js b/frontend/src/features/dashboard/announcements/GuestAnnouncement.js
index dbd3c92..6347959 100644
--- a/frontend/src/features/dashboard/announcements/GuestAnnouncement.js
+++ b/frontend/src/features/dashboard/announcements/GuestAnnouncement.js
@@ -1,17 +1,16 @@
 import React from "react";
-import { makeStyles } from "@mui/material/styles";
 import { Alert, AlertTitle } from "@mui/material";
-import styles from "../styles";
+import { getStyles } from "../styles";
 import { useTranslation } from "react-i18next";
-
-const useStyles = makeStyles(styles);
+import { useTheme } from "@mui/material/styles";
 
 export default function GuestAnnouncement() {
-  const classes = useStyles();
   const { t } = useTranslation();
+  const theme = useTheme();
+  const styles = getStyles(theme);
 
   return (
-    <div className={classes.alert}>
+    <div style={styles.alert}>
       <Alert variant="outlined" severity="warning">
         <AlertTitle>{t("Dashboard.Announcements.Guest.Title")}</AlertTitle>
         {t("Dashboard.Announcements.Guest.Message")}
diff --git a/frontend/src/features/dashboard/announcements/UserAnnouncement.js b/frontend/src/features/dashboard/announcements/UserAnnouncement.js
index 2606dd7..05c0014 100644
--- a/frontend/src/features/dashboard/announcements/UserAnnouncement.js
+++ b/frontend/src/features/dashboard/announcements/UserAnnouncement.js
@@ -1,19 +1,18 @@
 import React from "react";
-import { makeStyles } from "@mui/material/styles";
 import { Alert, AlertTitle } from "@mui/material";
-import styles from "../styles";
+import { getStyles } from "../styles";
 import { useTranslation } from "react-i18next";
 import { useTuitioUser } from "@flare/tuitio-client-react";
-
-const useStyles = makeStyles(styles);
+import { useTheme } from "@mui/material/styles";
 
 export default function UserAnnouncement() {
-  const classes = useStyles();
   const { t } = useTranslation();
   const { userName } = useTuitioUser();
+  const theme = useTheme();
+  const styles = getStyles(theme);
 
   return (
-    <div className={classes.alert}>
+    <div style={styles.alert}>
       <Alert variant="outlined" severity="info">
         <AlertTitle>
           {t("Dashboard.Announcements.User.Title", {
diff --git a/frontend/src/features/dashboard/styles.js b/frontend/src/features/dashboard/styles.js
index 6391186..1cd9b4f 100644
--- a/frontend/src/features/dashboard/styles.js
+++ b/frontend/src/features/dashboard/styles.js
@@ -1,4 +1,4 @@
-const styles = theme => ({
+const getStyles = theme => ({
   alert: {
     width: "100%",
     "& > * + *": {
@@ -7,4 +7,4 @@ const styles = theme => ({
   }
 });
 
-export default styles;
+export { getStyles };