diff --git a/web/packages/design/src/Alert/Alert.tsx b/web/packages/design/src/Alert/Alert.tsx
index ec4878c29c730..6f858964dfec7 100644
--- a/web/packages/design/src/Alert/Alert.tsx
+++ b/web/packages/design/src/Alert/Alert.tsx
@@ -369,14 +369,14 @@ const ActionButtons = ({
 };
 
 /** Renders either a regular or a link button, depending on the action. */
-const ActionButton = ({
+export const ActionButton = ({
   action: { href, content, onClick },
   fill,
   intent,
 }: {
   action: Action;
-  fill: ButtonFill;
-  intent: ButtonIntent;
+  fill?: ButtonFill;
+  intent?: ButtonIntent;
 }) =>
   href ? (
     <Button
diff --git a/web/packages/design/src/Alert/index.ts b/web/packages/design/src/Alert/index.ts
index ab337bb92467b..8677980506dca 100644
--- a/web/packages/design/src/Alert/index.ts
+++ b/web/packages/design/src/Alert/index.ts
@@ -18,6 +18,7 @@
 
 export {
   type Action,
+  ActionButton,
   Alert,
   Danger,
   Info,
diff --git a/web/packages/shared/components/Notification/Notification.story.tsx b/web/packages/shared/components/Notification/Notification.story.tsx
index f02da7cffcae5..4df7b2e7ee299 100644
--- a/web/packages/shared/components/Notification/Notification.story.tsx
+++ b/web/packages/shared/components/Notification/Notification.story.tsx
@@ -17,7 +17,7 @@
  */
 
 import React, { useState } from 'react';
-import { Info, Warning } from 'design/Icon';
+import { Bots } from 'design/Icon';
 import Flex from 'design/Flex';
 
 import { Notification } from './Notification';
@@ -45,8 +45,6 @@ export const Notifications = () => {
               description: loremIpsum,
             },
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -60,8 +58,6 @@ export const Notifications = () => {
               description: loremIpsum,
             },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -75,8 +71,33 @@ export const Notifications = () => {
               description: loremIpsum,
             },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
+          onRemove={() => {}}
+          isAutoRemovable={false}
+        />
+
+        <Notification
+          item={{
+            id: crypto.randomUUID(),
+            severity: 'neutral',
+            content: {
+              title: 'Neutral with title and description',
+              description: loremIpsum,
+            },
+          }}
+          onRemove={() => {}}
+          isAutoRemovable={false}
+        />
+
+        <Notification
+          item={{
+            id: crypto.randomUUID(),
+            severity: 'neutral',
+            content: {
+              title: 'Custom icon with title and description',
+              description: loremIpsum,
+              icon: Bots,
+            },
+          }}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -87,10 +108,12 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'info',
-            content: 'Multiline info without title. ' + loremIpsum,
+            content: {
+              title: 'Info with title and description',
+              subtitle: 'And some subtitle, too',
+              description: loremIpsum,
+            },
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -99,10 +122,12 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'warn',
-            content: 'Multiline warning without title. ' + loremIpsum,
+            content: {
+              title: 'Warning with title and description',
+              subtitle: 'And some subtitle, too',
+              description: loremIpsum,
+            },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -111,10 +136,12 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'error',
-            content: 'Multiline error without title. ' + loremIpsum,
+            content: {
+              title: 'Error with title and description',
+              subtitle: 'And some subtitle, too',
+              description: loremIpsum,
+            },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -125,10 +152,8 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'info',
-            content: 'Info without title',
+            content: 'Multiline info without title. ' + loremIpsum,
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -137,10 +162,8 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'warn',
-            content: 'Warning without title',
+            content: 'Multiline warning without title. ' + loremIpsum,
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -149,10 +172,8 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'error',
-            content: 'Error without title',
+            content: 'Multiline error without title. ' + loremIpsum,
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -163,53 +184,27 @@ export const Notifications = () => {
           item={{
             id: crypto.randomUUID(),
             severity: 'info',
-            content: {
-              title: 'Info with link',
-              description: loremIpsum,
-              link: {
-                href: 'https://goteleport.com',
-                text: 'goteleport.com',
-              },
-            },
-          }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
-          onRemove={() => {}}
-          isAutoRemovable={false}
-        />
-        <Notification
-          item={{
-            id: crypto.randomUUID(),
-            severity: 'warn',
-            content: {
-              title: 'Warning with link',
-              description: loremIpsum,
-              link: {
-                href: 'https://goteleport.com',
-                text: 'goteleport.com',
-              },
-            },
+            content: 'Info without title',
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
+      </Flex>
+
+      <Flex flexDirection="column" gap={4}>
         <Notification
           item={{
             id: crypto.randomUUID(),
-            severity: 'error',
+            severity: 'info',
             content: {
-              title: 'Error with link',
+              title: 'Info with link',
               description: loremIpsum,
-              link: {
+              action: {
                 href: 'https://goteleport.com',
-                text: 'goteleport.com',
+                content: 'Learn More',
               },
             },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -225,67 +220,61 @@ export const Notifications = () => {
               list: [loremIpsum, loremIpsum],
             },
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
+      </Flex>
+
+      <Flex flexDirection="column" gap={4}>
         <Notification
           item={{
             id: crypto.randomUUID(),
-            severity: 'warn',
-            content: {
-              title: 'Warning with list',
-              list: [loremIpsum, loremIpsum],
-            },
+            severity: 'info',
+            content:
+              'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
+      </Flex>
+      <Flex flexDirection="column" gap={4}>
         <Notification
           item={{
             id: crypto.randomUUID(),
-            severity: 'error',
+            severity: 'info',
             content: {
-              title: 'Error with list',
-              list: [loremIpsum, loremIpsum],
+              title:
+                'A very long title with a very long address that spans multiple lines tcp-postgres.foo.bar.baz.cloud.gravitational.io and some more text on another line',
+              description:
+                'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
             },
           }}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
       </Flex>
-
       <Flex flexDirection="column" gap={4}>
         <Notification
           item={{
             id: crypto.randomUUID(),
             severity: 'info',
-            content:
-              'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
+            content: {
+              description: 'Info with description, without a title',
+            },
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
+      </Flex>
+      <Flex flexDirection="column" gap={4}>
         <Notification
           item={{
             id: crypto.randomUUID(),
             severity: 'info',
             content: {
-              title:
-                'A very long title with a very long address that spans multiple lines tcp-postgres.foo.bar.baz.cloud.gravitational.io and some more text on another line',
-              description:
-                'Long continuous strings. /Users/test/Library/ApplicationSupport/foobarbazio/barbazfoobarioloremoipsumoconfigurationobaziofoobazi/baz/lorem/ipsum/Electron/configuration.json',
+              list: ['Info with a list', 'But no title'],
             },
           }}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -310,10 +299,7 @@ export const AutoRemovable = () => {
               "This will be automatically removed after 5 seconds. Click to expand it. Mouseover it to restart the timer. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
           }}
           onRemove={() => setShowInfo(false)}
-          Icon={Info}
-          getColor={theme => theme.colors.info}
           isAutoRemovable={true}
-          autoRemoveDurationMs={5000}
         />
       ) : (
         <div>Info notification has been removed</div>
@@ -327,10 +313,7 @@ export const AutoRemovable = () => {
               "This will be automatically removed after 5 seconds. Click to expand it. Mouseover it to restart the timer. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
           }}
           onRemove={() => setShowWarning(false)}
-          Icon={Warning}
-          getColor={theme => theme.colors.warning}
           isAutoRemovable={true}
-          autoRemoveDurationMs={5000}
         />
       ) : (
         <div>Warning notification has been removed</div>
@@ -344,8 +327,6 @@ export const AutoRemovable = () => {
               "This can only be removed by clicking on the X. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
           }}
           onRemove={() => setShowError(false)}
-          Icon={Warning}
-          getColor={theme => theme.colors.error.main}
           isAutoRemovable={false}
         />
       ) : (
diff --git a/web/packages/shared/components/Notification/Notification.tsx b/web/packages/shared/components/Notification/Notification.tsx
index 773a3d15848e9..71e537f7e5838 100644
--- a/web/packages/shared/components/Notification/Notification.tsx
+++ b/web/packages/shared/components/Notification/Notification.tsx
@@ -18,53 +18,76 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
-import { ButtonIcon, Flex, Link, Text } from 'design';
+import { Box, ButtonIcon, Flex, Text } from 'design';
 import { Cross } from 'design/Icon';
 
-import type { NotificationItem, NotificationItemContent } from './types';
+import * as Icon from 'design/Icon';
+import { IconProps } from 'design/Icon/Icon';
+import { Theme } from 'design/theme/themes/types';
+import { borderColor } from 'design/system';
+import { ActionButton } from 'design/Alert';
+import { BoxProps } from 'design/Box';
 
-interface NotificationProps {
+import type {
+  NotificationItem,
+  NotificationItemContent,
+  NotificationItemObjectContent,
+  NotificationSeverity,
+} from './types';
+
+interface NotificationProps extends BoxProps {
   item: NotificationItem;
 
   onRemove(): void;
 
-  Icon: React.ElementType;
+  /**
+   * @deprecated It does nothing, the icon is determined based on severity and
+   * can be overridden using `item.content.icon` instead. This field is here
+   * only temporarily, so that Enterprise build doesn't break.
+   * TODO(bl-nero): Delete this field once Enterprise stops referencing it.
+   */
+  Icon?: React.ElementType;
 
-  getColor(theme): string;
+  /**
+   * @deprecated It does nothing, the color is determined based on severity.
+   * This field is here only temporarily, so that Enterprise build doesn't
+   * break.  TODO(bl-nero): Delete this field once Enterprise stops referencing
+   * it.
+   */
+  getColor?: (theme) => string;
 
-  isAutoRemovable: boolean;
-  autoRemoveDurationMs?: number;
-  // Workaround until `styled` gets types.
-  // Once the types are available, we can switch the type of Notification props to:
-  //
-  //     NotificationProps & React.ComponentProps<typeof Container>
-  //
-  // and remove the next line.
-  [key: string]: any;
+  /**
+   * If defined, determines whether the notification is auto-dismissed after 5
+   * seconds. If undefined, the decision is based on the notification severity:
+   * only 'success', 'info', and 'neutral' notifications are removable by
+   * default.
+   */
+  isAutoRemovable?: boolean;
 }
 
-const defaultAutoRemoveDurationMs = 10_000; // 10s
+const autoRemoveDurationMs = 5_000; // 5s
 
 export function Notification(props: NotificationProps) {
   const {
     item,
     onRemove,
-    Icon,
-    getColor,
-    isAutoRemovable,
-    autoRemoveDurationMs,
+    isAutoRemovable: isAutoRemovableProp,
     ...styleProps
   } = props;
+  const content = toObjectContent(item.content);
   const [isHovered, setIsHovered] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
   const timeoutHandler = useRef<number>();
   const theme = useTheme();
 
+  const isAutoRemovable =
+    isAutoRemovableProp ??
+    ['success', 'info', 'neutral'].includes(item.severity);
   useEffect(() => {
     if (!isHovered && isAutoRemovable) {
       timeoutHandler.current = setTimeout(
         onRemove,
-        autoRemoveDurationMs || defaultAutoRemoveDurationMs
+        autoRemoveDurationMs
       ) as unknown as number;
     }
 
@@ -73,33 +96,22 @@ export function Notification(props: NotificationProps) {
         clearTimeout(timeoutHandler.current);
       }
     };
-  }, [isHovered]);
+  }, [isHovered, isAutoRemovable]);
 
   function toggleIsExpanded() {
     setIsExpanded(wasExpanded => !wasExpanded);
   }
 
-  const removeIcon = (
-    <ButtonIcon
-      size={0}
-      ml={1}
-      mr={-1}
-      alignSelf="baseline"
-      style={{ visibility: isHovered ? 'visible' : 'hidden' }}
-      onClick={e => {
-        e.stopPropagation();
-        onRemove();
-      }}
-    >
-      <Cross size="small" />
-    </ButtonIcon>
-  );
+  const { borderColor, iconColor } = notificationColors(theme, item.severity);
 
   return (
     <Container
-      py={2}
-      pl={3}
-      pr={2}
+      py={3}
+      // We use a custom value to offset the default padding by the width of the
+      // left border.
+      pl="12px"
+      pr={3}
+      borderColor={borderColor}
       onMouseOver={() => {
         if (isHovered === false) {
           setIsHovered(true);
@@ -113,79 +125,142 @@ export function Notification(props: NotificationProps) {
       onClick={toggleIsExpanded}
       {...styleProps}
     >
-      <Flex alignItems="center" mr={1} minWidth="0" width="100%">
-        <Icon color={getColor(theme)} mr={3} size="medium" />
-        {getRenderedContent(item.content, isExpanded, removeIcon)}
+      <Flex gap={2} flexDirection="column">
+        <Flex flexDirection="row" gap={2}>
+          <NotificationIcon
+            severity={item.severity}
+            size="medium"
+            color={iconColor}
+            customIcon={content.icon}
+          />
+          {/* Right margin leaves room for the close button. Note that we
+              wouldn't have to do it if the close button was in layout, but we
+              would have to nudge it a bit to top-right anyway, and it would
+              then occupy too much vertical space where it used to be, causing
+              other problems. */}
+          <Box flex="1" mr={4}>
+            <Text typography="h3">{content.title}</Text>
+            <Text typography="body3">{content.subtitle}</Text>
+          </Box>
+        </Flex>
+        <NotificationBody content={content} isExpanded={isExpanded} />
       </Flex>
+      <CloseIcon
+        style={{
+          visibility: isHovered ? 'visible' : 'hidden',
+        }}
+        onClick={e => {
+          e.stopPropagation();
+          onRemove();
+        }}
+      >
+        <Cross size="small" />
+      </CloseIcon>
     </Container>
   );
 }
 
-function getRenderedContent(
-  content: NotificationItemContent,
-  isExpanded: boolean,
-  removeIcon: React.ReactNode
-) {
-  const longerTextCss = isExpanded ? textCss : shortTextCss;
+const NotificationIcon = ({
+  severity,
+  customIcon: CustomIcon,
+  ...otherProps
+}: {
+  severity: NotificationSeverity;
+  customIcon: React.ComponentType<IconProps>;
+} & IconProps) => {
+  const commonProps = { role: 'graphics-symbol', ...otherProps };
+  if (CustomIcon) {
+    return <CustomIcon {...commonProps} />;
+  }
+  switch (severity) {
+    case 'success':
+      return <Icon.Checks aria-label="Success" {...commonProps} />;
+    case 'error':
+      return <Icon.WarningCircle aria-label="Danger" {...commonProps} />;
+    case 'info':
+      return <Icon.Info aria-label="Info" {...commonProps} />;
+    case 'warn':
+      return <Icon.Warning aria-label="Warning" {...commonProps} />;
+    case 'neutral':
+      return <Icon.Notification aria-label="Note" {...commonProps} />;
+    default:
+      severity satisfies never;
+  }
+};
 
-  if (typeof content === 'string') {
-    return (
-      <Flex alignItems="center" justifyContent="space-between" width="100%">
-        <Text fontSize={13} css={longerTextCss}>
-          {content}
-        </Text>
-        {removeIcon}
-      </Flex>
-    );
+const toObjectContent = (
+  content: NotificationItemContent
+): NotificationItemObjectContent =>
+  typeof content === 'string' ? { title: content } : content;
+
+const notificationColors = (theme: Theme, severity: NotificationSeverity) => {
+  switch (severity) {
+    case 'neutral':
+      return {
+        borderColor: theme.colors.interactive.tonal.neutral[2],
+        iconColor: theme.colors.text.main,
+      };
+    case 'error':
+      return {
+        borderColor: theme.colors.interactive.solid.danger.default.background,
+        iconColor: theme.colors.interactive.solid.danger.default.background,
+      };
+    case 'warn':
+      return {
+        borderColor: theme.colors.interactive.solid.alert.default.background,
+        iconColor: theme.colors.interactive.solid.alert.default.background,
+      };
+    case 'info':
+      return {
+        borderColor: theme.colors.interactive.solid.accent.default.background,
+        iconColor: theme.colors.interactive.solid.accent.default.background,
+      };
+    case 'success':
+      return {
+        borderColor: theme.colors.interactive.solid.success.default.background,
+        iconColor: theme.colors.interactive.solid.success.default.background,
+      };
+    default:
+      severity satisfies never;
   }
-  if (typeof content === 'object') {
-    return (
-      <Flex flexDirection="column" minWidth="0" width="100%">
-        <div
-          css={`
-            position: relative;
-          `}
-        >
-          <Text
-            fontSize={13}
-            bold
-            mr="30px"
-            css={`
-              line-height: 20px;
-            `}
-          >
-            {content.title}
-          </Text>
-          <div
-            css={`
-              position: absolute;
-              top: 0;
-              right: 0;
-            `}
-          >
-            {removeIcon}
-          </div>
-        </div>
-        <Text fontSize={13} color="text.slightlyMuted" css={longerTextCss}>
+};
+
+const CloseIcon = styled(ButtonIcon)`
+  /* Place the close button so that its hover state circle "overflows" the layout
+   * padding a bit, placing the close icon itself in alignment with the padding. */
+  position: absolute;
+  top: ${props => props.theme.space[2]}px;
+  right: ${props => props.theme.space[2]}px;
+`;
+
+const NotificationBody = ({
+  content,
+  isExpanded,
+}: {
+  content: NotificationItemObjectContent;
+  isExpanded: boolean;
+}) => {
+  const longerTextCss = isExpanded ? textCss : shortTextCss;
+  const hasListOrDescription = !!content.list || !!content.description;
+
+  return (
+    <>
+      {/* Note: an empty <Text/> element would still generate a flex gap, so we
+          only render it if necessary. */}
+      {hasListOrDescription && (
+        <Text typography="body2" color="text.slightlyMuted" css={longerTextCss}>
           {content.list && <List items={content.list} />}
           {content.description}
-          {content.link && (
-            <Link
-              css={`
-                display: block;
-              `}
-              href={content.link.href}
-              target="_blank"
-              onClick={e => e.stopPropagation()} // prevents notification from collapsing
-            >
-              {content.link.text}
-            </Link>
-          )}
         </Text>
-      </Flex>
-    );
-  }
-}
+      )}
+      {content.action && (
+        <Box alignSelf="flex-start">
+          <ActionButton intent="neutral" action={content.action} />
+        </Box>
+      )}
+    </>
+  );
+};
 
 function List(props: { items: string[] }) {
   return (
@@ -209,7 +284,6 @@ function List(props: { items: string[] }) {
 }
 
 const textCss = `
-  line-height: 20px;
   overflow-wrap: anywhere;
   white-space: pre-line;
 `;
@@ -221,16 +295,21 @@ const shortTextCss = `
   -webkit-line-clamp: 3;
 `;
 
-const Container = styled(Flex)`
-  flex-direction: row;
-  justify-content: space-between;
+const Container = styled(Box)`
+  /* Positioning anchor for the close button. */
+  position: relative;
   background: ${props => props.theme.colors.levels.elevated};
-  min-height: 40px;
+  border-left: ${props => props.theme.borders[3]};
   width: 320px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
   color: ${props => props.theme.colors.text.main};
-  border-radius: 4px;
+  border-radius: ${props => props.theme.radii[3]}px;
   cursor: pointer;
   // Break up long addresses.
   word-break: break-word;
+
+  ${borderColor}
 `;
diff --git a/web/packages/shared/components/Notification/index.ts b/web/packages/shared/components/Notification/index.ts
index 7f6b1bddaec61..76c44aa5b05fc 100644
--- a/web/packages/shared/components/Notification/index.ts
+++ b/web/packages/shared/components/Notification/index.ts
@@ -17,4 +17,8 @@
  */
 
 export { Notification } from './Notification';
-export type { NotificationItem, NotificationItemContent } from './types';
+export type {
+  NotificationItem,
+  NotificationItemContent,
+  NotificationSeverity,
+} from './types';
diff --git a/web/packages/shared/components/Notification/types.ts b/web/packages/shared/components/Notification/types.ts
index b6759f18aa7c4..0060346eb81b5 100644
--- a/web/packages/shared/components/Notification/types.ts
+++ b/web/packages/shared/components/Notification/types.ts
@@ -16,20 +16,30 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { Action } from 'design/Alert';
+import { IconProps } from 'design/Icon/Icon';
+import React from 'react';
+
+export type NotificationSeverity =
+  | 'info'
+  | 'warn'
+  | 'error'
+  | 'success'
+  | 'neutral';
+
 export interface NotificationItem {
   content: NotificationItemContent;
-  severity: 'info' | 'warn' | 'error';
+  severity: NotificationSeverity;
   id: string;
 }
 
 export type NotificationItemContent = string | NotificationItemObjectContent;
 
 export type NotificationItemObjectContent = {
-  title: string;
+  title?: string;
+  subtitle?: string;
   list?: string[];
   description?: string;
-  link?: {
-    href: string;
-    text: string;
-  };
+  icon?: React.ComponentType<IconProps>;
+  action?: Action;
 };
diff --git a/web/packages/teleport/src/Account/Account.tsx b/web/packages/teleport/src/Account/Account.tsx
index da2a1fa589f62..c8066f4038f40 100644
--- a/web/packages/teleport/src/Account/Account.tsx
+++ b/web/packages/teleport/src/Account/Account.tsx
@@ -21,7 +21,11 @@ import { Box, Flex, H2, Indicator, Subtitle2 } from 'design';
 import styled, { useTheme } from 'styled-components';
 import { Attempt } from 'shared/hooks/useAttemptNext';
 import * as Icon from 'design/Icon';
-import { Notification, NotificationItem } from 'shared/components/Notification';
+import {
+  Notification,
+  NotificationItem,
+  NotificationSeverity,
+} from 'shared/components/Notification';
 
 import { useStore } from 'shared/libs/stores';
 
@@ -53,10 +57,7 @@ import { StatePill } from './StatePill';
 export interface EnterpriseComponentProps {
   // TODO(bl-nero): Consider moving the notifications to its own store and
   // unifying them between this screen and the unified resources screen.
-  addNotification: (
-    severity: NotificationItem['severity'],
-    content: string
-  ) => void;
+  addNotification: (severity: NotificationSeverity, content: string) => void;
 }
 
 export interface AccountPageProps {
@@ -135,10 +136,7 @@ export function Account({
   const [prevFetchStatus, setPrevFetchStatus] = useState<Attempt['status']>('');
   const [prevTokenStatus, setPrevTokenStatus] = useState<Attempt['status']>('');
 
-  function addNotification(
-    severity: NotificationItem['severity'],
-    content: string
-  ) {
+  function addNotification(severity: NotificationSeverity, content: string) {
     setNotifications(n => [
       ...n,
       {
@@ -299,11 +297,9 @@ export function Account({
       <NotificationContainer>
         {notifications.map(item => (
           <Notification
-            style={{ marginBottom: '12px' }}
+            mb={3}
             key={item.id}
             item={item}
-            Icon={notificationIcon(item.severity)}
-            getColor={notificationColor(item.severity)}
             onRemove={() => removeNotification(item.id)}
             isAutoRemovable={item.severity === 'info'}
           />
@@ -419,25 +415,3 @@ const NotificationContainer = styled.div`
 const Relative = styled.div`
   position: relative;
 `;
-
-function notificationIcon(severity: NotificationItem['severity']) {
-  switch (severity) {
-    case 'info':
-      return Icon.Info;
-    case 'warn':
-      return Icon.Warning;
-    case 'error':
-      return Icon.WarningCircle;
-  }
-}
-
-function notificationColor(severity: NotificationItem['severity']) {
-  switch (severity) {
-    case 'info':
-      return theme => theme.colors.info;
-    case 'warn':
-      return theme => theme.colors.warning.main;
-    case 'error':
-      return theme => theme.colors.error.main;
-  }
-}
diff --git a/web/packages/teleport/src/DesktopSession/AlertDropdown.tsx b/web/packages/teleport/src/DesktopSession/AlertDropdown.tsx
index b00b18de95d6f..41ad9d1a135aa 100644
--- a/web/packages/teleport/src/DesktopSession/AlertDropdown.tsx
+++ b/web/packages/teleport/src/DesktopSession/AlertDropdown.tsx
@@ -88,8 +88,6 @@ export function AlertDropdown({ alerts, onRemoveAlert }: Props) {
                 key={alert.id}
                 item={alert}
                 onRemove={() => onRemoveAlert(alert.id)}
-                Icon={Warning}
-                getColor={theme => theme.colors.warning.main}
                 isAutoRemovable={false}
               />
             ))}
diff --git a/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.ts b/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.ts
index 219fabd5dd2cf..8bbaf525cd116 100644
--- a/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.ts
+++ b/web/packages/teleterm/src/ui/AppInitializer/showStartupModalsAndNotifications.ts
@@ -83,9 +83,9 @@ function notifyAboutConfigErrors(
           description:
             isKeymapError &&
             'A valid shortcut contains at least one modifier and a single key code, for example "Shift+Tab".\nFunction keys do not require a modifier.',
-          link: {
+          action: {
             href: 'https://goteleport.com/docs/connect-your-client/teleport-connect/#configuration',
-            text: 'See the config file documentation',
+            content: 'See the config file documentation',
           },
         });
       }
diff --git a/web/packages/teleterm/src/ui/components/Notifcations/Notifications.story.tsx b/web/packages/teleterm/src/ui/components/Notifcations/Notifications.story.tsx
index f5f9cbf46764c..148dd5cea7b32 100644
--- a/web/packages/teleterm/src/ui/components/Notifcations/Notifications.story.tsx
+++ b/web/packages/teleterm/src/ui/components/Notifcations/Notifications.story.tsx
@@ -23,7 +23,10 @@ import { unique } from 'teleterm/ui/utils/uid';
 
 import { Notifications } from '.';
 
-import type { NotificationItem } from '@gravitational/shared/components/Notification';
+import type {
+  NotificationItem,
+  NotificationSeverity,
+} from '@gravitational/shared/components/Notification';
 
 export default {
   title: 'Teleterm/components/Notifications',
@@ -42,7 +45,7 @@ function useNotifications() {
 export const TitleAndDescriptionContent = () => {
   const { setItems, removeItem, items } = useNotifications();
 
-  function notify(severity: NotificationItem['severity']) {
+  function notify(severity: NotificationSeverity) {
     setItems(prevItems => [
       ...prevItems,
       {
@@ -76,7 +79,7 @@ export const TitleAndDescriptionContent = () => {
 export const StringContent = () => {
   const { setItems, removeItem, items } = useNotifications();
 
-  function notify(severity: NotificationItem['severity']) {
+  function notify(severity: NotificationSeverity) {
     setItems(prevItems => [
       ...prevItems,
       {
diff --git a/web/packages/teleterm/src/ui/components/Notifcations/Notifications.tsx b/web/packages/teleterm/src/ui/components/Notifcations/Notifications.tsx
index 0ec05a8968beb..c98d80326ea5e 100644
--- a/web/packages/teleterm/src/ui/components/Notifcations/Notifications.tsx
+++ b/web/packages/teleterm/src/ui/components/Notifcations/Notifications.tsx
@@ -19,7 +19,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Notification } from 'shared/components/Notification';
-import { Info, Warning } from 'design/Icon';
 
 import type { NotificationItem } from 'shared/components/Notification';
 
@@ -29,37 +28,15 @@ interface NotificationsProps {
   onRemoveItem(id: string): void;
 }
 
-const notificationConfig: Record<
-  NotificationItem['severity'],
-  { Icon: React.ElementType; getColor(theme): string; isAutoRemovable: boolean }
-> = {
-  error: {
-    Icon: Warning,
-    getColor: theme => theme.colors.error.main,
-    isAutoRemovable: false,
-  },
-  warn: {
-    Icon: Warning,
-    getColor: theme => theme.colors.warning.main,
-    isAutoRemovable: true,
-  },
-  info: {
-    Icon: Info,
-    getColor: theme => theme.colors.info,
-    isAutoRemovable: true,
-  },
-};
-
 export function Notifications(props: NotificationsProps) {
   return (
     <Container>
       {props.items.map(item => (
         <Notification
-          style={{ marginBottom: '12px' }}
+          mb={3}
           key={item.id}
           item={item}
           onRemove={() => props.onRemoveItem(item.id)}
-          {...notificationConfig[item.severity]}
         />
       ))}
     </Container>