diff --git a/ui/components/component-library/popover/README.mdx b/ui/components/component-library/popover/README.mdx
index 8b8e26c51..973039ace 100644
--- a/ui/components/component-library/popover/README.mdx
+++ b/ui/components/component-library/popover/README.mdx
@@ -11,8 +11,6 @@ Popover is an overlay that appears by the trigger used for menus, additional con
 
 ## Props
 
-The `Popover` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
-
 <ArgsTable of={Popover} />
 
 ### Reference Element
@@ -21,7 +19,8 @@ The `referenceElement` prop is required and used to position the popover relativ
 
 ```jsx
 import { useState } from 'react';
-import { Popover } from '../../ui/component-library';
+import { BackgroundColor } from '../../../helpers/constants/design-system'
+import { Popover, Box } from '../../component-library';
 
 const [referenceElement, setReferenceElement] = useState();
 
@@ -29,8 +28,12 @@ const setBoxRef = (ref) => {
 setReferenceElement(ref);
 };
 
-<Box ref={setBoxRef}></Box>
-<Popover referenceElement={referenceElement}>Reference Element</Popover>
+<Box
+  ref={setBoxRef}
+  backgroundColor={BackgroundColor.primaryDefault}
+  style={{ width: 200, height: 200 }}
+/>
+<Popover referenceElement={referenceElement}>Reference element</Popover>
 ```
 
 ### Children
@@ -44,7 +47,7 @@ import {
   Icon,
   IconSize,
   IconName,
-} from '../../ui/component-library';
+} from '../../component-library';
 
 <Popover>
   <Text>
@@ -61,7 +64,7 @@ Use the `position` prop with the `PopoverPosition` enum to set the position of t
 Default is `PopoverPosition.Auto`
 
 ```jsx
-import { Popover, PopoverPosition } from '../../ui/component-library';
+import { Popover, PopoverPosition } from '../../component-library';
 
 <Popover position={PopoverPosition.Auto}>Auto</Popover>
 <Popover position={PopoverPosition.AutoStart}>AutoStart</Popover>
@@ -86,7 +89,7 @@ The `isPortal` prop is a boolean that when set to true, causes the Popover to be
 Default `false`
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 <Popover isPortal={true}>Popover using create portal</Popover>;
 ```
@@ -96,7 +99,7 @@ import { Popover } from '../../ui/component-library';
 Use the `hasArrow` boolean to add an arrow to the popover.
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 <Popover hasArrow>Popover with arrow</Popover>;
 ```
@@ -106,7 +109,7 @@ import { Popover } from '../../ui/component-library';
 Use the `isOpen` boolean to control the visibility of the popover.
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 <Popover isOpen={true}>Popover with arrow</Popover>;
 ```
@@ -117,7 +120,7 @@ Use the `flip` boolean to flip the popover to the opposite side of the reference
 For `PopoverPosition.Auto` this will become true.
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 <Popover flip={true}>Flip demo</Popover>;
 ```
@@ -128,7 +131,7 @@ Use the `preventOverflow` boolean to prevent the popover from overflowing the vi
 For `PopoverPosition.Auto` this will become true.
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 <Popover preventOverflow={true}>Prevent overflow demo</Popover>;
 ```
@@ -138,7 +141,7 @@ import { Popover } from '../../ui/component-library';
 Use the `referenceHidden` boolean to hide the Popover when the reference element is no longer visible in the viewport.
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 <Popover referenceHidden={true}>Reference hidden demo</Popover>;
 ```
@@ -148,7 +151,7 @@ import { Popover } from '../../ui/component-library';
 Use the `matchWidth` boolean to match the width of the popover to the reference element.
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 <Popover matchWidth={true}>Match width demo</Popover>;
 ```
@@ -161,7 +164,7 @@ Use the `role` prop with `PopoverRole` enum to set the role of the popover.
 Default: `PopoverRole.Tooltip`
 
 ```jsx
-import { Popover, PopoverRole } from '../../ui/component-library';
+import { Popover, PopoverRole } from '../../component-library';
 
 <Popover role={PopoverRole.Tooltip}>PopoverRole.Tooltip</Popover>;
 <Popover role={PopoverRole.Dialog}>PopoverRole.Dialog</Popover>;
@@ -174,7 +177,7 @@ Default is `[0, 8]`
 First number controls the skidding offset and the second number controls the distance offset.
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 <Popover offset={[0, 32]}>offset override to [0,32]</Popover>;
 ```
