diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 720ffb6b2..a30f50426 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -25,21 +25,13 @@ import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useFolderStore } from "./stores/foldersStore";
 import { useGlobalVariablesStore } from "./stores/globalVariablesStore/globalVariables";
 import { useStoreStore } from "./stores/storeStore";
+import AlertDisplayArea from "./alerts/displayArea";
 export default function App() {
   useTrackLastVisitedPath();
 
-  const removeFromTempNotificationList = useAlertStore(
-    (state) => state.removeFromTempNotificationList,
-  );
-  const tempNotificationList = useAlertStore(
-    (state) => state.tempNotificationList,
-  );
   const [fetchError, setFetchError] = useState(false);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
 
-  const removeAlert = (id: string) => {
-    removeFromTempNotificationList(id);
-  };
 
   const { isAuthenticated, login, setUserData, setAutoLogin, getUser } =
     useContext(AuthContext);
@@ -208,38 +200,7 @@ export default function App() {
       </ErrorBoundary>
       <div></div>
       <div className="app-div">
-        <div className="flex flex-col-reverse" style={{ zIndex: 999 }}>
-          {tempNotificationList.map((alert) => (
-            <div key={alert.id}>
-              {alert.type === "error" ? (
-                <ErrorAlert
-                  key={alert.id}
-                  title={alert.title}
-                  list={alert.list}
-                  id={alert.id}
-                  removeAlert={removeAlert}
-                />
-              ) : alert.type === "notice" ? (
-                <NoticeAlert
-                  key={alert.id}
-                  title={alert.title}
-                  link={alert.link}
-                  id={alert.id}
-                  removeAlert={removeAlert}
-                />
-              ) : (
-                alert.type === "success" && (
-                  <SuccessAlert
-                    key={alert.id}
-                    title={alert.title}
-                    id={alert.id}
-                    removeAlert={removeAlert}
-                  />
-                )
-              )}
-            </div>
-          ))}
-        </div>
+        <AlertDisplayArea/>
       </div>
     </div>
   );
diff --git a/src/frontend/src/alerts/displayArea/index.tsx b/src/frontend/src/alerts/displayArea/index.tsx
new file mode 100644
index 000000000..9f39ee6dd
--- /dev/null
+++ b/src/frontend/src/alerts/displayArea/index.tsx
@@ -0,0 +1,53 @@
+import useAlertStore from "../../stores/alertStore";
+import ErrorAlert from "../error";
+import NoticeAlert from "../notice";
+import SuccessAlert from "../success";
+
+export default function AlertDisplayArea(){
+
+    const removeFromTempNotificationList = useAlertStore(
+        (state) => state.removeFromTempNotificationList,
+      );
+      const tempNotificationList = useAlertStore(
+        (state) => state.tempNotificationList,
+      );
+      const removeAlert = (id: string) => {
+        removeFromTempNotificationList(id);
+      };
+
+
+    return (
+        <div className="flex flex-col-reverse" style={{ zIndex: 999 }}>
+        {tempNotificationList.map((alert) => (
+          <div key={alert.id}>
+            {alert.type === "error" ? (
+              <ErrorAlert
+                key={alert.id}
+                title={alert.title}
+                list={alert.list}
+                id={alert.id}
+                removeAlert={removeAlert}
+              />
+            ) : alert.type === "notice" ? (
+              <NoticeAlert
+                key={alert.id}
+                title={alert.title}
+                link={alert.link}
+                id={alert.id}
+                removeAlert={removeAlert}
+              />
+            ) : (
+              alert.type === "success" && (
+                <SuccessAlert
+                  key={alert.id}
+                  title={alert.title}
+                  id={alert.id}
+                  removeAlert={removeAlert}
+                />
+              )
+            )}
+          </div>
+        ))}
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx
index f199ac489..1396acf4b 100644
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx
@@ -12,14 +12,14 @@ const useUpdateMessage = (setSuccessData, setErrorData) => {
       updateMessage(data);
 
       // Set success message
-      setSuccessData({
-        title: "Messages updated successfully.",
-      });
+      // setSuccessData({
+      //   title: "Messages updated successfully.",
+      // });
     } catch (error) {
       // Set error message
-      setErrorData({
-        title: "Error updating messages.",
-      });
+      // setErrorData({
+      //   title: "Error updating messages.",
+      // });
       return Promise.reject(error);
     }
   };