diff --git a/apps/browser/src/autofill/content/components/.lit-storybook/main.ts b/apps/browser/src/autofill/content/components/.lit-storybook/main.ts
index 9e2da59d992..0e41f793377 100644
--- a/apps/browser/src/autofill/content/components/.lit-storybook/main.ts
+++ b/apps/browser/src/autofill/content/components/.lit-storybook/main.ts
@@ -8,7 +8,7 @@ const getAbsolutePath = (value: string): string =>
   dirname(require.resolve(join(value, "package.json")));
 
 const config: StorybookConfig = {
-  stories: ["../lit-stories/**/*.lit-stories.@(js|jsx|ts|tsx)"],
+  stories: ["../lit-stories/**/*.lit-stories.@(js|jsx|ts|tsx)", "../lit-stories/**/*.mdx"],
   addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/action-button.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/action-button.mdx
new file mode 100644
index 00000000000..d3c1968b32f
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/action-button.mdx
@@ -0,0 +1,64 @@
+import { Meta, Controls, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./action-button.lit-stories";
+
+<Meta title="Components/Buttons/Action Button" of={stories} />
+
+## Action Button
+
+The `ActionButton` component is a customizable button built using the `lit` library and styled with
+`@emotion/css`. This component supports themes, handles click events, and includes a disabled state.
+It is designed with accessibility and responsive design in mind.
+
+<Primary />
+<Controls />
+
+## Props
+
+| **Prop**       | **Type**                   | **Required** | **Description**                                             |
+| -------------- | -------------------------- | ------------ | ----------------------------------------------------------- |
+| `buttonAction` | `(e: Event) => void`       | Yes          | The function to execute when the button is clicked.         |
+| `buttonText`   | `string`                   | Yes          | The text to display on the button.                          |
+| `disabled`     | `boolean` (default: false) | No           | Disables the button when set to `true`.                     |
+| `theme`        | `Theme`                    | Yes          | The theme to style the button. Must match the `Theme` enum. |
+
+## Installation and Setup
+
+1. Ensure you have the necessary dependencies installed:
+
+   - `lit`: Used to render the component.
+   - `@emotion/css`: Used for styling the component.
+
+2. Pass the required props to the component when rendering:
+   - `buttonAction`: A function that handles the click event.
+   - `buttonText`: The text displayed on the button.
+   - `disabled` (optional): A boolean indicating whether the button is disabled.
+   - `theme`: The theme to style the button (must be a valid `Theme`).
+
+## Accessibility (WCAG) Compliance
+
+The `ActionButton` component follows the
+[W3C ARIA button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/). Below is a breakdown of
+key accessibility considerations:
+
+### Keyboard Accessibility
+
+- The button supports keyboard interaction through the `@click` event.
+- Users can activate the button using the `Enter` or `Space` key.
+
+### Screen Reader Compatibility
+
+- The `title` attribute is dynamically set to the button's text (`buttonText`), ensuring it is read
+  by screen readers.
+- The semantic `<button>` element is used, which is natively recognized by assistive technologies.
+
+### Focus Management
+
+- Ensure proper focus management when interacting with the button, especially when navigating using
+  a keyboard.
+
+### Visual Feedback
+
+- The button provides clear visual states for hover and disabled states:
+  - **Hover:** Changes background color, border color, and text contrast.
+  - **Disabled:** Muted background and text colors with no pointer events.
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/badge-button.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/badge-button.mdx
new file mode 100644
index 00000000000..e0740ced760
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/badge-button.mdx
@@ -0,0 +1,64 @@
+import { Meta, Controls, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./badge-button.lit-stories";
+
+<Meta title="Components/Buttons/Badge Button" of={stories} />
+
+## Badge Button
+
+The `BadgeButton` component is a compact, styled button built using the `lit` library and styled
+with `@emotion/css`. It is designed to display concise text and supports themes, click event
+handling, and a disabled state. The component is optimized for accessibility and responsive design.
+
+<Primary />
+<Controls />
+
+## Props
+
+| **Prop**       | **Type**                   | **Required** | **Description**                                             |
+| -------------- | -------------------------- | ------------ | ----------------------------------------------------------- |
+| `buttonAction` | `(e: Event) => void`       | Yes          | The function to execute when the button is clicked.         |
+| `buttonText`   | `string`                   | Yes          | The text to display on the badge button.                    |
+| `disabled`     | `boolean` (default: false) | No           | Disables the button when set to `true`.                     |
+| `theme`        | `Theme`                    | Yes          | The theme to style the button. Must match the `Theme` enum. |
+
+## Installation and Setup
+
+1. Ensure you have the necessary dependencies installed:
+
+   - `lit`: Used to render the component.
+   - `@emotion/css`: Used for styling the component.
+
+2. Pass the required props to the component when rendering:
+   - `buttonAction`: A function that handles the click event.
+   - `buttonText`: The text displayed on the badge button.
+   - `disabled` (optional): A boolean indicating whether the button is disabled.
+   - `theme`: The theme to style the button (must be a valid `Theme`).
+
+## Accessibility (WCAG) Compliance
+
+The `BadgeButton` component follows the
+[W3C ARIA button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/). Below is a breakdown of
+key accessibility considerations:
+
+### Keyboard Accessibility
+
+- The button supports keyboard interaction through the `@click` event.
+- Users can activate the button using the `Enter` or `Space` key.
+
+### Screen Reader Compatibility
+
+- The `title` attribute is dynamically set to the button's text (`buttonText`), ensuring it is read
+  by screen readers.
+- The semantic `<button>` element is used, which is natively recognized by assistive technologies.
+
+### Focus Management
+
+- Ensure proper focus management when interacting with the button, especially when navigating using
+  a keyboard.
+
+### Visual Feedback
+
+- The button provides clear visual states for hover and disabled states:
+  - **Hover:** Changes background color, border color, and text contrast.
+  - **Disabled:** Muted background and text colors with no pointer events.
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/body.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/body.mdx
new file mode 100644
index 00000000000..3a6a955e286
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/body.mdx
@@ -0,0 +1,70 @@
+import { Meta, Controls, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./body.lit-stories";
+
+<Meta title="Components/Notifications/Notification Body" of={stories} />
+
+## Notification Body
+
+The `NotificationBody` component displays a detailed notification with a list of associated ciphers,
+notification type, and styling based on the selected theme. It is a flexible component for
+presenting actionable information.
+
+<Primary />
+<Controls />
+
+## Props
+
+| **Prop**           | **Type**           | **Required** | **Description**                                                                                           |
+| ------------------ | ------------------ | ------------ | --------------------------------------------------------------------------------------------------------- |
+| `ciphers`          | `CipherData[]`     | Yes          | An array of cipher data objects. Each cipher includes metadata such as ID, name, type, and login details. |
+| `notificationType` | `NotificationType` | Yes          | Specifies the type of notification, such as `add`, `change`, `unlock`, or `fileless-import`.              |
+| `theme`            | `Theme`            | Yes          | Defines the theme used for styling the notification. Must match the `Theme` enum.                         |
+
+---
+
+## Usage Example
+
+```tsx
+import { NotificationBody } from "../../notification/body";
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+<NotificationBody
+  ciphers={[
+    {
+      id: "1",
+      name: "Example Cipher",
+      type: "Login",
+      favorite: false,
+      reprompt: "None",
+      icon: {
+        imageEnabled: true,
+        image: "",
+        fallbackImage: "https://example.com/fallback.png",
+        icon: "icon-class",
+      },
+      login: { username: "user@example.com", passkey: null },
+    },
+  ]}
+  notificationType="add"
+  theme={ThemeTypes.Dark}
+/>;
+```
+
+### Accessibility (WCAG) Compliance
+
+The NotificationBody component is designed to be accessible and adheres to WCAG guidelines:
+
+## Screen Reader Compatibility
+
+- Ciphers are presented with clear labeling to ensure context for assistive technologies.
+- Icons include fallback options for better accessibility.
+
+## Visual Feedback
+
+- `notificationType` adjusts the visual presentation for contextually relevant feedback.
+
+### Notes
+
+- ciphers: Ensure the array includes well-defined cipher objects to avoid rendering issues.
+- notificationType: This prop influences the messaging and appearance of the notification body.
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-action.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-action.mdx
new file mode 100644
index 00000000000..3b5dcd8797a
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-action.mdx
@@ -0,0 +1,83 @@
+import { Meta, Controls, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./cipher-action.lit-stories";
+
+<Meta title="Components/Ciphers/Cipher Action" of={stories} />
+
+## Cipher Action
+
+The `CipherAction` component is a functional UI element that handles actions related to ciphers in a
+secure environment. Built with the `lit` library and styled for consistency across themes, it
+provides flexibility and accessibility while supporting various notification types.
+
+<Primary />
+<Controls />
+
+## Props
+
+| **Prop**           | **Type**                                            | **Required** | **Description**                                                |
+| ------------------ | --------------------------------------------------- | ------------ | -------------------------------------------------------------- |
+| `handleAction`     | `(e: Event) => void`                                | No           | Function to execute when an action is triggered.               |
+| `notificationType` | `NotificationTypes.Change \| NotificationTypes.Add` | Yes          | Specifies the type of notification associated with the action. |
+| `theme`            | `Theme`                                             | Yes          | The theme to style the component. Must match the `Theme` enum. |
+
+## Installation and Setup
+
+1. Ensure the necessary dependencies are installed:
+
+   - `lit`: Used to render the component.
+
+2. Pass the required props when rendering the component:
+   - `handleAction`: Optional function to handle the triggered action.
+   - `notificationType`: Mandatory type from `NotificationTypes` to define the action context.
+   - `theme`: The styling theme (must be a valid `Theme` enum value).
+
+## Accessibility (WCAG) Compliance
+
+The `CipherAction` component is designed to be accessible, ensuring usability across diverse user
+bases. Below are the key considerations for accessibility:
+
+### Keyboard Accessibility
+
+- Fully navigable using the keyboard.
+- The action can be triggered using the `Enter` or `Space` key for users relying on keyboard
+  interaction.
+
+### Screen Reader Compatibility
+
+- The semantic elements used in the `CipherAction` component ensure that assistive technologies can
+  interpret the component correctly.
+- Text associated with the `notificationType` is programmatically linked, providing clarity for
+  screen reader users.
+
+### Focus Management
+
+- The component includes focus styles to ensure visibility during navigation.
+- Proper focus management ensures the component works seamlessly with keyboard navigation.
+
+### Visual Feedback
+
+- Provides distinct visual states for different themes and states:
+  - **Hover:** Adjustments to background, border, and text for enhanced visibility.
+  - **Active:** Highlights the button with a focus state when activated.
+  - **Disabled:** Grays out the component to indicate inactivity.
+
+## Usage Example
+
+Here's an example of how to integrate the `CipherAction` component:
+
+```ts
+import { CipherAction } from "../../cipher/cipher-action";
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+import { NotificationTypes } from "../../../../notification/abstractions/notification-bar";
+
+const handleAction = (e: Event) => {
+  console.log("Cipher action triggered!", e);
+};
+
+<CipherAction
+  handleAction={handleAction}
+  notificationType={NotificationTypes.Change}
+  theme={ThemeTypes.Dark}
+/>;
+```
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-icon.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-icon.mdx
new file mode 100644
index 00000000000..a1a94efde7b
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-icon.mdx
@@ -0,0 +1,90 @@
+import { Meta, Controls, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./cipher-icon.lit-stories";
+
+<Meta title="Components/Ciphers/Cipher Icon" of={stories} />
+
+## Cipher Icon
+
+The `CipherIcon` component is a versatile icon renderer designed for secure environments. It
+dynamically supports custom icons provided via URIs or displays a default icon (`Globe`) styled
+based on the theme and provided properties.
+
+<Primary />
+<Controls />
+
+## Props
+
+| **Prop** | **Type**            | **Required** | **Description**                                                                                                                                                 |
+| -------- | ------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `color`  | `string`            | Yes          | A contextual color override applied when the `uri` is not provided, ensuring consistent styling of the default icon.                                            |
+| `size`   | `string`            | Yes          | A valid CSS `width` value representing the width basis of the graphic. The height adjusts to maintain the original aspect ratio of the graphic.                 |
+| `theme`  | `Theme`             | Yes          | The styling theme for the icon, matching the `Theme` enum.                                                                                                      |
+| `uri`    | `string` (optional) | No           | A URL to an external graphic. If provided, the component displays this icon. If omitted, a default icon (`Globe`) styled with the provided `color` and `theme`. |
+
+## Installation and Setup
+
+1. Ensure the necessary dependencies are installed:
+
+   - `lit`: Renders the component.
+   - `@emotion/css`: Styles the component.
+
+2. Pass the necessary props when using the component:
+   - `color`: Used when no `uri` is provided to style the default icon.
+   - `size`: Defines the width of the icon. Height maintains aspect ratio.
+   - `theme`: Specifies the theme for styling.
+   - `uri` (optional): If provided, this URI is used to display a custom icon.
+
+## Accessibility (WCAG) Compliance
+
+The `CipherIcon` component ensures accessible and user-friendly interactions through thoughtful
+design:
+
+### Semantic Rendering
+
+- When the `uri` is provided, the component renders an `<img>` element, which is semantically
+  appropriate for external graphics.
+- If no `uri` is provided, the default icon is wrapped in a `<span>`, ensuring proper context for
+  screen readers.
+
+### Visual Feedback
+
+- The component visually adjusts based on the `size`, `color`, and `theme`, ensuring the icon
+  remains clear and legible across different environments.
+
+### Keyboard and Screen Reader Support
+
+- Ensure that any container or parent component provides appropriate `alt` text or labeling when
+  `uri` is used with an `<img>` tag for additional accessibility.
+
+## Usage Example
+
+Here's an example of how to integrate the `CipherIcon` component:
+
+```ts
+import { CipherIcon } from "./cipher-icon";
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+<CipherIcon
+  color="blue"
+  size="32px"
+  theme={ThemeTypes.Light}
+  uri="https://example.com/icon.png"
+/>;
+```
+
+This configuration displays a custom icon from the provided URI with a width of 32px, styled for the
+light theme. If the URI is omitted, the Globe icon is used as the fallback, colored in blue.
+
+### Default Styles
+
+- The default styles ensure responsive and clean design:
+
+- Width: Defined by the size prop.
+- Height: Automatically adjusts to maintain the aspect ratio.
+- Fit Content: Ensures the icon does not overflow or distort its container.
+
+### Notes
+
+- Always validate the uri provided to ensure it points to a secure and accessible location.
+- Use the color and theme props for consistent fallback styling when uri is not provided.
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-indicator-icon.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-indicator-icon.mdx
new file mode 100644
index 00000000000..9bac07afe26
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-indicator-icon.mdx
@@ -0,0 +1,81 @@
+import { Meta, Controls, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./cipher-indicator-icon.lit-stories";
+
+<Meta title="Components/Ciphers/Cipher Indicator Icon" of={stories} />
+
+## Cipher Info Indicator Icons
+
+The `CipherInfoIndicatorIcons` component displays a set of icons indicating specific attributes
+related to cipher information. It supports business and family organization indicators, styled
+dynamically based on the provided theme.
+
+<Primary />
+<Controls />
+
+## Props
+
+| **Prop**        | **Type**  | **Required** | **Description**                                                         |
+| --------------- | --------- | ------------ | ----------------------------------------------------------------------- |
+| `isBusinessOrg` | `boolean` | No           | Displays the business organization icon when set to `true`.             |
+| `isFamilyOrg`   | `boolean` | No           | Displays the family organization icon when set to `true`.               |
+| `theme`         | `Theme`   | Yes          | Defines the theme used to style the icons. Must match the `Theme` enum. |
+
+## Installation and Setup
+
+1. Ensure the necessary dependencies are installed:
+
+   - `lit`: Renders the component.
+   - `@emotion/css`: Used for styling.
+
+2. Pass the required props when using the component:
+   - `isBusinessOrg`: A boolean that, when `true`, displays the business icon.
+   - `isFamilyOrg`: A boolean that, when `true`, displays the family icon.
+   - `theme`: Specifies the theme for styling the icons.
+
+## Accessibility (WCAG) Compliance
+
+The `CipherInfoIndicatorIcons` component ensures accessibility and usability through its design:
+
+### Screen Reader Compatibility
+
+- Icons are rendered as `<svg>` elements, and parent components should provide appropriate labeling
+  or descriptions to convey their meaning to screen readers.
+
+### Visual Feedback
+
+- Icons are styled dynamically based on the `theme` to ensure visual clarity and contrast in all
+  supported themes.
+- The size of the icons is fixed at `12px` in height to maintain a consistent visual appearance.
+
+## Usage Example
+
+Here's an example of how to integrate the `CipherInfoIndicatorIcons` component:
+
+```ts
+import { CipherInfoIndicatorIcons } from "./cipher-info-indicator-icons";
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+<CipherInfoIndicatorIcons
+  isBusinessOrg={true}
+  isFamilyOrg={false}
+  theme={ThemeTypes.Dark}
+/>;
+```
+
+This example displays the business organization icon, styled for the dark theme, and omits the
+family organization icon.
+
+### Styling Details
+
+- The component includes the following styles:
+
+- Icons: Rendered as SVGs with a height of 12px and a width that adjusts to maintain their aspect
+  ratio.
+- Color: Icons are dynamically styled based on the theme, using muted text colors for a subtle
+  appearance.
+
+### Notes
+
+- If neither isBusinessOrg nor isFamilyOrg is set to true, the component renders nothing. This
+  behavior should be handled by the parent component.
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/close-button.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/close-button.mdx
new file mode 100644
index 00000000000..dcdd38710ba
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/close-button.mdx
@@ -0,0 +1,55 @@
+import { Meta, Controls, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./close-button.lit-stories";
+
+<Meta title="Components/Buttons/Close Button" of={stories} />
+
+## Close Button
+
+The `CloseButton` component is a lightweight, themeable button used for closing notifications or
+dismissing elements. It is built using the `lit` library, styled with `@emotion/css`, and integrates
+a close icon for visual clarity. The component is designed to be intuitive and accessible.
+
+<Primary />
+<Controls />
+## Props
+
+| **Prop**                  | **Type**             | **Required** | **Description**                                             |
+| ------------------------- | -------------------- | ------------ | ----------------------------------------------------------- |
+| `handleCloseNotification` | `(e: Event) => void` | Yes          | The function to execute when the button is clicked.         |
+| `theme`                   | `Theme`              | Yes          | The theme to style the button. Must match the `Theme` enum. |
+
+## Installation and Setup
+
+1. Ensure you have the necessary dependencies installed:
+
+   - `lit`: Used to render the component.
+   - `@emotion/css`: Used for styling the component.
+
+2. Pass the required props to the component when rendering:
+   - `handleCloseNotification`: A function that handles the click event for closing.
+   - `theme`: The theme to style the button (must be a valid `Theme`).
+
+## Accessibility (WCAG) Compliance
+
+The `CloseButton` component follows the
+[W3C ARIA button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/). Below is a breakdown of
+key accessibility considerations:
+
+### Keyboard Accessibility
+
+- The button supports keyboard interaction through the `@click` event.
+- Users can activate the button using the `Enter` or `Space` key.
+
+### Screen Reader Compatibility
+
+- The button uses a semantic `<button>` element, ensuring it is natively recognized by assistive
+  technologies.
+
+### Focus Management
+
+- Ensure the button receives proper focus, especially when navigating using a keyboard.
+
+### Visual Feedback
+
+- The button provides hover feedback by changing the border color for better user interaction.
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/edit-button.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/edit-button.mdx
new file mode 100644
index 00000000000..0f38df18912
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/edit-button.mdx
@@ -0,0 +1,61 @@
+import { Meta, Controls, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./edit-button.lit-stories";
+
+<Meta title="Components/Buttons/Edit Button" of={stories} />
+
+## Edit Button
+
+The `EditButton` component is a small, themeable button that integrates an editable pencil icon to
+represent edit functionality. It is built using the `lit` library and styled with `@emotion/css`.
+The component supports themes, click events, and a disabled state, making it ideal for use in forms
+or settings where inline editing is required.
+
+<Primary />
+<Controls />
+## Props
+
+| **Prop**       | **Type**                   | **Required** | **Description**                                             |
+| -------------- | -------------------------- | ------------ | ----------------------------------------------------------- |
+| `buttonAction` | `(e: Event) => void`       | Yes          | The function to execute when the button is clicked.         |
+| `buttonText`   | `string`                   | Yes          | The text displayed as the button's tooltip.                 |
+| `disabled`     | `boolean` (default: false) | No           | Disables the button when set to `true`.                     |
+| `theme`        | `Theme`                    | Yes          | The theme to style the button. Must match the `Theme` enum. |
+
+## Installation and Setup
+
+1. Ensure you have the necessary dependencies installed:
+
+   - `lit`: Used to render the component.
+   - `@emotion/css`: Used for styling the component.
+
+2. Pass the required props to the component when rendering:
+   - `buttonAction`: A function that handles the click event.
+   - `buttonText`: The text displayed as a tooltip for the button.
+   - `disabled` (optional): A boolean indicating whether the button is disabled.
+   - `theme`: The theme to style the button (must be a valid `Theme`).
+
+## Accessibility (WCAG) Compliance
+
+The `EditButton` component follows the
+[W3C ARIA button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/). Below is a breakdown of
+key accessibility considerations:
+
+### Keyboard Accessibility
+
+- The button supports keyboard interaction through the `@click` event.
+- Users can activate the button using the `Enter` or `Space` key.
+
+### Screen Reader Compatibility
+
+- The `title` attribute is dynamically set to the button's text (`buttonText`), ensuring it is read
+  by screen readers.
+- The semantic `<button>` element is used, which is natively recognized by assistive technologies.
+
+### Focus Management
+
+- Ensure the button receives proper focus, especially when navigating using a keyboard.
+
+### Visual Feedback
+
+- The button provides hover feedback by changing the border color for better user interaction.
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/footer.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/footer.mdx
new file mode 100644
index 00000000000..baaad4d8151
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/footer.mdx
@@ -0,0 +1,45 @@
+import { Meta, Controls, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./footer.lit-stories";
+
+<Meta title="Components/Notifications/Notification Footer" of={stories} />
+
+## Notification Footer
+
+The `NotificationFooter` component is used to display a footer for notifications, allowing dynamic
+customization based on the `theme` and `notificationType`.
+
+<Primary />
+<Controls />
+
+## Props
+
+| **Prop**           | **Type**           | **Required** | **Description**                                                                                    |
+| ------------------ | ------------------ | ------------ | -------------------------------------------------------------------------------------------------- |
+| `notificationType` | `NotificationType` | Yes          | The type of notification footer to display. Options: `add`, `change`, `unlock`, `fileless-import`. |
+| `theme`            | `Theme`            | Yes          | Defines the theme of the notification footer. Must match the `Theme` enum.                         |
+
+---
+
+## Usage Example
+
+```tsx
+import { NotificationFooter } from "../../notification/footer";
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+<NotificationFooter notificationType="add" theme={ThemeTypes.Dark} />;
+```
+
+## Accessibility (WCAG) Compliance
+
+The `NotificationFooter` component has been designed with accessibility in mind:
+
+### Screen Reader Compatibility
+
+- Ensures that the notification type and relevant information are accessible to assistive
+  technologies.
+
+## Visual Feedback
+
+- The theme prop dynamically adjusts colors and contrast for light and dark modes.
+- Provides clear visual separation to enhance readability.
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/header.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/header.mdx
new file mode 100644
index 00000000000..fd03fd2f950
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/header.mdx
@@ -0,0 +1,56 @@
+import { Meta, Controls, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./header.lit-stories";
+
+<Meta title="Components/Notifications/Notification Header" of={stories} />
+
+## Notification Header
+
+The `NotificationHeader` component is used to display a notification banner with a message, theme,
+and an optional close button. This component is versatile and can be styled dynamically based on the
+`theme` and other provided props.
+
+<Primary />
+<Controls />
+
+## Props
+
+| **Prop**                  | **Type**             | **Required** | **Description**                                                     |
+| ------------------------- | -------------------- | ------------ | ------------------------------------------------------------------- |
+| `message`                 | `string`             | Yes          | The text message to be displayed in the notification.               |
+| `standalone`              | `boolean`            | No           | Determines if the notification is displayed independently.          |
+| `theme`                   | `Theme`              | Yes          | Defines the theme of the notification. Must match the `Theme` enum. |
+| `handleCloseNotification` | `(e: Event) => void` | No           | A callback function triggered when the close button is clicked.     |
+
+---
+
+## Usage Example
+
+```tsx
+import { NotificationHeader } from "../../notification/header";
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+<NotificationHeader
+  message="This is a sample notification."
+  standalone={true}
+  theme={ThemeTypes.Dark}
+  handleCloseNotification={() => console.log("Notification closed!")}
+/>;
+```
+
+## Accessibility (WCAG) Compliance
+
+The `NotificationHeader` component is designed with accessibility in mind:
+
+### Screen Reader Compatibility
+
+- The message is rendered in a way that ensures visibility to assistive technologies.
+
+### Visual Feedback
+
+- The theme prop dynamically adjusts colors and contrast for light and dark modes.
+- The component provides clear visual separation to ensure readability in all themes.
+
+### Notes
+
+- If handleCloseNotification is not provided, the close button will not trigger any action.
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/icons.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/icons.mdx
new file mode 100644
index 00000000000..f85cf3ae90f
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/icons.mdx
@@ -0,0 +1,69 @@
+import { Meta, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./icons.lit-stories";
+
+<Meta title="Components/Icons/Icons" of={stories} />
+
+## Icon Stories
+
+The `Icons` component suite demonstrates various icon components styled dynamically based on props
+like size, color, and theme. Each story is an example of how a specific icon can be rendered.
+
+<Controls />
+### Icons
+
+|                           |                    |
+| ------------------------- | ------------------ |
+| `AngleDownIcon`           | `FolderIcon`       |
+| `BusinessIcon`            | `GlobeIcon`        |
+| `BrandIcon`               | `PartyHornIcon`    |
+| `CloseIcon`               | `PencilSquareIcon` |
+| `ExclamationTriangleIcon` | `ShieldIcon`       |
+| `FamilyIcon`              | `UserIcon`         |
+
+## Props
+
+| **Prop**   | **Type**  | **Required** | **Description**                                                                   |
+| ---------- | --------- | ------------ | --------------------------------------------------------------------------------- |
+| `iconLink` | `URL`     | No           | Defines an external URL associated with the icon, prop exclusive to `Brand Icon`. |
+| `color`    | `string`  | No           | Sets the color of the icon.                                                       |
+| `disabled` | `boolean` | No           | Disables the icon visually and functionally.                                      |
+| `theme`    | `Theme`   | Yes          | Defines the theme used to style the icons. Must match the `Theme` enum.           |
+| `size`     | `number`  | Yes          | Sets the width and height of the icon in pixels.                                  |
+
+---
+
+## Standard Icon Usage Example
+
+```tsx
+import { AngleDownIcon } from "./Icons";
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+<AngleDownIcon size={50} color="#000000" theme={ThemeTypes.Light} />;
+```
+
+## Brand Icon Usage Example
+
+```tsx
+import { BrandIconContainer } from "./Icons";
+import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+<BrandIconContainer
+  size={50}
+  color="#000000"
+  theme={ThemeTypes.Light}
+  iconLink="https://bitwarden.com"
+/>;
+```
+
+## Accessibility (WCAG) Compliance
+
+Icons in this suite are designed with accessibility and usability in mind:
+
+### Screen Reader Compatibility
+
+- Icons are rendered as `<svg>` elements.
+
+### Visual Feedback
+
+- The `disabled` prop adjusts the icon's visual appearance, ensuring clarity.