diff --git a/client/src/components/profile-my/notification-settings.component.jsx b/client/src/components/profile-my/notification-settings.component.jsx
new file mode 100644
index 000000000..e501549c4
--- /dev/null
+++ b/client/src/components/profile-my/notification-settings.component.jsx
@@ -0,0 +1,107 @@
+import { useQuery, useMutation } from "@apollo/client";
+import React, { useEffect, useState } from "react";
+import { Button, Card, Form, Switch, Row, Col, Spin } from "antd";
+import { useTranslation } from "react-i18next";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import { QUERY_NOTIFICATION_SETTINGS, UPDATE_NOTIFICATION_SETTINGS } from "../../graphql/user.queries.js";
+import notificationScenarios from "../../utils/jobNotificationScenarios.js";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";
+
+function NotificationSettingsForm({ currentUser }) {
+ const { t } = useTranslation();
+ const [form] = Form.useForm();
+ const [initialValues, setInitialValues] = useState({});
+ const [isDirty, setIsDirty] = useState(false);
+
+ // Fetch notification settings
+ const { loading, error, data } = useQuery(QUERY_NOTIFICATION_SETTINGS, {
+ fetchPolicy: "network-only",
+ nextFetchPolicy: "network-only",
+ variables: { email: currentUser.email },
+ skip: !currentUser
+ });
+
+ const [updateNotificationSettings, { loading: saving }] = useMutation(UPDATE_NOTIFICATION_SETTINGS);
+
+ // Populate form with fetched data
+ useEffect(() => {
+ if (data?.associations?.length > 0) {
+ const settings = data.associations[0].notification_settings || {};
+ const formattedValues = notificationScenarios.reduce((acc, scenario) => {
+ acc[scenario] = settings[scenario] ?? false;
+ return acc;
+ }, {});
+
+ setInitialValues(formattedValues);
+ form.setFieldsValue(formattedValues);
+ setIsDirty(false); // Reset dirty state when new data loads
+ }
+ }, [data, form]);
+
+ const handleSave = async (values) => {
+ if (data?.associations?.length > 0) {
+ const userId = data.associations[0].id;
+ await updateNotificationSettings({ variables: { id: userId, ns: values } });
+ setInitialValues(values);
+ setIsDirty(false);
+ }
+ };
+
+ const handleFormChange = () => {
+ setIsDirty(true);
+ };
+
+ const handleReset = () => {
+ form.setFieldsValue(initialValues);
+ setIsDirty(false);
+ };
+
+ if (error) return