diff --git a/.changeset/modern-pianos-sneeze.md b/.changeset/modern-pianos-sneeze.md
new file mode 100644
index 00000000000..ea335564856
--- /dev/null
+++ b/.changeset/modern-pianos-sneeze.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+"Apps" link in sidebar now shows an alert if one or more apps have failed or pending webhook deliveries. This means you can see if there are issues with your apps without having to enter app details.
diff --git a/.featureFlags/app_alerts.md b/.featureFlags/app_alerts.md
new file mode 100644
index 00000000000..1c24f71ecb5
--- /dev/null
+++ b/.featureFlags/app_alerts.md
@@ -0,0 +1,11 @@
+---
+name: app_alerts
+displayName: App alerts
+enabled: false
+payload: "default"
+visible: false
+---
+
+![new filters](./images/app-alerts.jpg)
+Experience new notifications displaying alerts for apps in the Dashboard. 
+Get meaningful information when Saleor detects issues with an app.
\ No newline at end of file
diff --git a/.featureFlags/generated.tsx b/.featureFlags/generated.tsx
index d4eca57a7a6..f8d09f4ac7c 100644
--- a/.featureFlags/generated.tsx
+++ b/.featureFlags/generated.tsx
@@ -1,13 +1,18 @@
 // @ts-nocheck
 
-import A54222 from "./images/discounts-list.png"
-import M51879 from "./images/improved_refunds.png"
+import X82432 from "./images/app-alerts.jpg"
+import J50320 from "./images/discounts-list.png"
+import K65771 from "./images/improved_refunds.png"
 
