diff --git a/keep-ui/app/(keep)/alerts/alert-assignee.tsx b/keep-ui/app/(keep)/alerts/alert-assignee.tsx
index c3dc67627..525d00224 100644
--- a/keep-ui/app/(keep)/alerts/alert-assignee.tsx
+++ b/keep-ui/app/(keep)/alerts/alert-assignee.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { NameInitialsAvatar } from "react-name-initials-avatar";
-import { useUsers } from "utils/hooks/useUsers";
+import { useUsers } from "@/entities/users/model/useUsers";
 
 interface Props {
   assignee: string | undefined;
diff --git a/keep-ui/app/(keep)/alerts/alert-severity-border.tsx b/keep-ui/app/(keep)/alerts/alert-severity-border.tsx
index 34b0b6d3e..f38add3d4 100644
--- a/keep-ui/app/(keep)/alerts/alert-severity-border.tsx
+++ b/keep-ui/app/(keep)/alerts/alert-severity-border.tsx
@@ -1,27 +1,59 @@
 import clsx from "clsx";
 import { Severity } from "./models";
 
+const getSeverityBgClassName = (severity?: Severity) => {
+  switch (severity) {
+    case "critical":
+      return "bg-red-500";
+    case "high":
+    case "error":
+      return "bg-orange-500";
+    case "warning":
+      return "bg-yellow-500";
+    case "info":
+      return "bg-blue-500";
+    default:
+      return "bg-emerald-500";
+  }
+};
+
+const getSeverityLabelClassName = (severity?: Severity) => {
+  switch (severity) {
+    case "critical":
+      return "bg-red-100";
+    case "high":
+    case "error":
+      return "bg-orange-100";
+    case "warning":
+      return "bg-yellow-100";
+    case "info":
+      return "bg-blue-100";
+    default:
+      return "bg-emerald-100";
+  }
+};
+
+const getSeverityTextClassName = (severity?: Severity) => {
+  switch (severity) {
+    case "critical":
+      return "text-red-500";
+    case "high":
+    case "error":
+      return "text-orange-500";
+    case "warning":
+      return "text-amber-900";
+    case "info":
+      return "text-blue-500";
+    default:
+      return "text-emerald-500";
+  }
+};
+
 export function AlertSeverityBorder({
   severity,
 }: {
   severity: Severity | undefined;
 }) {
-  const getSeverityBgClassName = (severity?: Severity) => {
-    switch (severity) {
-      case "critical":
-        return "bg-red-500";
-      case "high":
-      case "error":
-        return "bg-orange-500";
-      case "warning":
-        return "bg-yellow-500";
-      case "info":
-        return "bg-blue-500";
-      default:
-        return "bg-emerald-500";
-    }
-  };
-
   return (
     <div
       className={clsx(
@@ -32,3 +64,29 @@ export function AlertSeverityBorder({
     />
   );
 }
+
+export function AlertSeverityBorderIcon({ severity }: { severity: Severity }) {
+  return (
+    <div
+      className={clsx("w-1 h-4 rounded-lg", getSeverityBgClassName(severity))}
+    />
+  );
+}
+
+export function AlertSeverityLabel({ severity }: { severity: Severity }) {
+  return (
+    <span
+      className={clsx(
+        "flex items-center gap-1 text-sm font-medium py-0.5 px-2 overflow-hidden relative",
+        getSeverityLabelClassName(severity)
+      )}
+    >
+      <div
+        className={clsx("w-1 h-4 rounded-lg", getSeverityBgClassName(severity))}
+      />
+      <span className={clsx("capitalize", getSeverityTextClassName(severity))}>
+        {severity}
+      </span>
+    </span>
+  );
+}
diff --git a/keep-ui/app/(keep)/alerts/alert-sidebar.tsx b/keep-ui/app/(keep)/alerts/alert-sidebar.tsx
index bf985960e..41ae7b46c 100644
--- a/keep-ui/app/(keep)/alerts/alert-sidebar.tsx
+++ b/keep-ui/app/(keep)/alerts/alert-sidebar.tsx
@@ -2,12 +2,20 @@ import { Fragment } from "react";
 import Image from "next/image";
 import { Dialog, Transition } from "@headlessui/react";
 import { AlertDto } from "./models";
-import { Button, Title, Card, Badge } from "@tremor/react";
+import { Button, Title, Badge } from "@tremor/react";
 import { IoMdClose } from "react-icons/io";
 import AlertTimeline from "./alert-timeline";
 import { useAlerts } from "utils/hooks/useAlerts";
 import { TopologyMap } from "../topology/ui/map";
 import { TopologySearchProvider } from "@/app/(keep)/topology/TopologySearchContext";
+import {
+  AlertSeverityBorderIcon,
+  AlertSeverityLabel,
+} from "./alert-severity-border";
+import { FieldHeader } from "@/shared/ui/FieldHeader";
+import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
+import { Tooltip } from "@/shared/ui/Tooltip";
+import { Link } from "@/components/ui";
 
 type AlertSidebarProps = {
   isOpen: boolean;
@@ -57,11 +65,14 @@ const AlertSidebar = ({ isOpen, toggle, alert }: AlertSidebarProps) => {
                 {/*Will add soon*/}
                 {/*<AlertMenu alert={alert} presetName="feed" isInSidebar={true} />*/}
                 {/*<Divider></Divider>*/}
-                <Dialog.Title className="text-3xl font-bold" as={Title}>
-                  Alert Details
-                  <Badge className="ml-4" color="orange">
-                    Beta
-                  </Badge>
+                <Dialog.Title
+                  className="text-xl font-bold flex flex-col gap-2 items-start"
+                  as={Title}
+                >
+                  {alert?.severity && (
+                    <AlertSeverityLabel severity={alert.severity} />
+                  )}
+                  {alert?.name ? alert.name : "Alert Details"}
                 </Dialog.Title>
               </div>
               <div>
@@ -72,43 +83,63 @@ const AlertSidebar = ({ isOpen, toggle, alert }: AlertSidebarProps) => {
             </div>
             {alert && (
               <div className="space-y-4">
-                <Card>
-                  <div className="mt-4 space-y-2">
-                    <p>
-                      <strong>Name:</strong> {alert.name}
-                    </p>
-                    <p>
-                      <strong>Service:</strong> {alert.service}
-                    </p>
-                    <p>
-                      <strong>Severity:</strong> {alert.severity}
-                    </p>
-                    <p>
-                      <Image
-                        src={`/icons/${alert.source![0]}-icon.png`}
-                        alt={alert.source![0]}
-                        width={24}
-                        height={24}
-                        className="inline-block w-6 h-6"
-                      />
-                    </p>
-                    <p>
-                      <strong>Description:</strong> {alert.description}
-                    </p>
-                    <p>
-                      <strong>Fingerprint:</strong> {alert.fingerprint}
-                    </p>
-                  </div>
-                </Card>
-                <Card className="flex-grow">
-                  <AlertTimeline
-                    key={auditData ? auditData.length : 1}
-                    alert={alert}
-                    auditData={auditData || []}
-                    isLoading={isLoading}
-                    onRefresh={handleRefresh}
-                  />
-                </Card>
+                <div className="space-y-2">
+                  <p>
+                    <FieldHeader>Name</FieldHeader>
+                    {alert.name}
+                  </p>
+                  <p>
+                    <FieldHeader>Service</FieldHeader>
+                    <Badge size="sm" color="gray">
+                      {alert.service}
+                    </Badge>
+                  </p>
+                  <p>
+                    <FieldHeader>Source</FieldHeader>
+                    <Image
+                      src={`/icons/${alert.source![0]}-icon.png`}
+                      alt={alert.source![0]}
+                      width={24}
+                      height={24}
+                      className="inline-block w-6 h-6"
+                    />
+                  </p>
+                  <p>
+                    <FieldHeader>Description</FieldHeader>
+                    {alert.description}
+                  </p>
+                  <p>
+                    <FieldHeader className="flex items-center gap-1">
+                      Fingerprint
+                      <Tooltip
+                        content={
+                          <>
+                            Fingerprints are unique identifiers associated with
+                            alert instances in Keep. Every provider declares the
+                            fields fingerprints are calculated upon.{" "}
+                            <Link
+                              href="https://docs.keephq.dev/providers/fingerprints#fingerprints"
+                              className="text-white"
+                            >
+                              Docs
+                            </Link>
+                          </>
+                        }
+                        className="z-50"
+                      >
+                        <QuestionMarkCircleIcon className="w-4 h-4" />
+                      </Tooltip>
+                    </FieldHeader>
+                    {alert.fingerprint}
+                  </p>
+                </div>
+                <AlertTimeline
+                  key={auditData ? auditData.length : 1}
+                  alert={alert}
+                  auditData={auditData || []}
+                  isLoading={isLoading}
+                  onRefresh={handleRefresh}
+                />
                 <Title>Related Services</Title>
                 <TopologySearchProvider>
                   <TopologyMap
diff --git a/keep-ui/app/(keep)/alerts/alert-table-alert-facets.tsx b/keep-ui/app/(keep)/alerts/alert-table-alert-facets.tsx
index 3c57b14ed..b8f35b9c4 100644
--- a/keep-ui/app/(keep)/alerts/alert-table-alert-facets.tsx
+++ b/keep-ui/app/(keep)/alerts/alert-table-alert-facets.tsx
@@ -1,9 +1,5 @@
-import React, { useCallback, useEffect } from "react";
-import {
-  AlertFacetsProps,
-  FacetValue,
-  FacetFilters,
-} from "./alert-table-facet-types";
+import React, { useCallback } from "react";
+import { AlertFacetsProps, FacetValue } from "./alert-table-facet-types";
 import { Facet } from "./alert-table-facet";
 import {
   getFilteredAlertsForFacet,
@@ -148,7 +144,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
           if (a.label === "n/a") return 1;
           if (b.label === "n/a") return -1;
           const orderDiff =
-            getSeverityOrder(a.label) - getSeverityOrder(b.label);
+            getSeverityOrder(b.label) - getSeverityOrder(a.label);
           if (orderDiff !== 0) return orderDiff;
           return b.count - a.count;
         });
@@ -253,7 +249,7 @@ export const AlertFacets: React.FC<AlertFacetsProps> = ({
           showSkeleton={showSkeleton}
         />
         <Facet
-          name="Incident Related"
+          name="Incident"
           facetKey="incident"
           values={getFacetValues("incident")}
           onSelect={(value, exclusive, isAllOnly) =>
diff --git a/keep-ui/app/(keep)/alerts/alert-table-facet-utils.tsx b/keep-ui/app/(keep)/alerts/alert-table-facet-utils.tsx
index a26f8ab1d..51c5ff196 100644
--- a/keep-ui/app/(keep)/alerts/alert-table-facet-utils.tsx
+++ b/keep-ui/app/(keep)/alerts/alert-table-facet-utils.tsx
@@ -1,16 +1,5 @@
 import { FacetFilters } from "./alert-table-facet-types";
-import { AlertDto, Severity } from "./models";
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  UserCircleIcon,
-  BellIcon,
-  ExclamationCircleIcon,
-  CheckCircleIcon,
-  CircleStackIcon,
-  BellSlashIcon,
-  FireIcon,
-} from "@heroicons/react/24/outline";
+import { AlertDto } from "./models";
 import { isQuickPresetRange } from "@/components/ui/DateRangePicker";
 
 export const getFilteredAlertsForFacet = (
@@ -83,32 +72,6 @@ export const getFilteredAlertsForFacet = (
   });
 };
 
-export const getStatusIcon = (status: string) => {
-  switch (status.toLowerCase()) {
-    case "firing":
-      return ExclamationCircleIcon;
-    case "resolved":
-      return CheckCircleIcon;
-    case "acknowledged":
-      return CircleStackIcon;
-    default:
-      return CircleStackIcon;
-  }
-};
-
-export const getStatusColor = (status: string) => {
-  switch (status.toLowerCase()) {
-    case "firing":
-      return "red";
-    case "resolved":
-      return "green";
-    case "acknowledged":
-      return "blue";
-    default:
-      return "gray";
-  }
-};
-
 export const getSeverityOrder = (severity: string): number => {
   switch (severity) {
     case "low":
diff --git a/keep-ui/app/(keep)/alerts/alert-table-facet-value.tsx b/keep-ui/app/(keep)/alerts/alert-table-facet-value.tsx
index 15bc1d991..83b588c03 100644
--- a/keep-ui/app/(keep)/alerts/alert-table-facet-value.tsx
+++ b/keep-ui/app/(keep)/alerts/alert-table-facet-value.tsx
@@ -1,17 +1,22 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { Icon } from "@tremor/react";
 import Image from "next/image";
 import { Text } from "@tremor/react";
 import { FacetValueProps } from "./alert-table-facet-types";
-import { getStatusIcon, getStatusColor } from "./alert-table-facet-utils";
-import {
-  UserCircleIcon,
-  BellIcon,
-  BellSlashIcon,
-  FireIcon,
-} from "@heroicons/react/24/outline";
-import AlertSeverity from "./alert-severity";
+import { getStatusIcon, getStatusColor } from "@/shared/lib/status-utils";
+import { BellIcon, BellSlashIcon, FireIcon } from "@heroicons/react/24/outline";
 import { Severity } from "./models";
+import { AlertSeverityBorderIcon } from "./alert-severity-border";
+import clsx from "clsx";
+import { useIncidents } from "@/utils/hooks/useIncidents";
+import { getIncidentName } from "@/entities/incidents/lib/utils";
+import { UserStatefulAvatar } from "@/entities/users/ui";
+import { useUser } from "@/entities/users/model/useUser";
+
+const AssigneeLabel = ({ email }: { email: string }) => {
+  const user = useUser(email);
+  return user ? user.name : email;
+};
 
 export const FacetValue: React.FC<FacetValueProps> = ({
   label,
@@ -22,6 +27,31 @@ export const FacetValue: React.FC<FacetValueProps> = ({
   showIcon = false,
   facetFilters,
 }) => {
+  const { data: incidents } = useIncidents(
+    true,
+    100,
+    undefined,
+    undefined,
+    undefined,
+    {
+      revalidateOnFocus: false,
+    }
+  );
+
+  const incidentMap = useMemo(() => {
+    return new Map(
+      incidents?.items.map((incident) => [
+        incident.id.replaceAll("-", ""),
+        incident,
+      ]) || []
+    );
+  }, [incidents]);
+
+  const incident = useMemo(
+    () => (facetKey === "incident" ? incidentMap.get(label) : null),
+    [incidentMap, facetKey, label]
+  );
+
   const handleCheckboxClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     onSelect(label, false, false);
@@ -41,6 +71,95 @@ export const FacetValue: React.FC<FacetValueProps> = ({
     }
   };
 
+  const getValueIcon = useCallback(
+    (label: string, facetKey: string) => {
+      if (facetKey === "source") {
+        return (
+          <Image
+            className="inline-block"
+            alt={label}
+            height={16}
+            width={16}
+            title={label}
+            src={
+              label.includes("@")
+                ? "/icons/mailgun-icon.png"
+                : `/icons/${label}-icon.png`
+            }
+          />
+        );
+      }
+      if (facetKey === "severity") {
+        return <AlertSeverityBorderIcon severity={label as Severity} />;
+      }
+      if (facetKey === "assignee") {
+        return <UserStatefulAvatar email={label} size="xs" />;
+      }
+      if (facetKey === "status") {
+        return (
+          <Icon
+            icon={getStatusIcon(label)}
+            size="sm"
+            color={getStatusColor(label)}
+            className="!p-0"
+          />
+        );
+      }
+      if (facetKey === "dismissed") {
+        return (
+          <Icon
+            icon={label === "true" ? BellSlashIcon : BellIcon}
+            size="sm"
+            className="text-gray-600 !p-0"
+          />
+        );
+      }
+      if (facetKey === "incident") {
+        if (incident) {
+          return (
+            <Icon
+              icon={getStatusIcon(incident.status)}
+              size="sm"
+              color={getStatusColor(incident.status)}
+              className="!p-0"
+            />
+          );
+        }
+        return (
+          <Icon icon={FireIcon} size="sm" className="text-gray-600 !p-0" />
+        );
+      }
+      return null;
+    },
+    [incident]
+  );
+
+  const humanizeLabel = useCallback(
+    (label: string, facetKey: string) => {
+      if (facetKey === "assignee") {
+        if (label === "n/a") {
+          return "Not assigned";
+        }
+        return <AssigneeLabel email={label} />;
+      }
+      if (facetKey === "incident") {
+        if (label === "n/a") {
+          return "No incident";
+        }
+        if (incident) {
+          return getIncidentName(incident);
+        } else {
+          return label;
+        }
+      }
+      if (facetKey === "dismissed") {
+        return label === "true" ? "Dismissed" : "Not dismissed";
+      }
+      return <span className="capitalize">{label}</span>;
+    },
+    [incident]
+  );
+
   const currentFilter = facetFilters[facetKey] || [];
   const isValueSelected =
     !currentFilter?.length || currentFilter.includes(label);
@@ -61,54 +180,13 @@ export const FacetValue: React.FC<FacetValueProps> = ({
         />
       </div>
 
-      <div className="flex-1 flex items-center min-w-0" title={label}>
+      <div className="flex-1 flex items-center min-w-0 gap-1" title={label}>
         {showIcon && (
-          <div className="flex items-center min-w-[24px]">
-            {facetKey === "source" && (
-              <Image
-                className="inline-block"
-                alt={label}
-                height={16}
-                width={16}
-                title={label}
-                src={
-                  label.includes("@")
-                    ? "/icons/mailgun-icon.png"
-                    : `/icons/${label}-icon.png`
-                }
-              />
-            )}
-            {facetKey === "severity" && (
-              <AlertSeverity severity={label as Severity} />
-            )}
-            {facetKey === "assignee" && (
-              <Icon
-                icon={UserCircleIcon}
-                size="sm"
-                className="text-gray-600 !p-0"
-              />
-            )}
-            {facetKey === "status" && (
-              <Icon
-                icon={getStatusIcon(label)}
-                size="sm"
-                color={getStatusColor(label)}
-                className="!p-0"
-              />
-            )}
-            {facetKey === "dismissed" && (
-              <Icon
-                icon={label === "true" ? BellSlashIcon : BellIcon}
-                size="sm"
-                className="text-gray-600 !p-0"
-              />
-            )}
-            {facetKey === "incident" && (
-              <Icon icon={FireIcon} size="sm" className="text-gray-600 !p-0" />
-            )}
+          <div className={clsx("flex items-center")}>
+            {getValueIcon(label, facetKey)}
           </div>
         )}
-        <Text className="truncate">{label}</Text>
+        <Text className="truncate">{humanizeLabel(label, facetKey)}</Text>
       </div>
 
       <div className="flex-shrink-0 w-8 text-right flex justify-end">
diff --git a/keep-ui/app/(keep)/alerts/alert-table-headers.tsx b/keep-ui/app/(keep)/alerts/alert-table-headers.tsx
index d1606ffc9..b70e563cd 100644
--- a/keep-ui/app/(keep)/alerts/alert-table-headers.tsx
+++ b/keep-ui/app/(keep)/alerts/alert-table-headers.tsx
@@ -63,8 +63,8 @@ const DraggableHeaderCell = ({
       column.getIsPinned() !== false
         ? "default"
         : isDragging
-        ? "grabbing"
-        : "grab",
+          ? "grabbing"
+          : "grab",
   };
 
   // TODO: fix multiple pinned columns
@@ -82,8 +82,11 @@ const DraggableHeaderCell = ({
     >
       <div className="flex items-center" {...listeners}>
         {/* Flex container */}
+        {children} {/* Column name or text */}
         {column.getCanSort() && ( // Sorting icon to the left
           <>
+            {/* Custom styled vertical line separator */}
+            <div className="w-px h-5 mx-2 bg-gray-400"></div>
             <span
               className="cursor-pointer" // Ensures clickability of the icon
               onClick={(event) => {
@@ -96,8 +99,8 @@ const DraggableHeaderCell = ({
                 column.getNextSortingOrder() === "asc"
                   ? "Sort ascending"
                   : column.getNextSortingOrder() === "desc"
-                  ? "Sort descending"
-                  : "Clear sort"
+                    ? "Sort descending"
+                    : "Clear sort"
               }
             >
               {/* Icon logic */}
@@ -111,11 +114,8 @@ const DraggableHeaderCell = ({
                 <FaArrowRight />
               )}
             </span>
-            {/* Custom styled vertical line separator */}
-            <div className="w-px h-5 mx-2 bg-gray-400"></div>
           </>
         )}
-        {children} {/* Column name or text */}
       </div>
 
       {column.getIsPinned() === false && (
diff --git a/keep-ui/app/(keep)/alerts/alert-table-utils.tsx b/keep-ui/app/(keep)/alerts/alert-table-utils.tsx
index bd41cbc22..0f5924559 100644
--- a/keep-ui/app/(keep)/alerts/alert-table-utils.tsx
+++ b/keep-ui/app/(keep)/alerts/alert-table-utils.tsx
@@ -22,6 +22,7 @@ import {
   MdOutlineNotificationsOff,
 } from "react-icons/md";
 import { AlertSeverityBorder } from "./alert-severity-border";
+import { getStatusIcon, getStatusColor } from "@/shared/lib/status-utils";
 
 export const DEFAULT_COLS = [
   "severity",
@@ -272,6 +273,17 @@ export const useAlertTableCols = (
       id: "status",
       minSize: 100,
       header: "Status",
+      cell: (context) => (
+        <span className="flex items-center gap-1 capitalize">
+          <Icon
+            icon={getStatusIcon(context.getValue())}
+            size="sm"
+            color={getStatusColor(context.getValue())}
+            className="!p-0"
+          />
+          {context.getValue()}
+        </span>
+      ),
     }),
     columnHelper.accessor("lastReceived", {
       id: "lastReceived",
diff --git a/keep-ui/app/(keep)/alerts/alert-table.tsx b/keep-ui/app/(keep)/alerts/alert-table.tsx
index 24b66ec7e..d61cb2167 100644
--- a/keep-ui/app/(keep)/alerts/alert-table.tsx
+++ b/keep-ui/app/(keep)/alerts/alert-table.tsx
@@ -1,8 +1,7 @@
 import { useRef, useState } from "react";
-import { Table, Callout, Card } from "@tremor/react";
+import { Table, Card } from "@tremor/react";
 import { AlertsTableBody } from "./alerts-table-body";
 import { AlertDto } from "./models";
-import { CircleStackIcon } from "@heroicons/react/24/outline";
 import {
   getCoreRowModel,
   useReactTable,
diff --git a/keep-ui/app/(keep)/alerts/alert-timeline.tsx b/keep-ui/app/(keep)/alerts/alert-timeline.tsx
index 02fe484e0..6653ea45e 100644
--- a/keep-ui/app/(keep)/alerts/alert-timeline.tsx
+++ b/keep-ui/app/(keep)/alerts/alert-timeline.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Subtitle, Button } from "@tremor/react";
+import { Subtitle, Button, Card, Title } from "@tremor/react";
 import { Chrono } from "react-chrono";
 import Image from "next/image";
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
@@ -71,9 +71,9 @@ const AlertTimeline: React.FC<AlertTimelineProps> = ({
   ));
 
   return (
-    <div className="max-h-[500px] overflow-y-auto">
+    <div className="flex flex-col gap-4">
       <div className="flex justify-between items-center">
-        <Subtitle>Timeline</Subtitle>
+        <Title>Timeline</Title>
         <Button
           icon={ArrowPathIcon}
           color="orange"
@@ -84,48 +84,50 @@ const AlertTimeline: React.FC<AlertTimelineProps> = ({
           title="Refresh"
         />
       </div>
-      {isLoading ? (
-        <div className="flex justify-center items-center h-full">
-          <p>Loading...</p>
-        </div>
-      ) : (
-        <div className="flex-grow">
-          <Chrono
-            items={
-              auditContent.map((entry) => ({
-                title: formatTimestamp(entry.timestamp),
-              })) || []
-            }
-            hideControls
-            disableToolbar
-            borderLessCards
-            slideShow={false}
-            mode="VERTICAL"
-            theme={{
-              primary: "orange",
-              secondary: "rgb(255 247 237)",
-              titleColor: "orange",
-              titleColorActive: "orange",
-            }}
-            fontSizes={{
-              title: ".75rem",
-            }}
-            cardWidth={400}
-            cardHeight="auto"
-            classNames={{
-              card: "hidden",
-              cardMedia: "hidden",
-              cardSubTitle: "hidden",
-              cardText: "hidden",
-              cardTitle: "hidden",
-              title: "mb-3",
-              contentDetails: "w-full !m-0",
-            }}
-          >
-            {content}
-          </Chrono>
-        </div>
-      )}
+      <Card className="max-h-[500px] overflow-y-auto p-0">
+        {isLoading ? (
+          <div className="flex justify-center items-center h-full">
+            <p>Loading...</p>
+          </div>
+        ) : (
+          <div className="flex-grow">
+            <Chrono
+              items={
+                auditContent.map((entry) => ({
+                  title: formatTimestamp(entry.timestamp),
+                })) || []
+              }
+              hideControls
+              disableToolbar
+              borderLessCards
+              slideShow={false}
+              mode="VERTICAL"
+              theme={{
+                primary: "orange",
+                secondary: "rgb(255 247 237)",
+                titleColor: "orange",
+                titleColorActive: "orange",
+              }}
+              fontSizes={{
+                title: ".75rem",
+              }}
+              cardWidth={400}
+              cardHeight="auto"
+              classNames={{
+                card: "hidden",
+                cardMedia: "hidden",
+                cardSubTitle: "hidden",
+                cardText: "hidden",
+                cardTitle: "hidden",
+                title: "mb-3",
+                contentDetails: "w-full !m-0",
+              }}
+            >
+              {content}
+            </Chrono>
+          </div>
+        )}
+      </Card>
     </div>
   );
 };
diff --git a/keep-ui/app/(keep)/incidents/[id]/activity/incident-activity.tsx b/keep-ui/app/(keep)/incidents/[id]/activity/incident-activity.tsx
index 0c803d477..2249e6d1e 100644
--- a/keep-ui/app/(keep)/incidents/[id]/activity/incident-activity.tsx
+++ b/keep-ui/app/(keep)/incidents/[id]/activity/incident-activity.tsx
@@ -2,7 +2,7 @@
 
 import { AlertDto } from "@/app/(keep)/alerts/models";
 import { IncidentDto } from "@/entities/incidents/model";
-import { useUsers } from "@/utils/hooks/useUsers";
+import { useUsers } from "@/entities/users/model/useUsers";
 import Image from "next/image";
 import UserAvatar from "@/components/navbar/UserAvatar";
 import "./incident-activity.css";
diff --git a/keep-ui/app/(keep)/incidents/[id]/alerts/incident-alert-menu.tsx b/keep-ui/app/(keep)/incidents/[id]/alerts/incident-alert-menu.tsx
index 799afbc28..0da0da3ce 100644
--- a/keep-ui/app/(keep)/incidents/[id]/alerts/incident-alert-menu.tsx
+++ b/keep-ui/app/(keep)/incidents/[id]/alerts/incident-alert-menu.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "@tremor/react";
+import { Button, Icon } from "@tremor/react";
 import { AlertDto } from "@/app/(keep)/alerts/models";
 import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { toast } from "react-toastify";
@@ -43,14 +43,18 @@ export default function IncidentAlertMenu({ incidentId, alert }: Props) {
   }
 
   return (
-    <div className="flex flex-col">
-      <Icon
+    <div className="">
+      <Button
+        variant="light"
+        size="xs"
         icon={LinkSlashIcon}
         color="red"
         tooltip="Remove correlation"
         className="cursor-pointer"
         onClick={onRemove}
-      />
+      >
+        Remove correlation
+      </Button>
     </div>
   );
 }
diff --git a/keep-ui/app/(keep)/incidents/[id]/alerts/incident-alerts.tsx b/keep-ui/app/(keep)/incidents/[id]/alerts/incident-alerts.tsx
index 7d3d828e8..7d3f52ef2 100644
--- a/keep-ui/app/(keep)/incidents/[id]/alerts/incident-alerts.tsx
+++ b/keep-ui/app/(keep)/incidents/[id]/alerts/incident-alerts.tsx
@@ -8,6 +8,7 @@ import {
 } from "@tanstack/react-table";
 import {
   Card,
+  Icon,
   Table,
   TableBody,
   TableCell,
@@ -33,6 +34,9 @@ import { getCommonPinningStylesAndClassNames } from "@/components/ui/table/utils
 import { EmptyStateCard } from "@/components/ui";
 import { useRouter } from "next/navigation";
 import { TablePagination } from "@/shared/ui";
+import { AlertSeverityBorder } from "@/app/(keep)/alerts/alert-severity-border";
+import { getStatusIcon } from "@/shared/lib/status-utils";
+import { getStatusColor } from "@/shared/lib/status-utils";
 
 interface Props {
   incident: IncidentDto;
@@ -110,15 +114,17 @@ export default function IncidentAlerts({ incident }: Props) {
       //     />
       //   ),
       // }),
-      columnHelper.accessor("severity", {
+      columnHelper.display({
         id: "severity",
-        header: "Severity",
-        minSize: 80,
+        maxSize: 4,
+        header: () => <></>,
         cell: (context) => (
-          <div className="text-center">
-            <AlertSeverity severity={context.getValue()} />
-          </div>
+          <AlertSeverityBorder severity={context.row.original.severity} />
         ),
+        meta: {
+          tdClassName: "p-0",
+          thClassName: "p-0",
+        },
       }),
       columnHelper.display({
         id: "name",
@@ -144,17 +150,28 @@ export default function IncidentAlerts({ incident }: Props) {
         id: "status",
         minSize: 100,
         header: "Status",
+        cell: (context) => (
+          <span className="flex items-center gap-1 capitalize">
+            <Icon
+              icon={getStatusIcon(context.getValue())}
+              size="sm"
+              color={getStatusColor(context.getValue())}
+              className="!p-0"
+            />
+            {context.getValue()}
+          </span>
+        ),
       }),
       columnHelper.accessor("is_created_by_ai", {
         id: "is_created_by_ai",
-        header: "🔗",
+        header: "🔗 Correlation type",
         minSize: 50,
         cell: (context) => (
           <>
             {context.getValue() ? (
-              <div title="Correlated with AI">🤖</div>
+              <div title="Correlated with AI">🤖 AI</div>
             ) : (
-              <div title="Correlated manually">👨‍💻</div>
+              <div title="Correlated manually">👨‍💻 Manually</div>
             )}
           </>
         ),
@@ -186,7 +203,7 @@ export default function IncidentAlerts({ incident }: Props) {
       }),
       columnHelper.display({
         id: "remove",
-        header: "",
+        header: "Correlation",
         cell: (context) =>
           incident.is_confirmed && (
             <IncidentAlertMenu
diff --git a/keep-ui/app/(keep)/settings/auth/groups-sidebar.tsx b/keep-ui/app/(keep)/settings/auth/groups-sidebar.tsx
index a31c0d5bd..be1fa5ad8 100644
--- a/keep-ui/app/(keep)/settings/auth/groups-sidebar.tsx
+++ b/keep-ui/app/(keep)/settings/auth/groups-sidebar.tsx
@@ -17,7 +17,7 @@ import {
   FieldValues,
 } from "react-hook-form";
 import { useRoles } from "utils/hooks/useRoles";
-import { useUsers } from "utils/hooks/useUsers";
+import { useUsers } from "@/entities/users/model/useUsers";
 import { useApiUrl } from "utils/hooks/useConfig";
 import "./multiselect.css";
 
@@ -259,8 +259,8 @@ const GroupsSidebar = ({
                   {isSubmitting
                     ? "Saving..."
                     : isNewGroup
-                    ? "Create Group"
-                    : "Save"}
+                      ? "Create Group"
+                      : "Save"}
                 </Button>
               </div>
             </form>
diff --git a/keep-ui/app/(keep)/settings/auth/groups-tab.tsx b/keep-ui/app/(keep)/settings/auth/groups-tab.tsx
index da420f719..dcc23901b 100644
--- a/keep-ui/app/(keep)/settings/auth/groups-tab.tsx
+++ b/keep-ui/app/(keep)/settings/auth/groups-tab.tsx
@@ -15,7 +15,7 @@ import {
 } from "@tremor/react";
 import Loading from "@/app/(keep)/loading";
 import { useGroups } from "utils/hooks/useGroups";
-import { useUsers } from "utils/hooks/useUsers";
+import { useUsers } from "@/entities/users/model/useUsers";
 import { useRoles } from "utils/hooks/useRoles";
 import { useState, useEffect, useMemo } from "react";
 import GroupsSidebar from "./groups-sidebar";
diff --git a/keep-ui/app/(keep)/settings/auth/permissions-tab.tsx b/keep-ui/app/(keep)/settings/auth/permissions-tab.tsx
index 08f69e159..69b0c4d17 100644
--- a/keep-ui/app/(keep)/settings/auth/permissions-tab.tsx
+++ b/keep-ui/app/(keep)/settings/auth/permissions-tab.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Title, Subtitle, Card, TextInput } from "@tremor/react";
 import { usePermissions } from "utils/hooks/usePermissions";
-import { useUsers } from "utils/hooks/useUsers";
+import { useUsers } from "@/entities/users/model/useUsers";
 import { useGroups } from "utils/hooks/useGroups";
 import { useRoles } from "utils/hooks/useRoles";
 import { usePresets } from "utils/hooks/usePresets";
diff --git a/keep-ui/app/(keep)/settings/auth/users-settings.tsx b/keep-ui/app/(keep)/settings/auth/users-settings.tsx
index 78d2952d2..54cfeb03d 100644
--- a/keep-ui/app/(keep)/settings/auth/users-settings.tsx
+++ b/keep-ui/app/(keep)/settings/auth/users-settings.tsx
@@ -4,7 +4,7 @@ import Loading from "@/app/(keep)/loading";
 import { User as AuthUser } from "next-auth";
 import { TiUserAdd } from "react-icons/ti";
 import { AuthType } from "utils/authenticationType";
-import { useUsers } from "utils/hooks/useUsers";
+import { useUsers } from "@/entities/users/model/useUsers";
 import { useRoles } from "utils/hooks/useRoles";
 import { useGroups } from "utils/hooks/useGroups";
 import { useConfig } from "utils/hooks/useConfig";
diff --git a/keep-ui/components/navbar/UserAvatar.tsx b/keep-ui/components/navbar/UserAvatar.tsx
index d90300363..c2ae3c996 100644
--- a/keep-ui/components/navbar/UserAvatar.tsx
+++ b/keep-ui/components/navbar/UserAvatar.tsx
@@ -1,8 +1,10 @@
+import clsx from "clsx";
 import Image from "next/image";
 
 interface Props {
   image: string | null | undefined;
   name: string;
+  size?: "sm" | "xs";
 }
 
 export const getInitials = (name: string) =>
@@ -10,17 +12,30 @@ export const getInitials = (name: string) =>
     .join("")
     .toUpperCase();
 
-export default function UserAvatar({ image, name }: Props) {
+export default function UserAvatar({ image, name, size = "sm" }: Props) {
+  const sizeClass = (function (size: "sm" | "xs") {
+    if (size === "sm") return "w-7 h-7";
+    if (size === "xs") return "w-5 h-5";
+  })(size);
+  const sizeValue = (function (size: "sm" | "xs") {
+    if (size === "sm") return 28;
+    if (size === "xs") return 20;
+  })(size);
   return image ? (
     <Image
-      className="rounded-full w-7 h-7 inline"
+      className={clsx("rounded-full inline", sizeClass)}
       src={image}
       alt="user avatar"
-      width={28}
-      height={28}
+      width={sizeValue}
+      height={sizeValue}
     />
   ) : (
-    <span className="relative inline-flex items-center justify-center w-7 h-7 overflow-hidden bg-orange-400 rounded-full dark:bg-gray-600">
+    <span
+      className={clsx(
+        "relative inline-flex items-center justify-center overflow-hidden bg-orange-400 rounded-full dark:bg-gray-600",
+        sizeClass
+      )}
+    >
       <span className="font-medium text-white text-xs">
         {getInitials(name)}
       </span>
diff --git a/keep-ui/entities/users/model/useUser.ts b/keep-ui/entities/users/model/useUser.ts
new file mode 100644
index 000000000..f765314cd
--- /dev/null
+++ b/keep-ui/entities/users/model/useUser.ts
@@ -0,0 +1,6 @@
+import { useUsers } from "./useUsers";
+
+export function useUser(email: string) {
+  const { data: users = [] } = useUsers();
+  return users.find((user) => user.email === email) ?? null;
+}
diff --git a/keep-ui/utils/hooks/useUsers.ts b/keep-ui/entities/users/model/useUsers.ts
similarity index 73%
rename from keep-ui/utils/hooks/useUsers.ts
rename to keep-ui/entities/users/model/useUsers.ts
index 48368b77c..d87bb235f 100644
--- a/keep-ui/utils/hooks/useUsers.ts
+++ b/keep-ui/entities/users/model/useUsers.ts
@@ -2,7 +2,7 @@ import { User } from "@/app/(keep)/settings/models";
 import { useHydratedSession as useSession } from "@/shared/lib/hooks/useHydratedSession";
 import { SWRConfiguration } from "swr";
 import useSWRImmutable from "swr/immutable";
-import { useApiUrl } from "./useConfig";
+import { useApiUrl } from "../../../utils/hooks/useConfig";
 import { fetcher } from "utils/fetcher";
 
 export const useUsers = (options: SWRConfiguration = {}) => {
@@ -10,8 +10,8 @@ export const useUsers = (options: SWRConfiguration = {}) => {
   const { data: session } = useSession();
 
   return useSWRImmutable<User[]>(
-    () => (session ? `${apiUrl}/auth/users` : null),
-    (url) => fetcher(url, session?.accessToken),
+    () => (session ? "/auth/users" : null),
+    (url) => fetcher(apiUrl + url, session?.accessToken),
     options
   );
 };
diff --git a/keep-ui/entities/users/ui/UserStatefulAvatar.tsx b/keep-ui/entities/users/ui/UserStatefulAvatar.tsx
new file mode 100644
index 000000000..53d9bf43d
--- /dev/null
+++ b/keep-ui/entities/users/ui/UserStatefulAvatar.tsx
@@ -0,0 +1,28 @@
+import UserAvatar from "@/components/navbar/UserAvatar";
+import { useUser } from "../model/useUser";
+import { Icon } from "@tremor/react";
+import { UserCircleIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+
+export function UserStatefulAvatar({
+  email,
+  size = "sm",
+}: {
+  email: string;
+  size?: "sm" | "xs";
+}) {
+  const user = useUser(email);
+  const sizeClass = (function (size: "sm" | "xs") {
+    if (size === "sm") return "[&>svg]:w-7 [&>svg]:h-7";
+    if (size === "xs") return "[&>svg]:w-5 [&>svg]:h-5";
+  })(size);
+  if (!user) {
+    return (
+      <Icon
+        icon={UserCircleIcon}
+        className={clsx("text-gray-600 !p-0", sizeClass)}
+      />
+    );
+  }
+  return <UserAvatar name={user?.name} image={user?.picture} size={size} />;
+}
diff --git a/keep-ui/entities/users/ui/index.ts b/keep-ui/entities/users/ui/index.ts
new file mode 100644
index 000000000..b419f1b44
--- /dev/null
+++ b/keep-ui/entities/users/ui/index.ts
@@ -0,0 +1 @@
+export { UserStatefulAvatar } from "./UserStatefulAvatar";
diff --git a/keep-ui/features/create-or-update-incident/ui/create-or-update-incident-form.tsx b/keep-ui/features/create-or-update-incident/ui/create-or-update-incident-form.tsx
index ddf50f976..0458f6007 100644
--- a/keep-ui/features/create-or-update-incident/ui/create-or-update-incident-form.tsx
+++ b/keep-ui/features/create-or-update-incident/ui/create-or-update-incident-form.tsx
@@ -10,7 +10,7 @@ import {
   SelectItem,
 } from "@tremor/react";
 import { FormEvent, useEffect, useState } from "react";
-import { useUsers } from "utils/hooks/useUsers";
+import { useUsers } from "@/entities/users/model/useUsers";
 import { useIncidentActions } from "@/entities/incidents/model";
 import type { IncidentDto } from "@/entities/incidents/model";
 import { getIncidentName } from "@/entities/incidents/lib/utils";
diff --git a/keep-ui/features/incident-list/ui/incidents-table.tsx b/keep-ui/features/incident-list/ui/incidents-table.tsx
index f71c702a5..7f34c5813 100644
--- a/keep-ui/features/incident-list/ui/incidents-table.tsx
+++ b/keep-ui/features/incident-list/ui/incidents-table.tsx
@@ -35,6 +35,7 @@ import { useIncidentActions } from "@/entities/incidents/model";
 import { IncidentSeverityBadge } from "@/entities/incidents/ui";
 import { getIncidentName } from "@/entities/incidents/lib/utils";
 import { DateTimeField, TablePagination } from "@/shared/ui";
+import { UserStatefulAvatar } from "@/entities/users/ui";
 
 function SelectedRowActions({
   selectedRowIds,
@@ -228,7 +229,9 @@ export default function IncidentsTable({
     columnHelper.display({
       id: "assignee",
       header: "Assignee",
-      cell: ({ row }) => row.original.assignee,
+      cell: ({ row }) => (
+        <UserStatefulAvatar email={row.original.assignee} size="xs" />
+      ),
     }),
     columnHelper.accessor("creation_time", {
       id: "creation_time",
diff --git a/keep-ui/package-lock.json b/keep-ui/package-lock.json
index 551791941..11e155b6a 100644
--- a/keep-ui/package-lock.json
+++ b/keep-ui/package-lock.json
@@ -24,6 +24,7 @@
         "@heroicons/react": "^2.1.5",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-popover": "^1.1.2",
+        "@radix-ui/react-tooltip": "^1.1.4",
         "@sentry/nextjs": "^8.38.0",
         "@svgr/webpack": "^8.0.1",
         "@tanstack/react-table": "^8.11.0",
@@ -6331,6 +6332,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.4.tgz",
+      "integrity": "sha512-QpObUH/ZlpaO4YgHSaYzrLO2VuO+ZBFFgGzjMUPwtiYnAzzNNDPJeEGRrT7qNOrWm/Jr08M1vlp+vTHtnSQ0Uw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
diff --git a/keep-ui/package.json b/keep-ui/package.json
index 42a3e8395..172d2dfd2 100644
--- a/keep-ui/package.json
+++ b/keep-ui/package.json
@@ -25,6 +25,7 @@
     "@heroicons/react": "^2.1.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@sentry/nextjs": "^8.38.0",
     "@svgr/webpack": "^8.0.1",
     "@tanstack/react-table": "^8.11.0",
diff --git a/keep-ui/shared/lib/status-utils.ts b/keep-ui/shared/lib/status-utils.ts
new file mode 100644
index 000000000..7eabd2f8f
--- /dev/null
+++ b/keep-ui/shared/lib/status-utils.ts
@@ -0,0 +1,37 @@
+import {
+  ExclamationCircleIcon,
+  CheckCircleIcon,
+  CircleStackIcon,
+  PauseIcon,
+} from "@heroicons/react/24/outline";
+import { IoIosGitPullRequest } from "react-icons/io";
+
+export const getStatusIcon = (status: string) => {
+  switch (status.toLowerCase()) {
+    case "firing":
+      return ExclamationCircleIcon;
+    case "resolved":
+      return CheckCircleIcon;
+    case "acknowledged":
+      return PauseIcon;
+    case "merged":
+      return IoIosGitPullRequest;
+    default:
+      return CircleStackIcon;
+  }
+};
+
+export const getStatusColor = (status: string) => {
+  switch (status.toLowerCase()) {
+    case "firing":
+      return "red";
+    case "resolved":
+      return "green";
+    case "acknowledged":
+      return "gray";
+    case "merged":
+      return "purple";
+    default:
+      return "gray";
+  }
+};
diff --git a/keep-ui/shared/ui/FieldHeader.tsx b/keep-ui/shared/ui/FieldHeader.tsx
index 5c99f4c23..c40813331 100644
--- a/keep-ui/shared/ui/FieldHeader.tsx
+++ b/keep-ui/shared/ui/FieldHeader.tsx
@@ -1,3 +1,13 @@
-export const FieldHeader = ({ children }: { children: React.ReactNode }) => (
-  <h3 className="text-sm text-gray-500 font-semibold">{children}</h3>
+import clsx from "clsx";
+
+export const FieldHeader = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <h3 className={clsx("text-sm text-gray-500 font-semibold", className)}>
+    {children}
+  </h3>
 );
diff --git a/keep-ui/shared/ui/Tooltip/Tooltip.tsx b/keep-ui/shared/ui/Tooltip/Tooltip.tsx
new file mode 100644
index 000000000..7da4c271c
--- /dev/null
+++ b/keep-ui/shared/ui/Tooltip/Tooltip.tsx
@@ -0,0 +1,93 @@
+// Tremor Tooltip [v0.1.0]
+
+import React from "react";
+import * as TooltipPrimitives from "@radix-ui/react-tooltip";
+
+import clsx from "clsx";
+
+interface TooltipProps
+  extends Omit<TooltipPrimitives.TooltipContentProps, "content" | "onClick">,
+    Pick<
+      TooltipPrimitives.TooltipProps,
+      "open" | "defaultOpen" | "onOpenChange" | "delayDuration"
+    > {
+  content: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  side?: "bottom" | "left" | "top" | "right";
+  showArrow?: boolean;
+}
+
+const Tooltip = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitives.Content>,
+  TooltipProps
+>(
+  (
+    {
+      children,
+      className,
+      content,
+      delayDuration,
+      defaultOpen,
+      open,
+      onClick,
+      onOpenChange,
+      showArrow = true,
+      side,
+      sideOffset = 10,
+      asChild,
+      ...props
+    }: TooltipProps,
+    forwardedRef
+  ) => {
+    return (
+      <TooltipPrimitives.Provider delayDuration={150}>
+        <TooltipPrimitives.Root
+          open={open}
+          defaultOpen={defaultOpen}
+          onOpenChange={onOpenChange}
+          delayDuration={delayDuration}
+          tremor-id="tremor-raw"
+        >
+          <TooltipPrimitives.Trigger onClick={onClick} asChild={asChild}>
+            {children}
+          </TooltipPrimitives.Trigger>
+          <TooltipPrimitives.Portal>
+            <TooltipPrimitives.Content
+              ref={forwardedRef}
+              side={side}
+              sideOffset={sideOffset}
+              align="center"
+              className={clsx(
+                // base
+                "max-w-60 select-none rounded-md px-2.5 py-1.5 text-sm leading-5 shadow-md",
+                // text color
+                "text-gray-50 dark:text-gray-900",
+                // background color
+                "bg-gray-900 dark:bg-gray-50",
+                // transition
+                "will-change-[transform,opacity]",
+                "data-[side=bottom]:animate-slideDownAndFade data-[side=left]:animate-slideLeftAndFade data-[side=right]:animate-slideRightAndFade data-[side=top]:animate-slideUpAndFade data-[state=closed]:animate-hide",
+                className
+              )}
+              {...props}
+            >
+              {content}
+              {showArrow ? (
+                <TooltipPrimitives.Arrow
+                  className="border-none fill-gray-900 dark:fill-gray-50"
+                  width={12}
+                  height={7}
+                  aria-hidden="true"
+                />
+              ) : null}
+            </TooltipPrimitives.Content>
+          </TooltipPrimitives.Portal>
+        </TooltipPrimitives.Root>
+      </TooltipPrimitives.Provider>
+    );
+  }
+);
+
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip, type TooltipProps };
diff --git a/keep-ui/shared/ui/Tooltip/index.ts b/keep-ui/shared/ui/Tooltip/index.ts
new file mode 100644
index 000000000..cf5cc016b
--- /dev/null
+++ b/keep-ui/shared/ui/Tooltip/index.ts
@@ -0,0 +1,2 @@
+export { Tooltip } from "./Tooltip";
+export type { TooltipProps } from "./Tooltip";
diff --git a/keep-ui/shared/ui/index.ts b/keep-ui/shared/ui/index.ts
index 307db1bbb..fc196b355 100644
--- a/keep-ui/shared/ui/index.ts
+++ b/keep-ui/shared/ui/index.ts
@@ -3,3 +3,6 @@ export { TabLinkNavigation, TabNavigationLink } from "./TabLinkNavigation";
 export { DateTimeField } from "./DateTimeField";
 export { FieldHeader } from "./FieldHeader";
 export { EmptyStateCard } from "./EmptyState";
+export { Tooltip } from "./Tooltip";
+
+export type { TooltipProps } from "./Tooltip";
diff --git a/keep-ui/tailwind.config.js b/keep-ui/tailwind.config.js
index da4514760..9553ecaf2 100644
--- a/keep-ui/tailwind.config.js
+++ b/keep-ui/tailwind.config.js
@@ -105,11 +105,42 @@ module.exports = {
         "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
         "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
       },
+      keyframes: {
+        hide: {
+          from: { opacity: "1" },
+          to: { opacity: "0" },
+        },
+        slideDownAndFade: {
+          from: { opacity: "0", transform: "translateY(-6px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+        slideLeftAndFade: {
+          from: { opacity: "0", transform: "translateX(6px)" },
+          to: { opacity: "1", transform: "translateX(0)" },
+        },
+        slideUpAndFade: {
+          from: { opacity: "0", transform: "translateY(6px)" },
+          to: { opacity: "1", transform: "translateY(0)" },
+        },
+        slideRightAndFade: {
+          from: { opacity: "0", transform: "translateX(-6px)" },
+          to: { opacity: "1", transform: "translateX(0)" },
+        },
+      },
       animation: {
         "scroll-shadow-left":
           "auto linear 0s 1 normal none running scroll-shadow-left",
         "scroll-shadow-right":
           "auto linear 0s 1 normal none running scroll-shadow-right",
+        // Tremor tooltip
+        hide: "hide 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideDownAndFade:
+          "slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade:
+          "slideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade:
+          "slideRightAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",
       },
     },
   },