diff --git a/public/pages/Indices/components/NotificationModal/NotificationModal.tsx b/public/pages/Indices/components/NotificationModal/NotificationModal.tsx
new file mode 100644
index 000000000..7bab02f0a
--- /dev/null
+++ b/public/pages/Indices/components/NotificationModal/NotificationModal.tsx
@@ -0,0 +1,323 @@
+// FILE: NotificationsModal.tsx
+import React, { ReactChild, useContext, useEffect, useRef, useState } from "react";
+import {
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCallOut,
+  EuiSpacer,
+  EuiPanel,
+  EuiEmptyPrompt,
+  EuiSmallButton,
+} from "@elastic/eui";
+import { ServicesContext } from "../../../../services";
+import { BrowserServices } from "../../../../models/interfaces";
+import { CoreServicesContext } from "../../../../components/core_services";
+import { getUISettings, getNavigationUI, getApplication } from "../../../../services/Services";
+import { CoreStart } from "../../../../../../../src/core/public";
+import useField from "../../../../lib/field";
+import { get } from "lodash";
+import { unstable_batchedUpdates } from "react-dom";
+import { diffJson } from "../../../../utils/helpers";
+import {
+  getDiffableMapFromPlainList,
+  getNotifications,
+  submitNotifications,
+  transformConfigListToPlainList,
+} from "../../../Notifications/hooks";
+import { checkPermissionForSubmitLRONConfig } from "../../../../containers/NotificationConfig";
+import { BREADCRUMBS } from "../../../../utils/constants";
+import { TopNavControlButtonData } from "../../../../../../../src/plugins/navigation/public";
+import { FieldState, ILronPlainConfig } from "../../../Notifications/interface";
+import { AllBuiltInComponents } from "../../../../components/FormGenerator";
+import CustomFormRow from "../../../../components/CustomFormRow";
+import ChannelSelect from "../../../../containers/ChannelSelect";
+import {
+  ActionType,
+  ActionTypeMapDescription,
+  ActionTypeMapTitle,
+  FieldEnum,
+  FieldMapLabel,
+  LABEL_FOR_CONDITION,
+  VALIDATE_ERROR_FOR_CHANNELS,
+  getKeyByValue,
+} from "../../../Notifications/constant";
+import UnsavedChangesButtons from "./UnsavedChangesButton";
+
+export interface NotificationsProps {
+  onClose: () => void;
+  visible: boolean;
+}
+
+const Notifications = ({ onClose, visible }: NotificationsProps) => {
+  const services = useContext(ServicesContext) as BrowserServices;
+  const coreServices = useContext(CoreServicesContext) as CoreStart;
+  const [, setIsLoading] = useState(false);
+  const [submitClicked, setSubmitClicked] = useState(false);
+  const [noPermission, setNoPermission] = useState(false);
+  const [permissionForUpdate, setPermissionForUpdate] = useState(false);
+  const uiSettings = getUISettings();
+  const useNewUX = uiSettings.get("home:useNewHomePage");
+
+  const field = useField({
+    values: {} as Partial<FieldState>,
+    onBeforeChange(name) {
+      const previousValue = field.getValues();
+      if (Array.isArray(name) && name.length === 3 && parseInt(name[1]) > 0) {
+        const [dataSourceStr, index] = name;
+        const newProperty = [dataSourceStr, index, FieldEnum.channels];
+        if (
+          (name[2] === FieldEnum.success || name[2] === FieldEnum.failure) &&
+          !get(previousValue, [dataSourceStr, index, FieldEnum.success]) &&
+          !get(previousValue, [dataSourceStr, index, FieldEnum.failure]) &&
+          (!get(previousValue, newProperty) || !get(previousValue, newProperty).length)
+        ) {
+          field.setValue(newProperty, field.getValue([dataSourceStr, `${(parseInt(index) as number) - 1}`, FieldEnum.channels]));
+        }
+      }
+    },
+    onChange(name, value) {
+      if ((name[2] === FieldEnum.success || name[2] === FieldEnum.failure) && !value) {
+        field.validatePromise();
+      }
+    },
+  });
+  const destroyRef = useRef<boolean>(false);
+  const onSubmit = async (): Promise<void> => {
+    if (!permissionForUpdate) {
+      coreServices.notifications.toasts.addDanger({
+        title: "You do not have permissions to update notification settings",
+        text: "Contact your administrator to request permissions.",
+      });
+      return await new Promise((resolve) => setTimeout(() => resolve(undefined), 0));
+    }
+    const { errors, values: notifications } = (await field.validatePromise()) || {};
+    setSubmitClicked(!!errors);
+    if (errors) {
+      return;
+    }
+    setIsLoading(true);
+    const result = await submitNotifications({
+      commonService: services.commonService,
+      plainConfigsPayload: (notifications.dataSource || []).map((item) => {
+        if (!item.success && !item.failure) {
+          return {
+            ...item,
+            channels: [],
+          };
+        }
+
+        return item;
+      }),
+    });
+    if (result && result.ok) {
+      coreServices.notifications.toasts.addSuccess("Notifications settings for index operations have been successfully updated.");
+      reloadNotifications();
+      onClose();
+    } else {
+      coreServices.notifications.toasts.addDanger(result.error);
+    }
+    if (destroyRef.current) {
+      return;
+    }
+    setIsLoading(false);
+  };
+  const reloadNotifications = () => {
+    setIsLoading(true);
+    getNotifications({
+      commonService: services.commonService,
+    })
+      .then((res) => {
+        if (res.ok) {
+          const plainList = transformConfigListToPlainList(res.response.lron_configs.map((item) => item.lron_config));
+          const values = {
+            dataSource: plainList,
+          } as FieldState;
+          unstable_batchedUpdates(() => {
+            field.resetValues(values);
+            field.setOriginalValues(JSON.parse(JSON.stringify(values)));
+          });
+        } else {
+          if (res?.body?.status === 403) {
+            setNoPermission(true);
+            coreServices.notifications.toasts.addDanger({
+              title: "You do not have permissions to view notification settings",
+              text: "Contact your administrator to request permissions.",
+            });
+            return;
+          }
+          coreServices.notifications.toasts.addDanger(res.error);
+        }
+      })
+      .finally(() => {
+        if (!destroyRef.current) {
+          setIsLoading(false);
+        }
+      });
+  };
+  const onCancel = () => {
+    field.resetValues(field.getOriginalValues());
+    onClose();
+  };
+  useEffect(() => {
+    reloadNotifications();
+    checkPermissionForSubmitLRONConfig({
+      services,
+    }).then((result) => setPermissionForUpdate(result));
+    return () => {
+      destroyRef.current = true;
+    };
+  }, []);
+  const values = field.getValues();
+  const allErrors = Object.entries(field.getErrors());
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <EuiModal onClose={onClose} maxWidth={false}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>Notification settings</EuiModalHeaderTitle>
+        <EuiFlexItem grow={false}>
+          <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+            Manage channels
+          </EuiSmallButton>
+        </EuiFlexItem>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <>
+          {noPermission ? (
+            <EuiPanel>
+              <EuiEmptyPrompt
+                iconType="alert"
+                iconColor="danger"
+                title={<h2>Error loading Notification settings</h2>}
+                body={<p>You do not have permissions to view Notification settings. Contact your administrator to request permissions.</p>}
+              />
+            </EuiPanel>
+          ) : (
+            <EuiPanel>
+              {submitClicked && allErrors.length ? (
+                <EuiCallOut iconType="iInCircle" color="danger" title="Address the following error(s) in the form">
+                  <ul>
+                    {allErrors.reduce((total, [key, errors]) => {
+                      const pattern = /^dataSource\.(\d+)\.(\w+)$/;
+                      const matchResult = key.match(pattern);
+                      if (matchResult) {
+                        const index = matchResult[1];
+                        const itemField = matchResult[2];
+                        const notificationItem = (field.getValues().dataSource || [])[parseInt(index, 10)];
+                        const errorMessagePrefix = `${notificationItem.title} — ${
+                          FieldMapLabel[itemField as keyof typeof FieldMapLabel]
+                        }: `;
+                        return [
+                          ...total,
+                          ...(errors || []).map((item) => (
+                            <li key={`${errorMessagePrefix}${item}`} className="ISM-notifications-first-letter-uppercase">
+                              {errorMessagePrefix}
+                              {item}
+                            </li>
+                          )),
+                        ];
+                      }
+
+                      return total;
+                    }, [] as ReactChild[])}
+                  </ul>
+                </EuiCallOut>
+              ) : null}
+              <EuiSpacer />
+              {(values.dataSource || []).map((record) => {
+                const { value, onChange, ...others } = field.registerField<ILronPlainConfig["channels"]>({
+                  name: ["dataSource", `${record.index}`, FieldEnum.channels],
+                  rules: [
+                    {
+                      validator(rule, value) {
+                        const values = field.getValues();
+                        const item = values.dataSource?.[record.index];
+                        if (item?.[FieldEnum.failure] || item?.[FieldEnum.success]) {
+                          if (!value || !value.length) {
+                            return Promise.reject(VALIDATE_ERROR_FOR_CHANNELS);
+                          }
+                        }
+
+                        return Promise.resolve("");
+                      },
+                    },
+                  ],
+                });
+                return (
+                  <CustomFormRow
+                    label={<div className="ISM-notifications-first-letter-uppercase">{record.title}</div>}
+                    helpText={ActionTypeMapDescription[getKeyByValue(ActionTypeMapTitle, record.title) as ActionType]}
+                    direction="hoz"
+                    key={record.action_name}
+                  >
+                    <>
+                      <CustomFormRow label={LABEL_FOR_CONDITION}>
+                        <EuiFlexGroup alignItems="flexStart">
+                          <EuiFlexItem>
+                            <AllBuiltInComponents.CheckBox
+                              {...field.registerField({
+                                name: ["dataSource", `${record.index}`, FieldEnum.failure],
+                              })}
+                              data-test-subj={["dataSource", `${record.index}`, FieldEnum.failure].join(".")}
+                              label="Has failed"
+                            />
+                          </EuiFlexItem>
+                          <EuiFlexItem>
+                            <AllBuiltInComponents.CheckBox
+                              {...field.registerField({
+                                name: ["dataSource", `${record.index}`, FieldEnum.success],
+                              })}
+                              data-test-subj={["dataSource", `${record.index}`, FieldEnum.success].join(".")}
+                              label="Has completed"
+                            />
+                          </EuiFlexItem>
+                        </EuiFlexGroup>
+                      </CustomFormRow>
+                      {field.getValue(["dataSource", `${record.index}`, FieldEnum.failure]) ||
+                      field.getValue(["dataSource", `${record.index}`, FieldEnum.success]) ? (
+                        <>
+                          <EuiSpacer />
+                          <CustomFormRow
+                            label={FieldMapLabel[FieldEnum.channels]}
+                            isInvalid={!!field.getError(["dataSource", `${record.index}`, FieldEnum.channels])}
+                            error={field.getError(["dataSource", `${record.index}`, FieldEnum.channels])}
+                            data-test-subj={["dataSource", `${record.index}`, FieldEnum.channels].join(".")}
+                          >
+                            <ChannelSelect {...others} value={value} onChange={onChange} />
+                          </CustomFormRow>
+                        </>
+                      ) : null}
+                    </>
+                  </CustomFormRow>
+                );
+              })}
+              <EuiSpacer />
+            </EuiPanel>
+          )}
+        </>
+      </EuiModalBody>
+      <EuiModalFooter>
+        <UnsavedChangesButtons
+          unsavedCount={diffJson(
+            getDiffableMapFromPlainList(values.dataSource || []),
+            getDiffableMapFromPlainList(field.getOriginalValues().dataSource || [])
+          )}
+          formErrorsCount={allErrors.length}
+          onClickSubmit={onSubmit}
+          onClickCancel={onCancel}
+          submitButtonDataTestSubj="submitNotifcationSettings"
+        />
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};
+
+export default Notifications;
diff --git a/public/pages/Indices/components/NotificationModal/UnsavedChangesButton.tsx b/public/pages/Indices/components/NotificationModal/UnsavedChangesButton.tsx
new file mode 100644
index 000000000..71e2cb756
--- /dev/null
+++ b/public/pages/Indices/components/NotificationModal/UnsavedChangesButton.tsx
@@ -0,0 +1,90 @@
+// FILE: UnsavedChangesButtons.tsx
+
+import React, { useCallback, useRef, useState } from "react";
+import { EuiSmallButton, EuiSmallButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from "@elastic/eui";
+import classNames from "classnames";
+
+interface UnsavedChangesButtonsProps {
+  unsavedCount: number;
+  formErrorsCount?: number;
+  onClickCancel?: () => void;
+  onClickSubmit: () => Promise<void>;
+  submitButtonDataTestSubj?: string;
+}
+
+const UnsavedChangesButtons: React.FC<UnsavedChangesButtonsProps> = ({
+  unsavedCount,
+  formErrorsCount,
+  onClickCancel,
+  onClickSubmit,
+  submitButtonDataTestSubj,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const destroyRef = useRef(false);
+
+  const onClick = async () => {
+    setLoading(true);
+    try {
+      await onClickSubmit();
+    } catch (e) {
+    } finally {
+      if (destroyRef.current) {
+        return;
+      }
+      setLoading(false);
+    }
+  };
+
+  const renderCancel = useCallback(
+    () => (
+      <EuiSmallButtonEmpty onClick={onClickCancel} iconType="cross" target="_blank">
+        Cancel
+      </EuiSmallButtonEmpty>
+    ),
+    [onClickCancel]
+  );
+
+  const renderConfirm = useCallback(
+    () => (
+      <EuiSmallButton
+        data-test-subj={submitButtonDataTestSubj}
+        onClick={onClick}
+        isLoading={loading}
+        disabled={loading}
+        iconType="check"
+        color="primary"
+        fill
+      >
+        Save
+      </EuiSmallButton>
+    ),
+    [onClick, submitButtonDataTestSubj, loading]
+  );
+
+  return (
+    <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
+      <>
+        {formErrorsCount ? (
+          <EuiFlexItem grow={false}>
+            <EuiText color="danger" size="s">
+              {" "}
+              {formErrorsCount} form errors{" "}
+            </EuiText>
+          </EuiFlexItem>
+        ) : null}
+        {unsavedCount && !formErrorsCount ? (
+          <EuiFlexItem grow={false}>
+            <EuiText color="warning" size="s">
+              {" "}
+              {unsavedCount} unsaved changes{" "}
+            </EuiText>
+          </EuiFlexItem>
+        ) : null}
+      </>
+      <EuiFlexItem grow={false}>{renderCancel()}</EuiFlexItem>
+      <EuiFlexItem grow={false}>{renderConfirm()}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export default UnsavedChangesButtons;
diff --git a/public/pages/Indices/components/NotificationModal/index.ts b/public/pages/Indices/components/NotificationModal/index.ts
new file mode 100644
index 000000000..90e24c1ca
--- /dev/null
+++ b/public/pages/Indices/components/NotificationModal/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import NotificationModal from "./NotificationModal";
+
+export default NotificationModal;
diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx
index 6397a2a73..436886880 100644
--- a/public/pages/Indices/containers/Indices/Indices.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.tsx
@@ -43,6 +43,7 @@ import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 import { TopNavControlButtonData, TopNavControlIconData, TopNavControlTextData } from "src/plugins/navigation/public";
 import { EuiSpacer } from "@opensearch-project/oui";
+import NotificationModal from "../../components/NotificationModal";
 
 interface IndicesProps extends RouteComponentProps, DataSourceMenuProperties {
   indexService: IndexService;
@@ -63,6 +64,7 @@ interface IndicesState extends DataSourceMenuProperties {
   showDataStreams: boolean;
   isDataStreamColumnVisible: boolean;
   useUpdatedUX: boolean;
+  isNotificationModalVisible: boolean;
 }
 
 export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
@@ -88,6 +90,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
       showDataStreams,
       isDataStreamColumnVisible: showDataStreams,
       useUpdatedUX: useUpdatedUX,
+      isNotificationModalVisible: false,
     };
 
     this.getIndices = _.debounce(this.getIndices, 500, { leading: true });
@@ -232,6 +235,16 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
     this.setState({ search: DEFAULT_QUERY_PARAMS.search, query: Query.parse(DEFAULT_QUERY_PARAMS.search) });
   };
 
+  onCloseNotification = () => {
+    this.setState({ isNotificationModalVisible: false });
+  };
+
+  toggleNotificationModal = () => {
+    this.setState((prevState) => ({
+      isNotificationModalVisible: !prevState.isNotificationModalVisible,
+    }));
+  };
+
   render() {
     const {
       totalIndices,
@@ -285,7 +298,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
               id: "Notification settings",
               label: "Notification Settings",
               fill: false,
-              // href: `${PLUGIN_NAME}#/create-index`,
+              run: this.toggleNotificationModal,
               testId: "notificationSettingsButton",
               controlType: "button",
               color: "secondary",
@@ -333,6 +346,9 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
             />
           </ContentPanel>
         </div>
+        {this.state.isNotificationModalVisible && (
+          <NotificationModal onClose={this.onCloseNotification} visible={this.state.isNotificationModalVisible} />
+        )}
       </>
     ) : (
       <ContentPanel