diff --git a/src/App.tsx b/src/App.tsx
index 2c65a2dd3..be59fa5cf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -54,6 +54,7 @@ import {
 import { ConnectionsPage } from "./pages/Settings/ConnectionsPage";
 import { EventQueueStatusPage } from "./pages/Settings/EventQueueStatus";
 import { FeatureFlagsPage } from "./pages/Settings/FeatureFlagsPage";
+import NotificationSilencePage from "./pages/Settings/NotificationSilencePage";
 import { TopologyCardPage } from "./pages/TopologyCard";
 import { UsersPage } from "./pages/UsersPage";
 import { ConfigInsightsPage } from "./pages/config/ConfigInsightsList";
@@ -374,14 +375,27 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
             true
           )}
         />
-        <Route
-          path="notifications"
-          element={withAuthorizationAccessCheck(
-            <NotificationsPage />,
-            tables.database,
-            "read"
-          )}
-        />
+        <Route path="notifications">
+          <Route
+            index
+            element={withAuthorizationAccessCheck(
+              <NotificationsPage />,
+              tables.database,
+              "read",
+              true
+            )}
+          />
+
+          <Route
+            path="silence"
+            element={withAuthorizationAccessCheck(
+              <NotificationSilencePage />,
+              tables.database,
+              "write",
+              true
+            )}
+          />
+        </Route>
         <Route
           path="feature-flags"
           element={withAuthorizationAccessCheck(
diff --git a/src/api/axios.ts b/src/api/axios.ts
index 465c900d4..ba0d9ff17 100644
--- a/src/api/axios.ts
+++ b/src/api/axios.ts
@@ -136,6 +136,15 @@ export const Rback = axios.create({
   }
 });
 
+export const NotificationAPI = axios.create({
+  baseURL: `${API_BASE}/notification`,
+  headers: {
+    Accept: "application/json",
+    Prefer: "return=representation",
+    "Content-Type": "application/json"
+  }
+});
+
 for (const client of [
   Auth,
   IncidentCommander,
diff --git a/src/api/services/notifications.ts b/src/api/services/notifications.ts
index 3e7a56ea8..1a82b3da3 100644
--- a/src/api/services/notifications.ts
+++ b/src/api/services/notifications.ts
@@ -1,7 +1,8 @@
-import { Notification } from "../../components/Notifications/notificationsTableColumns";
+import { Notification } from "@flanksource-ui/components/Notifications/notificationsTableColumns";
 import { AVATAR_INFO } from "../../constants";
-import { IncidentCommander } from "../axios";
+import { IncidentCommander, NotificationAPI } from "../axios";
 import { resolvePostGrestRequestWithPagination } from "../resolve";
+import { SilenceNotificationResponse } from "../types/notifications";
 
 export const getNotificationsSummary = async () => {
   return resolvePostGrestRequestWithPagination(
@@ -22,3 +23,10 @@ export const getNotificationById = async (id: string) => {
   );
   return res.data ? res.data?.[0] : undefined;
 };
+
+export const silenceNotification = async (
+  data: SilenceNotificationResponse
+) => {
+  const res = await NotificationAPI.post("/silence", data);
+  return res.data;
+};
diff --git a/src/api/services/topology.ts b/src/api/services/topology.ts
index 48b32eedc..72d919b5b 100644
--- a/src/api/services/topology.ts
+++ b/src/api/services/topology.ts
@@ -300,3 +300,13 @@ export const getCheckNames = async () => {
   const res = await IncidentCommander.get<HealthCheckNames[]>(`/check_names`);
   return res.data;
 };
+
+export const getCanaryNames = async () => {
+  const res = await IncidentCommander.get<
+    {
+      id: string;
+      name: string;
+    }[]
+  >(`/canary_names`);
+  return res.data;
+};
diff --git a/src/api/types/notifications.ts b/src/api/types/notifications.ts
new file mode 100644
index 000000000..0b5475f7d
--- /dev/null
+++ b/src/api/types/notifications.ts
@@ -0,0 +1,11 @@
+export type SilenceNotificationResponse = {
+  id: string;
+  component_id: string;
+  config_id: string;
+  check_id: string;
+  canary_id: string;
+  from: string;
+  until: string;
+  description: string;
+  recursive: boolean;
+};
diff --git a/src/components/Forms/Formik/FormikCanaryDropdown.tsx b/src/components/Forms/Formik/FormikCanaryDropdown.tsx
new file mode 100644
index 000000000..2ce7486c0
--- /dev/null
+++ b/src/components/Forms/Formik/FormikCanaryDropdown.tsx
@@ -0,0 +1,47 @@
+import { getCanaryNames } from "@flanksource-ui/api/services/topology";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import FormikSelectDropdown from "./FormikSelectDropdown";
+
+type FormikCanaryDropdownProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+  hint?: string;
+
+  className?: string;
+};
+
+export default function FormikCanaryDropdown({
+  name,
+  label,
+  required = false,
+  hint,
+  className = "flex flex-col space-y-2 py-2"
+}: FormikCanaryDropdownProps) {
+  const { isLoading, data: canary } = useQuery({
+    queryKey: ["canaries", "canary_names"],
+    queryFn: () => getCanaryNames()
+  });
+
+  const options = useMemo(
+    () =>
+      canary?.map((canary) => ({
+        label: canary.name,
+        value: canary.id
+      })),
+    [canary]
+  );
+
+  return (
+    <FormikSelectDropdown
+      name={name}
+      className={className}
+      options={options}
+      label={label}
+      isLoading={isLoading}
+      required={required}
+      hint={hint}
+    />
+  );
+}
diff --git a/src/components/Forms/Formik/FormikDurationPicker.tsx b/src/components/Forms/Formik/FormikDurationPicker.tsx
new file mode 100644
index 000000000..68ad64c61
--- /dev/null
+++ b/src/components/Forms/Formik/FormikDurationPicker.tsx
@@ -0,0 +1,220 @@
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import clsx from "clsx";
+import dayjs from "dayjs";
+import { useFormikContext } from "formik";
+import { useCallback } from "react";
+import { MdOutlineKeyboardArrowDown } from "react-icons/md";
+import FormikTextInput from "./FormikTextInput";
+
+const commonDurations = [
+  {
+    label: "1 Day",
+    values: {
+      from: dayjs().toISOString(),
+      to: dayjs().add(1, "day").toISOString()
+    }
+  },
+  {
+    label: "2 Days",
+    values: {
+      from: dayjs().toISOString(),
+      to: dayjs().add(2, "day").toISOString()
+    }
+  },
+  {
+    label: "3 Days",
+    values: {
+      from: dayjs().toISOString(),
+      to: dayjs().add(3, "day").toISOString()
+    }
+  },
+  {
+    label: "1 Week",
+    values: {
+      from: dayjs().toISOString(),
+      to: dayjs().add(1, "week").toISOString()
+    }
+  },
+  {
+    label: "2 Weeks",
+    values: {
+      from: dayjs().toISOString(),
+      to: dayjs().add(2, "week").toISOString()
+    }
+  },
+  {
+    label: "1 Month",
+    values: {
+      from: dayjs().toISOString(),
+      to: dayjs().add(1, "month").toISOString()
+    }
+  },
+  {
+    label: "3 Months",
+    values: {
+      from: dayjs().toISOString(),
+      to: dayjs().add(3, "month").toISOString()
+    }
+  },
+  {
+    label: "6 Months",
+    values: {
+      from: dayjs().toISOString(),
+      to: dayjs().add(6, "month").toISOString()
+    }
+  },
+  {
+    label: "1 Year",
+    values: {
+      from: dayjs().toISOString(),
+      to: dayjs().add(1, "year").toISOString()
+    }
+  }
+];
+
+type FormikDurationPickerProps = {
+  fieldNames: {
+    from: string;
+    to: string;
+  };
+  label: string;
+  className?: string;
+  placeholder?: string;
+};
+
+export default function FormikDurationPicker({
+  fieldNames: { from, to },
+  label,
+  placeholder = "Select duration",
+  className
+}: FormikDurationPickerProps) {
+  const { values, setFieldValue } =
+    useFormikContext<Record<string, string | undefined>>();
+
+  const updateFrom = useCallback(
+    (value: string) => {
+      setFieldValue(from, dayjs(value).format("YYYY-MM-DDTHH:mm"));
+    },
+    [from, setFieldValue]
+  );
+
+  const updateTo = useCallback(
+    (value: string) => {
+      setFieldValue(to, dayjs(value).format("YYYY-MM-DDTHH:mm"));
+    },
+    [to, setFieldValue]
+  );
+
+  const clearFields = useCallback(() => {
+    setFieldValue(from, undefined);
+    setFieldValue(to, undefined);
+  }, [from, to, setFieldValue]);
+
+  return (
+    <Popover className={clsx("relative py-2 text-sm", className)}>
+      <PopoverButton as="div" className="w-full">
+        {({ open }) => {
+          return (
+            <div className="flex w-full flex-col gap-2">
+              {label && (
+                <label className="text-sm font-medium text-gray-700">
+                  {label}
+                </label>
+              )}
+              <div className="flex w-full flex-row items-center rounded-md border border-gray-300 bg-white px-2 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                {values?.[to] || values?.[from] ? (
+                  <div className="flex flex-1 flex-row text-sm">
+                    <span>
+                      {dayjs(values?.[from]).format("DD/MM/YYYY HH:mm")}
+                    </span>
+                    <span className="mx-2">-</span>
+                    <span>
+                      {dayjs(values?.[to]).format("DD/MM/YYYY HH:mm")}
+                    </span>
+                  </div>
+                ) : (
+                  <span>{placeholder || "Select duration"}</span>
+                )}
+                <div
+                  className={clsx("ml-2 mt-1", {
+                    "rotate-180": open
+                  })}
+                >
+                  <MdOutlineKeyboardArrowDown size={18} />
+                </div>
+              </div>
+            </div>
+          );
+        }}
+      </PopoverButton>
+      <PopoverPanel
+        className={`absolute z-50 flex w-full origin-top-right flex-col divide-y divide-gray-100 rounded-md bg-slate-50 ring-1 ring-black ring-opacity-5 drop-shadow-xl focus:outline-none`}
+      >
+        {({ close }) => {
+          return (
+            <div
+              className={clsx(
+                "z-50 flex max-h-96 w-full cursor-auto rounded-md bg-white py-2 shadow-lg shadow-gray-200 ring-1 ring-black ring-opacity-5 focus:outline-none"
+              )}
+            >
+              <div className="w-1/2 overflow-hidden border-r border-gray-300 px-1">
+                <div className="p-3">
+                  <div>
+                    <div className="mb-2">
+                      <div className="my-3">
+                        <FormikTextInput
+                          label="From"
+                          type="datetime-local"
+                          name={from}
+                        />
+                      </div>
+                      <div className="my-3">
+                        <FormikTextInput
+                          label="To"
+                          type="datetime-local"
+                          name={to}
+                        />
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2">
+                      <button
+                        title="Clear Time Range"
+                        className="inline-flex justify-center rounded-md border border-gray-300 bg-white px-2 py-1 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                        onClick={clearFields}
+                      >
+                        Clear
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="flex w-1/2 flex-col overflow-y-hidden p-2">
+                <div className="mb-2 whitespace-nowrap text-sm font-medium sm:space-x-2">
+                  Common Durations
+                </div>
+                {commonDurations.map((option) => {
+                  return (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        updateFrom(option.values.from);
+                        updateTo(option.values.to);
+                        close();
+                      }}
+                      key={option.label}
+                      className={clsx(
+                        "option-item flex w-full items-center justify-between px-2 py-1 text-left hover:bg-gray-100"
+                      )}
+                    >
+                      {option.label}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        }}
+      </PopoverPanel>
+    </Popover>
+  );
+}
diff --git a/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx b/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx
new file mode 100644
index 000000000..af8c3a127
--- /dev/null
+++ b/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx
@@ -0,0 +1,102 @@
+import FormikCanaryDropdown from "@flanksource-ui/components/Forms/Formik/FormikCanaryDropdown";
+import FormikChecksDropdown from "@flanksource-ui/components/Forms/Formik/FormikChecksDropdown";
+import FormikComponentsDropdown from "@flanksource-ui/components/Forms/Formik/FormikComponentsDropdown";
+import FormikConfigsDropdown from "@flanksource-ui/components/Forms/Formik/FormikConfigsDropdown";
+import { Switch } from "@flanksource-ui/ui/FormControls/Switch";
+import { useFormikContext } from "formik";
+import { useState } from "react";
+
+export default function FormikNotificationResourceField() {
+  const { values } = useFormikContext<Record<string, any>>();
+
+  const component_id = values.component_id;
+  const config_id = values.config_id;
+  const check_id = values.check_id;
+  const canary_id = values.canary_id;
+
+  const [switchOption, setSwitchOption] = useState<
+    "Component" | "Catalog" | "Check" | "Canary"
+  >(() => {
+    if (component_id) {
+      return "Component";
+    }
+    if (config_id) {
+      return "Catalog";
+    }
+    if (check_id) {
+      return "Check";
+    }
+    if (canary_id) {
+      return "Canary";
+    }
+    return "Component";
+  });
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label className={`form-label`}>Resource</label>
+      <div>
+        <div className="flex w-full flex-row">
+          <Switch
+            options={["Component", "Catalog", "Check", "Canary"]}
+            className="w-auto"
+            itemsClassName=""
+            defaultValue="Go Template"
+            value={switchOption}
+            onChange={(v) => {
+              setSwitchOption(v);
+              // clear the other fields if the user selects a different option
+              if (v === "Component") {
+                values.config_id = null;
+                values.check_id = null;
+                values.canary_id = null;
+              }
+
+              if (v === "Catalog") {
+                values.component_id = null;
+                values.check_id = null;
+                values.canary_id = null;
+              }
+
+              if (v === "Check") {
+                values.component_id = null;
+                values.config_id = null;
+                values.canary_id = null;
+              }
+
+              if (v === "Canary") {
+                values.component_id = null;
+                values.config_id = null;
+                values.check_id = null;
+              }
+            }}
+          />
+        </div>
+        {switchOption === "Component" && (
+          <FormikComponentsDropdown
+            name="component_id"
+            className="flex flex-col py-1"
+          />
+        )}
+        {switchOption === "Catalog" && (
+          <FormikConfigsDropdown
+            name="config_id"
+            className="flex flex-col py-1"
+          />
+        )}
+        {switchOption === "Check" && (
+          <FormikChecksDropdown
+            name="check_id"
+            className="flex flex-col py-1"
+          />
+        )}
+        {switchOption === "Canary" && (
+          <FormikCanaryDropdown
+            name="canary_id"
+            className="flex flex-col py-1"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx b/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx
new file mode 100644
index 000000000..465143c56
--- /dev/null
+++ b/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx
@@ -0,0 +1,81 @@
+import { silenceNotification } from "@flanksource-ui/api/services/notifications";
+import { SilenceNotificationResponse as SilenceNotificationRequest } from "@flanksource-ui/api/types/notifications";
+import FormikCheckbox from "@flanksource-ui/components/Forms/Formik/FormikCheckbox";
+import FormikDurationPicker from "@flanksource-ui/components/Forms/Formik/FormikDurationPicker";
+import FormikTextArea from "@flanksource-ui/components/Forms/Formik/FormikTextArea";
+import FormikNotificationResourceField from "@flanksource-ui/components/Notifications/SilenceNotificationForm/FormikNotificationField";
+import {
+  toastError,
+  toastSuccess
+} from "@flanksource-ui/components/Toast/toast";
+import { useMutation } from "@tanstack/react-query";
+import { Form, Formik } from "formik";
+import { FaCircleNotch } from "react-icons/fa";
+import { useSearchParams } from "react-router-dom";
+
+export default function NotificationSilenceForm() {
+  const [searchParam] = useSearchParams();
+
+  const component_id = searchParam.get("component_id") ?? undefined;
+  const config_id = searchParam.get("config_id") ?? undefined;
+  const check_id = searchParam.get("check_id") ?? undefined;
+  const canary_id = searchParam.get("canary_id") ?? undefined;
+
+  const initialValues: Partial<SilenceNotificationRequest> = {
+    component_id,
+    config_id,
+    check_id,
+    canary_id
+  };
+
+  const { isLoading, mutate } = useMutation({
+    mutationFn: (data: SilenceNotificationRequest) => silenceNotification(data),
+    onSuccess: () => {
+      // do something
+      toastSuccess("Silenced notification");
+    },
+    onError: (error) => {
+      // do something
+      console.error(error);
+      toastError("Failed to silence notification");
+    }
+  });
+
+  return (
+    <div className="flex flex-1 flex-col gap-2">
+      <Formik<Partial<SilenceNotificationRequest>>
+        initialValues={initialValues}
+        onSubmit={(v) =>
+          mutate({
+            ...v,
+            from: new Date(v.from!).toISOString(),
+            until: new Date(v.until!).toISOString()
+          } as SilenceNotificationRequest)
+        }
+      >
+        <Form className="flex flex-1 flex-col gap-2 overflow-y-auto py-4">
+          <FormikNotificationResourceField />
+          <FormikDurationPicker
+            fieldNames={{
+              from: "from",
+              to: "until"
+            }}
+            label="Silence Duration"
+          />
+          <FormikTextArea name="description" label="Silence Reason" />
+          <FormikCheckbox name="recursive" label="Recursive" />
+          <div className="flex justify-end">
+            <button
+              type="submit"
+              className="btn btn-primary"
+              disabled={isLoading}
+            >
+              {isLoading && <FaCircleNotch className="animate-spin" />}
+              Submit
+            </button>
+          </div>
+        </Form>
+      </Formik>
+    </div>
+  );
+}
diff --git a/src/pages/Settings/NotificationSilencePage.tsx b/src/pages/Settings/NotificationSilencePage.tsx
new file mode 100644
index 000000000..6bd892a09
--- /dev/null
+++ b/src/pages/Settings/NotificationSilencePage.tsx
@@ -0,0 +1,34 @@
+import NotificationSilenceForm from "@flanksource-ui/components/Notifications/SilenceNotificationForm/NotificationSilenceForm";
+import {
+  BreadcrumbChild,
+  BreadcrumbNav,
+  BreadcrumbRoot
+} from "@flanksource-ui/ui/BreadcrumbNav";
+import { Head } from "@flanksource-ui/ui/Head";
+import { SearchLayout } from "@flanksource-ui/ui/Layout/SearchLayout";
+
+export default function NotificationSilencePage() {
+  return (
+    <>
+      <Head prefix="Silence Notification" />
+      <SearchLayout
+        title={
+          <BreadcrumbNav
+            list={[
+              <BreadcrumbRoot link="/settings/notifications" key="breadcrumb-1">
+                Notifications
+              </BreadcrumbRoot>,
+              <BreadcrumbChild key={"silence"}>Silence</BreadcrumbChild>
+            ]}
+          />
+        }
+        contentClass="p-0 h-full"
+      >
+        <div className="mx-auto flex h-full max-w-screen-md flex-1 flex-col px-6 py-6 pb-0">
+          <h3 className="text-xl font-semibold">Silence Notification</h3>
+          <NotificationSilenceForm />
+        </div>
+      </SearchLayout>
+    </>
+  );
+}