diff --git a/src/api/types/notifications.ts b/src/api/types/notifications.ts
index 725a7b9b5..25a139aad 100644
--- a/src/api/types/notifications.ts
+++ b/src/api/types/notifications.ts
@@ -45,6 +45,7 @@ export type NotificationRules = {
 
 export type SilenceNotificationResponse = {
   id: string;
+  filter?: string;
   component_id?: string;
   config_id?: string;
   check_id?: string;
@@ -85,6 +86,7 @@ export type NotificationSilenceItem = {
   id: string;
   namespace: string;
   description?: string;
+  filter?: string;
   from: string;
   until: string;
   recursive?: boolean;
diff --git a/src/components/Notifications/SilenceNotificationForm/EditNotificationSilenceModal.tsx b/src/components/Notifications/SilenceNotificationForm/EditNotificationSilenceModal.tsx
index 9afd609bf..4ccc07695 100644
--- a/src/components/Notifications/SilenceNotificationForm/EditNotificationSilenceModal.tsx
+++ b/src/components/Notifications/SilenceNotificationForm/EditNotificationSilenceModal.tsx
@@ -16,12 +16,7 @@ export default function EditNotificationSilenceModal({
   onUpdate = () => {}
 }: EditNotificationSilenceModalProps) {
   return (
-    <Modal
-      open={isOpen}
-      onClose={onClose}
-      title="Edit Notification Silence"
-      size="medium"
-    >
+    <Modal open={isOpen} onClose={onClose} title="Edit Silence" size="medium">
       <div className="flex flex-col gap-4">
         <NotificationSilenceForm
           data={data}
diff --git a/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx b/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx
index 1f29e4fb6..db5055f39 100644
--- a/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx
+++ b/src/components/Notifications/SilenceNotificationForm/FormikNotificationField.tsx
@@ -1,4 +1,5 @@
 import FormikResourceSelectorDropdown from "@flanksource-ui/components/Forms/Formik/FormikResourceSelectorDropdown";
+import { Label } from "@flanksource-ui/ui/FormControls/Label";
 import { Switch } from "@flanksource-ui/ui/FormControls/Switch";
 import { useFormikContext } from "formik";
 import { useMemo, useState } from "react";
@@ -56,7 +57,7 @@ export default function FormikNotificationResourceField() {
 
   return (
     <div className="flex flex-col gap-2">
-      <label className={`form-label`}>Resource</label>
+      <Label label="Resource" required={true} />
       <div>
         <div className="flex w-full flex-row">
           <Switch
@@ -96,16 +97,9 @@ export default function FormikNotificationResourceField() {
         </div>
 
         <FormikResourceSelectorDropdown
-          required
           name={fieldName.name}
           checkResourceSelector={
-            switchOption === "Check"
-              ? [
-                  {
-                    id: check_id
-                  }
-                ]
-              : undefined
+            switchOption === "Check" ? [{ id: check_id }] : undefined
           }
           componentResourceSelector={
             switchOption === "Component"
diff --git a/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx b/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx
index bdd31fcaf..45b5aba67 100644
--- a/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx
+++ b/src/components/Notifications/SilenceNotificationForm/NotificationSilenceForm.tsx
@@ -13,10 +13,12 @@ import FormikTextArea from "@flanksource-ui/components/Forms/Formik/FormikTextAr
 import FormikNotificationResourceField from "@flanksource-ui/components/Notifications/SilenceNotificationForm/FormikNotificationField";
 import { toastError } from "@flanksource-ui/components/Toast/toast";
 import { Button } from "@flanksource-ui/ui/Buttons/Button";
+import DeleteButton from "@flanksource-ui/ui/Buttons/DeleteButton";
 import { parseDateMath } from "@flanksource-ui/ui/Dates/TimeRangePicker/parseDateMath";
+import ErrorMessage from "@flanksource-ui/ui/FormControls/ErrorMessage";
 import { useMutation } from "@tanstack/react-query";
 import { AxiosError } from "axios";
-import { Form, Formik } from "formik";
+import { Formik, Form, FormikBag } from "formik";
 import { FaCircleNotch } from "react-icons/fa";
 import { useSearchParams } from "react-router-dom";
 
@@ -53,6 +55,7 @@ export default function NotificationSilenceForm({
       if (data.id) {
         return updateNotificationSilence({
           id: data.id,
+          filter: data.filter,
           updated_at: "now()",
           source: data.source,
           canary_id: data.canary_id,
@@ -68,12 +71,7 @@ export default function NotificationSilenceForm({
       }
       return silenceNotification(data);
     },
-    onSuccess,
-    onError: (error: AxiosError) => {
-      // do something
-      console.error(error);
-      toastError(error.message);
-    }
+    onSuccess
   });
 
   const { mutate: deleteSilence, isLoading: isDeleting } = useMutation({
@@ -89,78 +87,135 @@ export default function NotificationSilenceForm({
     }
   });
 
+  const validate = (v: Partial<SilenceNotificationRequest>) => {
+    const errors: { [key: string]: string } = {};
+    if (
+      v.canary_id == null &&
+      v.check_id == null &&
+      v.component_id == null &&
+      v.config_id == null &&
+      v.filter == null
+    ) {
+      errors.form = "Must specify either a resource and/or a filter";
+    }
+    if (v.until == null) {
+      errors.until = "Must specify a silence duration";
+    }
+    return errors;
+  };
+
+  const submit = (
+    v: Partial<SilenceNotificationRequest>,
+    formik: FormikBag
+  ) => {
+    // Before submitting, we need to parse the date math expressions, if
+    // any are present in the from and until fields.
+    const { from, until } = v;
+    const fromTime = from?.includes("now") ? parseDateMath(from, false) : from;
+
+    const untilTime = until?.includes("now")
+      ? parseDateMath(until, false)
+      : until;
+
+    return mutate(
+      {
+        ...v,
+        from: fromTime,
+        until: untilTime
+      } as SilenceNotificationRequest,
+      {
+        onError(error) {
+          // @ts-ignore
+          formik.setErrors({ form: error });
+        }
+      }
+    );
+  };
+
   return (
+    // @ts-ignore
     <div className="flex flex-1 flex-col gap-2 overflow-auto">
       <Formik<Partial<SilenceNotificationRequest>>
         initialValues={initialValues}
-        onSubmit={(v) => {
-          // Before submitting, we need to parse the date math expressions, if
-          // any are present in the from and until fields.
-          const { from, until } = v;
-          const fromTime = from?.includes("now")
-            ? parseDateMath(from, false)
-            : from;
-
-          const untilTime = until?.includes("now")
-            ? parseDateMath(until, false)
-            : until;
-
-          return mutate({
-            ...v,
-            from: fromTime,
-            until: untilTime
-          } as SilenceNotificationRequest);
-        }}
+        validateOnChange={false}
+        validateOnBlur={true}
+        validate={validate}
+        onSubmit={submit}
       >
-        <Form className="flex flex-1 flex-col gap-2 overflow-y-auto">
-          <div
-            className={`flex flex-col gap-2 overflow-y-auto p-4 ${data?.id ? "flex-1" : ""}`}
-          >
-            <FormikNotificationResourceField />
-            <FormikCheckbox name="recursive" label="Recursive" />
-            <FormikDurationPicker
-              fieldNames={{
-                from: "from",
-                to: "until"
-              }}
-              label="Silence Duration"
-            />
-            <FormikTextArea name="description" label="Reason" />
-          </div>
-          <div className={`${footerClassName}`}>
-            {data?.id && (
-              <>
-                <Button
-                  onClick={() => {
-                    onCancel();
+        {({ errors }) => {
+          return (
+            <Form className="flex flex-1 flex-col gap-2 overflow-y-auto">
+              <div
+                className={`flex flex-col gap-2 overflow-y-auto p-4 ${data?.id ? "flex-1" : ""}`}
+              >
+                <FormikNotificationResourceField />
+
+                <FormikCheckbox
+                  checkboxStyle="toggle"
+                  name="recursive"
+                  label="Recursive"
+                  hint="When selected, the silence will apply to all children of the item"
+                />
+
+                <FormikDurationPicker
+                  required
+                  hint="Duration for which the silence will apply for, after which notifications will begin firing again"
+                  fieldNames={{
+                    from: "from",
+                    to: "until"
                   }}
-                  className="btn-secondary"
-                >
-                  Cancel
-                </Button>
-                <div className="flex-1" />
-                <Button
-                  onClick={() => deleteSilence(data.id)}
-                  className="btn-danger"
+                  label="Duration"
+                />
+
+                <FormikTextArea
+                  name="filter"
+                  label="Filter"
+                  hint="CEL expression for the silence to match against"
+                />
+
+                <FormikTextArea name="description" label="Reason" />
+                <ErrorMessage
+                  message={
+                    // @ts-ignore
+                    errors.form
+                  }
+                />
+              </div>
+              <div className={`${footerClassName}`}>
+                {data?.id && (
+                  <>
+                    <DeleteButton
+                      title="Delete Silence"
+                      description="Are you sure you want to delete this silence?"
+                      yesLabel="Delete"
+                      onConfirm={() => deleteSilence(data.id)}
+                    />
+
+                    <div className="flex-1" />
+
+                    <Button
+                      onClick={() => {
+                        onCancel();
+                      }}
+                      className="btn-secondary"
+                    >
+                      Cancel
+                    </Button>
+                  </>
+                )}
+
+                <button
+                  type="submit"
+                  className="btn btn-primary"
+                  disabled={isLoading}
                 >
-                  {isDeleting && (
-                    <FaCircleNotch className="mr-2 animate-spin" />
-                  )}
-                  {isDeleting ? "Deleting" : "Delete"}
-                </Button>
-              </>
-            )}
-
-            <button
-              type="submit"
-              className="btn btn-primary"
-              disabled={isLoading}
-            >
-              {isLoading && <FaCircleNotch className="mr-2 animate-spin" />}
-              {data?.id ? "Update" : "Submit"}
-            </button>
-          </div>
-        </Form>
+                  {isLoading && <FaCircleNotch className="mr-2 animate-spin" />}
+                  {data?.id ? "Update" : "Submit"}
+                </button>
+              </div>
+            </Form>
+          );
+        }}
       </Formik>
     </div>
   );
diff --git a/src/components/Notifications/SilenceNotificationsList.tsx b/src/components/Notifications/SilenceNotificationsList.tsx
index 369b7a995..b229e4642 100644
--- a/src/components/Notifications/SilenceNotificationsList.tsx
+++ b/src/components/Notifications/SilenceNotificationsList.tsx
@@ -1,139 +1,37 @@
-import {
-  deleteNotificationSilence,
-  getNotificationSilencesByID
-} from "@flanksource-ui/api/services/notifications";
+import { getNotificationSilencesByID } from "@flanksource-ui/api/services/notifications";
 import { NotificationSilenceItemApiResponse } from "@flanksource-ui/api/types/notifications";
-import { tables } from "@flanksource-ui/context/UserAccessContext/permissions";
 import { Age } from "@flanksource-ui/ui/Age";
-import { ConfirmationPromptDialog } from "@flanksource-ui/ui/AlertDialog/ConfirmationPromptDialog";
 import { Avatar } from "@flanksource-ui/ui/Avatar";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
-import { IconButton } from "@flanksource-ui/ui/Buttons/IconButton";
-import { MRTCellProps } from "@flanksource-ui/ui/MRTDataTable/MRTCellProps";
 import MRTDataTable from "@flanksource-ui/ui/MRTDataTable/MRTDataTable";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
-import { DotsVerticalIcon } from "@heroicons/react/solid";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
 import dayjs from "dayjs";
 import { MRT_ColumnDef } from "mantine-react-table";
-import { useState } from "react";
 import { BiRepeat } from "react-icons/bi";
-import { BsTrash } from "react-icons/bs";
 import { useSearchParams } from "react-router-dom";
 import { CheckLink } from "../Canary/HealthChecks/CheckLink";
 import ConfigLink from "../Configs/ConfigLink/ConfigLink";
-import { withAuthorizationAccessCheck } from "../Permissions/AuthorizationAccessCheck";
-import { toastError } from "../Toast/toast";
 import { TopologyLink } from "../Topology/TopologyLink";
 import EditNotificationSilenceModal from "./SilenceNotificationForm/EditNotificationSilenceModal";
 
-function ActionMenu({ handleDelete }: { handleDelete: () => void }) {
-  return withAuthorizationAccessCheck(
-    <div className="relative">
-      <Menu>
-        <MenuButton className="min-w-7 rounded-full p-0.5 text-gray-400 hover:text-gray-500">
-          <DotsVerticalIcon className="h-6 w-6" />
-        </MenuButton>
-        <MenuItems
-          portal
-          anchor="bottom end"
-          className="z-10 w-48 divide-y divide-gray-100 rounded-md bg-white shadow-card focus:outline-none"
-        >
-          <MenuItem
-            as="div"
-            className="flex w-full cursor-pointer items-center p-3 text-gray-700 hover:bg-gray-200"
-            onClick={() => {
-              handleDelete();
-            }}
-          >
-            <>
-              <IconButton
-                className="z-5 mr-2 bg-transparent group-hover:inline-block"
-                ovalProps={{
-                  stroke: "blue",
-                  height: "18px",
-                  width: "18px",
-                  fill: "transparent"
-                }}
-                icon={
-                  <BsTrash
-                    className="border-l-1 border-0 border-gray-200 text-gray-600"
-                    size={18}
-                  />
-                }
-              />
-              Delete
-            </>
-          </MenuItem>
-        </MenuItems>
-      </Menu>
-    </div>,
-    tables.identities,
-    "write"
-  );
-}
-
-const DeleteCell = ({
-  row
-}: MRTCellProps<NotificationSilenceItemApiResponse>) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const id = row.original.id;
-
-  const client = useQueryClient();
-
-  const { mutateAsync: deleteItem } = useMutation({
-    mutationFn: (id: string) => {
-      return deleteNotificationSilence(id);
-    },
-    onSuccess: () => {
-      client.refetchQueries({
-        queryKey: ["notification_silences"]
-      });
-    },
-    onError: (error) => {
-      toastError((error as Error).message);
-    }
-  });
-
-  return (
-    <>
-      {" "}
-      <ActionMenu handleDelete={() => setIsOpen(true)} />
-      <ConfirmationPromptDialog
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        title="Delete Notification Silence"
-        description="Are you sure you want to delete this notification silence?"
-        onConfirm={() => deleteItem(id)}
-      />
-    </>
-  );
-};
-
 const silenceNotificationListColumns: MRT_ColumnDef<NotificationSilenceItemApiResponse>[] =
   [
     {
       header: "Resource",
-      size: 300,
+      size: 150,
       Cell: ({ row }) => {
         const check = row.original.checks;
         const catalog = row.original.catalog;
         const component = row.original.component;
         const recursive = row.original.recursive;
-
-        const isExpired = dayjs(row.original.until).isBefore(dayjs());
-
         return (
           <div
             onClick={(e) => {
               e.stopPropagation();
               e.preventDefault();
             }}
-            className={clsx(
-              "flex flex-row items-center",
-              isExpired && "line-through"
-            )}
+            className={clsx("flex flex-row items-center")}
           >
             {check && (
               <CheckLink
@@ -160,59 +58,48 @@ const silenceNotificationListColumns: MRT_ColumnDef<NotificationSilenceItemApiRe
     },
     {
       header: "Duration",
-      size: 100,
+      size: 50,
       Cell: ({ row }) => {
         const from = row.original.from;
         const until = row.original.until;
         const isExpired = dayjs(until).isBefore(dayjs());
 
         return (
-          <Age
-            className={clsx(isExpired && "line-through")}
-            from={from}
-            to={until}
-          />
+          <span>
+            <Age
+              className={clsx(isExpired && "line-through")}
+              from={from}
+              to={until}
+            ></Age>
+            {isExpired && <span className="pl-1 text-red-500">Expired</span>}
+          </span>
         );
       }
     },
     {
       header: "Source",
       accessorKey: "source",
-      size: 100,
-      Cell: ({ row }) => {
-        const source = row.original.source;
-        const isExpired = dayjs(row.original.until).isBefore(dayjs());
-        return (
-          <span className={clsx(isExpired && "line-through")}>{source}</span>
-        );
-      }
+      size: 50
+    },
+
+    {
+      header: "Filter",
+      accessorKey: "filter",
+      size: 100
     },
     {
       header: "Reason",
       accessorKey: "description",
-      size: 400,
-      Cell: ({ row }) => {
-        const isExpired = dayjs(row.original.until).isBefore(dayjs());
-        return (
-          <span className={clsx(isExpired && "line-through")}>
-            {row.original.description}
-          </span>
-        );
-      }
+      size: 200
     },
     {
       header: "Created By",
-      size: 100,
+      maxSize: 50,
+      minSize: 20,
       Cell: ({ row }) => {
         const user = row.original.createdBy;
-
         return <Avatar user={user} />;
       }
-    },
-    {
-      size: 100,
-      header: "Delete",
-      Cell: DeleteCell
     }
   ];
 
diff --git a/src/components/Playbooks/Runs/ApprovePlaybookRunModal.tsx b/src/components/Playbooks/Runs/ApprovePlaybookRunModal.tsx
index d59164baa..d5b674a01 100644
--- a/src/components/Playbooks/Runs/ApprovePlaybookRunModal.tsx
+++ b/src/components/Playbooks/Runs/ApprovePlaybookRunModal.tsx
@@ -35,6 +35,7 @@ export default function ApprovePlaybookRunModal({
 
   return (
     <ConfirmationPromptDialog
+      confirmationStyle="approve"
       title={`Approve Playbook ${playbookTitle} Run`}
       description={<p>Are you sure you want to approve this playbook run?</p>}
       onConfirm={() => approve(playbookRunId)}
diff --git a/src/ui/BreadcrumbNav/index.tsx b/src/ui/BreadcrumbNav/index.tsx
index c6934a9c8..368c5795b 100644
--- a/src/ui/BreadcrumbNav/index.tsx
+++ b/src/ui/BreadcrumbNav/index.tsx
@@ -4,9 +4,10 @@ import { Link } from "react-router-dom";
 
 type BreadcrumbNavProps = {
   list: Array<string | React.ReactNode | { to: string; title: string }>;
+  children?: React.ReactNode;
 };
 
-export function BreadcrumbNav({ list }: BreadcrumbNavProps) {
+export function BreadcrumbNav({ list, children }: BreadcrumbNavProps) {
   const navs = list
     .map((nav, i) => {
       let comp = null;
@@ -54,7 +55,12 @@ export function BreadcrumbNav({ list }: BreadcrumbNavProps) {
     .flat()
     .slice(0, -1);
 
-  return <div className="flex flex-shrink-0 items-center">{navs}</div>;
+  return (
+    <div className="flex flex-shrink-0 items-center">
+      {navs}
+      {children}
+    </div>
+  );
 }
 
 type BreadcrumbRootProps = {