diff --git a/.bacon.yml b/.bacon.yml
new file mode 100644
index 0000000000..1579edfee9
--- /dev/null
+++ b/.bacon.yml
@@ -0,0 +1,8 @@
+test_suites:
+  - name: semgrep
+    script_path: /root/okta/odyssey/scripts
+    sort_order: "1"
+    timeout: "10"
+    script_name: semgrep
+    criteria: MERGE
+    queue_name: small
diff --git a/.yarn/cache/storybook-addon-rtl-direction-npm-0.0.19-a6fab876fe-688ac4c510.zip b/.yarn/cache/storybook-addon-rtl-direction-npm-0.0.19-a6fab876fe-688ac4c510.zip
new file mode 100644
index 0000000000..fa7801fcb2
Binary files /dev/null and b/.yarn/cache/storybook-addon-rtl-direction-npm-0.0.19-a6fab876fe-688ac4c510.zip differ
diff --git a/packages/odyssey-react-mui/README.md b/packages/odyssey-react-mui/README.md
index e25492e877..4508ec891c 100644
--- a/packages/odyssey-react-mui/README.md
+++ b/packages/odyssey-react-mui/README.md
@@ -18,7 +18,7 @@ This project follows semantic versioning conventions:
 Install the package and peer dependencies:
 
 ```sh
-yarn add @okta/odyssey-react-mui @emotion/react
+yarn add @okta/odyssey-react-mui
 ```
 
 Include fonts:
diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json
index 4f086ef598..de2161cfb6 100644
--- a/packages/odyssey-react-mui/package.json
+++ b/packages/odyssey-react-mui/package.json
@@ -62,6 +62,8 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0-alpha.117",
     "@mui/material": "^5.12.3",
@@ -78,8 +80,6 @@
   "devDependencies": {
     "@babel/cli": "^7.22.9",
     "@babel/core": "^7.22.9",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "@okta/browserslist-config-odyssey": "workspace:*",
     "@okta/odyssey-babel-preset": "workspace:*",
     "@okta/odyssey-icons": "workspace:*",
@@ -114,8 +114,6 @@
     "yargs": "^17.7.2"
   },
   "peerDependencies": {
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   }
diff --git a/packages/odyssey-react-mui/src/Autocomplete.tsx b/packages/odyssey-react-mui/src/Autocomplete.tsx
index 62481a15e7..54fd8aeae1 100644
--- a/packages/odyssey-react-mui/src/Autocomplete.tsx
+++ b/packages/odyssey-react-mui/src/Autocomplete.tsx
@@ -157,6 +157,7 @@ const Autocomplete = <
     <MuiAutocomplete
       // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
       aria-disabled={isDisabled}
+      disableCloseOnSelect={hasMultipleChoices}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
       loading={isLoading}
diff --git a/packages/odyssey-react-mui/src/Box.tsx b/packages/odyssey-react-mui/src/Box.tsx
index 39ebb7ee24..879e3c0bd6 100644
--- a/packages/odyssey-react-mui/src/Box.tsx
+++ b/packages/odyssey-react-mui/src/Box.tsx
@@ -11,7 +11,7 @@
  */
 
 import { Box as MuiBox, BoxProps as MuiBoxProps } from "@mui/material";
