diff --git a/docs/pages/components/Menu.mdx b/docs/pages/components/Menu.mdx
index f7b108fd..7052fb29 100644
--- a/docs/pages/components/Menu.mdx
+++ b/docs/pages/components/Menu.mdx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import Callout from '../../components/callout';
 
 The `<Menu />` component is an accessibility-focused dropdown menu.
@@ -20,6 +21,7 @@ import {
   MenuList,
   MenuItem,
   MenuLink,
+  MenuDivider,
 } from 'minerva-ui';
 ```
 
@@ -39,6 +41,38 @@ import {
 </MenuContainer>
 ```
 
+## With Custom Colored Selected Menu Item
+
+```jsx live
+() => {
+  const [selectedItem, setSelectedItem] = useState('');
+
+  return (
+    <MenuContainer>
+      <MenuButton>
+        Actions <Icon name="chevron-down" ml={2} size="14px" />
+      </MenuButton>
+      <MenuList menuPosition="right">
+        <MenuItem
+          color={selectedItem === 'edit_profile' ? '#651FFF' : '#000'}
+          fontWeight={selectedItem === 'edit_profile' ? 'bold' : 'normal'}
+          onSelect={item => setSelectedItem('edit_profile')}
+        >
+          Edit Profile
+        </MenuItem>
+        <MenuItem
+          color={selectedItem === 'settings' ? '#651FFF' : '#000'}
+          fontWeight={selectedItem === 'settings' ? 'bold' : 'normal'}
+          onSelect={item => setSelectedItem('settings')}
+        >
+          Settings
+        </MenuItem>
+      </MenuList>
+    </MenuContainer>
+  );
+};
+```
+
 ## Positioned To Right
 
 Change alignment for `MenuList` relative to parent
diff --git a/package.json b/package.json
index 335e0df9..6784aaf7 100644
--- a/package.json
+++ b/package.json
@@ -105,6 +105,7 @@
     "@testing-library/react": "^10.0.4",
     "@types/styled-components": "^5.1.5",
     "@types/styled-system": "^5.1.10",
+    "@types/styled-system__css": "^5.0.15",
     "copy-to-clipboard": "^3.3.1",
     "eslint-config-cratebind": "^3.0.8",
     "eslint-config-react-app": "^5.2.1",
diff --git a/src/Menu/Menu.stories.tsx b/src/Menu/Menu.stories.tsx
index 4574dfe5..bae75188 100644
--- a/src/Menu/Menu.stories.tsx
+++ b/src/Menu/Menu.stories.tsx
@@ -8,10 +8,10 @@ import {
   MenuItem,
   MenuLink,
   MenuDivider,
+  MenuIcon,
 } from '.';
-import { Icon } from '..';
 import { filteredArgs } from '../utils';
