diff --git a/keep-ui/app/alerts/alert-actions.tsx b/keep-ui/app/alerts/alert-actions.tsx
index d6ca4e316b..ec26b7ca41 100644
--- a/keep-ui/app/alerts/alert-actions.tsx
+++ b/keep-ui/app/alerts/alert-actions.tsx
@@ -4,6 +4,10 @@ import { getSession } from "next-auth/react";
 import { getApiURL } from "utils/apiUrl";
 import { AlertDto } from "./models";
 import { useAlerts } from "utils/hooks/useAlerts";
+import { PlusIcon } from "@radix-ui/react-icons";
+import { toast } from "react-toastify";
+import { usePresets } from "utils/hooks/usePresets";
+import { usePathname, useRouter } from "next/navigation";
 
 interface Props {
   selectedRowIds: string[];
@@ -11,8 +15,18 @@ interface Props {
 }
 
 export default function AlertActions({ selectedRowIds, alerts }: Props) {
+  const pathname = usePathname();
+  const router = useRouter();
   const { useAllAlerts } = useAlerts();
-  const { mutate } = useAllAlerts();
+  const { mutate } = useAllAlerts({ revalidateOnFocus: false });
+  const { useAllPresets } = usePresets();
+  const { mutate: presetsMutator } = useAllPresets({
+    revalidateOnFocus: false,
+  });
+
+  const selectedAlerts = alerts.filter((_alert, index) =>
+    selectedRowIds.includes(index.toString())
+  );
 
   const onDelete = async () => {
     const confirmed = confirm(
@@ -23,10 +37,6 @@ export default function AlertActions({ selectedRowIds, alerts }: Props) {
       const session = await getSession();
       const apiUrl = getApiURL();
 
-      const selectedAlerts = alerts.filter((_alert, index) =>
-        selectedRowIds.includes(index.toString())
-      );
-
       for await (const alert of selectedAlerts) {
         const { fingerprint } = alert;
 
@@ -51,6 +61,36 @@ export default function AlertActions({ selectedRowIds, alerts }: Props) {
     }
   };
 
+  async function addOrUpdatePreset() {
+    const presetName = prompt("Enter new preset name");
+    if (presetName) {
+      const distinctAlertNames = Array.from(
+        new Set(selectedAlerts.map((alert) => alert.name))
+      );
+      const options = distinctAlertNames.map((name) => {
+        return { value: `name=${name}`, label: `name=${name}` };
+      });
+      const session = await getSession();
+      const apiUrl = getApiURL();
+      const response = await fetch(`${apiUrl}/preset`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${session?.accessToken}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ name: presetName, options: options }),
+      });
+      if (response.ok) {
+        toast(`Preset ${presetName} created!`, {
+          position: "top-left",
+          type: "success",
+        });
+        presetsMutator();
+        router.replace(`${pathname}?selectedPreset=${presetName}`);
+      }
+    }
+  }
+
   return (
     <div className="w-full flex justify-end items-center py-0.5">
       <Button
@@ -62,6 +102,16 @@ export default function AlertActions({ selectedRowIds, alerts }: Props) {
       >
         Delete {selectedRowIds.length} alert(s)
       </Button>
+      <Button
+        icon={PlusIcon}
+        size="xs"
+        color="orange"
+        className="ml-2.5"
+        onClick={async () => await addOrUpdatePreset()}
+        tooltip="Save current filter as a view"
+      >
+        Create Preset
+      </Button>
     </div>
   );
 }
diff --git a/keep-ui/app/alerts/alert-assign-ticket-modal.tsx b/keep-ui/app/alerts/alert-assign-ticket-modal.tsx
new file mode 100644
index 0000000000..be21071326
--- /dev/null
+++ b/keep-ui/app/alerts/alert-assign-ticket-modal.tsx
@@ -0,0 +1,199 @@
+import React from 'react';
+import Select, { components } from 'react-select';
+import { Dialog } from '@headlessui/react';
+import { Button, TextInput } from '@tremor/react';
+import { PlusIcon } from '@heroicons/react/20/solid'
+import { useForm, Controller, SubmitHandler } from 'react-hook-form';
+import { Providers } from "./../providers/providers";
+import { useSession } from "next-auth/react";
+import { getApiURL } from 'utils/apiUrl';
+
+interface AlertAssignTicketModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  ticketingProviders: Providers; // Replace 'ProviderType' with the actual type of ticketingProviders
+  alertFingerprint: string; // Replace 'string' with the actual type of alertFingerprint
+}
+
+interface OptionType {
+  value: string;
+  label: string;
+  id: string;
+  type: string;
+  icon?: string;
+  isAddProvider?: boolean;
+}
+
+interface FormData {
+  provider: {
+    id: string;
+    value: string;
+    type: string;
+  };
+  ticket_url: string;
+}
+
+const AlertAssignTicketModal = ({ isOpen, onClose, ticketingProviders, alertFingerprint }: AlertAssignTicketModalProps) => {
+  const { handleSubmit, control, formState: { errors } } = useForm<FormData>();
+  // get the token
+  const { data: session } = useSession();
+
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
+    try {
+      // build the formData
+      const requestData = {
+        enrichments: {
+          ticket_type: data.provider.type,
+          ticket_url: data.ticket_url,
+          ticket_provider_id: data.provider.value,
+        },
+        fingerprint: alertFingerprint,
+      };
+
+
+      const response = await fetch(`${getApiURL()}/alerts/enrich`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${session?.accessToken}`,
+        },
+        body: JSON.stringify(requestData),
+      });
+
+      if (response.ok) {
+        // Handle success
+        console.log("Ticket assigned successfully");
+        onClose();
+      } else {
+        // Handle error
+        console.error("Failed to assign ticket");
+      }
+    } catch (error) {
+      // Handle unexpected error
+      console.error("An unexpected error occurred");
+    }
+  };
+
+  const providerOptions: OptionType[] = ticketingProviders.map((provider) => ({
+    id: provider.id,
+    value: provider.id,
+    label: provider.details.name || '',
+    type: provider.type,
+  }));
+
+  const customOptions: OptionType[] = [
+    ...providerOptions,
+    {
+      value: 'add_provider',
+      label: 'Add another ticketing provider',
+      icon: 'plus',
+      isAddProvider: true,
+      id: 'add_provider',
+      type: '',
+    },
+  ];
+
+  const handleOnChange = (option: any) => {
+    if (option.value === 'add_provider') {
+      window.open('/providers?labels=ticketing', '_blank');
+    }
+  };
+
+
+  const Option = (props: any) => {
+    // Check if the option is 'add_provider'
+    const isAddProvider = props.data.isAddProvider;
+
+    return (
+      <components.Option {...props}>
+        <div className="flex items-center">
+          {isAddProvider ? (
+            <PlusIcon className="h-5 w-5 text-gray-400 mr-2" />
+          ) : (
+            props.data.type && <img src={`/icons/${props.data.type}-icon.png`} alt="" style={{ height: '20px', marginRight: '10px' }} />
+          )}
+          <span style={{ color: isAddProvider ? 'gray' : 'inherit' }}>{props.data.label}</span>
+        </div>
+      </components.Option>
+    );
+  };
+
+  const SingleValue = (props: any) => {
+    const { children, data } = props;
+
+    return (
+      <components.SingleValue {...props}>
+        <div className="flex items-center">
+          {data.isAddProvider ? (
+            <PlusIcon className="h-5 w-5 text-gray-400 mr-2" />
+          ) : (
+            data.type && <img src={`/icons/${data.type}-icon.png`} alt="" style={{ height: '20px', marginRight: '10px' }} />
+          )}
+          {children}
+        </div>
+      </components.SingleValue>
+    );
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} className="fixed inset-0 z-10 overflow-y-auto">
+      <div className="flex items-center justify-center min-h-screen px-4">
+        <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
+        <div className="relative bg-white p-6 rounded-lg" style={{ width: "400px", maxWidth: "90%" }}>
+          <Dialog.Title className="text-lg font-semibold">Assign Ticket</Dialog.Title>
+          {ticketingProviders.length > 0 ? (
+            <form onSubmit={handleSubmit(onSubmit)} className="mt-4">
+              <div className="mt-4">
+                <label className="block text-sm font-medium text-gray-700">Ticket Provider</label>
+                <Controller
+                  name="provider"
+                  control={control}
+                  rules={{ required: 'Provider is required' }}
+                  render={({ field }) => (
+                    <Select {...field} options={customOptions} onChange={(option) => { field.onChange(option); handleOnChange(option); }} components={{ Option, SingleValue }} />
+                  )}
+                />
+              </div>
+              <div className="mt-4">
+                <label className="block text-sm font-medium text-gray-700">Ticket URL</label>
+                <Controller
+                  name="ticket_url"
+                  control={control}
+                  rules={{
+                    required: 'URL is required',
+                    pattern: {
+                      value: /^(https?|http):\/\/[^\s/$.?#].[^\s]*$/i,
+                      message: 'Invalid URL format',
+                    },
+                  }}
+                  render={({ field }) => (
+                    <>
+                      <TextInput {...field} className="w-full mt-1" placeholder="Ticket URL" />
+                      {errors.ticket_url && <span className="text-red-500">{errors.ticket_url.message}</span>}
+                    </>
+                  )}
+                />
+              </div>
+              <div className="mt-6 flex gap-2">
+                <Button color="orange" type="submit">Assign Ticket</Button>
+                <Button onClick={onClose} variant="secondary" className="border border-orange-500 text-orange-500">Cancel</Button>
+              </div>
+            </form>
+          ) : (
+            <div className="text-center mt-4">
+              <p className="text-gray-700 text-sm">
+                Please connect at least one ticketing provider to use this feature.
+              </p>
+              <Button onClick={() => window.open('/providers?labels=ticketing', '_blank')} color="orange" className="mt-4 mr-4">
+                Connect Ticketing Provider
+              </Button>
+              <Button onClick={onClose} variant="secondary" className="mt-4 border border-orange-500 text-orange-500">Close</Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+export default AlertAssignTicketModal;
diff --git a/keep-ui/app/alerts/alert-extra-payload.tsx b/keep-ui/app/alerts/alert-extra-payload.tsx
index 339cb34599..c7fb5f8474 100644
--- a/keep-ui/app/alerts/alert-extra-payload.tsx
+++ b/keep-ui/app/alerts/alert-extra-payload.tsx
@@ -49,7 +49,7 @@ export default function AlertExtraPayload({
         Extra Payload
       </AccordionHeader>
       <AccordionBody ref={ref}>
-        <pre className="overflow-y-scroll">
+        <pre className="overflow-scroll max-w-lg">
           {JSON.stringify(extraPayload, null, 2)}
         </pre>
       </AccordionBody>
diff --git a/keep-ui/app/alerts/alert-menu.tsx b/keep-ui/app/alerts/alert-menu.tsx
index fccf50c499..af67a9e739 100644
--- a/keep-ui/app/alerts/alert-menu.tsx
+++ b/keep-ui/app/alerts/alert-menu.tsx
@@ -1,5 +1,5 @@
 import { Menu, Portal, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { Icon } from "@tremor/react";
 import {
   ArchiveBoxIcon,
@@ -21,9 +21,11 @@ import { useRouter } from "next/navigation";
 
 interface Props {
   alert: AlertDto;
+  isMenuOpen: boolean;
+  setIsMenuOpen: (key: string) => void;
 }
 
-export default function AlertMenu({ alert }: Props) {
+export default function AlertMenu({ alert, isMenuOpen, setIsMenuOpen}: Props) {
   const router = useRouter();
 
   const apiUrl = getApiURL();
@@ -40,7 +42,10 @@ export default function AlertMenu({ alert }: Props) {
 
   const [isOpen, setIsOpen] = useState(false);
   const [method, setMethod] = useState<ProviderMethod | null>(null);
+
+
   const { refs, x, y } = useFloating();
+
   const alertName = alert.name;
   const fingerprint = alert.fingerprint;
   const alertSource = alert.source![0];
@@ -131,163 +136,168 @@ export default function AlertMenu({ alert }: Props) {
 
   const canAssign = !alert.assignee;
 
+  const handleMenuToggle = () => {
+    setIsMenuOpen(alert.fingerprint);
+  };
+
+  const handleCloseMenu = () => {
+    setIsMenuOpen('');
+  }
+
   return (
     <>
       <Menu>
-        {({ open }) => (
-          <>
-            <Menu.Button ref={refs.setReference}>
-              <Icon
-                icon={EllipsisHorizontalIcon}
-                className="hover:bg-gray-100"
-                color="gray"
-              />
-            </Menu.Button>
-            {open && (
-              <Portal>
-                {/* when menu is opened, prevent scrolling with fixed div */}
-                <div className="fixed inset-0" aria-hidden="true" />
-                <Transition
-                  as={Fragment}
-                  enter="transition ease-out duration-100"
-                  enterFrom="transform opacity-0 scale-95"
-                  enterTo="transform opacity-100 scale-100"
-                  leave="transition ease-in duration-75"
-                  leaveFrom="transform opacity-100 scale-100"
-                  leaveTo="transform opacity-0 scale-95"
-                >
-                  <Menu.Items
-                    ref={refs.setFloating}
-                    className="z-50 absolute mt-2 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-                    style={{ left: (x ?? 0) - 50, top: y ?? 0 }}
-                  >
-                    <div className="px-1 py-1">
-                      <Menu.Item>
-                        {({ active }) => (
-                          <Link
-                            href={`workflows/builder?alertName=${encodeURIComponent(
-                              alertName
-                            )}&alertSource=${alertSource}`}
-                          >
-                            <button
-                              disabled={!alertSource}
-                              className={`${
-                                active ? "bg-slate-200" : "text-gray-900"
-                              } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
-                            >
-                              <PlusIcon
-                                className="mr-2 h-4 w-4"
-                                aria-hidden="true"
-                              />
-                              Create Workflow
-                            </button>
-                          </Link>
-                        )}
-                      </Menu.Item>
-                      <Menu.Item>
-                        {({ active }) => (
-                          <button
-                            onClick={() =>
-                              router.replace(`/alerts?id=${alert.id}`, {
-                                scroll: false,
-                              })
-                            }
-                            className={`${
-                              active ? "bg-slate-200" : "text-gray-900"
-                            } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
-                          >
-                            <ArchiveBoxIcon
-                              className="mr-2 h-4 w-4"
-                              aria-hidden="true"
-                            />
-                            History
-                          </button>
-                        )}
-                      </Menu.Item>
-                      {canAssign && (
-                        <Menu.Item>
+        <Menu.Button ref={refs.setReference} onClick={handleMenuToggle}>
+          <Icon
+            icon={EllipsisHorizontalIcon}
+            className="hover:bg-gray-100"
+            color="gray"
+          />
+        </Menu.Button>
+        {isMenuOpen && (
+          <Portal>
+            {/* when menu is opened, prevent scrolling with fixed div */}
+              <div className="fixed inset-0" aria-hidden="true"  onClick={() => handleCloseMenu()}/>
+            <Transition
+              as={Fragment}
+              show={isMenuOpen}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items static
+                ref={refs.setFloating}
+                className="z-50 absolute mt-2 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                style={{ left: (x ?? 0) - 50, top: y ?? 0 }}
+              >
+                <div className="px-1 py-1">
+                  <Menu.Item>
+                    {({ active }) => (
+                      <Link
+                        href={`workflows/builder?alertName=${encodeURIComponent(
+                          alertName
+                        )}&alertSource=${alertSource}`}
+                      >
+                        <button
+                          disabled={!alertSource}
+                          className={`${
+                            active ? "bg-slate-200" : "text-gray-900"
+                          } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
+                        >
+                          <PlusIcon
+                            className="mr-2 h-4 w-4"
+                            aria-hidden="true"
+                          />
+                          Create Workflow
+                        </button>
+                      </Link>
+                    )}
+                  </Menu.Item>
+                  <Menu.Item>
+                    {({ active }) => (
+                      <button
+                        onClick={() =>
+                          router.replace(`/alerts?id=${alert.id}`, {
+                            scroll: false,
+                          })
+                        }
+                        className={`${
+                          active ? "bg-slate-200" : "text-gray-900"
+                        } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
+                      >
+                        <ArchiveBoxIcon
+                          className="mr-2 h-4 w-4"
+                          aria-hidden="true"
+                        />
+                        History
+                      </button>
+                    )}
+                  </Menu.Item>
+                  {canAssign && (
+                    <Menu.Item>
+                      {({ active }) => (
+                        <button
+                          onClick={() => callAssignEndpoint()}
+                          className={`${
+                            active ? "bg-slate-200" : "text-gray-900"
+                          } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
+                          // disabled={!!alert.assignee && currentUser.email !== alert.assignee}
+                          // title={`${
+                          //   !!alert.assignee && currentUser.email !== alert.assignee
+                          //     ? "Cannot unassign other users"
+                          //     : ""
+                          // }`}
+                        >
+                          <UserPlusIcon
+                            className="mr-2 h-4 w-4"
+                            aria-hidden="true"
+                          />
+                          Self-Assign
+                        </button>
+                      )}
+                    </Menu.Item>
+                  )}
+                </div>
+                {provider?.methods && provider?.methods?.length > 0 && (
+                  <div className="px-1 py-1">
+                    {provider.methods.map((method) => {
+                      const methodEnabled = isMethodEnabled(method);
+                      return (
+                        <Menu.Item key={method.name}>
                           {({ active }) => (
                             <button
-                              onClick={() => callAssignEndpoint()}
                               className={`${
                                 active ? "bg-slate-200" : "text-gray-900"
+                              } ${
+                                !methodEnabled
+                                  ? "text-slate-300 cursor-not-allowed"
+                                  : ""
                               } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
-                              // disabled={!!alert.assignee && currentUser.email !== alert.assignee}
-                              // title={`${
-                              //   !!alert.assignee && currentUser.email !== alert.assignee
-                              //     ? "Cannot unassign other users"
-                              //     : ""
-                              // }`}
+                              disabled={!methodEnabled}
+                              title={
+                                !methodEnabled
+                                  ? "Missing required scopes"
+                                  : ""
+                              }
+                              onClick={() => openMethodTransition(method)}
                             >
-                              <UserPlusIcon
+                              {/* TODO: We can probably make this icon come from the server as well */}
+                              <DynamicIcon
                                 className="mr-2 h-4 w-4"
                                 aria-hidden="true"
                               />
-                              Self-Assign
+                              {method.name}
                             </button>
                           )}
                         </Menu.Item>
-                      )}
-                    </div>
-                    {provider?.methods && provider?.methods?.length > 0 && (
-                      <div className="px-1 py-1">
-                        {provider.methods.map((method) => {
-                          const methodEnabled = isMethodEnabled(method);
-                          return (
-                            <Menu.Item key={method.name}>
-                              {({ active }) => (
-                                <button
-                                  className={`${
-                                    active ? "bg-slate-200" : "text-gray-900"
-                                  } ${
-                                    !methodEnabled
-                                      ? "text-slate-300 cursor-not-allowed"
-                                      : ""
-                                  } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
-                                  disabled={!methodEnabled}
-                                  title={
-                                    !methodEnabled
-                                      ? "Missing required scopes"
-                                      : ""
-                                  }
-                                  onClick={() => openMethodTransition(method)}
-                                >
-                                  {/* TODO: We can probably make this icon come from the server as well */}
-                                  <DynamicIcon
-                                    className="mr-2 h-4 w-4"
-                                    aria-hidden="true"
-                                  />
-                                  {method.name}
-                                </button>
-                              )}
-                            </Menu.Item>
-                          );
-                        })}
-                      </div>
+                      );
+                    })}
+                  </div>
+                )}
+                <div className="px-1 py-1">
+                  <Menu.Item>
+                    {({ active }) => (
+                      <button
+                        onClick={onDelete}
+                        className={`${
+                          active ? "bg-slate-200" : "text-gray-900"
+                        }  group flex w-full items-center rounded-md px-2 py-2 text-xs`}
+                      >
+                        <TrashIcon
+                          className="mr-2 h-4 w-4"
+                          aria-hidden="true"
+                        />
+                        {alert.deleted ? "Restore" : "Delete"}
+                      </button>
                     )}
-                    <div className="px-1 py-1">
-                      <Menu.Item>
-                        {({ active }) => (
-                          <button
-                            onClick={onDelete}
-                            className={`${
-                              active ? "bg-slate-200" : "text-gray-900"
-                            }  group flex w-full items-center rounded-md px-2 py-2 text-xs`}
-                          >
-                            <TrashIcon
-                              className="mr-2 h-4 w-4"
-                              aria-hidden="true"
-                            />
-                            {alert.deleted ? "Restore" : "Delete"}
-                          </button>
-                        )}
-                      </Menu.Item>
-                    </div>
-                  </Menu.Items>
-                </Transition>
-              </Portal>
-            )}
-          </>
+                  </Menu.Item>
+                </div>
+              </Menu.Items>
+            </Transition>
+          </Portal>
         )}
       </Menu>
       {method !== null ? (
diff --git a/keep-ui/app/alerts/alert-name.tsx b/keep-ui/app/alerts/alert-name.tsx
index a1843e07ea..3fab96c7bf 100644
--- a/keep-ui/app/alerts/alert-name.tsx
+++ b/keep-ui/app/alerts/alert-name.tsx
@@ -4,13 +4,18 @@ import {
   Cog8ToothIcon,
   TicketIcon,
   TrashIcon,
+  PencilSquareIcon
 } from "@heroicons/react/24/outline";
 import { Icon } from "@tremor/react";
 import { AlertDto, AlertKnownKeys } from "./models";
 import { Workflow } from "app/workflows/models";
 import { useRouter } from "next/navigation";
 import { useWorkflows } from "utils/hooks/useWorkflows";
-import { useMemo } from "react";
+import { useProviders } from "utils/hooks/useProviders";
+import { useMemo, useState, createContext, useContext} from "react";
+import AlertAssignTicketModal from "./alert-assign-ticket-modal";
+import AlertNoteModal from './alert-note-modal';
+
 
 const getExtraPayloadNoKnownKeys = (alert: AlertDto) =>
   Object.fromEntries(
@@ -40,11 +45,27 @@ const getRelevantWorkflows = (alert: AlertDto, workflows: Workflow[]) => {
 
 interface Props {
   alert: AlertDto;
+  isNoteModalOpen: boolean;
+  setNoteModalOpen: (key: string) => void;
+  isTicketModalOpen: boolean;
+  setTicketModalOpen: (key: string) => void;
 }
-
-export default function AlertName({ alert }: Props) {
+export default function AlertName({ alert, isNoteModalOpen, setNoteModalOpen, isTicketModalOpen, setTicketModalOpen}: Props) {
   const router = useRouter();
   const { data: workflows = [] } = useWorkflows();
+  // get providers
+  const { data: providersData = { installed_providers: [] }} = useProviders({ revalidateOnFocus: false, revalidateOnMount: false});
+
+  const ticketingProviders = useMemo(() =>
+    providersData.installed_providers.filter(provider => provider.tags.includes('ticketing')),
+    [providersData.installed_providers]
+  );
+
+  const handleNoteClick = () => {
+    setNoteModalOpen(alert.fingerprint);
+  };
+
+  const closeAssignTicketModal = () => setTicketModalOpen('');
 
   const {
     name,
@@ -52,6 +73,7 @@ export default function AlertName({ alert }: Props) {
     generatorURL,
     deleted,
     lastReceived,
+    note,
     ticket_url: ticketUrl,
     ticket_status: ticketStatus,
     playbook_url,
@@ -70,104 +92,129 @@ export default function AlertName({ alert }: Props) {
     [alert, workflows]
   );
 
+  const handleIconClick = () => {
+    if (!ticketUrl) {
+      setTicketModalOpen(alert.fingerprint);
+    } else {
+      window.open(ticketUrl, '_blank'); // Open the ticket URL in a new tab
+    }
+  };
+
+
   return (
-    <div className="max-w-[340px]">
-      <div className="flex items-center justify-between">
-        <div className="truncate" title={alert.name}>
-          {name}{" "}
-        </div>
-        <div>
-          {(url ?? generatorURL) && (
-            <a href={url || generatorURL} target="_blank">
-              <Icon
-                icon={ArrowTopRightOnSquareIcon}
-                tooltip="Open Original Alert"
-                color="gray"
-                variant="solid"
-                size="xs"
-                className="ml-1"
-              />
-            </a>
-          )}
-          {ticketUrl && (
-            <a href={ticketUrl} target="_blank">
+      <div className="max-w-[340px]">
+        <div className="flex items-center justify-between">
+          <div className="truncate" title={alert.name}>
+            {name}{" "}
+          </div>
+          <div>
+            {(url ?? generatorURL) && (
+              <a href={url || generatorURL} target="_blank">
+                <Icon
+                  icon={ArrowTopRightOnSquareIcon}
+                  tooltip="Open Original Alert"
+                  color="gray"
+                  variant="solid"
+                  size="xs"
+                  className="ml-1"
+                />
+              </a>
+            )}
+            <Icon
+              icon={TicketIcon}
+              tooltip={ticketUrl ? `Ticket Assigned ${ticketStatus ? `(status: ${ticketStatus})` : ''}` : "Click to assign Ticket"}
+              size="xs"
+              color={ticketUrl ? "green" : "gray"}
+              className="ml-1 cursor-pointer"
+              variant="solid"
+              onClick={handleIconClick}
+            />
+            {playbook_url && (
+              <a href={playbook_url} target="_blank">
+                <Icon
+                  icon={BookOpenIcon}
+                  tooltip="Playbook"
+                  size="xs"
+                  color="gray"
+                  className="ml-1"
+                  variant="solid"
+                />
+              </a>
+            )}
+            <Icon
+              icon={PencilSquareIcon}
+              tooltip="Click to add note"
+              size="xs"
+              color={note ? "green" : "gray"}
+              className="ml-1 cursor-pointer"
+              variant="solid"
+              onClick={handleNoteClick}
+            />
+            {deleted && (
               <Icon
-                icon={TicketIcon}
-                tooltip={`Ticket Assigned ${
-                  ticketStatus ? `(status: ${ticketStatus})` : ``
-                }`}
+                icon={TrashIcon}
+                tooltip="This alert has been deleted"
                 size="xs"
                 color="gray"
                 className="ml-1"
                 variant="solid"
               />
-            </a>
-          )}
-          {playbook_url && (
-            <a href={playbook_url} target="_blank">
+            )}
+            {relevantWorkflows.length > 0 && (
               <Icon
-                icon={BookOpenIcon}
-                tooltip="Playbook"
+                icon={Cog8ToothIcon}
                 size="xs"
-                color="gray"
-                className="ml-1"
+                color={`${
+                  relevantWorkflows.every(
+                    (wf) => wf.last_execution_status === "success"
+                  )
+                    ? "green"
+                    : relevantWorkflows.some(
+                        (wf) => wf.last_execution_status === "error"
+                      )
+                    ? "red"
+                    : relevantWorkflows.some(
+                        (wf) =>
+                          wf.last_execution_status === "providers_not_configured"
+                      )
+                    ? "amber"
+                    : "gray"
+                }`}
+                tooltip={`${
+                  relevantWorkflows.every(
+                    (wf) => wf.last_execution_status === "success"
+                  )
+                    ? "All workflows executed successfully"
+                    : relevantWorkflows.some(
+                        (wf) => wf.last_execution_status === "error"
+                      )
+                    ? "Some workflows failed to execute"
+                    : relevantWorkflows.some(
+                        (wf) =>
+                          wf.last_execution_status === "providers_not_configured"
+                      )
+                    ? "Some workflows are not configured"
+                    : "Workflows have yet to execute"
+                }`}
+                onClick={() => handleWorkflowClick(relevantWorkflows)}
+                className="ml-1 cursor-pointer"
                 variant="solid"
               />
-            </a>
-          )}
-          {deleted && (
-            <Icon
-              icon={TrashIcon}
-              tooltip="This alert has been deleted"
-              size="xs"
-              color="gray"
-              className="ml-1"
-              variant="solid"
-            />
-          )}
-          {relevantWorkflows.length > 0 && (
-            <Icon
-              icon={Cog8ToothIcon}
-              size="xs"
-              color={`${
-                relevantWorkflows.every(
-                  (wf) => wf.last_execution_status === "success"
-                )
-                  ? "green"
-                  : relevantWorkflows.some(
-                      (wf) => wf.last_execution_status === "error"
-                    )
-                  ? "red"
-                  : relevantWorkflows.some(
-                      (wf) =>
-                        wf.last_execution_status === "providers_not_configured"
-                    )
-                  ? "amber"
-                  : "gray"
-              }`}
-              tooltip={`${
-                relevantWorkflows.every(
-                  (wf) => wf.last_execution_status === "success"
-                )
-                  ? "All workflows executed successfully"
-                  : relevantWorkflows.some(
-                      (wf) => wf.last_execution_status === "error"
-                    )
-                  ? "Some workflows failed to execute"
-                  : relevantWorkflows.some(
-                      (wf) =>
-                        wf.last_execution_status === "providers_not_configured"
-                    )
-                  ? "Some workflows are not configured"
-                  : "Workflows have yet to execute"
-              }`}
-              onClick={() => handleWorkflowClick(relevantWorkflows)}
-              className="ml-1 cursor-pointer"
-              variant="solid"
-            />
-          )}
+            )}
+          </div>
         </div>
+        <AlertAssignTicketModal
+          isOpen={isTicketModalOpen}
+          onClose={closeAssignTicketModal}
+          ticketingProviders={ticketingProviders}
+          alertFingerprint={alert.fingerprint}
+        />
+          <AlertNoteModal
+            isOpen={isNoteModalOpen}
+            handleClose={() => setNoteModalOpen('')}
+            initialContent={note || ''}
+            alertFingerprint={alert.fingerprint}
+          />
       </div>
-    </div>
   );
 }
diff --git a/keep-ui/app/alerts/alert-note-modal.tsx b/keep-ui/app/alerts/alert-note-modal.tsx
new file mode 100644
index 0000000000..bcd645b439
--- /dev/null
+++ b/keep-ui/app/alerts/alert-note-modal.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import React, { useContext, useState } from 'react';
+// https://github.com/zenoamaro/react-quill/issues/292
+const ReactQuill = typeof window === 'object' ? require('react-quill') : () => false;
+import 'react-quill/dist/quill.snow.css';
+import { Button } from '@tremor/react';
+import { getApiURL } from '../../utils/apiUrl';
+import { useSession } from 'next-auth/react';
+
+interface AlertNoteModalProps {
+  isOpen: boolean;
+  handleClose: () => void;
+  initialContent: string;
+  alertFingerprint: string;
+}
+
+const AlertNoteModal = ({
+    isOpen,
+    handleClose,
+    initialContent,
+    alertFingerprint
+  }: AlertNoteModalProps) => {
+    const [noteContent, setNoteContent] = useState<string>(initialContent);
+
+    // get the session
+    const { data: session } = useSession();
+
+    const formats = [
+      'header',
+      'bold',
+      'italic',
+      'underline',
+      'list',
+      'bullet',
+      'link',
+      'align',
+      'blockquote',
+      'code-block',
+      'color',
+    ];
+
+    const modules = {
+      toolbar: [
+        [{ header: '1' }, { header: '2' }],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        ['bold', 'italic', 'underline'],
+        ['link'],
+        [{ align: [] }],
+        ['blockquote', 'code-block'], // Add quote and code block options to the toolbar
+        [{ color: [] }], // Add color option to the toolbar
+      ],
+    };
+
+    const saveNote = async () => {
+      try {
+        // build the formData
+        const requestData = {
+          enrichments: {
+            note: noteContent,
+          },
+          fingerprint: alertFingerprint,
+        };
+        const response = await fetch(`${getApiURL()}/alerts/enrich`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${session?.accessToken}`,
+          },
+          body: JSON.stringify(requestData),
+        });
+
+        if (response.ok) {
+          // Handle success
+          console.log('Note saved successfully');
+          handleClose(); // Close the modal on success
+        } else {
+          // Handle error
+          console.error('Failed to save note');
+        }
+      } catch (error) {
+        // Handle unexpected error
+        console.error('An unexpected error occurred');
+      }
+    };
+
+    return (
+      <div className={`fixed inset-0 z-10 ${isOpen ? 'block' : 'hidden'}`}>
+        <div className="flex items-center justify-center bg-black bg-opacity-30 inset-0 absolute">
+          <div className="bg-white p-6 rounded-lg" style={{ width: '600px' }}> {/* Increase the width */}
+            <div className="text-lg font-semibold mb-4">Add/Edit Note</div>
+            {/* WYSIWYG editor */}
+            <ReactQuill
+              value={noteContent}
+              onChange={(value: string) => setNoteContent(value)}
+              theme="snow" // Use the Snow theme
+              placeholder="Add your note here..."
+              modules={modules}
+              formats={formats} // Add formats
+            />
+            <div className="mt-4 flex justify-end">
+              <Button // Use Tremor button for Save
+                onClick={saveNote}
+                color="orange"
+                className="mr-2"
+              >
+                Save
+              </Button>
+              <Button // Use Tremor button for Cancel
+                onClick={handleClose}
+                variant="secondary"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  export default AlertNoteModal;
diff --git a/keep-ui/app/alerts/alert-presets.tsx b/keep-ui/app/alerts/alert-presets.tsx
index 3bb81833e1..c1a100208b 100644
--- a/keep-ui/app/alerts/alert-presets.tsx
+++ b/keep-ui/app/alerts/alert-presets.tsx
@@ -30,7 +30,8 @@ export default function AlertPresets({
   isLoading,
 }: Props) {
   const apiUrl = getApiURL();
-  const { mutate: presetsMutator } = usePresets({ revalidateOnFocus: false });
+  const { useAllPresets } = usePresets();
+  const { mutate: presetsMutator } = useAllPresets({ revalidateOnFocus: false });
   const { data: session } = useSession();
 
   const selectRef = useRef(null);
diff --git a/keep-ui/app/alerts/alert-table-tab-panel.tsx b/keep-ui/app/alerts/alert-table-tab-panel.tsx
index d7b7f75e66..8febe19e9a 100644
--- a/keep-ui/app/alerts/alert-table-tab-panel.tsx
+++ b/keep-ui/app/alerts/alert-table-tab-panel.tsx
@@ -24,26 +24,32 @@ const getPresetAlerts = (alert: AlertDto, presetName: string): boolean => {
 };
 
 const getOptionAlerts = (alert: AlertDto, options: Option[]): boolean =>
-  options.every((option) => {
-    const [key, value] = option.value.split("=");
-
-    if (key && value) {
-      const lowercaseKey = key.toLowerCase() as keyof AlertDto;
-      const lowercaseValue = value.toLowerCase();
-
-      const alertValue = alert[lowercaseKey];
-
-      if (Array.isArray(alertValue)) {
-        return alertValue.every((v) => lowercaseValue.split(",").includes(v));
-      }
-
-      if (typeof alertValue === "string") {
-        return alertValue.toLowerCase().includes(lowercaseValue);
-      }
-    }
-
-    return true;
-  });
+  options.length > 0
+    ? options.some((option) => {
+        const [key, value] = option.value.split("=");
+
+        if (key && value) {
+          const attribute = key.toLowerCase() as keyof AlertDto;
+          const lowercaseAttributeValue = value.toLowerCase();
+
+          const alertAttributeValue = alert[attribute];
+
+          if (Array.isArray(alertAttributeValue)) {
+            return alertAttributeValue.every((v) =>
+              lowercaseAttributeValue.split(",").includes(v)
+            );
+          }
+
+          if (typeof alertAttributeValue === "string") {
+            return alertAttributeValue
+              .toLowerCase()
+              .includes(lowercaseAttributeValue);
+          }
+        }
+
+        return true;
+      })
+    : true;
 
 const getPresetAndOptionsAlerts = (
   alert: AlertDto,
diff --git a/keep-ui/app/alerts/alert-table-utils.tsx b/keep-ui/app/alerts/alert-table-utils.tsx
index 319d70ad2b..a4b26b9e01 100644
--- a/keep-ui/app/alerts/alert-table-utils.tsx
+++ b/keep-ui/app/alerts/alert-table-utils.tsx
@@ -56,6 +56,9 @@ export const useAlertTableCols = ({
   isMenuDisplayed,
 }: GenerateAlertTableColsArg = {}) => {
   const [expandedToggles, setExpandedToggles] = useState<RowSelectionState>({});
+  const [noteModalOpen, setNoteModalOpen] = useState('');
+  const [ticketModalOpen, setTicketModalOpen] = useState('');
+  const [currentOpenMenu, setCurrentOpenMenu] = useState('');
 
   const filteredAndGeneratedCols = additionalColsToGenerate.map((colName) =>
     columnHelper.display({
@@ -69,7 +72,7 @@ export const useAlertTableCols = ({
             <Accordion>
               <AccordionHeader>Value</AccordionHeader>
               <AccordionBody>
-                <pre className="overflow-y-scroll">
+                <pre className="overflow-scroll max-w-lg">
                   {JSON.stringify(alertValue, null, 2)}
                 </pre>
               </AccordionBody>
@@ -116,7 +119,11 @@ export const useAlertTableCols = ({
     columnHelper.display({
       id: "name",
       header: "Name",
-      cell: (context) => <AlertName alert={context.row.original} />,
+      cell: (context) => <AlertName alert={context.row.original}
+                            isNoteModalOpen={noteModalOpen === context.row.original.fingerprint}
+                            setNoteModalOpen={setNoteModalOpen}
+                            isTicketModalOpen={ticketModalOpen === context.row.original.fingerprint}
+                            setTicketModalOpen={setTicketModalOpen}/>
     }),
     columnHelper.accessor("description", {
       id: "description",
@@ -185,7 +192,9 @@ export const useAlertTableCols = ({
       ? [
           columnHelper.display({
             id: "alertMenu",
-            cell: (context) => <AlertMenu alert={context.row.original} />,
+            cell: (context) => <AlertMenu alert={context.row.original}
+            isMenuOpen={context.row.original.fingerprint === currentOpenMenu}
+            setIsMenuOpen={setCurrentOpenMenu}/>,
           }),
         ]
       : []) as ColumnDef<AlertDto>[]),
diff --git a/keep-ui/app/alerts/alerts.tsx b/keep-ui/app/alerts/alerts.tsx
index b3a3b5875a..f49b857b66 100644
--- a/keep-ui/app/alerts/alerts.tsx
+++ b/keep-ui/app/alerts/alerts.tsx
@@ -1,6 +1,6 @@
 import { Card, TabGroup, TabList, Tab, TabPanels } from "@tremor/react";
 import { Preset } from "./models";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import "./alerts.client.css";
 import AlertStreamline from "./alert-streamline";
 import {
@@ -11,6 +11,7 @@ import {
 import { usePresets } from "utils/hooks/usePresets";
 import AlertTableTabPanel from "./alert-table-tab-panel";
 import { AlertHistory } from "./alert-history";
+import { usePathname, useRouter } from "next/navigation";
 
 const defaultPresets: Preset[] = [
   { name: "Feed", options: [] },
@@ -20,6 +21,10 @@ const defaultPresets: Preset[] = [
 
 export default function Alerts() {
   const { useAllAlerts, useAllAlertsWithSubscription } = useAlerts();
+  const { useAllPresets, getCurrentPreset } = usePresets();
+  const pathname = usePathname();
+  const router = useRouter();
+  const currentSelectedPreset = getCurrentPreset();
 
   const { data: endpointAlerts = [] } = useAllAlerts({
     revalidateOnFocus: false,
@@ -34,7 +39,7 @@ export default function Alerts() {
     pusherChannel,
   } = alertSubscription;
 
-  const { data: savedPresets = [] } = usePresets({
+  const { data: savedPresets = [] } = useAllPresets({
     revalidateOnFocus: false,
   });
   const presets = [...defaultPresets, ...savedPresets] as const;
@@ -45,35 +50,46 @@ export default function Alerts() {
     [endpointAlerts, pusherAlerts]
   );
 
+  const selectPreset = (presetName: string) => {
+    router.replace(`${pathname}?selectedPreset=${presetName}`);
+  };
+
+  const selectedPresetIndex =
+    presets.findIndex((preset) => preset.name === currentSelectedPreset) ?? 0;
+
   return (
-    <Card className="mt-10 p-4 md:p-10 mx-auto">
-      {pusherChannel && (
-        <AlertStreamline
-          pusherChannel={pusherChannel}
-          lastSubscribedDate={lastSubscribedDate}
-        />
-      )}
-      {/* key is necessary to re-render tabs on preset delete */}
-      <TabGroup key={presets.length}>
-        <TabList variant="line" color="orange">
-          {presets.map((preset, index) => (
-            <Tab key={preset.name} tabIndex={index}>
-              {preset.name}
-            </Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {presets.map((preset) => (
-            <AlertTableTabPanel
-              key={preset.name}
-              preset={preset}
-              alerts={alerts}
-              isAsyncLoading={isAsyncLoading}
-            />
-          ))}
-        </TabPanels>
-        <AlertHistory alerts={alerts} />
-      </TabGroup>
-    </Card>
+      <Card className="mt-10 p-4 md:p-10 mx-auto">
+        {pusherChannel && (
+          <AlertStreamline
+            pusherChannel={pusherChannel}
+            lastSubscribedDate={lastSubscribedDate}
+          />
+        )}
+        {/* key is necessary to re-render tabs on preset delete */}
+        <TabGroup key={presets.length} index={selectedPresetIndex}>
+          <TabList variant="line" color="orange">
+            {presets.map((preset, index) => (
+              <Tab
+                key={preset.name}
+                tabIndex={index}
+                onClick={() => selectPreset(preset.name)}
+              >
+                {preset.name}
+              </Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {presets.map((preset) => (
+              <AlertTableTabPanel
+                key={preset.name}
+                preset={preset}
+                alerts={alerts}
+                isAsyncLoading={isAsyncLoading}
+              />
+            ))}
+          </TabPanels>
+          <AlertHistory alerts={alerts} />
+        </TabGroup>
+      </Card>
   );
 }
diff --git a/keep-ui/app/alerts/models.tsx b/keep-ui/app/alerts/models.tsx
index 5979792209..36e156d070 100644
--- a/keep-ui/app/alerts/models.tsx
+++ b/keep-ui/app/alerts/models.tsx
@@ -33,6 +33,7 @@ export interface AlertDto {
   playbook_url?: string;
   providerId?: string;
   group?: boolean;
+  note?: string;
 }
 
 export interface Preset {
diff --git a/keep-ui/app/providers/layout.tsx b/keep-ui/app/providers/layout.tsx
index 4e13be4a79..a5f82163f2 100644
--- a/keep-ui/app/providers/layout.tsx
+++ b/keep-ui/app/providers/layout.tsx
@@ -3,6 +3,7 @@ import { MultiSelect, MultiSelectItem, TextInput, Title } from "@tremor/react";
 import { MagnifyingGlassIcon, TagIcon } from "@heroicons/react/20/solid";
 import { useState } from "react";
 import { LayoutContext } from "./context";
+import { useSearchParams } from "next/navigation";
 
 export default function ProvidersLayout({
   children,
@@ -12,6 +13,15 @@ export default function ProvidersLayout({
   const [providersSearchString, setProvidersSearchString] =
     useState<string>("");
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const searchParams = useSearchParams();
+  const labels = searchParams?.get("labels");
+  const labelArray = labels ? labels.split(',').filter(label => label) : [];
+
+  // update the selected tags with the labels from the url
+  if (labelArray.length > 0 && selectedTags.length === 0) {
+    setSelectedTags(labelArray);
+  }
+
   const searchProviderString = providersSearchString;
   return (
     <main className="p-4">
@@ -36,6 +46,7 @@ export default function ProvidersLayout({
           />
           <MultiSelect
             onValueChange={setSelectedTags}
+            value={selectedTags}
             placeholder="Filter by label..."
             className="max-w-xs ml-2.5"
             icon={TagIcon}
diff --git a/keep-ui/package-lock.json b/keep-ui/package-lock.json
index 59d1757d00..b224f7aab2 100644
--- a/keep-ui/package-lock.json
+++ b/keep-ui/package-lock.json
@@ -318,6 +318,7 @@
         "react-modal": "^3.16.1",
         "react-name-initials-avatar": "^0.0.7",
         "react-querybuilder": "^6.5.4",
+        "react-quill": "^2.0.0",
         "react-resize-detector": "^8.1.0",
         "react-router": "^6.11.1",
         "react-select": "^5.8.0",
@@ -3794,6 +3795,14 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
+    "node_modules/@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "dependencies": {
+        "parchment": "^1.1.2"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.2.6",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.6.tgz",
@@ -4640,6 +4649,14 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -6012,11 +6029,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "node_modules/fast-equals": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz",
@@ -7950,6 +7977,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -8399,6 +8431,75 @@
       "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
       "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
     },
+    "node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/quill-delta/node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/quill/node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/quill/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -8569,6 +8670,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/react-quill": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
+      "integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==",
+      "dependencies": {
+        "@types/quill": "^1.3.10",
+        "lodash": "^4.17.4",
+        "quill": "^1.3.7"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.4",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz",
diff --git a/keep-ui/package.json b/keep-ui/package.json
index 0b2e2ce567..0ff210c637 100644
--- a/keep-ui/package.json
+++ b/keep-ui/package.json
@@ -319,6 +319,7 @@
     "react-modal": "^3.16.1",
     "react-name-initials-avatar": "^0.0.7",
     "react-querybuilder": "^6.5.4",
+    "react-quill": "^2.0.0",
     "react-resize-detector": "^8.1.0",
     "react-router": "^6.11.1",
     "react-select": "^5.8.0",
diff --git a/keep-ui/utils/hooks/usePresets.ts b/keep-ui/utils/hooks/usePresets.ts
index 33b09faf2e..c5cff76b76 100644
--- a/keep-ui/utils/hooks/usePresets.ts
+++ b/keep-ui/utils/hooks/usePresets.ts
@@ -1,16 +1,27 @@
 import { Preset } from "app/alerts/models";
 import { useSession } from "next-auth/react";
+import { useSearchParams } from "next/navigation";
+import { useState } from "react";
 import useSWR, { SWRConfiguration } from "swr";
 import { getApiURL } from "utils/apiUrl";
 import { fetcher } from "utils/fetcher";
 
-export const usePresets = (options?: SWRConfiguration) => {
+export const usePresets = () => {
   const apiUrl = getApiURL();
   const { data: session } = useSession();
+  const searchParams = useSearchParams()!;
 
-  return useSWR<Preset[]>(
-    () => (session ? `${apiUrl}/preset` : null),
-    async (url) => fetcher(url, session?.accessToken),
-    options
-  );
+  const getCurrentPreset = () => {
+    return searchParams?.get("selectedPreset") || "Feed";
+  };
+
+  const useAllPresets = (options?: SWRConfiguration) => {
+    return useSWR<Preset[]>(
+      () => (session ? `${apiUrl}/preset` : null),
+      async (url) => fetcher(url, session?.accessToken),
+      options
+    );
+  };
+
+  return { useAllPresets, getCurrentPreset };
 };
diff --git a/keep-ui/utils/hooks/useProviders.ts b/keep-ui/utils/hooks/useProviders.ts
index fee755b82c..93f6a888b9 100644
--- a/keep-ui/utils/hooks/useProviders.ts
+++ b/keep-ui/utils/hooks/useProviders.ts
@@ -1,16 +1,16 @@
 import { useSession } from "next-auth/react";
 import { getApiURL } from "../apiUrl";
-import useSWR from "swr";
+import useSWR, { SWRConfiguration } from "swr";
 import { ProvidersResponse } from "app/providers/providers";
 import { fetcher } from "../fetcher";
 
-export const useProviders = () => {
+export const useProviders =  (options?: SWRConfiguration) => {
   const { data: session } = useSession();
   const apiUrl = getApiURL();
 
   return useSWR<ProvidersResponse>(
     () => (session ? `${apiUrl}/providers` : null),
     (url) => fetcher(url, session?.accessToken),
-    { revalidateOnFocus: false, revalidateOnMount: false }
+    options
   );
 };
diff --git a/keep/api/core/db.py b/keep/api/core/db.py
index b9fb688f23..b8db9f6685 100644
--- a/keep/api/core/db.py
+++ b/keep/api/core/db.py
@@ -742,7 +742,7 @@ def get_last_alerts(tenant_id, provider_id=None, limit=1000) -> list[Alert]:
     return alerts
 
 
-def get_alerts_by_fingerprint(tenant_id: str, fingerprint: str) -> List[Alert]:
+def get_alerts_by_fingerprint(tenant_id: str, fingerprint: str, limit=1) -> List[Alert]:
     """
     Get all alerts for a given fingerprint.
 
@@ -767,6 +767,8 @@ def get_alerts_by_fingerprint(tenant_id: str, fingerprint: str) -> List[Alert]:
 
         query = query.order_by(Alert.timestamp.desc())
 
+        if limit:
+            query = query.limit(limit)
         # Execute the query
         alerts = query.all()
 
diff --git a/keep/api/models/alert.py b/keep/api/models/alert.py
index 1c5df5280f..a47e15f004 100644
--- a/keep/api/models/alert.py
+++ b/keep/api/models/alert.py
@@ -65,6 +65,7 @@ class AlertDto(BaseModel):
     assignee: str | None = None  # The assignee of the alert
     providerId: str | None = None  # The provider id
     group: bool = False  # Whether the alert is a group alert
+    note: str | None = None  # The note of the alert
 
     @validator("fingerprint", pre=True, always=True)
     def assign_fingerprint_if_none(cls, fingerprint, values):
diff --git a/keep/api/routes/alerts.py b/keep/api/routes/alerts.py
index 282771d0f9..af21b9979b 100644
--- a/keep/api/routes/alerts.py
+++ b/keep/api/routes/alerts.py
@@ -748,6 +748,8 @@ def get_alert(
 )
 def enrich_alert(
     enrich_data: EnrichAlertRequestBody,
+    background_tasks: BackgroundTasks,
+    pusher_client: Pusher = Depends(get_pusher_client),
     authenticated_entity: AuthenticatedEntity = Depends(AuthVerifier(["write:alert"])),
 ) -> dict[str, str]:
     tenant_id = authenticated_entity.tenant_id
@@ -765,7 +767,30 @@ def enrich_alert(
             fingerprint=enrich_data.fingerprint,
             enrichments=enrich_data.enrichments,
         )
-
+        # get the alert with the new enrichment
+        alert = get_alerts_by_fingerprint(
+            authenticated_entity.tenant_id, enrich_data.fingerprint, limit=1
+        )
+        if not alert:
+            logger.warning(
+                "Alert not found", extra={"fingerprint": enrich_data.fingerprint}
+            )
+            return {"status": "failed"}
+
+        enriched_alerts_dto = __enrich_alerts(alert)
+        # use pusher to push the enriched alert to the client
+        if pusher_client:
+            logger.info("Pushing enriched alert to the client")
+            pusher_client.trigger(
+                f"private-{tenant_id}",
+                "async-alerts",
+                base64.b64encode(
+                    zlib.compress(
+                        json.dumps([enriched_alerts_dto[0].dict()]).encode(),
+                    )
+                ).decode(),
+            )
+            logger.info("Pushed enriched alert to the client")
         logger.info(
             "Alert enriched successfully",
             extra={"fingerprint": enrich_data.fingerprint, "tenant_id": tenant_id},
diff --git a/keep/providers/sentry_provider/sentry_provider.py b/keep/providers/sentry_provider/sentry_provider.py
index 36039612d2..6084e933a2 100644
--- a/keep/providers/sentry_provider/sentry_provider.py
+++ b/keep/providers/sentry_provider/sentry_provider.py
@@ -211,7 +211,7 @@ def _format_alert(event: dict) -> AlertDto | list[AlertDto]:
             else datetime.datetime.now(tz=datetime.timezone.utc)
         )
         # map severity and status to keep's format
-        severity = event.pop("level", tags_as_dict.get("level"))
+        severity = event.pop("level", tags_as_dict.get("level", "")).lower()
         severity = SentryProvider.SEVERITIES_MAP.get(
             severity.lower(), AlertSeverity.INFO
         )