-import { ReactNode, forwardRef } from "react";
+import { ReactNode, forwardRef, memo } from "react";
 
 export type BoxProps = {
   children?: ReactNode;
@@ -20,7 +20,7 @@ export type BoxProps = {
   sx?: MuiBoxProps["sx"];
 };
 
-export const Box = forwardRef<HTMLElement, BoxProps>(
+const Box = forwardRef<HTMLElement, BoxProps>(
   ({ children, component, id, sx }, ref) => (
     <MuiBox
       ref={ref}
@@ -32,4 +32,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
   )
 );
 
-Box.displayName = "Box";
+const MemoizedBox = memo(Box);
+MemoizedBox.displayName = "Box";
+
+export { MemoizedBox as Box };
diff --git a/packages/odyssey-react-mui/src/MenuButton.tsx b/packages/odyssey-react-mui/src/MenuButton.tsx
index f522d4e609..cafabfddd1 100644
--- a/packages/odyssey-react-mui/src/MenuButton.tsx
+++ b/packages/odyssey-react-mui/src/MenuButton.tsx
@@ -12,7 +12,7 @@
 
 import { Button, buttonVariantValues, MenuItem, useUniqueId } from "./";
 import { Divider, ListSubheader, Menu } from "@mui/material";
-import { ChevronDownIcon } from "./icons.generated";
+import { ChevronDownIcon, MoreIcon } from "./icons.generated";
 import { memo, type ReactElement, useCallback, useMemo, useState } from "react";
 
 import { MenuContext, MenuContextType } from "./MenuContext";
@@ -55,6 +55,10 @@ export type MenuButtonProps = {
    * The id of the Button
    */
   id?: string;
+  /**
+   * If the MenuButton is an overflow menu or standard menu.
+   */
+  isOverflow?: boolean;
   /**
    * The tooltip text for the Button if it's icon-only
    */
@@ -84,8 +88,9 @@ const MenuButton = ({
   buttonLabel = "",
   buttonVariant = "secondary",
   children,
-  endIcon = <ChevronDownIcon />,
+  endIcon: endIconProp,
   id: idOverride,
+  isOverflow,
   tooltipText,
 }: MenuButtonProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -115,6 +120,14 @@ const MenuButton = ({
     [closeMenu, openMenu]
   );
 
+  const endIcon = endIconProp ? (
+    endIconProp
+  ) : isOverflow ? (
+    <MoreIcon />
+  ) : (
+    <ChevronDownIcon />
+  );
+
   return (
     <div>
       <Button
diff --git a/packages/odyssey-react-mui/src/MenuItem.tsx b/packages/odyssey-react-mui/src/MenuItem.tsx
index 062f7b8f32..9264d9e8d1 100644
--- a/packages/odyssey-react-mui/src/MenuItem.tsx
+++ b/packages/odyssey-react-mui/src/MenuItem.tsx
@@ -33,9 +33,9 @@ export type MenuItemProps = {
    */
   isSelected?: boolean;
   /**
-   * If `true`, the menu item will be visually marked as destructive.
+   * If `true`, the menu item will be visually marked as disabled.
    */
-  isDestructive?: boolean;
+  isDisabled?: boolean;
   /**
    * Callback fired when the menu item is clicked.
    */
@@ -56,6 +56,7 @@ const MenuItem = ({
   children,
   hasInitialFocus,
   isSelected,
+  isDisabled,
   onClick: onClickProp,
   value,
   variant = "default",
@@ -75,6 +76,7 @@ const MenuItem = ({
       /* eslint-disable-next-line jsx-a11y/no-autofocus */
       autoFocus={hasInitialFocus}
       selected={isSelected}
+      disabled={isDisabled}
       value={value}
       onClick={onClick}
       className={
diff --git a/packages/odyssey-react-mui/src/OdysseyProvider.tsx b/packages/odyssey-react-mui/src/OdysseyProvider.tsx
index 15f94170d8..05b6f917bb 100644
--- a/packages/odyssey-react-mui/src/OdysseyProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyProvider.tsx
@@ -11,6 +11,7 @@
  */
 
 import { memo, ReactNode } from "react";
+import { ScopedCssBaseline } from "@mui/material";
 
 import {
   OdysseyCacheProvider,
@@ -45,12 +46,14 @@ const OdysseyProvider = ({
       themeOverride={themeOverride}
       designTokensOverride={designTokensOverride}
     >
-      <OdysseyTranslationProvider
-        languageCode={languageCode}
-        translationOverrides={translationOverrides}
-      >
-        {children}
-      </OdysseyTranslationProvider>
+      <ScopedCssBaseline>
+        <OdysseyTranslationProvider
+          languageCode={languageCode}
+          translationOverrides={translationOverrides}
+        >
+          {children}
+        </OdysseyTranslationProvider>
+      </ScopedCssBaseline>
     </OdysseyThemeProvider>
   </OdysseyCacheProvider>
 );
diff --git a/packages/odyssey-react-mui/src/OdysseyThemeProvider.tsx b/packages/odyssey-react-mui/src/OdysseyThemeProvider.tsx
index 153d8398eb..fa42a9ec56 100644
--- a/packages/odyssey-react-mui/src/OdysseyThemeProvider.tsx
+++ b/packages/odyssey-react-mui/src/OdysseyThemeProvider.tsx
@@ -16,7 +16,7 @@ import {
 } from "@mui/material/styles";
 import { memo, ReactNode, useMemo } from "react";
 
-import { ScopedCssBaseline, ThemeOptions } from "@mui/material";
+import { ThemeOptions } from "@mui/material";
 import { deepmerge } from "@mui/utils";
 import { createOdysseyMuiTheme, DesignTokensOverride } from "./theme";
 import * as Tokens from "@okta/odyssey-design-tokens";
@@ -49,11 +49,9 @@ const OdysseyThemeProvider = ({
 
   return (
     <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>
-      <ScopedCssBaseline>
-        <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
-          {children}
-        </OdysseyDesignTokensContext.Provider>
-      </ScopedCssBaseline>
+      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>
+        {children}
+      </OdysseyDesignTokensContext.Provider>
     </MuiThemeProvider>
   );
 };
diff --git a/packages/odyssey-react-mui/src/PasswordField.tsx b/packages/odyssey-react-mui/src/PasswordField.tsx
index 56c0b8a410..c892078550 100644
--- a/packages/odyssey-react-mui/src/PasswordField.tsx
+++ b/packages/odyssey-react-mui/src/PasswordField.tsx
@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { InputAdornment, InputBase } from "@mui/material";
+import { InputAdornment, InputBase, IconButton } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -21,7 +21,6 @@ import {
 } from "react";
 
 import { ShowIcon, HideIcon } from "./icons.generated";
-import { Button } from "./Button";
 import { Field } from "./Field";
 
 export type PasswordFieldProps = {
@@ -122,13 +121,12 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
           autoFocus={hasInitialFocus}
           endAdornment={
             <InputAdornment position="end">
-              <Button
-                ariaLabel="toggle password visibility"
-                endIcon={inputType === "password" ? <ShowIcon /> : <HideIcon />}
+              <IconButton
+                aria-label="toggle password visibility"
                 onClick={togglePasswordVisibility}
-                size="small"
-                variant="floating"
-              />
+              >
+                {inputType === "password" ? <ShowIcon /> : <HideIcon />}
+              </IconButton>
             </InputAdornment>
           }
           id={id}
diff --git a/packages/odyssey-react-mui/src/SearchField.tsx b/packages/odyssey-react-mui/src/SearchField.tsx
index 2dbd7ff210..b78de64f8d 100644
--- a/packages/odyssey-react-mui/src/SearchField.tsx
+++ b/packages/odyssey-react-mui/src/SearchField.tsx
@@ -11,7 +11,7 @@
  */
 
 import { useState, useEffect } from "react";
-import { InputAdornment, InputBase } from "@mui/material";
+import { InputAdornment, InputBase, IconButton } from "@mui/material";
 import {
   ChangeEventHandler,
   FocusEventHandler,
@@ -23,7 +23,6 @@ import {
 
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated";
 import { Field } from "./Field";
-import { Button } from "./Button";
 
 export type SearchFieldProps = {
   /**
@@ -123,15 +122,14 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
           endAdornment={
             uncontrolledValue && (
               <InputAdornment position="end">
-                <Button
-                  ariaLabel="Clear"
-                  isDisabled={isDisabled}
-                  label=""
+                <IconButton
+                  aria-label="Clear"
+                  disabled={isDisabled}
                   onClick={onClear}
                   size="small"
-                  startIcon={<CloseCircleFilledIcon />}
-                  variant="floating"
-                />
+                >
+                  <CloseCircleFilledIcon />
+                </IconButton>
               </InputAdornment>
             )
           }
diff --git a/packages/odyssey-react-mui/src/Select.tsx b/packages/odyssey-react-mui/src/Select.tsx
index 2d37623e8a..27673085bc 100644
--- a/packages/odyssey-react-mui/src/Select.tsx
+++ b/packages/odyssey-react-mui/src/Select.tsx
@@ -14,13 +14,13 @@ import { ReactNode, forwardRef, memo, useCallback, useState } from "react";
 import {
   Box,
   Chip,
+  Checkbox as MuiCheckbox,
   ListSubheader,
   MenuItem,
   Select as MuiSelect,
   SelectChangeEvent,
 } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
-import { Checkbox } from "./Checkbox";
 import { Field } from "./Field";
 
 export type SelectOption = {
@@ -205,7 +205,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(
       return (
         <MenuItem key={option.value} value={option.value}>
           {isMultiSelect && (
-            <Checkbox isDefaultChecked={selectedValue.includes(option.value)} />
+            <MuiCheckbox checked={selectedValue.includes(option.value)} />
           )}
           {option.text}
         </MenuItem>
diff --git a/packages/odyssey-react-mui/src/Typography.tsx b/packages/odyssey-react-mui/src/Typography.tsx
index 2674e4a800..53c242bc63 100644
--- a/packages/odyssey-react-mui/src/Typography.tsx
+++ b/packages/odyssey-react-mui/src/Typography.tsx
@@ -14,7 +14,7 @@ import {
   Typography as MuiTypography,
   TypographyProps as MuiTypographyProps,
 } from "@mui/material";
-import { ElementType, ReactNode, useMemo } from "react";
+import { ElementType, ReactNode, memo, useMemo } from "react";
 
 export type TypographyVariantValue =
   | "h1"
@@ -87,7 +87,7 @@ export type TypographyProps = {
   variant?: keyof typeof typographyVariantMapping;
 };
 
-export const Typography = ({
+const Typography = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -102,7 +102,7 @@ export const Typography = ({
       if (variant === "body") {
         return "p";
       } else if (variant === "subordinate" || variant === "support") {
-        return "h6";
+        return "p";
       } else {
         return variant;
       }
@@ -112,9 +112,9 @@ export const Typography = ({
 
   return (
     <MuiTypography
-      ariaDescribedBy={ariaDescribedBy}
-      ariaLabel={ariaLabel}
-      ariaLabelledBy={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
       children={children}
       classes={classes}
       color={color}
@@ -124,9 +124,10 @@ export const Typography = ({
   );
 };
 
-Typography.displayName = "Typography";
+const MemoizedTypography = memo(Typography);
+MemoizedTypography.displayName = "Typography";
 
-export const Heading1 = ({
+const Heading1 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -147,9 +148,10 @@ export const Heading1 = ({
   />
 );
 
-Heading1.displayName = "Heading1";
+const MemoizedHeading1 = memo(Heading1);
+MemoizedHeading1.displayName = "Heading1";
 
-export const Heading2 = ({
+const Heading2 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -170,9 +172,10 @@ export const Heading2 = ({
   />
 );
 
-Heading2.displayName = "Heading2";
+const MemoizedHeading2 = memo(Heading2);
+MemoizedHeading2.displayName = "Heading2";
 
-export const Heading3 = ({
+const Heading3 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -193,9 +196,10 @@ export const Heading3 = ({
   />
 );
 
-Heading3.displayName = "Heading3";
+const MemoizedHeading3 = memo(Heading3);
+MemoizedHeading3.displayName = "Heading3";
 
-export const Heading4 = ({
+const Heading4 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -216,9 +220,10 @@ export const Heading4 = ({
   />
 );
 
-Heading4.displayName = "Heading4";
+const MemoizedHeading4 = memo(Heading4);
+MemoizedHeading4.displayName = "Heading4";
 
-export const Heading5 = ({
+const Heading5 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -239,9 +244,10 @@ export const Heading5 = ({
   />
 );
 
-Heading5.displayName = "Heading5";
+const MemoizedHeading5 = memo(Heading5);
+MemoizedHeading5.displayName = "Heading5";
 
-export const Heading6 = ({
+const Heading6 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -262,9 +268,10 @@ export const Heading6 = ({
   />
 );
 
-Heading6.displayName = "Heading6";
+const MemoizedHeading6 = memo(Heading6);
+MemoizedHeading6.displayName = "Heading6";
 
-export const Paragraph = ({
+const Paragraph = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -285,9 +292,10 @@ export const Paragraph = ({
   />
 );
 
-Paragraph.displayName = "Paragraph";
+const MemoizedParagraph = memo(Paragraph);
+MemoizedParagraph.displayName = "Paragraph";
 
-export const Subordinate = ({
+const Subordinate = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -308,9 +316,10 @@ export const Subordinate = ({
   />
 );
 
-Subordinate.displayName = "Subordinate";
+const MemoizedSubordinate = memo(Subordinate);
+MemoizedSubordinate.displayName = "Subordinate";
 
-export const Support = ({
+const Support = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -331,9 +340,10 @@ export const Support = ({
   />
 );
 
-Support.displayName = "Support";
+const MemoizedSupport = memo(Support);
+MemoizedSupport.displayName = "Support";
 
-export const Legend = ({
+const Legend = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -354,4 +364,19 @@ export const Legend = ({
   />
 );
 
-Legend.displayName = "Legend";
+const MemoizedLegend = memo(Legend);
+MemoizedLegend.displayName = "Legend";
+
+export {
+  MemoizedTypography as Typography,
+  MemoizedHeading1 as Heading1,
+  MemoizedHeading2 as Heading2,
+  MemoizedHeading3 as Heading3,
+  MemoizedHeading4 as Heading4,
+  MemoizedHeading5 as Heading5,
+  MemoizedHeading6 as Heading6,
+  MemoizedLegend as Legend,
+  MemoizedParagraph as Paragraph,
+  MemoizedSubordinate as Subordinate,
+  MemoizedSupport as Support,
+};
diff --git a/packages/odyssey-react-mui/src/labs/README.md b/packages/odyssey-react-mui/src/labs/README.md
index 04af9fa268..5ffff6a55d 100644
--- a/packages/odyssey-react-mui/src/labs/README.md
+++ b/packages/odyssey-react-mui/src/labs/README.md
@@ -20,10 +20,10 @@ This project follows semantic versioning conventions:
 
 ## Getting Started
 
-Install the package and peer dependencies:
+To use Odyssey Labs, import as:
 
 ```sh
-yarn add @okta/odyssey-react-mui @okta/odyssey-react-labs @emotion/react
+import from "@okta/odyssey-react-mui/labs"
 ```
 
 ## Components
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 786565e876..08fb6f4aeb 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -13,6 +13,7 @@
 import { ThemeOptions } from "@mui/material";
 import type {} from "@mui/lab/themeAugmentation";
 import { alertTitleClasses } from "@mui/material/AlertTitle";
+import { autocompleteClasses } from "@mui/material/Autocomplete";
 import { buttonClasses } from "@mui/material/Button";
 import { checkboxClasses } from "@mui/material/Checkbox";
 import { chipClasses } from "@mui/material/Chip";
@@ -269,15 +270,39 @@ export const components = (
           paddingBlock: odysseyTokens.Spacing2,
           paddingInline: odysseyTokens.Spacing2,
           borderRadius: odysseyTokens.BorderRadiusMain,
+
+          [`& .${autocompleteClasses.option}`]: {
+            minHeight: "unset",
+            paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+
+            [`&:hover`]: {
+              backgroundColor: odysseyTokens.HueNeutral100,
+            },
+
+            [`&.${autocompleteClasses.focused}`]: {
+              backgroundColor: odysseyTokens.HueNeutral100,
+            },
+
+            [`&[aria-selected="true"]`]: {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorAction,
+
+              [`&:hover`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              },
+
+              [`&.${autocompleteClasses.focused}`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              },
+            },
+          },
         },
         loading: {
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
         },
-        option: {
-          paddingBlock: odysseyTokens.Spacing3,
-          borderRadius: odysseyTokens.BorderRadiusTight,
-        },
         popupIndicator: {
           padding: odysseyTokens.Spacing1,
           marginRight: "unset",
@@ -1327,6 +1352,13 @@ export const components = (
         },
       },
     },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          padding: odysseyTokens.Spacing1,
+        },
+      },
+    },
     MuiInput: {
       defaultProps: {
         disableUnderline: true,
@@ -1598,6 +1630,7 @@ export const components = (
           gap: odysseyTokens.Spacing2,
           minHeight: "unset",
           paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing4,
           borderRadius: odysseyTokens.BorderRadiusTight,
 
           [`& .${formControlLabelClasses.root}`]: {
@@ -1614,6 +1647,10 @@ export const components = (
             },
           },
 
+          [`:focus-visible`]: {
+            backgroundColor: odysseyTokens.HueNeutral100,
+          },
+
           [`&.${menuItemClasses.root}-destructive`]: {
             color: odysseyTokens.TypographyColorDanger,
           },
@@ -2241,8 +2278,6 @@ export const components = (
     },
     MuiTypography: {
       defaultProps: {
-        fontFamily:
-          "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
         variantMapping: {
           h1: "h1",
           h2: "h2",
diff --git a/packages/odyssey-storybook/.storybook/main.ts b/packages/odyssey-storybook/.storybook/main.ts
index f0c691efa5..b65bc4b561 100644
--- a/packages/odyssey-storybook/.storybook/main.ts
+++ b/packages/odyssey-storybook/.storybook/main.ts
@@ -26,6 +26,7 @@ const config: StorybookConfig = {
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-interactions"),
     getAbsolutePath("@storybook/addon-mdx-gfm"),
+    getAbsolutePath("storybook-addon-rtl-direction"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
diff --git a/packages/odyssey-storybook/.storybook/preview.ts b/packages/odyssey-storybook/.storybook/preview.ts
index a2ca65892e..42096b4a5a 100644
--- a/packages/odyssey-storybook/.storybook/preview.ts
+++ b/packages/odyssey-storybook/.storybook/preview.ts
@@ -1,5 +1,9 @@
 import type { Preview } from "@storybook/react";
 
+export const globalTypes = {
+  rtlDirection: "ltr",
+};
+
 const preview: Preview = {
   parameters: {
     a11y: {
diff --git a/packages/odyssey-storybook/applitools.config.js b/packages/odyssey-storybook/applitools.config.js
index 22569bbef6..99400ef4b3 100644
--- a/packages/odyssey-storybook/applitools.config.js
+++ b/packages/odyssey-storybook/applitools.config.js
@@ -10,26 +10,21 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-const VRT_IGNORE = "Toast.Provider Callout.Form Callout.Table".split(" ");
+const branchName = process.env.GITHUB_HEAD_REF;
+const parentBranchName = process.env.GITHUB_BASE_REF;
+const shortCommitHash = process.env.GITHUB_SHA.slice(0, 7);
 
 module.exports = {
-  // NOTE: the docs for this exitcode config are incorrect as of this
-  // writing. An explicit `false` value here allows a failed VRT run to
-  // exit non zero and our larger CI build to pass as we intend.
-  // Validating VRT results is then handled through a separate applitools
-  // github integration.
-  exitcode: true,
-
-  matchLevel: "Strict",
-  showStorybookOutput: true,
-  testConcurrency: 20,
-  browser: [{ width: 1024, height: 768, name: "chrome" }],
   accessibilityValidation: {
     level: "AA",
     guidelinesVersion: "WCAG_2_1",
   },
-  include({ name }) {
-    if (VRT_IGNORE.includes(name)) return false;
-    return true;
-  },
+  batchName: branchName?.concat(" ", shortCommitHash),
+  branchName,
+  browser: [{ width: 1024, height: 768, name: "chrome" }],
+  exitcode: true,
+  matchLevel: "Strict",
+  parentBranchName,
+  showStorybookOutput: true,
+  testConcurrency: 20,
 };
diff --git a/packages/odyssey-storybook/applitools.xbrowser.config.js b/packages/odyssey-storybook/applitools.xbrowser.config.js
index c1b91d6aed..a6f3b358f2 100644
--- a/packages/odyssey-storybook/applitools.xbrowser.config.js
+++ b/packages/odyssey-storybook/applitools.xbrowser.config.js
@@ -15,8 +15,8 @@ const config = require("./applitools.config");
 module.exports = Object.assign(config, {
   batch: {
     name: "okta/odyssey: x-browser",
-    sequenceName: "x-browser",
     notifyOnCompletion: true,
+    sequenceName: "x-browser",
   },
   browser: [
     { width: 1024, height: 768, name: "edgechromium" },
diff --git a/packages/odyssey-storybook/package.json b/packages/odyssey-storybook/package.json
index 7199a34210..7ad25459c9 100644
--- a/packages/odyssey-storybook/package.json
+++ b/packages/odyssey-storybook/package.json
@@ -55,6 +55,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "storybook": "^7.2.0",
+    "storybook-addon-rtl-direction": "^0.0.19",
     "typescript": "^5.1.6",
     "vite": "^4.3.2"
   },
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx
index 85104ed54b..c228c234e6 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx
@@ -25,7 +25,6 @@ import {
   GroupIcon,
   GlobeIcon,
   CalendarIcon,
-  MoreIcon,
 } from "@okta/odyssey-react-mui/icons";
 import icons from "../../../../.storybook/components/iconUtils";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -118,6 +117,16 @@ const storybookMeta: Meta<MenuButtonProps> = {
         defaultValue: "",
       },
     },
+    isOverflow: {
+      control: "boolean",
+      description: "If the MenuButton is an overflow menu or standard menu.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: "",
+      },
+    },
     tooltipText: {
       control: "text",
       description:
@@ -133,7 +142,6 @@ const storybookMeta: Meta<MenuButtonProps> = {
   args: {
     buttonLabel: "More actions",
     buttonVariant: "secondary",
-    endIcon: <MoreIcon />,
   },
   decorators: [MuiThemeDecorator],
   tags: ["autodocs"],
@@ -246,7 +254,7 @@ export const WithDestructive: StoryObj<MenuButtonProps> = {
     children: [
       <MenuItem key="1">View details</MenuItem>,
       <MenuItem key="2">Edit inventory</MenuItem>,
-      <MenuItem isDestructive key="3">
+      <MenuItem variant="destructive" key="3">
         Jettison cargo
       </MenuItem>,
     ],
@@ -273,7 +281,6 @@ export const IconButton: StoryObj<MenuButtonProps> = {
       <MenuItem key="2">Edit configuration</MenuItem>,
       <MenuItem key="3">Launch</MenuItem>,
     ],
-    endIcon: <MoreIcon />,
     tooltipText: "Add confirmation",
   },
 };
diff --git a/packages/odyssey-storybook/src/guidelines/CustomTheming.stories.mdx b/packages/odyssey-storybook/src/guidelines/CustomTheming.stories.mdx
index b627048ccc..2f37683475 100644
--- a/packages/odyssey-storybook/src/guidelines/CustomTheming.stories.mdx
+++ b/packages/odyssey-storybook/src/guidelines/CustomTheming.stories.mdx
@@ -139,10 +139,8 @@ const customOdysseyTheme = useMemo(
 );
 
 const YourAppRoot = ({ children }) => (
-  <OdysseyCacheProvider>
-    <MuiThemeProvider theme={customOdysseyTheme}>
-      {children}
-    </MuiThemeProvider>
-  </OdysseyCacheProvider>
+  <OdysseyProvider muiTheme={muiTheme}>
+    {children}
+  </OdysseyProvider>
 );
 ```
diff --git a/scripts/semgrep.sh b/scripts/semgrep.sh
new file mode 100644
index 0000000000..fe655dea84
--- /dev/null
+++ b/scripts/semgrep.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+
+source ${OKTA_HOME}/${REPO}/scripts/setup.sh
+
+cd ${OKTA_HOME}/${REPO}
+
+if ! sast_scan;
+then
+  exit ${FAILURE}
+fi
+
+exit ${SUCCESS}
diff --git a/yarn.lock b/yarn.lock
index 7d6d229903..2ec9b5b7dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5746,8 +5746,6 @@ __metadata:
     word-wrap: ~1.2.5
     yargs: ^17.7.2
   peerDependencies:
-    "@emotion/react": ^11
-    "@emotion/styled": ^11
     react: ">=17 <19"
     react-dom: ">=17 <19"
   languageName: unknown
@@ -5798,6 +5796,7 @@ __metadata:
     react: ^17.0.2
     react-dom: ^17.0.2
     storybook: ^7.2.0
+    storybook-addon-rtl-direction: ^0.0.19
     typescript: ^5.1.6
     vite: ^4.3.2
   languageName: unknown
@@ -24493,6 +24492,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook-addon-rtl-direction@npm:^0.0.19":
+  version: 0.0.19
+  resolution: "storybook-addon-rtl-direction@npm:0.0.19"
+  peerDependencies:
+    "@storybook/addons": ^6.5.8
+    "@storybook/api": ^6.5.8
+    "@storybook/components": ^6.5.8
+    "@storybook/core-events": ^6.5.8
+    "@storybook/theming": ^6.5.8
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 688ac4c510e959f1d147ce2f2cfb18456a32bbae1c70a854e3657a6a0f042da4c5a2f0bbe445caa68806f6e0a247ae48e2b04648541e383029eec61e76b522ea
+  languageName: node
+  linkType: hard
+
 "storybook@npm:^7.2.0":
   version: 7.2.0
   resolution: "storybook@npm:7.2.0"