-const discounts_rules = () => (<><p><img src={A54222} alt="Discount rules"/></p>
+const app_alerts = () => (<><p><img src={X82432} alt="new filters"/>
+Experience new notifications displaying alerts for apps in the Dashboard. 
+Get meaningful information when Saleor detects issues with an app.</p>
+</>)
+const discounts_rules = () => (<><p><img src={J50320} alt="Discount rules"/></p>
 <p>Apply the new discounts rules to narrow your promotions audience.
 Set up conditions and channels that must be fulfilled to apply defined reward.</p>
 </>)
-const improved_refunds = () => (<><p><img src={M51879} alt="Improved refunds"/></p>
+const improved_refunds = () => (<><p><img src={K65771} alt="Improved refunds"/></p>
 <h3 id="enable-the-enhanced-refund-feature-to-streamline-your-refund-process">Enable the enhanced refund feature to streamline your refund process:</h3>
 <ul>
 <li><p>• Choose between automatic calculations based on selected items or enter refund amounts directly for overcharges and custom adjustments.</p>
@@ -33,6 +38,15 @@ New filters have been added to the following pages:</p>
 </>)
 
 export const AVAILABLE_FLAGS = [{
+  name: "app_alerts",
+  displayName: "App alerts",
+  component: app_alerts,
+  visible: false,
+  content: {
+    enabled: false,
+    payload: "default",
+  }
+},{
   name: "discounts_rules",
   displayName: "Discounts rules",
   component: discounts_rules,
diff --git a/.featureFlags/images/app-alerts.jpg b/.featureFlags/images/app-alerts.jpg
new file mode 100644
index 00000000000..6f35af097b4
Binary files /dev/null and b/.featureFlags/images/app-alerts.jpg differ
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index d44e748fa3e..fb14270e911 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -1013,6 +1013,9 @@
   "4LRapg": {
     "string": "Discount removed"
   },
+  "4MIO2H": {
+    "string": "Issues found.{break}Review app alerts."
+  },
   "4PlW0w": {
     "context": "tracking number",
     "string": "Tracking Number: {trackingNumber}"
diff --git a/src/apps/components/AppAlerts/SidebarAppAlert.tsx b/src/apps/components/AppAlerts/SidebarAppAlert.tsx
new file mode 100644
index 00000000000..157e1d2366c
--- /dev/null
+++ b/src/apps/components/AppAlerts/SidebarAppAlert.tsx
@@ -0,0 +1,56 @@
+import { AppSections } from "@dashboard/apps/urls";
+import { WARNING_ICON_COLOR, WARNING_ICON_COLOR_LIGHTER } from "@dashboard/colors";
+import { ExclamationIcon } from "@dashboard/icons/ExclamationIcon";
+import { ExclamationIconFilled } from "@dashboard/icons/ExclamationIconFilled";
+import { Box, Text, Tooltip } from "@saleor/macaw-ui-next";
+import React, { useState } from "react";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+
+import { useAppsAlert } from "./useAppsAlert";
+
+const ExclamationIconComponent = () => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <Box
+      __color={isHovered ? WARNING_ICON_COLOR_LIGHTER : WARNING_ICON_COLOR}
+      __width={17}
+      __height={17}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {isHovered ? <ExclamationIconFilled /> : <ExclamationIcon />}
+    </Box>
+  );
+};
+
+export const SidebarAppAlert = () => {
+  const { hasFailedAttempts } = useAppsAlert();
+
+  if (!hasFailedAttempts) {
+    return null;
+  }
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Link to={AppSections.appsSection}>
+          <ExclamationIconComponent />
+        </Link>
+      </Tooltip.Trigger>
+
+      <Tooltip.Content align="start" side="bottom">
+        <Text>
+          <FormattedMessage
+            defaultMessage="Issues found.{break}Review app alerts."
+            id="4MIO2H"
+            values={{
+              break: <br />,
+            }}
+          />
+        </Text>
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};
diff --git a/src/apps/components/AppAlerts/queries.ts b/src/apps/components/AppAlerts/queries.ts
new file mode 100644
index 00000000000..c7bb6decf06
--- /dev/null
+++ b/src/apps/components/AppAlerts/queries.ts
@@ -0,0 +1,42 @@
+import { gql } from "@apollo/client";
+
+export const appFailedPendingWebhooks = gql`
+  query AppFailedPendingWebhooks {
+    apps(first: 50, filter: { type: THIRDPARTY }) {
+      edges {
+        node {
+          webhooks {
+            failedDelivers: eventDeliveries(
+              first: 1
+              filter: { status: FAILED }
+              sortBy: { field: CREATED_AT, direction: DESC }
+            ) {
+              edges {
+                node {
+                  id
+                }
+              }
+            }
+            pendingDelivers: eventDeliveries(
+              first: 1
+              filter: { status: PENDING }
+              sortBy: { field: CREATED_AT, direction: DESC }
+            ) {
+              edges {
+                node {
+                  attempts(first: 6, sortBy: { field: CREATED_AT, direction: DESC }) {
+                    edges {
+                      node {
+                        status
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
diff --git a/src/apps/components/AppAlerts/useAppsAlert.ts b/src/apps/components/AppAlerts/useAppsAlert.ts
new file mode 100644
index 00000000000..5713d3f2d13
--- /dev/null
+++ b/src/apps/components/AppAlerts/useAppsAlert.ts
@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+import { useAppsFailedDeliveries } from "./useAppsFailedDeliveries";
+
+export const useAppsAlert = () => {
+  const { hasFailed, fetchAppsWebhooks } = useAppsFailedDeliveries();
+
+  // TODO: Implement fetching at intervals
+  useEffect(() => {
+    fetchAppsWebhooks();
+  }, []);
+
+  return {
+    hasFailedAttempts: hasFailed,
+  };
+};
diff --git a/src/apps/components/AppAlerts/useAppsFailedDeliveries.test.ts b/src/apps/components/AppAlerts/useAppsFailedDeliveries.test.ts
new file mode 100644
index 00000000000..955c177fe90
--- /dev/null
+++ b/src/apps/components/AppAlerts/useAppsFailedDeliveries.test.ts
@@ -0,0 +1,261 @@
+import { useUserPermissions } from "@dashboard/auth/hooks/useUserPermissions";
+import { PermissionEnum, useAppFailedPendingWebhooksLazyQuery } from "@dashboard/graphql";
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useAppsFailedDeliveries } from "./useAppsFailedDeliveries";
+
+jest.mock("@dashboard/auth/hooks/useUserPermissions");
+jest.mock("@dashboard/graphql");
+
+const fetchingFunction = jest.fn();
+
+describe("useAppsFailedDeliveries", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should handle null webhook data", () => {
+    // Arrange
+    (useUserPermissions as jest.Mock).mockReturnValue([{ code: PermissionEnum.MANAGE_APPS }]);
+    (useAppFailedPendingWebhooksLazyQuery as jest.Mock).mockReturnValue([
+      fetchingFunction,
+      {
+        data: {
+          apps: {
+            edges: [
+              {
+                node: {
+                  webhooks: null,
+                },
+              },
+            ],
+          },
+        },
+      },
+    ]);
+
+    // Act
+    const { result } = renderHook(() => useAppsFailedDeliveries());
+
+    result.current.fetchAppsWebhooks();
+
+    // Assert
+    expect(result.current.hasFailed).toEqual(false);
+  });
+
+  it("should handle undefined permissions", () => {
+    // Arrange
+    (useUserPermissions as jest.Mock).mockReturnValue(undefined);
+    (useAppFailedPendingWebhooksLazyQuery as jest.Mock).mockReturnValue([
+      fetchingFunction,
+      { data: null },
+    ]);
+
+    // Act
+    const { result } = renderHook(() => useAppsFailedDeliveries());
+
+    expect(result.current.hasFailed).toEqual(false);
+  });
+
+  it("should return default counts when user has no permissions", () => {
+    // Arrange
+    (useUserPermissions as jest.Mock).mockReturnValue([]);
+    (useAppFailedPendingWebhooksLazyQuery as jest.Mock).mockReturnValue([
+      fetchingFunction,
+      { data: null },
+    ]);
+
+    // Act
+    const { result } = renderHook(() => useAppsFailedDeliveries());
+
+    result.current.fetchAppsWebhooks();
+
+    // Assert
+    expect(fetchingFunction).not.toHaveBeenCalled();
+    expect(result.current.hasFailed).toEqual(false);
+  });
+
+  it("should not flag as fails if there are no failed webhooks", () => {
+    // Arrange
+    (useUserPermissions as jest.Mock).mockReturnValue([{ code: PermissionEnum.MANAGE_APPS }]);
+    (useAppFailedPendingWebhooksLazyQuery as jest.Mock).mockReturnValue([
+      fetchingFunction,
+      {
+        data: {
+          apps: {
+            edges: [
+              {
+                node: {
+                  webhooks: [
+                    {
+                      failedDelivers: { edges: [] },
+                      pendingDelivers: {
+                        edges: [],
+                      },
+                    },
+                    {
+                      failedDelivers: { edges: [] },
+                      pendingDelivers: { edges: [] },
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      },
+    ]);
+
+    // Act
+    const { result } = renderHook(() => useAppsFailedDeliveries());
+
+    result.current.fetchAppsWebhooks();
+
+    // Assert
+    expect(fetchingFunction).toHaveBeenCalled();
+    expect(result.current.hasFailed).toEqual(false);
+  });
+
+  it("should check webhooks correctly for pending deliveries when user has permissions", () => {
+    // Arrange
+    (useUserPermissions as jest.Mock).mockReturnValue([{ code: PermissionEnum.MANAGE_APPS }]);
+    (useAppFailedPendingWebhooksLazyQuery as jest.Mock).mockReturnValue([
+      fetchingFunction,
+      {
+        data: {
+          apps: {
+            edges: [
+              {
+                node: {
+                  webhooks: [
+                    {
+                      failedDelivers: { edges: [] },
+                      pendingDelivers: {
+                        edges: [
+                          {
+                            node: {
+                              attempts: {
+                                edges: [{ node: { status: "FAILED" } }],
+                              },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      failedDelivers: { edges: [] },
+                      pendingDelivers: null,
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      },
+    ]);
+
+    // Act
+    const { result } = renderHook(() => useAppsFailedDeliveries());
+
+    result.current.fetchAppsWebhooks();
+
+    // Assert
+    expect(fetchingFunction).toHaveBeenCalled();
+    expect(result.current.hasFailed).toEqual(true);
+  });
+
+  it("should check webhooks correctly when user has permissions", () => {
+    // Arrange
+    (useUserPermissions as jest.Mock).mockReturnValue([{ code: PermissionEnum.MANAGE_APPS }]);
+    (useAppFailedPendingWebhooksLazyQuery as jest.Mock).mockReturnValue([
+      fetchingFunction,
+      {
+        data: {
+          apps: {
+            edges: [
+              {
+                node: {
+                  webhooks: [
+                    {
+                      failedDelivers: { edges: [1, 2] },
+                      pendingDelivers: [],
+                    },
+                    {
+                      failedDelivers: null,
+                      pendingDelivers: {
+                        edges: [
+                          {
+                            node: {
+                              attempts: {
+                                edges: [{ node: { status: "FAILED" } }],
+                              },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      },
+    ]);
+
+    // Act
+    const { result } = renderHook(() => useAppsFailedDeliveries());
+
+    result.current.fetchAppsWebhooks();
+
+    // Assert
+    expect(fetchingFunction).toHaveBeenCalled();
+    expect(result.current.hasFailed).toEqual(true);
+  });
+
+  it("should check webhooks correctly for both delivery fail types", () => {
+    // Arrange
+    (useUserPermissions as jest.Mock).mockReturnValue([{ code: PermissionEnum.MANAGE_APPS }]);
+    (useAppFailedPendingWebhooksLazyQuery as jest.Mock).mockReturnValue([
+      fetchingFunction,
+      {
+        data: {
+          apps: {
+            edges: [
+              {
+                node: {
+                  webhooks: [
+                    {
+                      failedDelivers: { edges: [1, 2] },
+                      pendingDelivers: {
+                        edges: [
+                          {
+                            node: {
+                              attempts: {
+                                edges: [{ node: { status: "FAILED" } }],
+                              },
+                            },
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        },
+      },
+    ]);
+
+    // Act
+    const { result } = renderHook(() => useAppsFailedDeliveries());
+
+    result.current.fetchAppsWebhooks();
+
+    // Assert
+    expect(fetchingFunction).toHaveBeenCalled();
+    expect(result.current.hasFailed).toEqual(true);
+  });
+});
diff --git a/src/apps/components/AppAlerts/useAppsFailedDeliveries.ts b/src/apps/components/AppAlerts/useAppsFailedDeliveries.ts
new file mode 100644
index 00000000000..43d795a4e94
--- /dev/null
+++ b/src/apps/components/AppAlerts/useAppsFailedDeliveries.ts
@@ -0,0 +1,68 @@
+import { useUserPermissions } from "@dashboard/auth/hooks/useUserPermissions";
+import {
+  AppFailedPendingWebhooksQuery,
+  EventDeliveryStatusEnum,
+  PermissionEnum,
+  useAppFailedPendingWebhooksLazyQuery,
+} from "@dashboard/graphql";
+import { useMemo } from "react";
+
+type Webhook = NonNullable<
+  NonNullable<AppFailedPendingWebhooksQuery["apps"]>["edges"][0]["node"]["webhooks"]
+>[0];
+interface AppsFailedDeliveries {
+  hasFailed: boolean;
+  fetchAppsWebhooks: () => void;
+}
+
+const requiredPermissions = [PermissionEnum.MANAGE_APPS];
+
+const hasFailedAttemptsCheck = (webhook: Webhook) =>
+  webhook.failedDelivers && webhook.failedDelivers?.edges?.length > 0;
+const hasFailedAttemptsInPendingCheck = (webhook: Webhook) => {
+  const preliminaryCheck = webhook.pendingDelivers && webhook.pendingDelivers?.edges?.length > 0;
+
+  if (!preliminaryCheck) return false;
+
+  return webhook.pendingDelivers?.edges.some(edge =>
+    edge.node?.attempts?.edges.some(
+      attempt => attempt.node.status === EventDeliveryStatusEnum.FAILED,
+    ),
+  );
+};
+
+export const useAppsFailedDeliveries = (): AppsFailedDeliveries => {
+  const permissions = useUserPermissions();
+  const hasRequiredPermissions = requiredPermissions.some(permission =>
+    permissions?.map(e => e.code)?.includes(permission),
+  );
+
+  const [fetchAppsWebhooks, { data }] = useAppFailedPendingWebhooksLazyQuery();
+
+  const hasFailed = useMemo(
+    () =>
+      data?.apps?.edges.some(
+        app =>
+          app.node.webhooks?.some(webhook => {
+            if (hasFailedAttemptsCheck(webhook) || hasFailedAttemptsInPendingCheck(webhook)) {
+              return true;
+            }
+
+            return false;
+          }),
+        false,
+      ) ?? false,
+    [data],
+  );
+
+  const handleFetchAppsWebhooks = () => {
+    if (hasRequiredPermissions) {
+      fetchAppsWebhooks();
+    }
+  };
+
+  return {
+    hasFailed,
+    fetchAppsWebhooks: handleFetchAppsWebhooks,
+  };
+};
diff --git a/src/colors.ts b/src/colors.ts
new file mode 100644
index 00000000000..0bb0bb1cb11
--- /dev/null
+++ b/src/colors.ts
@@ -0,0 +1,2 @@
+export const WARNING_ICON_COLOR = "#FFB84E";
+export const WARNING_ICON_COLOR_LIGHTER = "#FFD87E";
diff --git a/src/components/Sidebar/menu/SingleItem.tsx b/src/components/Sidebar/menu/SingleItem.tsx
index 83aec0e4395..7deef137bad 100644
--- a/src/components/Sidebar/menu/SingleItem.tsx
+++ b/src/components/Sidebar/menu/SingleItem.tsx
@@ -28,6 +28,7 @@ export const SingleItem: React.FC<Props> = ({ menuItem }) => {
       active={active}
       onClick={handleMenuItemClick}
       data-test-id={`menu-item-label-${menuItem.id}`}
+      position="relative"
     >
       <Link
         to={menuItem.url || ""}
@@ -51,6 +52,11 @@ export const SingleItem: React.FC<Props> = ({ menuItem }) => {
           </Text>
         </Box>
       </Link>
+      {menuItem.endAdornment && (
+        <Box position="absolute" right={2} zIndex={"3"}>
+          {menuItem.endAdornment}
+        </Box>
+      )}
     </List.Item>
   );
 };
diff --git a/src/components/Sidebar/menu/hooks/useMenuStructure.tsx b/src/components/Sidebar/menu/hooks/useMenuStructure.tsx
index 39f0383558a..950acd62ad5 100644
--- a/src/components/Sidebar/menu/hooks/useMenuStructure.tsx
+++ b/src/components/Sidebar/menu/hooks/useMenuStructure.tsx
@@ -1,3 +1,4 @@
+import { SidebarAppAlert } from "@dashboard/apps/components/AppAlerts/SidebarAppAlert";
 import { extensionMountPoints, useExtensions } from "@dashboard/apps/hooks/useExtensions";
 import { AppPaths } from "@dashboard/apps/urls";
 import { useUser } from "@dashboard/auth";
@@ -7,6 +8,7 @@ import { configurationMenuUrl } from "@dashboard/configuration";
 import { getConfigMenuItemsPermissions } from "@dashboard/configuration/utils";
 import { customerListUrl } from "@dashboard/customers/urls";
 import { saleListUrl, voucherListUrl } from "@dashboard/discounts/urls";
+import { useFlag } from "@dashboard/featureFlags";
 import { giftCardListUrl } from "@dashboard/giftCards/urls";
 import { PermissionEnum } from "@dashboard/graphql";
 import { ConfigurationIcon } from "@dashboard/icons/Configuration";
@@ -32,6 +34,8 @@ import { SidebarMenuItem } from "../types";
 import { mapToExtensionsItems } from "../utils";
 
 export function useMenuStructure() {
+  const { enabled: hasAppAlertsFeatureFlag } = useFlag("app_alerts");
+
   const extensions = useExtensions(extensionMountPoints.NAVIGATION_SIDEBAR);
   const intl = useIntl();
   const { user } = useUser();
@@ -48,6 +52,7 @@ export function useMenuStructure() {
     id: "apps",
     url: AppPaths.appListPath,
     type: "item",
+    endAdornment: hasAppAlertsFeatureFlag ? <SidebarAppAlert /> : null,
   });
   const menuItems: SidebarMenuItem[] = [
     {
diff --git a/src/components/Sidebar/menu/types.ts b/src/components/Sidebar/menu/types.ts
index 17dccaae812..0fa8571b451 100644
--- a/src/components/Sidebar/menu/types.ts
+++ b/src/components/Sidebar/menu/types.ts
@@ -1,5 +1,6 @@
 import { PermissionEnum } from "@dashboard/graphql";
 import { Sprinkles } from "@saleor/macaw-ui-next";
+import { ReactNode } from "react";
 
 export interface SidebarMenuItem {
   label?: string;
@@ -7,8 +8,9 @@ export interface SidebarMenuItem {
   url?: string;
   permissions?: PermissionEnum[];
   type: "item" | "itemGroup" | "divider";
-  icon?: React.ReactNode;
+  icon?: ReactNode;
   onClick?: () => void;
   children?: SidebarMenuItem[];
   paddingY?: Sprinkles["paddingY"];
+  endAdornment?: ReactNode;
 }
diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
index 981d830487e..69e03350dfe 100644
--- a/src/graphql/hooks.generated.ts
+++ b/src/graphql/hooks.generated.ts
@@ -3461,6 +3461,73 @@ export const WebhookDetailsFragmentDoc = gql`
   customHeaders
 }
     ${WebhookFragmentDoc}`;
+export const AppFailedPendingWebhooksDocument = gql`
+    query AppFailedPendingWebhooks {
+  apps(first: 50, filter: {type: THIRDPARTY}) {
+    edges {
+      node {
+        webhooks {
+          failedDelivers: eventDeliveries(
+            first: 1
+            filter: {status: FAILED}
+            sortBy: {field: CREATED_AT, direction: DESC}
+          ) {
+            edges {
+              node {
+                id
+              }
+            }
+          }
+          pendingDelivers: eventDeliveries(
+            first: 1
+            filter: {status: PENDING}
+            sortBy: {field: CREATED_AT, direction: DESC}
+          ) {
+            edges {
+              node {
+                attempts(first: 6, sortBy: {field: CREATED_AT, direction: DESC}) {
+                  edges {
+                    node {
+                      status
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useAppFailedPendingWebhooksQuery__
+ *
+ * To run a query within a React component, call `useAppFailedPendingWebhooksQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAppFailedPendingWebhooksQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useAppFailedPendingWebhooksQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useAppFailedPendingWebhooksQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<Types.AppFailedPendingWebhooksQuery, Types.AppFailedPendingWebhooksQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.AppFailedPendingWebhooksQuery, Types.AppFailedPendingWebhooksQueryVariables>(AppFailedPendingWebhooksDocument, options);
+      }
+export function useAppFailedPendingWebhooksLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.AppFailedPendingWebhooksQuery, Types.AppFailedPendingWebhooksQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.AppFailedPendingWebhooksQuery, Types.AppFailedPendingWebhooksQueryVariables>(AppFailedPendingWebhooksDocument, options);
+        }
+export type AppFailedPendingWebhooksQueryHookResult = ReturnType<typeof useAppFailedPendingWebhooksQuery>;
+export type AppFailedPendingWebhooksLazyQueryHookResult = ReturnType<typeof useAppFailedPendingWebhooksLazyQuery>;
+export type AppFailedPendingWebhooksQueryResult = Apollo.QueryResult<Types.AppFailedPendingWebhooksQuery, Types.AppFailedPendingWebhooksQueryVariables>;
 export const AppCreateDocument = gql`
     mutation AppCreate($input: AppInput!, $hasManagedAppsPermission: Boolean = true) {
   appCreate(input: $input) {
diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts
index 189dde7f8c7..df34a6ae7c2 100644
--- a/src/graphql/types.generated.ts
+++ b/src/graphql/types.generated.ts
@@ -8929,6 +8929,11 @@ export enum WeightUnitsEnum {
   TONNE = 'TONNE'
 }
 
+export type AppFailedPendingWebhooksQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type AppFailedPendingWebhooksQuery = { __typename: 'Query', apps: { __typename: 'AppCountableConnection', edges: Array<{ __typename: 'AppCountableEdge', node: { __typename: 'App', webhooks: Array<{ __typename: 'Webhook', failedDelivers: { __typename: 'EventDeliveryCountableConnection', edges: Array<{ __typename: 'EventDeliveryCountableEdge', node: { __typename: 'EventDelivery', id: string } }> } | null, pendingDelivers: { __typename: 'EventDeliveryCountableConnection', edges: Array<{ __typename: 'EventDeliveryCountableEdge', node: { __typename: 'EventDelivery', attempts: { __typename: 'EventDeliveryAttemptCountableConnection', edges: Array<{ __typename: 'EventDeliveryAttemptCountableEdge', node: { __typename: 'EventDeliveryAttempt', status: EventDeliveryStatusEnum } }> } | null } }> } | null }> | null } }> } | null };
+
 export type AppCreateMutationVariables = Exact<{
   input: AppInput;
   hasManagedAppsPermission?: InputMaybe<Scalars['Boolean']>;
diff --git a/src/icons/ExclamationIcon.tsx b/src/icons/ExclamationIcon.tsx
new file mode 100644
index 00000000000..e554e375eef
--- /dev/null
+++ b/src/icons/ExclamationIcon.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+export const ExclamationIcon = () => (
+  <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_466_2501)">
+      <path
+        d="M8.50008 15.5846C12.4121 15.5846 15.5834 12.4133 15.5834 8.5013C15.5834 4.58929 12.4121 1.41797 8.50008 1.41797C4.58806 1.41797 1.41675 4.58929 1.41675 8.5013C1.41675 12.4133 4.58806 15.5846 8.50008 15.5846Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.5 5.66797V8.5013"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.5 11.332H8.50607"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_466_2501">
+        <rect width="17" height="17" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/src/icons/ExclamationIconFilled.tsx b/src/icons/ExclamationIconFilled.tsx
new file mode 100644
index 00000000000..fb3d89798ec
--- /dev/null
+++ b/src/icons/ExclamationIconFilled.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+export const ExclamationIconFilled = () => (
+  <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_471_2501)">
+      <path
+        d="M8.50008 15.5846C12.4121 15.5846 15.5834 12.4133 15.5834 8.5013C15.5834 4.58929 12.4121 1.41797 8.50008 1.41797C4.58806 1.41797 1.41675 4.58929 1.41675 8.5013C1.41675 12.4133 4.58806 15.5846 8.50008 15.5846Z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.5 5.66797V8.5013"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.5 11.332H8.50607"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_471_2501">
+        <rect width="17" height="17" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/src/index.css b/src/index.css
index fb41c78883b..b1b8ce79799 100644
--- a/src/index.css
+++ b/src/index.css
@@ -75,7 +75,6 @@ body {
   border: none;
 }
 
-
 .conditional-metadata label {
   border: none;
 }
@@ -85,7 +84,7 @@ body {
 }
 
 @media (min-height: 900px) {
-    .scrollArea {
-      max-height: 600px;
-    }
-}
\ No newline at end of file
+  .scrollArea {
+    max-height: 600px;
+  }
+}
diff --git a/src/misc.ts b/src/misc.ts
index ab80d853d6c..cc79308510c 100644
--- a/src/misc.ts
+++ b/src/misc.ts
@@ -567,9 +567,6 @@ export const getByUnmatchingId = (idToCompare: string) => (obj: { id: string })
 
 export const findById = <T extends Node>(id: string, list?: T[]) => list?.find(getById(id));
 
-export const COLOR_WARNING = "#FBE5AC";
-export const COLOR_WARNING_DARK = "#3E2F0A";
-
 export type PillStatusType = "error" | "warning" | "info" | "success" | "generic";
 
 export const getStatusColor = ({