-import { Flex } from '../layout';
+import { Flex, Box } from '../layout';
 
 const meta: Meta = {
   title: 'Menu',
@@ -38,10 +38,11 @@ const Template: Story<MenuContainerProps> = ({}) => {
     <>
       <MenuContainer>
         <MenuButton>
-          Actions <Icon name="chevron-down" ml={2} size="14px" />
+          <Box>Actions</Box>
+          <MenuIcon />
         </MenuButton>
         <MenuList>
-          <MenuItem onSelect={() => alert('Download')}>Download</MenuItem>
+          <MenuItem onSelect={() => {}}>Download</MenuItem>
           <MenuItem onSelect={() => alert('Copy')}>Create a Copy</MenuItem>
           <MenuItem onSelect={() => alert('Mark as Draft')}>
             Mark as Draft
@@ -63,7 +64,8 @@ export const PositionedRight = () => (
   <Flex justifyContent="flex-end">
     <MenuContainer>
       <MenuButton>
-        Actions <Icon name="chevron-down" ml={2} size="14px" />
+        <Box>Actions</Box>
+        <MenuIcon />
       </MenuButton>
       <MenuList menuPosition="right">
         <MenuItem onSelect={() => alert('Edit Profile')}>Edit Profile</MenuItem>
@@ -76,7 +78,8 @@ export const PositionedRight = () => (
 export const DisabledItems = () => (
   <MenuContainer>
     <MenuButton>
-      Actions <Icon name="chevron-down" ml={2} size="14px" />
+      <Box>Actions</Box>
+      <MenuIcon />
     </MenuButton>
     <MenuList>
       <MenuItem onSelect={() => alert('Edit Profile')}>Edit Profile</MenuItem>
diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
index 40d82950..24f4b453 100644
--- a/src/Menu/index.tsx
+++ b/src/Menu/index.tsx
@@ -7,17 +7,21 @@ import {
   MenuPopover as ReachMenuPopover,
   MenuItems as ReachMenuItems,
   MenuProps,
-  MenuButtonProps,
+  MenuButtonProps as ReachMenuButtonProps,
   MenuItemsProps,
+  MenuItemProps as ReachMenuItemProps,
+  MenuLinkProps as ReachMenuLinkProps,
+  useMenuButtonContext,
 } from '@reach/menu-button';
 import { positionDefault, positionRight } from '@reach/popover';
 import styled from 'styled-components';
-import Button, { ButtonProps } from '../Button';
-import { Box, MinervaProps } from '../layout';
+import { Box, MinervaProps, shouldForwardProp, systemProps } from '../layout';
+import { useComponentStyles } from '../theme';
+import { ChevronDown } from '../Icon/baseIcons';
 // import { useTheme } from '../theme';
 
 // import '@reach/menu-button/styles.css';
-import PseudoBox from '../PseudoBox';
+import PseudoBox, { createPseudoStyles, PseudoBoxProps } from '../PseudoBox';
 
 export type MenuContainerProps = MenuProps;
 
@@ -26,9 +30,20 @@ export const MenuContainer = (props: MenuContainerProps) => (
   <ReachMenuContainer {...props} />
 );
 
-export const MenuButton = (props: MenuButtonProps & ButtonProps) => (
-  <ReachMenuButton as={Button} {...props} />
-);
+type MenuButtonProps = ReachMenuButtonProps & MinervaProps;
+
+export const MenuButton = (props: MenuButtonProps) => {
+  const componentStyles = useComponentStyles('MenuButton');
+  const { isExpanded } = useMenuButtonContext();
+
+  return (
+    <BaseMenuButton
+      boxShadow={isExpanded ? '0 0 0 2px #CBBEE7' : 'none'}
+      {...componentStyles}
+      {...props}
+    />
+  );
+};
 
 export interface MenuListProps extends MinervaProps {
   children?: React.ReactNode;
@@ -37,15 +52,15 @@ export interface MenuListProps extends MinervaProps {
 
 export const OverlayBox = props => (
   <PseudoBox
-    py={1}
+    py="10px"
     mt="8px"
     bg="white"
     position="relative"
-    borderRadius="6px"
-    boxShadow="0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05)"
+    borderRadius="5px"
+    boxShadow="10px 10px 20px rgba(0, 0, 0, 0.12)"
     _after={{
       content: `''`,
-      boxShadow: '0 0 0 1px rgba(0,0,0,.05)',
+      boxShadow: '0 0 0 1px #E0E0E0',
       borderRadius: '6px',
       position: 'absolute',
       top: 0,
@@ -79,33 +94,55 @@ export const MenuList = ({
   </ReachMenuPopover>
 );
 
-export const MenuItem = styled(ReachMenuItem)`
-  color: #374151;
-  padding: 0.5rem 1rem;
-  font-size: 14px;
-  cursor: pointer;
-
-  &[data-selected],
-  &:hover {
-    background-color: #f4f5f7;
-    color: #161e2e;
-  }
-`;
-
-export const MenuLink = styled(ReachMenuLink)`
-  color: #374151;
-  padding: 0.5rem 1rem;
-  font-size: 14px;
-  display: block;
-  cursor: pointer;
-
-  &[data-selected],
-  &:hover {
-    background-color: #f4f5f7;
-    color: #161e2e;
-    text-decoration: none;
-  }
-`;
+export function MenuIcon(props: MinervaProps) {
+  const { isExpanded } = useMenuButtonContext();
+
+  return (
+    <Box
+      as={ChevronDown}
+      transform={isExpanded ? 'rotate(-180deg)' : undefined}
+      transition="transform 0.2s"
+      transformOrigin="center"
+      w="14px"
+      h="14px"
+      color="#000"
+      aria-hidden="true"
+      {...props}
+    />
+  );
+}
+
+type MenuItemProps = ReachMenuItemProps & MinervaProps;
+
+export const MenuItem = (props: MenuItemProps) => {
+  const componentStyles = useComponentStyles('MenuItem');
+
+  return (
+    <PseudoBox
+      as={ReachMenuItem}
+      cursor="pointer"
+      {...componentStyles}
+      {...props}
+    />
+  );
+};
+
+type MenuLinkProps = ReachMenuLinkProps &
+  MinervaProps &
+  React.LinkHTMLAttributes<HTMLAnchorElement>;
+
+export const MenuLink = (props: MenuLinkProps) => {
+  const componentStyles = useComponentStyles('MenuLink');
+
+  return (
+    <PseudoBox
+      as={ReachMenuLink}
+      cursor="pointer"
+      {...componentStyles}
+      {...props}
+    />
+  );
+};
 
 export const MenuDivider = props => (
   <Box
@@ -118,3 +155,11 @@ export const MenuDivider = props => (
 );
 
 export { useMenuButtonContext } from '@reach/menu-button';
+
+// using our own <Button /> component causes weird TS issues due to the `as` prop
+const BaseMenuButton = styled(ReachMenuButton).withConfig({
+  shouldForwardProp: shouldForwardProp,
+})<MinervaProps & PseudoBoxProps & ReachMenuButtonProps>(
+  createPseudoStyles,
+  systemProps
+);
diff --git a/src/PseudoBox/PseudoBox.stories.tsx b/src/PseudoBox/PseudoBox.stories.tsx
new file mode 100644
index 00000000..4e7591d9
--- /dev/null
+++ b/src/PseudoBox/PseudoBox.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import PseudoBox from '.';
+
+const meta: Meta = {
+  title: 'PseudoBox',
+  component: PseudoBox,
+};
+
+export default meta;
+
+export const Basic = () => {
+  return (
+    <PseudoBox _hover={{ background: '#000' }}>
+      Pseudo Box with Hover Styles
+    </PseudoBox>
+  );
+};
diff --git a/src/PseudoBox/index.tsx b/src/PseudoBox/index.tsx
index 15f742d5..67e65278 100644
--- a/src/PseudoBox/index.tsx
+++ b/src/PseudoBox/index.tsx
@@ -1,9 +1,11 @@
 // import React from 'react';
 import styled, { CSSObject } from 'styled-components';
-import css from '@styled-system/css';
+import css, { SystemStyleObject } from '@styled-system/css';
 import { MinervaProps, Box, shouldForwardProp } from '../layout';
 // import { transformAliasProps } from '../utils';
 
+type PseudoBoxValue = string | number | CSSObject | undefined;
+
 export interface PseudoBoxProps {
   /**
    * Styles for CSS selector `&:after`
@@ -14,7 +16,7 @@ export interface PseudoBoxProps {
    * <PseudoBox _after={{content:`""` }}/>
    * ```
    */
-  _after?: string | number | CSSObject | undefined;
+  _after?: PseudoBoxValue;
   /**
    * Styles for CSS selector `&:before`
    *
@@ -24,41 +26,41 @@ export interface PseudoBoxProps {
    * <PseudoBox _before={{content:`""` }}/>
    * ```
    */
-  _before?: string | number | CSSObject | undefined;
+  _before?: PseudoBoxValue;
   /**
    * Styles for CSS selector `&:focus`
    *
    */
-  _focus?: string | number | CSSObject | undefined;
+  _focus?: PseudoBoxValue;
   /**
    * Styles for CSS selector `&:hover`
    */
-  _hover?: string | number | CSSObject | undefined;
+  _hover?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:active`
    */
-  _active?: string | number | CSSObject | undefined;
+  _active?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&[aria-pressed=true]`
    * Typically used to style the current "pressed" state of toggle buttons
    */
-  _pressed?: string | number | CSSObject | undefined;
+  _pressed?: PseudoBoxValue;
   /**
    * Styles to apply when the ARIA attribute `aria-selected` is `true`
    * - CSS selector `&[aria-selected=true]`
    */
-  _selected?: string | number | CSSObject | undefined;
+  _selected?: PseudoBoxValue;
   /**
    * Styles to apply when a child of this element has received focus
    * - CSS Selector `&:focus-within`
    */
-  _focusWithin?: string | number | CSSObject | undefined;
+  _focusWithin?: PseudoBoxValue;
 
   /**
    * Styles to apply when the ARIA attribute `aria-invalid` is `true`
    * - CSS selector `&[aria-invalid=true]`
    */
-  _invalid?: string | number | CSSObject | undefined;
+  _invalid?: PseudoBoxValue;
   /**
    * Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:
    * - `&[aria-disabled=true]`
@@ -68,68 +70,68 @@ export interface PseudoBoxProps {
    * - `&:focus[aria-disabled=true]`
    * - `&:hover[aria-disabled=true]`
    */
-  _disabled?: string | number | CSSObject | undefined;
+  _disabled?: PseudoBoxValue;
   /**
    * Styles to apply when the ARIA attribute `aria-grabbed` is `true`
    * - CSS selector `&[aria-grabbed=true]`
    */
-  _grabbed?: string | number | CSSObject | undefined;
+  _grabbed?: PseudoBoxValue;
   /**
    * Styles to apply when the ARIA attribute `aria-expanded` is `true`
    * - CSS selector `&[aria-expanded=true]`
    */
-  _expanded?: string | number | CSSObject | undefined;
+  _expanded?: PseudoBoxValue;
   /**
    * Styles to apply when the ARIA attribute `aria-checked` is `true`
    * - CSS selector `&[aria-checked=true]`
    */
-  _checked?: string | number | CSSObject | undefined;
+  _checked?: PseudoBoxValue;
   /**
    * Styles to apply when the ARIA attribute `aria-checked` is `mixed`
    * - CSS selector `&[aria-checked=mixed]`
    */
-  _mixed?: string | number | CSSObject | undefined;
+  _mixed?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:nth-child(odd)`
    */
-  _odd?: string | number | CSSObject | undefined;
+  _odd?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:nth-child(even)`
    */
-  _even?: string | number | CSSObject | undefined;
+  _even?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:visited`
    */
-  _visited?: string | number | CSSObject | undefined;
+  _visited?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:readonly`
    */
-  _readOnly?: string | number | CSSObject | undefined;
+  _readOnly?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:first-of-type`
    */
-  _first?: string | number | CSSObject | undefined;
+  _first?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:last-of-type`
    */
-  _last?: string | number | CSSObject | undefined;
+  _last?: PseudoBoxValue;
   /**
    * Styles to apply when you hover on a parent that has `role=group`.
    */
-  _groupHover?: string | number | CSSObject | undefined;
+  _groupHover?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:not(:first-of-type)`
    */
-  _notFirst?: string | number | CSSObject | undefined;
+  _notFirst?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&:not(:last-of-type)`
    */
-  _notLast?: string | number | CSSObject | undefined;
+  _notLast?: PseudoBoxValue;
   /**
    * Styles for CSS Selector `&::placeholder`.
    * Useful for inputs
    */
-  _placeholder?: string | number | CSSObject | undefined;
+  _placeholder?: PseudoBoxValue;
 }
 
 // export interface PseudoBoxProps = IPseudoBoxProps & MinervaProps;
@@ -162,62 +164,62 @@ const groupHover = '[role=group]:hover &';
 
 export type PseudoProps = MinervaProps & PseudoBoxProps;
 
+export function createPseudoStyles({
+  _after,
+  _focus,
+  _selected,
+  _focusWithin,
+  _hover,
+  _invalid,
+  _active,
+  _disabled,
+  _grabbed,
+  _pressed,
+  _expanded,
+  _visited,
+  _before,
+  _readOnly,
+  _first,
+  _notFirst,
+  _notLast,
+  _last,
+  _placeholder,
+  _checked,
+  _groupHover,
+  _mixed,
+  _odd,
+  _even,
+}: PseudoBoxProps) {
+  return css({
+    [hover]: _hover,
+    [focus]: _focus,
+    [active]: _active,
+    [visited]: _visited,
+    [disabled]: _disabled,
+    [selected]: _selected,
+    [invalid]: _invalid,
+    [expanded]: _expanded,
+    [grabbed]: _grabbed,
+    [readOnly]: _readOnly,
+    [first]: _first,
+    [notFirst]: _notFirst,
+    [notLast]: _notLast,
+    [last]: _last,
+    [odd]: _odd,
+    [even]: _even,
+    [mixed]: _mixed,
+    [checked]: _checked,
+    [pressed]: _pressed,
+    [groupHover]: _groupHover,
+    '&:before': _before,
+    '&:after': _after,
+    '&:focus-within': _focusWithin,
+    '&::placeholder': _placeholder,
+  } as SystemStyleObject);
+}
+
 const PseudoBox = styled(Box).withConfig({
   shouldForwardProp,
-})<PseudoProps>(
-  ({
-    _after,
-    _focus,
-    _selected,
-    _focusWithin,
-    _hover,
-    _invalid,
-    _active,
-    _disabled,
-    _grabbed,
-    _pressed,
-    _expanded,
-    _visited,
-    _before,
-    _readOnly,
-    _first,
-    _notFirst,
-    _notLast,
-    _last,
-    _placeholder,
-    _checked,
-    _groupHover,
-    _mixed,
-    _odd,
-    _even,
-  }: PseudoBoxProps) => {
-    return css({
-      [hover]: _hover,
-      [focus]: _focus,
-      [active]: _active,
-      [visited]: _visited,
-      [disabled]: _disabled,
-      [selected]: _selected,
-      [invalid]: _invalid,
-      [expanded]: _expanded,
-      [grabbed]: _grabbed,
-      [readOnly]: _readOnly,
-      [first]: _first,
-      [notFirst]: _notFirst,
-      [notLast]: _notLast,
-      [last]: _last,
-      [odd]: _odd,
-      [even]: _even,
-      [mixed]: _mixed,
-      [checked]: _checked,
-      [pressed]: _pressed,
-      [groupHover]: _groupHover,
-      '&:before': _before,
-      '&:after': _after,
-      '&:focus-within': _focusWithin,
-      '&::placeholder': _placeholder,
-    });
-  }
-);
+})<PseudoProps>(createPseudoStyles);
 
 export default PseudoBox;
diff --git a/src/theme.ts b/src/theme.ts
index f6ab38ff..429c1ce8 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -13,6 +13,9 @@ export interface MinervaTheme extends Theme {
   Button?: ThemeComponent;
   Drawer?: ThemeComponent;
   Heading?: ThemeComponent;
+  MenuButton?: ThemeComponent;
+  MenuItem?: ThemeComponent;
+  MenuLink?: ThemeComponent;
   Modal?: ThemeComponent;
   ModalContent?: ThemeComponent;
   ModalBody?: ThemeComponent;
@@ -124,6 +127,48 @@ const defaultTheme: MinervaTheme = {
   },
   InputField: {},
   Link: {},
+  Tabs: {},
+  MenuButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    border: '1px solid #E0E0E0',
+    borderRadius: '5px',
+    minWidth: '140px',
+    padding: '12px 15px',
+    _hover: {
+      boxShadow: '0 0 0 2px #CBBEE7',
+    },
+    _focus: {
+      outline: 'none',
+      boxShadow: '0 0 0 2px #CBBEE7',
+    },
+    _active: {
+      boxShadow: '0 0 0 2px #CBBEE7',
+    },
+    _disabled: {
+      background: '#E0E0E0',
+      color: 'rgba(30, 6, 84, 0.5)',
+    },
+  },
+  MenuItem: {
+    color: '#000',
+    padding: '0.625rem 0.9375rem',
+    fontSize: '14px',
+    lineHeight: '112.6%',
+    _hover: {
+      background: '#f5f5f5',
+    },
+  },
+  MenuLink: {
+    color: '#000',
+    padding: ' 0.625rem 0.9375rem',
+    fontSize: '14px',
+    lineHeight: '112.6%',
+    _hover: {
+      background: '#f5f5f5',
+    },
+  },
   Modal: {},
   ModalHeader: {},
   ModalBody: {},
diff --git a/test/__snapshots__/menu.test.tsx.snap b/test/__snapshots__/menu.test.tsx.snap
index 1c9bf9a4..c3063947 100644
--- a/test/__snapshots__/menu.test.tsx.snap
+++ b/test/__snapshots__/menu.test.tsx.snap
@@ -1,97 +1,90 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Menu /> should render when positioned to Right: Closed Menu 1`] = `
-.c0 {
+.c1 {
   box-sizing: border-box;
   min-width: 0;
-  -webkit-transition: all 150ms ease 0s;
-  transition: all 150ms ease 0s;
-  outline: none;
-  cursor: pointer;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  background-color: #fff;
-  border-width: 1px;
-  color: #374151;
-  font-weight: 500;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  -webkit-transition: -webkit-transform 0.2s;
+  -webkit-transition: transform 0.2s;
+  transition: transform 0.2s;
+  -webkit-transform-origin: center;
+  -ms-transform-origin: center;
+  transform-origin: center;
+  width: 14px;
+  height: 14px;
+  color: #000;
+}
+
+.c0 {
+  box-shadow: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  position: relative;
-  white-space: nowrap;
-  vertical-align: middle;
-  font-size: 14px;
-  line-height: 20px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 16px;
-  padding-right: 16px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  border: 1px solid #E0E0E0;
   border-radius: 5px;
-  border-style: solid;
-  border-color: #d2d6dc;
+  min-width: 140px;
+  padding: 12px 15px;
 }
 
-.c1:hover backgroundColor {
-  50: #fdf2f2;
-  100: #fde8e8;
-  200: #fbd5d5;
-  300: #f8b4b4;
-  400: #f98080;
-  500: #f05252;
-  600: #e02424;
-  700: #c81e1e;
-  800: #9b1c1c;
-  900: #771d1d;
+.c0:hover {
+  box-shadow: 0 0 0 2px #CBBEE7;
 }
 
-.c1:focus {
-  border-color: #a4cafe;
-  box-shadow: 0 0 0 3px rgba(118,169,250,.45);
-  outline: 0;
+.c0:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #CBBEE7;
 }
 
-.c1:active,
-.c1[data-active=true] {
-  border-color: #a4cafe;
-  box-shadow: 0 0 0 3px rgba(118,169,250,.45);
-  outline: 0;
+.c0:active,
+.c0[data-active=true] {
+  box-shadow: 0 0 0 2px #CBBEE7;
 }
 
-.c1:disabled,
-.c1:disabled:focus,
-.c1:disabled:hover,
-.c1[aria-disabled=true],
-.c1[aria-disabled=true]:focus,
-.c1[aria-disabled=true]:hover {
-  opacity: 0.4;
-  cursor: not-allowed;
+.c0:disabled,
+.c0:disabled:focus,
+.c0:disabled:hover,
+.c0[aria-disabled=true],
+.c0[aria-disabled=true]:focus,
+.c0[aria-disabled=true]:hover {
+  background: #E0E0E0;
+  color: rgba(30,6,84,0.5);
 }
 
 <div>
   <button
-    aria-busy="false"
-    aria-controls="menu--7"
+    aria-controls="menu--12"
     aria-haspopup="true"
-    class="c0 c1"
+    class="c0"
     data-reach-menu-button=""
     data-testid="menu-button"
-    id="menu-button--menu--7"
-    role="button"
+    id="menu-button--menu--12"
     type="button"
   >
     Actions 
+    <svg
+      aria-hidden="true"
+      class="c1"
+      data-testid="menu-icon"
+      fill="none"
+      height="7"
+      viewBox="0 0 10 7"
+      width="10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.95174 6.54518L0.70874 2.30218L2.12374 0.888184L4.95174 3.71718L7.77974 0.888184L9.19474 2.30218L4.95174 6.54518Z"
+        fill="black"
+      />
+    </svg>
   </button>
 </div>
 `;
@@ -99,113 +92,119 @@ exports[`<Menu /> should render when positioned to Right: Closed Menu 1`] = `
 exports[`<Menu /> should render when positioned to Right: Open Menu 1`] = `
 <div>
   <button
-    aria-busy="false"
-    aria-controls="menu--7"
+    aria-controls="menu--12"
     aria-haspopup="true"
-    class="sc-bdnxRM sc-eCApnc eJeGwH vEjHx"
+    class="sc-bkbkJK bjgAvd"
     data-reach-menu-button=""
     data-testid="menu-button"
-    id="menu-button--menu--7"
-    role="button"
+    id="menu-button--menu--12"
     type="button"
   >
     Actions 
+    <svg
+      aria-hidden="true"
+      class="sc-bdnxRM dZCMJF"
+      data-testid="menu-icon"
+      fill="none"
+      height="7"
+      viewBox="0 0 10 7"
+      width="10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.95174 6.54518L0.70874 2.30218L2.12374 0.888184L4.95174 3.71718L7.77974 0.888184L9.19474 2.30218L4.95174 6.54518Z"
+        fill="black"
+      />
+    </svg>
   </button>
 </div>
 `;
 
 exports[`<Menu /> should render: Closed Menu 1`] = `
-.c0 {
+.c1 {
   box-sizing: border-box;
   min-width: 0;
-  -webkit-transition: all 150ms ease 0s;
-  transition: all 150ms ease 0s;
-  outline: none;
-  cursor: pointer;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  background-color: #fff;
-  border-width: 1px;
-  color: #374151;
-  font-weight: 500;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  -webkit-transition: -webkit-transform 0.2s;
+  -webkit-transition: transform 0.2s;
+  transition: transform 0.2s;
+  -webkit-transform-origin: center;
+  -ms-transform-origin: center;
+  transform-origin: center;
+  width: 14px;
+  height: 14px;
+  color: #000;
+}
+
+.c0 {
+  box-shadow: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  position: relative;
-  white-space: nowrap;
-  vertical-align: middle;
-  font-size: 14px;
-  line-height: 20px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 16px;
-  padding-right: 16px;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  border: 1px solid #E0E0E0;
   border-radius: 5px;
-  border-style: solid;
-  border-color: #d2d6dc;
+  min-width: 140px;
+  padding: 12px 15px;
 }
 
-.c1:hover backgroundColor {
-  50: #fdf2f2;
-  100: #fde8e8;
-  200: #fbd5d5;
-  300: #f8b4b4;
-  400: #f98080;
-  500: #f05252;
-  600: #e02424;
-  700: #c81e1e;
-  800: #9b1c1c;
-  900: #771d1d;
+.c0:hover {
+  box-shadow: 0 0 0 2px #CBBEE7;
 }
 
-.c1:focus {
-  border-color: #a4cafe;
-  box-shadow: 0 0 0 3px rgba(118,169,250,.45);
-  outline: 0;
+.c0:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #CBBEE7;
 }
 
-.c1:active,
-.c1[data-active=true] {
-  border-color: #a4cafe;
-  box-shadow: 0 0 0 3px rgba(118,169,250,.45);
-  outline: 0;
+.c0:active,
+.c0[data-active=true] {
+  box-shadow: 0 0 0 2px #CBBEE7;
 }
 
-.c1:disabled,
-.c1:disabled:focus,
-.c1:disabled:hover,
-.c1[aria-disabled=true],
-.c1[aria-disabled=true]:focus,
-.c1[aria-disabled=true]:hover {
-  opacity: 0.4;
-  cursor: not-allowed;
+.c0:disabled,
+.c0:disabled:focus,
+.c0:disabled:hover,
+.c0[aria-disabled=true],
+.c0[aria-disabled=true]:focus,
+.c0[aria-disabled=true]:hover {
+  background: #E0E0E0;
+  color: rgba(30,6,84,0.5);
 }
 
 <div>
   <button
-    aria-busy="false"
     aria-controls="menu--1"
     aria-haspopup="true"
-    class="c0 c1"
+    class="c0"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--1"
-    role="button"
     type="button"
   >
     Actions 
+    <svg
+      aria-hidden="true"
+      class="c1"
+      data-testid="menu-icon"
+      fill="none"
+      height="7"
+      viewBox="0 0 10 7"
+      width="10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.95174 6.54518L0.70874 2.30218L2.12374 0.888184L4.95174 3.71718L7.77974 0.888184L9.19474 2.30218L4.95174 6.54518Z"
+        fill="black"
+      />
+    </svg>
   </button>
 </div>
 `;
@@ -213,17 +212,30 @@ exports[`<Menu /> should render: Closed Menu 1`] = `
 exports[`<Menu /> should render: Open Menu 1`] = `
 <div>
   <button
-    aria-busy="false"
     aria-controls="menu--1"
     aria-haspopup="true"
-    class="sc-bdnxRM sc-eCApnc eJeGwH vEjHx"
+    class="sc-bkbkJK bjgAvd"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--1"
-    role="button"
     type="button"
   >
     Actions 
+    <svg
+      aria-hidden="true"
+      class="sc-bdnxRM dZCMJF"
+      data-testid="menu-icon"
+      fill="none"
+      height="7"
+      viewBox="0 0 10 7"
+      width="10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.95174 6.54518L0.70874 2.30218L2.12374 0.888184L4.95174 3.71718L7.77974 0.888184L9.19474 2.30218L4.95174 6.54518Z"
+        fill="black"
+      />
+    </svg>
   </button>
 </div>
 `;
diff --git a/test/menu.test.tsx b/test/menu.test.tsx
index f2db77b4..18e1919f 100644
--- a/test/menu.test.tsx
+++ b/test/menu.test.tsx
@@ -11,6 +11,7 @@ import {
   ThemeProvider,
   MenuListProps,
   MenuDivider,
+  MenuIcon,
 } from '../src';
 // import { axe, toHaveNoViolations } from 'jest-axe';
 // expect.extend(toHaveNoViolations);
@@ -18,15 +19,25 @@ import {
 const ExampleMenu = (props: MenuListProps) => (
   <MenuContainer data-testid="menu-container">
     <MenuButton data-testid="menu-button">
-      Actions <Icon name="chevron-down" ml={2} size="14px" />
+      Actions <MenuIcon data-testid="menu-icon" />
     </MenuButton>
     <MenuList data-testid="menu-list" {...props}>
-      <MenuItem onSelect={() => alert('Download')}>Download</MenuItem>
+      <MenuItem
+        color="#ff0000"
+        data-testid="menu-item"
+        onSelect={() => alert('Download')}
+      >
+        Download
+      </MenuItem>
       <MenuItem onSelect={() => alert('Copy')}>Create a Copy</MenuItem>
       <MenuItem onSelect={() => alert('Mark as Draft')}>Mark as Draft</MenuItem>
       <MenuItem onSelect={() => alert('Delete')}>Delete</MenuItem>
       <MenuDivider />
-      <MenuLink href="https://minerva-ui-docs.vercel.app">
+      <MenuLink
+        color="#800080"
+        data-testid="menu-link"
+        href="https://minerva-ui-docs.vercel.app"
+      >
         Open Documentation
       </MenuLink>
     </MenuList>
@@ -51,6 +62,19 @@ describe('<Menu />', () => {
     expect(container).toMatchSnapshot('Open Menu');
   });
 
+  it('should pass basic style props', () => {
+    const color = '#ff0000';
+    const color2 = '#800080';
+    const { queryByTestId } = render(
+      <ThemeProvider>
+        <ExampleMenu menuPosition="right" />
+      </ThemeProvider>
+    );
+
+    expect(queryByTestId('menu-item')).toHaveStyleRule('color', color);
+    expect(queryByTestId('menu-link')).toHaveStyleRule('color', color2);
+  });
+
   it('should render when positioned to Right', () => {
     const { container, queryByTestId } = render(
       <ThemeProvider>
@@ -60,6 +84,8 @@ describe('<Menu />', () => {
 
     expect(queryByTestId('menu-button')).toBeInTheDocument();
 
+    expect(queryByTestId('menu-icon')).toBeInTheDocument();
+
     expect(container).toMatchSnapshot('Closed Menu');
 
     fireEvent.click(screen.getByTestId('menu-button'));
diff --git a/yarn.lock b/yarn.lock
index a7697551..1ace20b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5197,6 +5197,13 @@
   dependencies:
     csstype "^3.0.2"
 
+"@types/styled-system__css@^5.0.15":
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.15.tgz#f6f896e33393f8b3763f275afaa84261dae77a54"
+  integrity sha512-bbFlY2ATFEaWEMOllEqMktSzq4yGPAiZSrjGUQ124LSStm9QPhKErOuTxXfJi8VuymaQ+g1uC8AbC2o3BpgQyA==
+  dependencies:
+    csstype "^3.0.2"
+
 "@types/tapable@^1", "@types/tapable@^1.0.5":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.7.tgz#545158342f949e8fd3bfd813224971ecddc3fac4"