@@ -184,7 +187,7 @@ import { Popover } from '../../ui/component-library';
 `onPressEscKey` is a callback function that is invoked when the 'Escape' key is pressed within the `Popover` component
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 const [isOpen, setIsOpen] = useState(false);
 
@@ -202,7 +205,7 @@ const handleClick = () => {
 Using the `PopoverHeader` component to add a header to the `Popover` component. The `PopoverHeader` is used to show common elements such as title, back button, and close button.
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 <Popover>
   <PopoverHeader
@@ -220,7 +223,7 @@ import { Popover } from '../../ui/component-library';
 Not built into the `Popover` component, but a demo of `onMouseEnter` and `onMouseLeave` events on the reference element to control the visibility of the popover
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 const [isOpen, setIsOpen] = useState(false);
 
@@ -245,7 +248,7 @@ const handleMouseLeave = () => {
 Not built into the `Popover` component, but a demo of `onFocus` and `onBlur` events on the reference element to control the visibility of the popover
 
 ```jsx
-import { Popover } from '../../ui/component-library';
+import { Popover } from '../../component-library';
 
 const [isOpen, setIsOpen] = useState(false);
 
diff --git a/ui/components/component-library/popover/__snapshots__/popover.test.tsx.snap b/ui/components/component-library/popover/__snapshots__/popover.test.tsx.snap
index a8fd6456c..04d16c13a 100644
--- a/ui/components/component-library/popover/__snapshots__/popover.test.tsx.snap
+++ b/ui/components/component-library/popover/__snapshots__/popover.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Popover should render popover element correctly 1`] = `
 <div>
   <div
-    class="box mm-popover mm-popover--open mm-popover--reference-hidden box--padding-4 box--flex-direction-row box--background-color-background-default box--rounded-lg box--border-color-border-muted box--border-style-solid box--border-width-1"
+    class="mm-box mm-popover mm-popover--open mm-popover--reference-hidden mm-box--padding-4 mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
     data-testid="popover"
     role="tooltip"
     style="position: absolute; left: 0px; top: 0px; width: auto;"
diff --git a/ui/components/component-library/popover/index.ts b/ui/components/component-library/popover/index.ts
index 0e57936dd..9dbac6c6d 100644
--- a/ui/components/component-library/popover/index.ts
+++ b/ui/components/component-library/popover/index.ts
@@ -1,3 +1,7 @@
 export { Popover } from './popover';
 export { PopoverPosition, PopoverRole } from './popover.types';
-export type { PopoverProps } from './popover.types';
+export type {
+  PopoverProps,
+  PopoverStyleUtilityProps,
+  PopoverComponent,
+} from './popover.types';
diff --git a/ui/components/component-library/popover/popover.stories.tsx b/ui/components/component-library/popover/popover.stories.tsx
index bf54ed248..ba7c3078d 100644
--- a/ui/components/component-library/popover/popover.stories.tsx
+++ b/ui/components/component-library/popover/popover.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StoryFn, Meta } from '@storybook/react';
-import Box from '../../ui/box/box';
+import { Box, Icon, IconName, IconSize, PopoverHeader, Text } from '..';
 import {
   AlignItems,
   BackgroundColor,
@@ -9,8 +9,9 @@ import {
   Display,
   JustifyContent,
   TextAlign,
+  TextColor,
 } from '../../../helpers/constants/design-system';
-import { Icon, IconName, IconSize, PopoverHeader, Text } from '..';
+
 import README from './README.mdx';
 import { Popover, PopoverPosition, PopoverRole } from '.';
 
@@ -78,7 +79,7 @@ const Template: StoryFn<typeof Popover> = (args) => {
         onClick={handleClick}
         backgroundColor={BackgroundColor.primaryAlternative}
         style={{ width: 200, height: 200 }}
-        color={Color.primaryInverse}
+        color={TextColor.primaryInverse}
         as="button"
       >
         Click to toggle popover
@@ -751,7 +752,7 @@ export const OnPressEscKey: StoryFn<typeof Popover> = (args) => {
         onClick={handleClick}
         backgroundColor={BackgroundColor.primaryAlternative}
         style={{ width: 200, height: 200 }}
-        color={Color.primaryInverse}
+        color={TextColor.primaryInverse}
         as="button"
       >
         Click to open
@@ -835,7 +836,7 @@ export const MouseEventDemo: StoryFn<typeof Popover> = (args) => {
         onMouseLeave={handleMouseLeave}
         backgroundColor={BackgroundColor.primaryAlternative}
         style={{ width: 200, height: 200 }}
-        color={Color.primaryInverse}
+        color={TextColor.primaryInverse}
       >
         Hover
       </Box>
@@ -872,7 +873,7 @@ export const OnFocusBlur: StoryFn<typeof Popover> = (args) => {
         onBlur={handleClose}
         backgroundColor={BackgroundColor.primaryAlternative}
         style={{ width: 200, height: 200 }}
-        color={Color.primaryInverse}
+        color={TextColor.primaryInverse}
         as="button"
       >
         Focus to open
diff --git a/ui/components/component-library/popover/popover.tsx b/ui/components/component-library/popover/popover.tsx
index 992f48f75..1ad1bd02a 100644
--- a/ui/components/component-library/popover/popover.tsx
+++ b/ui/components/component-library/popover/popover.tsx
@@ -10,124 +10,139 @@ import {
   Display,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
-import { PopoverPosition, PopoverProps, PopoverRole } from '.';
 
-export const Popover = ({
-  children,
-  className = '',
-  position = PopoverPosition.Auto,
-  role = PopoverRole.Tooltip,
-  hasArrow = false,
-  matchWidth,
-  preventOverflow = false,
-  offset = [0, 8],
-  flip = false,
-  referenceHidden = true,
-  referenceElement,
-  isOpen,
-  title,
-  isPortal = false,
-  arrowProps,
-  onPressEscKey,
-  ...props
-}: PopoverProps) => {
-  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
-  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
+import { Box } from '..';
+import type { BoxProps, PolymorphicRef } from '../box';
 
-  // Define Popper options
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: position,
-    modifiers: [
-      {
-        name: 'preventOverflow',
-        enabled: position === PopoverPosition.Auto ? true : preventOverflow,
-      },
-      {
-        name: 'flip',
-        enabled: position === PopoverPosition.Auto ? true : flip,
-      },
-      {
-        name: 'arrow',
-        enabled: hasArrow,
-        options: {
-          element: arrowElement,
-        },
-      },
-      {
-        name: 'offset',
-        options: {
-          offset,
-        },
-      },
-    ],
-  });
+import {
+  PopoverProps,
+  PopoverComponent,
+  PopoverPosition,
+  PopoverRole,
+} from './popover.types';
 
-  // Define width to match reference element or auto
-  const contentStyle = {
-    width: matchWidth ? referenceElement?.clientWidth : 'auto',
-  };
+export const Popover: PopoverComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
+    {
+      children,
+      className = '',
+      position = PopoverPosition.Auto,
+      role = PopoverRole.Tooltip,
+      hasArrow = false,
+      matchWidth,
+      preventOverflow = false,
+      offset = [0, 8],
+      flip = false,
+      referenceHidden = true,
+      referenceElement,
+      isOpen,
+      title,
+      isPortal = false,
+      arrowProps,
+      onPressEscKey,
+      ...props
+    }: PopoverProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    const [popperElement, setPopperElement] = useState<HTMLElement | null>(
+      null,
+    );
+    const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
 
-  // Esc key press
-  const handleEscKey = (event: KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      // Close the popover when the "Esc" key is pressed
-      if (onPressEscKey) {
-        onPressEscKey();
-      }
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('keydown', handleEscKey);
-
-    return () => {
-      document.removeEventListener('keydown', handleEscKey);
-    };
-  }, [onPressEscKey]);
-
-  const PopoverContent = (
-    <Box
-      borderColor={BorderColor.borderMuted}
-      borderRadius={BorderRadius.LG}
-      backgroundColor={BackgroundColor.backgroundDefault}
-      padding={4}
-      role={role}
-      className={classnames(
-        'mm-popover',
+    // Define Popper options
+    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+      placement: position,
+      modifiers: [
         {
-          'mm-popover--open': Boolean(isOpen),
-          'mm-popover--reference-hidden': Boolean(referenceHidden),
+          name: 'preventOverflow',
+          enabled: position === PopoverPosition.Auto ? true : preventOverflow,
         },
-        className,
-      )}
-      ref={setPopperElement}
-      {...attributes.popper}
-      {...props}
-      style={{ ...styles.popper, ...contentStyle, ...props.style }}
-    >
-      {children}
-      {hasArrow && (
-        <Box
-          borderColor={BorderColor.borderMuted}
-          className={classnames('mm-popover__arrow')}
-          ref={setArrowElement}
-          display={Display.Flex}
-          justifyContent={JustifyContent.center}
-          alignItems={AlignItems.center}
-          style={styles.arrow}
-          {...attributes.arrow}
-          {...arrowProps}
-        />
-      )}
-    </Box>
-  );
+        {
+          name: 'flip',
+          enabled: position === PopoverPosition.Auto ? true : flip,
+        },
+        {
+          name: 'arrow',
+          enabled: hasArrow,
+          options: {
+            element: arrowElement,
+          },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset,
+          },
+        },
+      ],
+    });
 
-  return (
-    <>
-      {isPortal
-        ? isOpen && createPortal(PopoverContent, document.body)
-        : isOpen && PopoverContent}
-    </>
-  );
-};
+    // Define width to match reference element or auto
+    const contentStyle = {
+      width: matchWidth ? referenceElement?.clientWidth : 'auto',
+    };
+
+    // Esc key press
+    const handleEscKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        // Close the popover when the "Esc" key is pressed
+        if (onPressEscKey) {
+          onPressEscKey();
+        }
+      }
+    };
+
+    useEffect(() => {
+      document.addEventListener('keydown', handleEscKey);
+
+      return () => {
+        document.removeEventListener('keydown', handleEscKey);
+      };
+    }, [onPressEscKey]);
+
+    const PopoverContent = (
+      <Box
+        borderColor={BorderColor.borderMuted}
+        borderRadius={BorderRadius.LG}
+        backgroundColor={BackgroundColor.backgroundDefault}
+        padding={4}
+        role={role}
+        className={classnames(
+          'mm-popover',
+          {
+            'mm-popover--open': Boolean(isOpen),
+            'mm-popover--reference-hidden': Boolean(referenceHidden),
+          },
+          className,
+        )}
+        ref={ref || setPopperElement}
+        {...attributes.popper}
+        {...(props as BoxProps<C>)}
+        style={{ ...styles.popper, ...contentStyle, ...props.style }}
+      >
+        {children}
+        {hasArrow && (
+          <Box
+            borderColor={BorderColor.borderMuted}
+            className={classnames('mm-popover__arrow')}
+            ref={setArrowElement}
+            display={Display.Flex}
+            justifyContent={JustifyContent.center}
+            alignItems={AlignItems.center}
+            style={styles.arrow}
+            {...attributes.arrow}
+            {...(arrowProps as BoxProps<'div'>)}
+          />
+        )}
+      </Box>
+    );
+
+    return (
+      <>
+        {isPortal
+          ? isOpen && createPortal(PopoverContent, document.body)
+          : isOpen && PopoverContent}
+      </>
+    );
+  },
+);
diff --git a/ui/components/component-library/popover/popover.types.ts b/ui/components/component-library/popover/popover.types.ts
index 5321f88d7..674aa3586 100644
--- a/ui/components/component-library/popover/popover.types.ts
+++ b/ui/components/component-library/popover/popover.types.ts
@@ -1,4 +1,9 @@
-import type { BoxProps } from '../../ui/box/box.d';
+import React from 'react';
+import type {
+  StyleUtilityProps,
+  PolymorphicComponentPropWithRef,
+  BoxProps,
+} from '../box';
 
 export enum PopoverPosition {
   Auto = 'auto',
@@ -21,7 +26,7 @@ export enum PopoverRole {
   Dialog = 'dialog',
 }
 
-export interface PopoverProps extends BoxProps {
+export interface PopoverStyleUtilityProps extends StyleUtilityProps {
   /**
    * The contents within the Popover
    */
@@ -46,7 +51,7 @@ export interface PopoverProps extends BoxProps {
   /**
    * Pass any `BoxProps` to the Popover arrow
    */
-  arrowProps?: BoxProps;
+  arrowProps?: BoxProps<'div'>;
   /**
    * Boolean to control the width of the Popover to match the width of the reference element
    * Default: false
@@ -92,3 +97,10 @@ export interface PopoverProps extends BoxProps {
    */
   onPressEscKey?: () => void;
 }
+
+export type PopoverProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, PopoverStyleUtilityProps>;
+
+export type PopoverComponent = <C extends React.ElementType = 'div'>(
+  props: PopoverProps<C>,
+) => React.ReactElement | null;