From 0def48ede8d3366817b12562f018c6f03d5de9e0 Mon Sep 17 00:00:00 2001
From: Ben Schell <ben.schell@okta.com>
Date: Mon, 4 Nov 2024 13:57:02 -0500
Subject: [PATCH 01/15] feat: buttonPopover and userProfilePopover components

---
 .../src/labs/ButtonPopover.tsx                |  62 ++++
 .../odyssey-react-mui/src/labs/Popover.tsx    | 113 +++++++
 .../src/labs/TopNav/UserProfile.tsx           |  28 +-
 .../src/labs/TopNav/UserProfilePopover.tsx    | 103 ++++++
 .../src/labs/TopNav/index.ts                  |   1 +
 packages/odyssey-react-mui/src/labs/index.ts  |   1 +
 .../ButtonPopover/ButtonPopover.stories.tsx   | 307 ++++++++++++++++++
 .../UserProfile/UserProfile.stories.tsx       | 106 ++++++
 .../UserProfilePopover.stories.tsx            | 136 ++++++++
 9 files changed, 855 insertions(+), 2 deletions(-)
 create mode 100644 packages/odyssey-react-mui/src/labs/ButtonPopover.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/Popover.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx
 create mode 100644 packages/odyssey-storybook/src/components/odyssey-labs/ButtonPopover/ButtonPopover.stories.tsx
 create mode 100644 packages/odyssey-storybook/src/components/odyssey-labs/UserProfile/UserProfile.stories.tsx
 create mode 100644 packages/odyssey-storybook/src/components/odyssey-labs/UserProfilePopover/UserProfilePopover.stories.tsx

diff --git a/packages/odyssey-react-mui/src/labs/ButtonPopover.tsx b/packages/odyssey-react-mui/src/labs/ButtonPopover.tsx
new file mode 100644
index 0000000000..a02af6733e
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/ButtonPopover.tsx
@@ -0,0 +1,62 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, MouseEventHandler, ReactNode, useCallback, useRef } from "react";
+import { Button, ButtonProps } from "../Button";
+import { NullElement } from "../NullElement";
+import { OpenHandle, Popover, PopoverProps } from "./Popover";
+
+export const popoverAlignmentValues = ["left", "right"] as const;
+
+export type ButtonPopoverProps = {
+  /**
+   * The horizontal alignment of the popover.
+   */
+  popoverAlignment?: PopoverProps["popoverAlignment"];
+  /**
+   * The contents of the popover
+   */
+  children: ReactNode | NullElement;
+} & ButtonProps;
+
+const ButtonPopover = (props: ButtonPopoverProps) => {
+  const { children, popoverAlignment, ...buttonProps } = props;
+
+  // Adding a tooltip to the button means the popover does not get placed in the right location
+  delete buttonProps.tooltipText;
+
+  const popoverRef = useRef<OpenHandle>(null);
+  const openPopover = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (event) => {
+      popoverRef.current?.openWithElement(event.currentTarget);
+    },
+    [],
+  );
+
+  return (
+    <>
+      <Button
+        {...buttonProps}
+        // isDisabled={isDisabled}
+        onClick={openPopover}
+      />
+      <Popover popoverAlignment={popoverAlignment} popoverRef={popoverRef}>
+        {children}
+      </Popover>
+    </>
+  );
+};
+
+const MemoizedButtonPopover = memo(ButtonPopover);
+MemoizedButtonPopover.displayName = "ButtonPopover";
+
+export { MemoizedButtonPopover as ButtonPopover };
diff --git a/packages/odyssey-react-mui/src/labs/Popover.tsx b/packages/odyssey-react-mui/src/labs/Popover.tsx
new file mode 100644
index 0000000000..67b057120e
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/Popover.tsx
@@ -0,0 +1,113 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {
+  memo,
+  ReactNode,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from "react";
+import { Popover as MuiPopover, PopoverOrigin } from "@mui/material";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../OdysseyDesignTokensContext";
+import { Box } from "../Box";
+import { NullElement } from "../NullElement";
+import { useMuiProps } from "../MuiPropsContext";
+
+export const popoverAlignmentValues = ["left", "right"] as const;
+
+export type OpenHandle = {
+  openWithElement: (element: HTMLElement) => void;
+};
+
+export type PopoverProps = {
+  /**
+   * The ref forwarded to the Popover
+   */
+  popoverRef?: React.RefObject<OpenHandle>;
+  /**
+   * The horizontal alignment of the popover.
+   */
+  popoverAlignment?: (typeof popoverAlignmentValues)[number];
+  /**
+   * The contents of the popover
+   */
+  children: ReactNode | NullElement;
+};
+
+const Popover = ({ popoverRef, popoverAlignment, children }: PopoverProps) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
+  const muiProps = useMuiProps();
+
+  const isOpen = Boolean(anchorEl);
+
+  useImperativeHandle(
+    popoverRef,
+    () => ({
+      openWithElement: (element) => {
+        setAnchorEl(element);
+      },
+    }),
+    [],
+  );
+
+  const closePopover = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+
+  const anchorOrigin = useMemo(
+    () =>
+      ({
+        horizontal: popoverAlignment,
+        vertical: "bottom",
+      }) as PopoverOrigin,
+    [popoverAlignment],
+  );
+
+  const transformOrigin = useMemo(
+    () =>
+      ({
+        horizontal: popoverAlignment,
+        vertical: "top",
+      }) as PopoverOrigin,
+    [popoverAlignment],
+  );
+
+  return (
+    <MuiPopover
+      {...muiProps}
+      open={isOpen}
+      anchorEl={anchorEl}
+      onClose={closePopover}
+      anchorOrigin={anchorOrigin}
+      transformOrigin={transformOrigin}
+    >
+      <Box
+        sx={{
+          padding: odysseyDesignTokens.Spacing5,
+        }}
+      >
+        {children}
+      </Box>
+    </MuiPopover>
+  );
+};
+
+const MemoizedPopover = memo(Popover);
+MemoizedPopover.displayName = "Popover";
+
+export { MemoizedPopover as Popover };
diff --git a/packages/odyssey-react-mui/src/labs/TopNav/UserProfile.tsx b/packages/odyssey-react-mui/src/labs/TopNav/UserProfile.tsx
index 82744df761..f2be78c8f4 100644
--- a/packages/odyssey-react-mui/src/labs/TopNav/UserProfile.tsx
+++ b/packages/odyssey-react-mui/src/labs/TopNav/UserProfile.tsx
@@ -18,6 +18,7 @@ import {
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
 import { Subordinate } from "../../Typography";
+import { Box } from "../../Box";
 
 const UserProfileContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
@@ -37,6 +38,7 @@ const UserProfileIconContainer = styled("div", {
 const UserProfileInfoContainer = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
+  textAlign: "left",
 }));
 
 export type UserProfileProps = {
@@ -52,9 +54,18 @@ export type UserProfileProps = {
    * Org name of the logged in user
    */
   orgName: string;
+  /**
+   * The icon element to display after the username
+   */
+  userNameEndIcon?: ReactElement;
 };
 
-const UserProfile = ({ profileIcon, userName, orgName }: UserProfileProps) => {
+const UserProfile = ({
+  profileIcon,
+  userName,
+  orgName,
+  userNameEndIcon,
+}: UserProfileProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
   return (
@@ -66,7 +77,20 @@ const UserProfile = ({ profileIcon, userName, orgName }: UserProfileProps) => {
       )}
 
       <UserProfileInfoContainer>
-        <Subordinate color="textPrimary">{userName}</Subordinate>
+        {userNameEndIcon ? (
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              gap: odysseyDesignTokens.Spacing2,
+            }}
+          >
+            <Subordinate color="textPrimary">{userName}</Subordinate>
+            {userNameEndIcon}
+          </Box>
+        ) : (
+          <Subordinate color="textPrimary">{userName}</Subordinate>
+        )}
         <Subordinate color="textSecondary">{orgName}</Subordinate>
       </UserProfileInfoContainer>
     </UserProfileContainer>
diff --git a/packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx b/packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx
new file mode 100644
index 0000000000..070b88e39f
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx
@@ -0,0 +1,103 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, MouseEventHandler, ReactNode, useCallback, useRef } from "react";
+import {
+  Button as MuiButton,
+  // ButtonBase as MuiButtonBase,
+} from "@mui/material";
+import { UserProfile, UserProfileProps } from "./UserProfile";
+import { NullElement } from "../../NullElement";
+import { useMuiProps } from "../../MuiPropsContext";
+import { ChevronDownIcon } from "../../icons.generated";
+import { OpenHandle, Popover, PopoverProps } from "../Popover";
+
+export type UserProfilePopoverProps = {
+  /**
+   * The horizontal alignment of the popover.
+   */
+  popoverAlignment?: PopoverProps["popoverAlignment"];
+  /**
+   * The contents of the popover
+   */
+  children: ReactNode | NullElement;
+} & Omit<UserProfileProps, "userNameEndIcon">;
+
+const UserProfilePopover = ({
+  popoverAlignment,
+  children,
+  profileIcon,
+  userName,
+  orgName,
+}: UserProfilePopoverProps) => {
+  const muiProps = useMuiProps();
+
+  const popoverRef = useRef<OpenHandle>(null);
+  const openPopover = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (event) => {
+      popoverRef.current?.openWithElement(event.currentTarget);
+    },
+    [],
+  );
+
+  return (
+    <>
+      <MuiButton
+        {...muiProps}
+        // aria-controls={ariaControls}
+        // aria-describedby={ariaDescribedBy}
+        // aria-expanded={ariaExpanded}
+        // aria-haspopup={ariaHasPopup}
+        // aria-label={ariaLabel}
+        // aria-labelledby={ariaLabelledBy}
+        // data-se={testId}
+        // href={href}
+        // id={id}
+        // ref={(element) => {
+        //   if (element) {
+        //     (
+        //       localButtonRef as React.MutableRefObject<
+        //         HTMLButtonElement | HTMLAnchorElement
+        //       >
+        //     ).current = element;
+        //     //@ts-expect-error ref is not an optional prop on the props context type
+        //     muiProps?.ref?.(element);
+        //   }
+        // }}
+        // size={size}
+        // tabIndex={tabIndex}
+        // translate={translate}
+        // type={type}
+
+        // disabled={isOpen}
+        onClick={openPopover}
+        variant="floating"
+      >
+        <UserProfile
+          profileIcon={profileIcon}
+          userName={userName}
+          orgName={orgName}
+          userNameEndIcon={<ChevronDownIcon />}
+        />
+      </MuiButton>
+
+      <Popover popoverAlignment={popoverAlignment} popoverRef={popoverRef}>
+        {children}
+      </Popover>
+    </>
+  );
+};
+
+const MemoizedUserProfilePopover = memo(UserProfilePopover);
+MemoizedUserProfilePopover.displayName = "UserProfilePopover";
+
+export { MemoizedUserProfilePopover as UserProfilePopover };
diff --git a/packages/odyssey-react-mui/src/labs/TopNav/index.ts b/packages/odyssey-react-mui/src/labs/TopNav/index.ts
index e70c5134c0..ee775fbaf8 100644
--- a/packages/odyssey-react-mui/src/labs/TopNav/index.ts
+++ b/packages/odyssey-react-mui/src/labs/TopNav/index.ts
@@ -12,3 +12,4 @@
 
 export * from "./TopNav";
 export * from "./UserProfile";
+export * from "./UserProfilePopover";
diff --git a/packages/odyssey-react-mui/src/labs/index.ts b/packages/odyssey-react-mui/src/labs/index.ts
index a963d3fa88..bab62604b1 100644
--- a/packages/odyssey-react-mui/src/labs/index.ts
+++ b/packages/odyssey-react-mui/src/labs/index.ts
@@ -16,6 +16,7 @@ export type { LocalizationProviderProps } from "@mui/x-date-pickers";
 
 // export * from "./AdaptablePicker";
 export * from "./AppTile";
+export * from "./ButtonPopover";
 export * from "./DatePicker";
 export * from "./datePickerTheme";
 
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/ButtonPopover/ButtonPopover.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/ButtonPopover/ButtonPopover.stories.tsx
new file mode 100644
index 0000000000..1e7133f333
--- /dev/null
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/ButtonPopover/ButtonPopover.stories.tsx
@@ -0,0 +1,307 @@
+/*!
+ * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  Box,
+  buttonVariantValues,
+  Heading5,
+  Paragraph,
+} from "@okta/odyssey-react-mui";
+import {
+  ButtonPopover,
+  ButtonPopoverProps,
+  popoverAlignmentValues,
+} from "@okta/odyssey-react-mui/labs";
+import { GroupIcon, QuestionCircleIcon } from "@okta/odyssey-react-mui/icons";
+
+import { fieldComponentPropsMetaData } from "../../../fieldComponentPropsMetaData";
+import icons from "../../../../.storybook/components/iconUtils";
+import { MuiThemeDecorator } from "../../../../.storybook/components";
+import { userEvent, waitFor, within } from "@storybook/testing-library";
+import { expect } from "@storybook/jest";
+import { axeRun } from "../../../axe-util";
+import type { PlaywrightProps } from "../../odyssey-mui/storybookTypes";
+
+const storybookMeta: Meta<typeof ButtonPopover> = {
+  title: "Labs Components/Button Popover",
+  component: ButtonPopover,
+  argTypes: {
+    ariaDescribedBy: {
+      control: "text",
+      description:
+        "The ID of the element that describes the ButtonPopover, if one exists.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    ariaLabel: {
+      control: "text",
+      description:
+        "aria-label to describe the ButtonPopover when the button label is empty",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    ariaLabelledBy: {
+      control: "text",
+      description:
+        "The ID of the element that labels the ButtonPopover. Only needed if the button has no text and `ariaLabel` is empty.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    label: {
+      control: "text",
+      description: "The label on the triggering Button",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    variant: {
+      options: buttonVariantValues,
+      control: { type: "radio" },
+      description: "The variant of the triggering Button",
+      table: {
+        type: {
+          summary: buttonVariantValues.join(" | "),
+        },
+        defaultValue: {
+          summary: "secondary",
+        },
+      },
+    },
+    children: {
+      control: "obj",
+      description: "The content within the Popover",
+      table: {
+        type: {
+          summary: "[ReactNode | NullElement]",
+        },
+      },
+      type: {
+        required: true,
+        name: "other",
+        value: "[ReactNode | NullElement]",
+      },
+    },
+    endIcon: {
+      control: {
+        type: "select",
+      },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "The end Icon on the triggering Button",
+      table: {
+        type: {
+          summary: "<Icon />",
+        },
+      },
+    },
+    id: {
+      control: "text",
+      description: "The id of the Button",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    isDisabled: fieldComponentPropsMetaData.isDisabled,
+    popoverAlignment: {
+      options: popoverAlignmentValues,
+      control: { type: "radio" },
+      description: "The horizontal alignment of the popover.",
+      table: {
+        type: {
+          summary: popoverAlignmentValues.join(" | "),
+        },
+        defaultValue: {
+          summary: "left",
+        },
+      },
+    },
+  },
+  args: {
+    label: "More actions",
+    variant: "secondary",
+    popoverAlignment: "left",
+  },
+  decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
+};
+
+export default storybookMeta;
+
+const clickButtonPopover =
+  ({ canvasElement, step }: PlaywrightProps<ButtonPopoverProps>) =>
+  async (args: ButtonPopoverProps, actionName: string) => {
+    const canvas = within(canvasElement);
+    await step("open popover button", async () => {
+      const buttonElement = canvas.getByRole("button", {
+        name: args.label,
+      });
+      userEvent.click(buttonElement);
+      await waitFor(() => {
+        axeRun(actionName);
+      });
+    });
+  };
+
+export const Simple: StoryObj<ButtonPopoverProps> = {
+  args: {
+    label: "More actions",
+    children: [
+      <Heading5 key="1">Popover Content</Heading5>,
+      <Paragraph key="2">Some more popover content.</Paragraph>,
+    ],
+  },
+  play: async ({
+    args,
+    canvasElement,
+    step,
+  }: {
+    args: ButtonPopoverProps;
+    canvasElement: HTMLElement;
+    step: PlaywrightProps<ButtonPopoverProps>["step"];
+  }) => {
+    await clickButtonPopover({ canvasElement, step })(
+      args,
+      "Button Popover Simple",
+    );
+  },
+};
+
+export const ButtonVariant: StoryObj<ButtonPopoverProps> = {
+  args: {
+    label: "More actions",
+    variant: "primary",
+    children: [
+      <Heading5 key="1">Popover Content</Heading5>,
+      <Paragraph key="2">Some more popover content.</Paragraph>,
+    ],
+    id: "floating-button",
+  },
+  play: async ({
+    canvasElement,
+    step,
+  }: PlaywrightProps<ButtonPopoverProps>) => {
+    await step("Filter and Select from listbox", async () => {
+      const canvas = within(canvasElement);
+      const button = canvas.getByRole("button", { name: "More actions" });
+      expect(button).toHaveAttribute("id", "floating-button");
+    });
+  },
+};
+
+export const IconButton: StoryObj<ButtonPopoverProps> = {
+  args: {
+    ariaLabel: "More actions",
+    label: "",
+    endIcon: <QuestionCircleIcon />,
+    children: [
+      <Heading5 key="1">Popover Content</Heading5>,
+      <Paragraph key="2">Some more popover content.</Paragraph>,
+    ],
+  },
+  play: async ({
+    canvasElement,
+    step,
+  }: PlaywrightProps<ButtonPopoverProps>) => {
+    await step("ButtonPopover Aria-Label", async () => {
+      const canvas = within(canvasElement);
+      const buttonPopover = canvas.queryByRole("button", {
+        name: "More actions",
+      });
+      expect(buttonPopover).not.toBeNull();
+    });
+  },
+};
+
+export const StartIcon: StoryObj<ButtonPopoverProps> = {
+  args: {
+    ariaLabel: "More actions",
+    startIcon: <GroupIcon />,
+    children: [
+      <Heading5 key="1">Popover Content</Heading5>,
+      <Paragraph key="2">Some more popover content.</Paragraph>,
+    ],
+  },
+};
+
+export const EndIcon: StoryObj<ButtonPopoverProps> = {
+  args: {
+    ariaLabel: "More actions",
+    endIcon: <GroupIcon />,
+    children: [
+      <Heading5 key="1">Popover Content</Heading5>,
+      <Paragraph key="2">Some more popover content.</Paragraph>,
+    ],
+  },
+};
+
+export const Disabled: StoryObj<ButtonPopoverProps> = {
+  args: {
+    label: "Cargo options",
+    isDisabled: true,
+    children: [
+      <Heading5 key="1">Popover Content</Heading5>,
+      <Paragraph key="2">Some more popover content.</Paragraph>,
+    ],
+  },
+};
+
+export const Alignment: StoryObj<ButtonPopoverProps> = {
+  args: {
+    variant: "secondary",
+    children: [
+      <Heading5 key="1">Popover Content</Heading5>,
+      <Paragraph key="2">Some more popover content.</Paragraph>,
+    ],
+    popoverAlignment: "right",
+  },
+  render: function C(props: ButtonPopoverProps) {
+    return (
+      <Box sx={{ ml: "300px" }}>
+        <ButtonPopover
+          label="More actions"
+          variant={props.variant}
+          popoverAlignment={props.popoverAlignment}
+        >
+          {props.children}
+        </ButtonPopover>
+      </Box>
+    );
+  },
+  play: async ({
+    args,
+    canvasElement,
+    step,
+  }: {
+    args: ButtonPopoverProps;
+    canvasElement: HTMLElement;
+    step: PlaywrightProps<ButtonPopoverProps>["step"];
+  }) => {
+    await clickButtonPopover({ canvasElement, step })(
+      args,
+      "Button Popover Alignment",
+    );
+  },
+};
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/UserProfile/UserProfile.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/UserProfile/UserProfile.stories.tsx
new file mode 100644
index 0000000000..f0eac5aab3
--- /dev/null
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/UserProfile/UserProfile.stories.tsx
@@ -0,0 +1,106 @@
+/*!
+ * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { UserProfile, UserProfileProps } from "@okta/odyssey-react-mui/labs";
+import { Meta, StoryObj } from "@storybook/react";
+import { MuiThemeDecorator } from "../../../../.storybook/components";
+import icons from "../../../../.storybook/components/iconUtils";
+import { within } from "@storybook/testing-library";
+import { ChevronDownIcon, UserIcon } from "@okta/odyssey-react-mui/icons";
+import { PlaywrightProps } from "../../odyssey-mui/storybookTypes";
+
+const storybookMeta: Meta<UserProfileProps> = {
+  title: "Labs Components/UserProfile",
+  component: UserProfile,
+  argTypes: {
+    profileIcon: {
+      control: { type: "select" },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "An optional icon to display ahead of the user profile",
+      table: { type: { summary: "<Icon />" } },
+    },
+    userName: {
+      control: "text",
+      description: "Org name of the logged in user",
+      table: { type: { summary: "string" } },
+    },
+    orgName: {
+      control: "text",
+      description: "Org name of the logged in user",
+      table: { type: { summary: "string" } },
+    },
+    userNameEndIcon: {
+      control: { type: "select" },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "An optional icon to display at the end of the user profile",
+      table: { type: { summary: "<Icon />" } },
+    },
+  },
+  args: {
+    userName: "test.user@test.com",
+    orgName: "ORG123",
+  },
+  decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
+};
+
+export default storybookMeta;
+
+export const Default: StoryObj<UserProfileProps> = {};
+
+export const WithProfileIcon: StoryObj<UserProfileProps> = {
+  args: {
+    profileIcon: <UserIcon />,
+  },
+  play: async ({ canvasElement, step }: PlaywrightProps<UserProfileProps>) => {
+    await step("With profile icon", async () => {
+      const canvas = within(canvasElement);
+      const buttonPopover = canvas.queryByRole("button", {
+        name: "More actions",
+      });
+      expect(buttonPopover).not.toBeNull();
+    });
+  },
+};
+
+export const WithUserEndIcon: StoryObj<UserProfileProps> = {
+  args: {
+    userNameEndIcon: <ChevronDownIcon />,
+  },
+  play: async ({ canvasElement, step }: PlaywrightProps<UserProfileProps>) => {
+    await step("With profile icon", async () => {
+      const canvas = within(canvasElement);
+      const buttonPopover = canvas.queryByRole("button", {
+        name: "More actions",
+      });
+      expect(buttonPopover).not.toBeNull();
+    });
+  },
+};
+
+export const WithProfileAndUserEndIcon: StoryObj<UserProfileProps> = {
+  args: {
+    profileIcon: <UserIcon />,
+    userNameEndIcon: <ChevronDownIcon />,
+  },
+  play: async ({ canvasElement, step }: PlaywrightProps<UserProfileProps>) => {
+    await step("With profile icon", async () => {
+      const canvas = within(canvasElement);
+      const buttonPopover = canvas.queryByRole("button", {
+        name: "More actions",
+      });
+      expect(buttonPopover).not.toBeNull();
+    });
+  },
+};
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/UserProfilePopover/UserProfilePopover.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/UserProfilePopover/UserProfilePopover.stories.tsx
new file mode 100644
index 0000000000..7e624c462f
--- /dev/null
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/UserProfilePopover/UserProfilePopover.stories.tsx
@@ -0,0 +1,136 @@
+/*!
+ * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {
+  popoverAlignmentValues,
+  UserProfilePopover,
+  UserProfilePopoverProps,
+} from "@okta/odyssey-react-mui/labs";
+import { Meta, StoryObj } from "@storybook/react";
+import { MuiThemeDecorator } from "../../../../.storybook/components";
+import icons from "../../../../.storybook/components/iconUtils";
+import { within } from "@storybook/testing-library";
+import { UserIcon } from "@okta/odyssey-react-mui/icons";
+import { PlaywrightProps } from "../../odyssey-mui/storybookTypes";
+import { Heading5, Paragraph } from "@okta/odyssey-react-mui";
+
+const storybookMeta: Meta<UserProfilePopoverProps> = {
+  title: "Labs Components/UserProfilePopover",
+  component: UserProfilePopover,
+  argTypes: {
+    profileIcon: {
+      control: { type: "select" },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "An optional icon to display ahead of the user profile",
+      table: { type: { summary: "<Icon />" } },
+    },
+    userName: {
+      control: "text",
+      description: "Org name of the logged in user",
+      table: { type: { summary: "string" } },
+    },
+    orgName: {
+      control: "text",
+      description: "Org name of the logged in user",
+      table: { type: { summary: "string" } },
+    },
+    userNameEndIcon: {
+      control: { type: "select" },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "An optional icon to display at the end of the user profile",
+      table: { type: { summary: "<Icon />" } },
+    },
+    popoverAlignment: {
+      options: popoverAlignmentValues,
+      control: { type: "radio" },
+      description: "The horizontal alignment of the popover.",
+      table: {
+        type: {
+          summary: popoverAlignmentValues.join(" | "),
+        },
+        defaultValue: {
+          summary: "left",
+        },
+      },
+    },
+    children: {
+      control: "obj",
+      description: "The content to appear in the popover",
+      table: {
+        type: {
+          summary: "[ReactNode | NullElement]",
+        },
+      },
+      type: {
+        required: true,
+        name: "other",
+        value: "[ReactNode]",
+      },
+    },
+  },
+  args: {
+    userName: "test.user@test.com",
+    orgName: "ORG123",
+    profileIcon: <UserIcon />,
+    popoverAlignment: "right",
+    children: (
+      <>
+        <Heading5 key="1">Popover Content</Heading5>
+        <Paragraph key="2">Some more popover content.</Paragraph>
+      </>
+    ),
+  },
+  decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
+};
+
+export default storybookMeta;
+
+export const Default: StoryObj<UserProfilePopoverProps> = {};
+
+export const WithLeftPopoverAlignment: StoryObj<UserProfilePopoverProps> = {
+  args: {
+    popoverAlignment: "left",
+  },
+  play: async ({
+    canvasElement,
+    step,
+  }: PlaywrightProps<UserProfilePopoverProps>) => {
+    await step("With profile icon", async () => {
+      const canvas = within(canvasElement);
+      const buttonPopover = canvas.queryByRole("button", {
+        name: "More actions",
+      });
+      expect(buttonPopover).not.toBeNull();
+    });
+  },
+};
+
+export const WithoutProfileIcon: StoryObj<UserProfilePopoverProps> = {
+  args: {
+    profileIcon: undefined,
+  },
+  play: async ({
+    canvasElement,
+    step,
+  }: PlaywrightProps<UserProfilePopoverProps>) => {
+    await step("With profile icon", async () => {
+      const canvas = within(canvasElement);
+      const buttonPopover = canvas.queryByRole("button", {
+        name: "More actions",
+      });
+      expect(buttonPopover).not.toBeNull();
+    });
+  },
+};

From 1e3de0087a7aaa1001e976a011b96ecc57417dac Mon Sep 17 00:00:00 2001
From: Ben Schell <ben.schell@okta.com>
Date: Mon, 4 Nov 2024 14:35:35 -0500
Subject: [PATCH 02/15] fix: add back disabling the button when popover is
 opened

---
 .../src/labs/ButtonPopover.tsx                | 25 +++++++++++++++--
 .../odyssey-react-mui/src/labs/Popover.tsx    | 22 +++++++++++++--
 .../src/labs/TopNav/UserProfilePopover.tsx    | 28 +++++++++++++++----
 3 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/ButtonPopover.tsx b/packages/odyssey-react-mui/src/labs/ButtonPopover.tsx
index a02af6733e..9102435cb1 100644
--- a/packages/odyssey-react-mui/src/labs/ButtonPopover.tsx
+++ b/packages/odyssey-react-mui/src/labs/ButtonPopover.tsx
@@ -10,7 +10,14 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, MouseEventHandler, ReactNode, useCallback, useRef } from "react";
+import {
+  memo,
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
 import { Button, ButtonProps } from "../Button";
 import { NullElement } from "../NullElement";
 import { OpenHandle, Popover, PopoverProps } from "./Popover";
@@ -30,6 +37,7 @@ export type ButtonPopoverProps = {
 
 const ButtonPopover = (props: ButtonPopoverProps) => {
   const { children, popoverAlignment, ...buttonProps } = props;
+  const [isOpen, setIsOpen] = useState(false);
 
   // Adding a tooltip to the button means the popover does not get placed in the right location
   delete buttonProps.tooltipText;
@@ -41,15 +49,26 @@ const ButtonPopover = (props: ButtonPopoverProps) => {
     },
     [],
   );
+  const popoverOpened = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+  const popoverClosed = useCallback(() => {
+    setIsOpen(false);
+  }, []);
 
   return (
     <>
       <Button
         {...buttonProps}
-        // isDisabled={isDisabled}
+        isDisabled={buttonProps.isDisabled || isOpen}
         onClick={openPopover}
       />
-      <Popover popoverAlignment={popoverAlignment} popoverRef={popoverRef}>
+      <Popover
+        popoverAlignment={popoverAlignment}
+        popoverRef={popoverRef}
+        onOpen={popoverOpened}
+        onClose={popoverClosed}
+      >
         {children}
       </Popover>
     </>
diff --git a/packages/odyssey-react-mui/src/labs/Popover.tsx b/packages/odyssey-react-mui/src/labs/Popover.tsx
index 67b057120e..aebe898c6c 100644
--- a/packages/odyssey-react-mui/src/labs/Popover.tsx
+++ b/packages/odyssey-react-mui/src/labs/Popover.tsx
@@ -46,9 +46,23 @@ export type PopoverProps = {
    * The contents of the popover
    */
   children: ReactNode | NullElement;
+  /**
+   * Called when the popover has opened
+   */
+  onOpen?: () => void;
+  /**
+   * Called when the popover has closed
+   */
+  onClose?: () => void;
 };
 
-const Popover = ({ popoverRef, popoverAlignment, children }: PopoverProps) => {
+const Popover = ({
+  popoverRef,
+  popoverAlignment,
+  children,
+  onOpen,
+  onClose,
+}: PopoverProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
   const muiProps = useMuiProps();
@@ -60,14 +74,16 @@ const Popover = ({ popoverRef, popoverAlignment, children }: PopoverProps) => {
     () => ({
       openWithElement: (element) => {
         setAnchorEl(element);
+        onOpen && onOpen();
       },
     }),
-    [],
+    [onOpen],
   );
 
   const closePopover = useCallback(() => {
     setAnchorEl(null);
-  }, []);
+    onClose && onClose();
+  }, [onClose]);
 
   const anchorOrigin = useMemo(
     () =>
diff --git a/packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx b/packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx
index 070b88e39f..6302d52f60 100644
--- a/packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx
+++ b/packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx
@@ -10,7 +10,14 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, MouseEventHandler, ReactNode, useCallback, useRef } from "react";
+import {
+  memo,
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
 import {
   Button as MuiButton,
   // ButtonBase as MuiButtonBase,
@@ -40,7 +47,7 @@ const UserProfilePopover = ({
   orgName,
 }: UserProfilePopoverProps) => {
   const muiProps = useMuiProps();
-
+  const [isOpen, setIsOpen] = useState(false);
   const popoverRef = useRef<OpenHandle>(null);
   const openPopover = useCallback<MouseEventHandler<HTMLButtonElement>>(
     (event) => {
@@ -48,6 +55,12 @@ const UserProfilePopover = ({
     },
     [],
   );
+  const popoverOpened = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+  const popoverClosed = useCallback(() => {
+    setIsOpen(false);
+  }, []);
 
   return (
     <>
@@ -78,9 +91,9 @@ const UserProfilePopover = ({
         // translate={translate}
         // type={type}
 
-        // disabled={isOpen}
+        disabled={isOpen}
         onClick={openPopover}
-        variant="floating"
+        variant={isOpen ? "secondary" : "floating"}
       >
         <UserProfile
           profileIcon={profileIcon}
@@ -90,7 +103,12 @@ const UserProfilePopover = ({
         />
       </MuiButton>
 
-      <Popover popoverAlignment={popoverAlignment} popoverRef={popoverRef}>
+      <Popover
+        popoverAlignment={popoverAlignment}
+        popoverRef={popoverRef}
+        onOpen={popoverOpened}
+        onClose={popoverClosed}
+      >
         {children}
       </Popover>
     </>

From 14607bb94a30ceecc3e17a195e5a77abb85c8055 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Date: Mon, 4 Nov 2024 11:17:29 -0500
Subject: [PATCH 03/15] Smarter column expansion in DataView (#2404)

DES-6713 feat: smarter column expansion
---
 .../src/labs/DataView/TableLayoutContent.tsx  |  8 +-
 .../src/theme/components.tsx                  |  6 +-
 .../DataView/DataView.stories.tsx             | 76 +++++++++++++++++++
 3 files changed, 87 insertions(+), 3 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/DataView/TableLayoutContent.tsx b/packages/odyssey-react-mui/src/labs/DataView/TableLayoutContent.tsx
index 19e3942c7c..e09faee930 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/TableLayoutContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/TableLayoutContent.tsx
@@ -308,6 +308,8 @@ const TableLayoutContent = ({
     ],
   );
 
+  const hasColumnWithGrow = columns.some((column) => column.grow === true);
+
   const dataTable = useMaterialReactTable({
     data: !isEmpty && !isNoResults ? data : [],
     columns,
@@ -332,7 +334,7 @@ const TableLayoutContent = ({
       >),
       "mrt-row-actions": {
         header: "",
-        grow: true,
+        grow: !hasColumnWithGrow,
         muiTableBodyCellProps: {
           align: "right" as const,
           sx: {
@@ -372,7 +374,9 @@ const TableLayoutContent = ({
       ref: tableContentRef,
       className:
         !shouldDisplayRowActions && tableLayoutOptions.hasColumnResizing
-          ? "ods-hide-spacer-column"
+          ? hasColumnWithGrow
+            ? "ods-hide-spacer-column"
+            : "ods-hide-spacer-column ods-column-grow"
           : "",
     },
     muiTableContainerProps: {
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 4c29202952..0c2dffff9f 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -2824,13 +2824,17 @@ export const components = ({
             {
               borderTopRightRadius: odysseyTokens.Spacing2,
               borderBottomRightRadius: odysseyTokens.Spacing2,
-              flexGrow: 1,
 
               [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
                 display: "none",
               },
             },
 
+          [`.ods-column-grow .${tableHeadClasses.root} &:nth-last-of-type(2), .ods-column-grow .${tableBodyClasses.root} &:nth-last-of-type(2)`]:
+            {
+              flexGrow: 1,
+            },
+
           ...(ownerState.variant === "number" && {
             textAlign: "end",
             fontFeatureSettings: '"lnum", "tnum"',
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx
index b983bffa17..a35f7471b4 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx
@@ -1069,3 +1069,79 @@ export const CompactCards: StoryObj<DataViewMetaProps> = {
     );
   },
 };
+
+export const GrowColumnWithoutActions: StoryObj<DataViewMetaProps> = {
+  render: function C() {
+    const [data, setData] = useState<Person[]>(personData);
+    const { getData } = useDataCallbacks(data, setData);
+
+    const columns: DataColumns = [
+      {
+        accessorKey: "order",
+        header: "ID",
+        enableColumnFilter: false,
+        grow: true,
+      },
+      {
+        accessorKey: "name",
+        header: "Name",
+      },
+      {
+        accessorKey: "city",
+        header: "City",
+      },
+    ];
+
+    return (
+      <DataView
+        availableLayouts={["table"]}
+        getData={getData}
+        tableLayoutOptions={{
+          columns: columns,
+          hasColumnResizing: true,
+        }}
+      />
+    );
+  },
+};
+
+export const GrowColumnWithActions: StoryObj<DataViewMetaProps> = {
+  render: function C() {
+    const [data, setData] = useState<Person[]>(personData);
+    const { getData } = useDataCallbacks(data, setData);
+
+    const columns: DataColumns = [
+      {
+        accessorKey: "order",
+        header: "ID",
+        enableColumnFilter: false,
+        grow: true,
+      },
+      {
+        accessorKey: "name",
+        header: "Name",
+      },
+      {
+        accessorKey: "city",
+        header: "City",
+      },
+    ];
+
+    const rowActions = useCallback(
+      () => <Button variant="secondary" label="Action" size="small" />,
+      [],
+    );
+
+    return (
+      <DataView
+        availableLayouts={["table"]}
+        getData={getData}
+        tableLayoutOptions={{
+          hasColumnResizing: true,
+          columns: columns,
+          rowActionButtons: rowActions,
+        }}
+      />
+    );
+  },
+};

From 52c6d67c9767e28c587d3a550113ca336c05e9f4 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Date: Mon, 4 Nov 2024 12:53:41 -0500
Subject: [PATCH 04/15] SideNav updates (#2402)

DES-6714 refactor: alphabetize props
feat: add the loading state
feat: add more a11y roles
feat(odyssey-storybook): add SideNavToggleButton
feat(odyssey-storybook): refacor and use new toggle button
test: add unit tests for SideNav
Merge branch 'bc-jk-sidenav-updates' of github.com:okta/odyssey into bc-jk-sidenav-updates
fix: add accessible heading role to sidenav
refactor: replace t with useTranslation in imports
feat(odyssey-storybook): add translations for toggle button
feat(odyssey-storybook): update padding and cleanup footer code
feat: add badge to SideNav
refactor: updating accessibility roles
Merge remote-tracking branch 'origin/main' into bc-jk-sidenav-updates
fix: fixes Side nav collapse icon wasn't showing up over the app content
fix: fix a11y role violations
feat: add overflow scroll to TopNav
fix: adjust width of Heading skeleton
feat(odyssey-storybook): add custom logo props
fix: moves banner above UI Shell

# Conflicts:
#	packages/odyssey-react-mui/src/labs/UiShell/UiShellContent.tsx
fix: fixes styling of TopNav slots and responsiveness

# Conflicts:
#	packages/odyssey-react-mui/src/labs/TopNav/TopNav.tsx
fix: refactors UI Shell scroll logic into useScrollState
fix: minor rename of useScrollState generic
feat(odyssey-storybook): more style updates to match Figma
feat: adds ability to know if UI Shell is rendered on the page
fix: fixes PageTemplate padding for UI Shell mode
fix: adds missing clip-path to TopNav shadow
fix: fixes border not showing up when scrolling side nav in UI Shell
fix: fixes topnav shadow not going over Surface
fix: removes unused expandedWidth
---
 packages/odyssey-react-mui/src/Box.tsx        |   6 +-
 .../src/labs/PageTemplate.tsx                 |  28 +-
 .../src/labs/SideNav/NavAccordion.tsx         |  38 +-
 .../src/labs/SideNav/OktaLogo.tsx             |   1 +
 .../src/labs/SideNav/SideNav.test.tsx         | 323 ++++++++++++
 .../src/labs/SideNav/SideNav.tsx              | 470 +++++++++---------
 .../src/labs/SideNav/SideNavFooterContent.tsx |  64 +--
 .../src/labs/SideNav/SideNavHeader.tsx        |  89 ++--
 .../src/labs/SideNav/SideNavItemContent.tsx   |  96 ++--
 .../labs/SideNav/SideNavItemLinkContent.tsx   |  24 +-
 .../src/labs/SideNav/SideNavLogo.tsx          |  41 ++
 .../src/labs/SideNav/SideNavToggleButton.tsx  | 249 ++++++++++
 .../src/labs/SideNav/types.ts                 | 106 ++--
 .../src/labs/TopNav/TopNav.tsx                |  62 ++-
 .../src/labs/UiShell/UiShell.test.tsx         |   6 +-
 .../src/labs/UiShell/UiShellContent.tsx       |  85 ++--
 .../src/labs/UiShell/index.ts                 |   2 +-
 .../src/labs/UiShell/renderUiShell.test.tsx   |   1 -
 .../src/labs/UiShell/renderUiShell.tsx        |   6 +-
 .../src/labs/UiShell/useHasUiShell.ts         |  25 +
 .../src/labs/UiShell/useScrollState.ts        |  56 +++
 .../properties/odyssey-react-mui.properties   |   5 +
 .../src/theme/components.tsx                  |  10 +-
 .../odyssey-labs/SideNav/SideNav.stories.tsx  | 128 +++--
 .../odyssey-labs/UiShell/UiShell.stories.tsx  |  93 ++--
 25 files changed, 1469 insertions(+), 545 deletions(-)
 create mode 100644 packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/SideNav/SideNavLogo.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/SideNav/SideNavToggleButton.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/UiShell/useHasUiShell.ts
 create mode 100644 packages/odyssey-react-mui/src/labs/UiShell/useScrollState.ts

diff --git a/packages/odyssey-react-mui/src/Box.tsx b/packages/odyssey-react-mui/src/Box.tsx
index 39358e507b..2402b29f36 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, memo } from "react";
+import { AriaRole, ReactNode, forwardRef, memo } from "react";
 
 import type { HtmlProps } from "./HtmlProps";
 
@@ -19,17 +19,19 @@ export type BoxProps = {
   children?: ReactNode;
   component?: MuiBoxProps["component"];
   id?: MuiBoxProps["id"];
+  role?: AriaRole;
   sx?: MuiBoxProps["sx"];
 } & Pick<HtmlProps, "testId" | "translate">;
 
 const Box = forwardRef<HTMLElement, BoxProps>(
-  ({ children, component, id, sx, testId, translate }, ref) => (
+  ({ children, component, id, role, sx, testId, translate }, ref) => (
     <MuiBox
       ref={ref}
       children={children}
       component={component}
       data-se={testId}
       id={id}
+      role={role}
       sx={sx}
       translate={translate}
     />
diff --git a/packages/odyssey-react-mui/src/labs/PageTemplate.tsx b/packages/odyssey-react-mui/src/labs/PageTemplate.tsx
index 2d3e345f77..4ecb333f7d 100644
--- a/packages/odyssey-react-mui/src/labs/PageTemplate.tsx
+++ b/packages/odyssey-react-mui/src/labs/PageTemplate.tsx
@@ -20,6 +20,7 @@ import {
 import { DocumentationIcon } from "../icons.generated";
 import { Heading4, Subordinate } from "../Typography";
 import { Link } from "../Link";
+import { useHasUiShell } from "./UiShell";
 
 export type PageTemplateProps = {
   /**
@@ -72,16 +73,20 @@ type TemplateContentProps = {
 
 const TemplateContainer = styled("div", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "isFullWidth",
+    prop !== "odysseyDesignTokens" &&
+    prop !== "hasUiShell" &&
+    prop !== "isFullWidth",
 })<{
-  odysseyDesignTokens: DesignTokens;
+  hasUiShell: boolean;
   isFullWidth: boolean;
-}>(({ odysseyDesignTokens, isFullWidth }) => ({
+  odysseyDesignTokens: DesignTokens;
+}>(({ hasUiShell, isFullWidth, odysseyDesignTokens }) => ({
   maxWidth: isFullWidth
     ? "100%"
     : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,
-  marginInline: isFullWidth ? odysseyDesignTokens.Spacing6 : "auto",
-  padding: odysseyDesignTokens.Spacing6,
+  marginInline:
+    isFullWidth && !hasUiShell ? odysseyDesignTokens.Spacing6 : "auto",
+  padding: hasUiShell ? 0 : odysseyDesignTokens.Spacing6,
 }));
 
 const TemplateHeader = styled("div")(() => ({
@@ -163,24 +168,27 @@ const TemplateContent = styled("div", {
 );
 
 const PageTemplate = ({
-  title,
+  children,
   description,
   documentationLink,
   documentationText,
+  drawer,
+  isFullWidth = false,
   primaryCallToActionComponent,
   secondaryCallToActionComponent,
   tertiaryCallToActionComponent,
-  children,
-  drawer,
-  isFullWidth = false,
+  title,
 }: PageTemplateProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};
 
+  const hasUiShell = useHasUiShell();
+
   return (
     <TemplateContainer
-      odysseyDesignTokens={odysseyDesignTokens}
+      hasUiShell={hasUiShell}
       isFullWidth={isFullWidth}
+      odysseyDesignTokens={odysseyDesignTokens}
     >
       <TemplateHeader>
         <TemplateHeaderPrimaryContent>
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx b/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx
index a3fff71264..108991dec8 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx
@@ -20,7 +20,7 @@ import {
 import { ReactNode, memo } from "react";
 
 import type { HtmlProps } from "../../HtmlProps";
-import { ChevronRightIcon } from "../../icons.generated";
+import { ChevronDownIcon } from "../../icons.generated";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
@@ -86,26 +86,32 @@ const AccordionSummaryContainer = styled(MuiAccordionSummary, {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" &&
     prop !== "isCompact" &&
-    prop != "isDisabled",
+    prop !== "isDisabled",
 })<{
   odysseyDesignTokens: DesignTokens;
   isCompact?: boolean;
   isDisabled?: boolean;
 }>(({ odysseyDesignTokens, isCompact, isDisabled }) => ({
-  minHeight: isCompact
-    ? `${odysseyDesignTokens.Spacing6}`
-    : `${odysseyDesignTokens.Spacing7}`,
-  padding: isCompact
-    ? `${odysseyDesignTokens.Spacing0} ${odysseyDesignTokens.Spacing4}`
-    : `${odysseyDesignTokens.Spacing2} ${odysseyDesignTokens.Spacing4}`,
-  "&:hover": {
-    backgroundColor: !isDisabled ? odysseyDesignTokens.HueBlue50 : "inherit",
-    "& span": {
-      color: isDisabled
-        ? "default"
-        : `${odysseyDesignTokens.TypographyColorAction}`,
-    },
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingInline: odysseyDesignTokens.Spacing4,
+  lineHeight: 1.5,
+
+  "&:focus-visible": {
+    backgroundColor: "unset",
+    outline: "none",
+    boxShadow: `inset 0 0 0 3px ${odysseyDesignTokens.PalettePrimaryMain}`,
   },
+
+  ...(isCompact && {
+    paddingBlock: odysseyDesignTokens.Spacing2,
+  }),
+
+  ...(!isDisabled && {
+    "&:hover": {
+      backgroundColor: odysseyDesignTokens.HueNeutral50,
+    },
+  }),
 }));
 
 const NavAccordion = ({
@@ -135,7 +141,7 @@ const NavAccordion = ({
       <AccordionSummaryContainer
         className="nav-accordion-summary"
         aria-controls={contentId}
-        expandIcon={<ChevronRightIcon />}
+        expandIcon={<ChevronDownIcon />}
         id={headerId}
         odysseyDesignTokens={odysseyDesignTokens}
         isCompact={isCompact}
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/OktaLogo.tsx b/packages/odyssey-react-mui/src/labs/SideNav/OktaLogo.tsx
index 2196b44fc1..fff50ebfc0 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/OktaLogo.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/OktaLogo.tsx
@@ -21,6 +21,7 @@ const OktaLogo = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
+      <title>Okta</title>
       <path
         d="M55.308 20.5716C52.1058 20.5716 49.8418 18.0813 49.8418 14.8145C49.8418 11.5476 52.1058 9.0574 55.308 9.0574C58.5103 9.0574 60.7097 11.5476 60.7097 14.8145C60.7097 18.0813 58.478 20.5716 55.308 20.5716ZM54.7905 24C57.3782 24 59.5777 22.9972 60.9682 20.8947C61.2267 22.9326 62.7147 23.6763 64.5905 23.6763H66.0785V20.4418H65.4317C64.3643 20.4418 64.1058 19.9242 64.1058 18.7276V5.95153H60.6774V8.57159C59.5131 6.72814 57.3136 5.62842 54.7911 5.62842C50.2952 5.62842 46.1554 9.38051 46.1554 14.8139C46.1554 20.2473 50.2947 24 54.7905 24ZM37.1309 19.5688C37.1309 22.4797 38.942 23.6763 41.1092 23.6763H45.2813V20.4418H42.2412C40.9799 20.4418 40.7209 19.9565 40.7209 18.7276V9.18608H45.2813V5.95153H40.7209V0H37.1309V19.5688ZM20.7972 23.6763H24.3872V16.0758H25.5838L31.6969 23.6763H36.225L28.4301 14.0379L34.4139 5.9521H30.371L25.4869 12.7766H24.3872V0.00113398H20.7972V23.6763ZM9.1532 5.62842C4.13983 5.62842 0 9.38051 0 14.8139C0 20.2473 4.13983 23.9994 9.1532 23.9994C14.1666 23.9994 18.3064 20.2473 18.3064 14.8139C18.3064 9.38051 14.1666 5.62842 9.1532 5.62842ZM9.1532 20.5716C5.95096 20.5716 3.68689 18.0813 3.68689 14.8145C3.68689 11.5476 5.95096 9.0574 9.1532 9.0574C12.3554 9.0574 14.6195 11.5476 14.6195 14.8145C14.6195 18.0813 12.3554 20.5716 9.1532 20.5716Z"
         fill="black"
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx
new file mode 100644
index 0000000000..1083474985
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx
@@ -0,0 +1,323 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { SideNav } from "./SideNav";
+import { OdysseyProvider } from "../../OdysseyProvider";
+
+describe("SideNav", () => {
+  test("can show the default Okta logo", async () => {
+    render(
+      <OdysseyProvider>
+        <SideNav
+          appName="Header text"
+          sideNavItems={[
+            {
+              id: "item0",
+              href: "#",
+              label: "Users",
+            },
+          ]}
+        />
+      </OdysseyProvider>,
+    );
+
+    expect(screen.getByTitle("Okta")).toBeInTheDocument();
+  });
+
+  test("can show a custom logo", async () => {
+    render(
+      <OdysseyProvider>
+        <SideNav
+          appName="Header text"
+          logoProps={{
+            imageAltText: "Custom logo",
+            imageUrl: "https://placehold.co/600x400/EEE/31343C",
+          }}
+          sideNavItems={[
+            {
+              id: "item0",
+              href: "#",
+              label: "Users",
+            },
+          ]}
+        />
+      </OdysseyProvider>,
+    );
+
+    expect(screen.getByAltText("Custom logo")).toBeInTheDocument();
+  });
+
+  test("can show header text", async () => {
+    const headerText = "Header text";
+
+    render(
+      <OdysseyProvider>
+        <SideNav
+          appName={headerText}
+          sideNavItems={[
+            {
+              id: "item0",
+              href: "#",
+              label: "Users",
+            },
+          ]}
+        />
+      </OdysseyProvider>,
+    );
+
+    expect(
+      screen.getByRole("heading", { name: headerText }),
+    ).toBeInTheDocument();
+  });
+
+  test("is collapsible", async () => {
+    const menuItemText = "Users";
+
+    render(
+      <OdysseyProvider>
+        <SideNav
+          isCollapsible
+          appName="Header text"
+          sideNavItems={[
+            {
+              id: "item0",
+              href: "#",
+              label: menuItemText,
+            },
+          ]}
+        />
+      </OdysseyProvider>,
+    );
+
+    expect(screen.getByText(menuItemText)).toBeVisible();
+
+    const collapseButton = screen.getByLabelText("Collapse side navigation");
+    fireEvent.click(collapseButton);
+
+    expect(screen.getByText(menuItemText)).not.toBeVisible;
+
+    const expandButton = screen.getByLabelText("Expand side navigation");
+    fireEvent.click(expandButton);
+
+    expect(screen.getByText(menuItemText)).toBeVisible();
+  });
+
+  test("can fire onCollapse event", async () => {
+    const menuItemText = "Users";
+    const mockOnCollapse = jest.fn();
+
+    render(
+      <OdysseyProvider>
+        <SideNav
+          isCollapsible
+          onCollapse={mockOnCollapse}
+          appName="Header text"
+          sideNavItems={[
+            {
+              id: "item0",
+              href: "#",
+              label: menuItemText,
+            },
+          ]}
+        />
+      </OdysseyProvider>,
+    );
+
+    const collapseButton = screen.getByLabelText("Collapse side navigation");
+    fireEvent.click(collapseButton);
+
+    expect(mockOnCollapse).toBeCalled();
+  });
+
+  test("can fire onExpand event", async () => {
+    const menuItemText = "Users";
+    const mockOnExpand = jest.fn();
+
+    render(
+      <OdysseyProvider>
+        <SideNav
+          isCollapsible
+          onExpand={mockOnExpand}
+          appName="Header text"
+          sideNavItems={[
+            {
+              id: "item0",
+              href: "#",
+              label: menuItemText,
+            },
+          ]}
+        />
+      </OdysseyProvider>,
+    );
+
+    const collapseButton = screen.getByLabelText("Collapse side navigation");
+    fireEvent.click(collapseButton);
+
+    const expandButton = screen.getByLabelText("Expand side navigation");
+    fireEvent.click(expandButton);
+
+    expect(mockOnExpand).toBeCalled();
+  });
+
+  test("shows loading skeleton state", async () => {
+    const menuItemText = "Menu item";
+
+    render(
+      <OdysseyProvider>
+        <SideNav
+          isLoading
+          appName="Header text"
+          sideNavItems={[
+            {
+              id: "item0",
+              href: "#",
+              label: menuItemText,
+            },
+          ]}
+        />
+      </OdysseyProvider>,
+    );
+
+    expect(screen.queryByText(menuItemText)).not.toBeInTheDocument();
+  });
+
+  test("shows footer links", async () => {
+    const footerItemLabel = "Footer item";
+    render(
+      <OdysseyProvider>
+        <SideNav
+          appName="Header text"
+          footerItems={[
+            {
+              id: "footer-item-1",
+              label: footerItemLabel,
+              href: "/",
+            },
+          ]}
+          sideNavItems={[
+            {
+              id: "item0",
+              href: "#",
+              label: "Menu item",
+            },
+          ]}
+        />
+      </OdysseyProvider>,
+    );
+
+    const footer = screen.getByRole("menubar");
+    expect(within(footer).getByText(footerItemLabel)).toBeVisible();
+  });
+
+  test("shows custom footer component", async () => {
+    const footerComponentText = "This is a custom footer component.";
+    const footerComponent = <p>{footerComponentText}</p>;
+
+    render(
+      <OdysseyProvider>
+        <SideNav
+          appName="Header text"
+          footerComponent={footerComponent}
+          hasCustomFooter
+          sideNavItems={[
+            {
+              id: "item0",
+              href: "#",
+              label: "Menu item",
+            },
+          ]}
+        />
+      </OdysseyProvider>,
+    );
+
+    expect(screen.getByText(footerComponentText)).toBeVisible();
+  });
+
+  test("displays sidenav link", async () => {
+    const accordionInner = "Accordion inside";
+    const accordionOuter = "Accordion outside";
+    const headingText = "Heading";
+    const menuClickableText = "Clickable";
+    const menuLinkText = "Link";
+
+    render(
+      <OdysseyProvider>
+        <SideNav
+          appName="Header text"
+          sideNavItems={[
+            {
+              id: "menuClickable",
+              label: menuClickableText,
+              onClick: () => {},
+            },
+            {
+              id: "menuHeading",
+              label: headingText,
+              isSectionHeader: true,
+            },
+            {
+              id: "menuLink",
+              href: "#",
+              label: menuLinkText,
+            },
+            {
+              id: "accordionOuter",
+              label: accordionOuter,
+              children: [
+                {
+                  id: "accordionInner",
+                  href: "#",
+                  label: accordionInner,
+                },
+              ],
+            },
+          ]}
+        />
+      </OdysseyProvider>,
+    );
+
+    expect(screen.getByRole("menuitem", { name: menuLinkText })).toBeVisible();
+    expect(
+      screen.getByRole("button", { name: menuClickableText }),
+    ).toBeVisible();
+    expect(screen.getByRole("heading", { name: headingText })).toBeVisible();
+
+    const accordion = screen.getByText(accordionOuter);
+    expect(screen.getByText(accordionInner)).not.toBeVisible();
+    fireEvent.click(accordion);
+    expect(screen.getByText(accordionInner)).toBeVisible();
+  });
+
+  test("can show notification badge", async () => {
+    const menuItemText = "Menu item text";
+    const badgeCount = 9;
+
+    render(
+      <OdysseyProvider>
+        <SideNav
+          appName="Header text"
+          sideNavItems={[
+            {
+              id: "item0",
+              href: "#",
+              label: menuItemText,
+              count: badgeCount,
+            },
+          ]}
+        />
+      </OdysseyProvider>,
+    );
+
+    expect(screen.getByRole("menuitem")).toHaveTextContent(`${badgeCount}`);
+  });
+});
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx
index ed5276421f..6345bde38a 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx
@@ -10,33 +10,34 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import styled from "@emotion/styled";
+import styled, { CSSObject } from "@emotion/styled";
 import {
   memo,
   useMemo,
   useState,
   useCallback,
-  KeyboardEvent,
   useRef,
   useEffect,
+  KeyboardEventHandler,
 } from "react";
+import { Skeleton } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 import { NavAccordion } from "./NavAccordion";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
+import { OdysseyThemeProvider } from "../../OdysseyThemeProvider";
 import type { SideNavProps } from "./types";
-import { OktaLogo } from "./OktaLogo";
-import { HandleIcon } from "./HandleIcon";
-import { CollapseIcon } from "./CollapseIcon";
 import { SideNavHeader } from "./SideNavHeader";
 import {
   SideNavItemContent,
-  SideNavListItemContainer,
+  StyledSideNavListItem,
 } from "./SideNavItemContent";
 import { SideNavFooterContent } from "./SideNavFooterContent";
 import { SideNavItemContentContext } from "./SideNavItemContentContext";
+import { SideNavToggleButton } from "./SideNavToggleButton";
 
 export const DEFAULT_SIDE_NAV_WIDTH = "300px";
 
@@ -44,13 +45,7 @@ export const DEFAULT_SIDE_NAV_WIDTH = "300px";
 // to align it in the middle of the nav header text
 export const SIDENAV_COLLAPSE_ICON_POSITION = "77px";
 
-const SideNavContainer = styled("div")(() => ({
-  display: "flex",
-  height: "100%",
-  overflow: "hidden",
-}));
-
-const SideNavCollapsedContainer = styled("div", {
+const StyledCollapsibleContent = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
 })(
@@ -61,27 +56,20 @@ const SideNavCollapsedContainer = styled("div", {
     odysseyDesignTokens: DesignTokens;
     isSideNavCollapsed: boolean;
   }) => ({
-    display: "flex",
-    "&:before": {
-      height: "100%",
-      width: 0,
-      content: '""',
-    },
-    "&:has(svg:hover)": {
-      "&:before": {
-        width: isSideNavCollapsed ? "8px" : 0,
-        transitionProperty: "width, background-color",
-        transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-        transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
-        backgroundColor: isSideNavCollapsed
-          ? odysseyDesignTokens.HueNeutral200
-          : "transparent",
-      },
-    },
+    position: "relative",
+    display: "inline-grid",
+    gridTemplateColumns: isSideNavCollapsed ? 0 : DEFAULT_SIDE_NAV_WIDTH,
+    gridTemplateRows: "max-content 1fr max-content",
+    minWidth: isSideNavCollapsed ? 0 : DEFAULT_SIDE_NAV_WIDTH,
+    height: "100%",
+    transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,
+    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+    overflow: "hidden",
+    opacity: isSideNavCollapsed ? 0 : 1,
   }),
 );
 
-const ToggleSideNavHandleContainer = styled("div", {
+const StyledSideNav = styled("nav", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
 })(
@@ -92,60 +80,45 @@ const ToggleSideNavHandleContainer = styled("div", {
     odysseyDesignTokens: DesignTokens;
     isSideNavCollapsed: boolean;
   }) => ({
-    height: 0,
-    cursor: "pointer",
-    marginTop: SIDENAV_COLLAPSE_ICON_POSITION,
-    "& svg:nth-of-type(2)": {
+    position: "relative",
+    display: "inline-block",
+    height: "100%",
+    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+
+    "&::after": {
+      backgroundColor: odysseyDesignTokens.HueNeutral200,
+      content: "''",
+      height: "100%",
       opacity: 0,
-      width: 0,
-      transform: isSideNavCollapsed ? "rotate(180deg)" : "rotate(0deg)",
+      position: "absolute",
+      right: 0,
+      top: 0,
+      transform: `translateX(0)`,
+      transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,
+      width: odysseyDesignTokens.Spacing2,
     },
-    "&:hover, &:focus-visible": {
-      "& svg:nth-of-type(2)": {
-        opacity: 1,
-        width: "32px",
-        padding: odysseyDesignTokens.Spacing2,
-        transitionProperty: "opacity",
-        transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-        transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
-      },
-      "& svg:nth-of-type(1)": {
-        opacity: 0,
-        width: 0,
-        transitionProperty: "opacity",
-        transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-        transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+
+    "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus)":
+      {
+        ...(isSideNavCollapsed && {
+          "&::after": {
+            opacity: 1,
+            transform: `translateX(100%)`,
+          },
+
+          "[data-sidenav-toggle='true']": {
+            transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`,
+          },
+        }),
       },
-    },
-  }),
-);
 
-const SideNavExpandContainer = styled("nav", {
-  shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" &&
-    prop !== "isSideNavCollapsed" &&
-    prop !== "expandedWidth",
-})(
-  ({
-    odysseyDesignTokens,
-    isSideNavCollapsed,
-    expandedWidth,
-  }: {
-    odysseyDesignTokens: DesignTokens;
-    isSideNavCollapsed: boolean;
-    expandedWidth: string;
-  }) => ({
-    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
-    flexDirection: "column",
-    display: "flex",
-    opacity: isSideNavCollapsed ? 0 : 1,
-    visibility: isSideNavCollapsed ? "hidden" : "visible",
-    width: isSideNavCollapsed ? 0 : expandedWidth,
-    minWidth: isSideNavCollapsed ? 0 : expandedWidth,
-    transitionProperty: "opacity",
-    transitionDuration: odysseyDesignTokens.TransitionDurationMain,
-    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
-    borderRight: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,
+    "[data-sidenav-toggle='true']": {
+      position: "absolute",
+      top: SIDENAV_COLLAPSE_ICON_POSITION,
+      right: 0,
+      transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
+      transform: `translate3d(100%, 0, 0)`,
+    },
   }),
 );
 
@@ -160,12 +133,12 @@ const SideNavHeaderContainer = styled("div", {
     hasContentScrolled: boolean;
     odysseyDesignTokens: DesignTokens;
   }) => ({
-    position: "sticky",
-    top: 0,
+    flexShrink: 0,
     // The bottom border should appear only if the scrollable region has been scrolled
-    ...(hasContentScrolled && {
-      borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,
-    }),
+    ...(hasContentScrolled &&
+      ({
+        borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral50}`,
+      } satisfies CSSObject)),
   }),
 );
 
@@ -175,21 +148,28 @@ const SideNavListContainer = styled("ul")(() => ({
   listStyleType: "none",
 }));
 
-const SideNavScrollableContainer = styled("div")(() => ({
-  flex: 1,
+const SideNavScrollableContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  flex: "1 1 100%",
   overflowY: "auto",
+  paddingInline: odysseyDesignTokens.Spacing2,
+}));
+
+const SectionHeaderContainer = styled("li", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingInline: odysseyDesignTokens.Spacing4,
 }));
 
-const SectionHeader = styled("li", {
+const SectionHeader = styled("h3", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
   fontFamily: odysseyDesignTokens.TypographyFamilyHeading,
   fontSize: odysseyDesignTokens.TypographySizeOverline,
   fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
   color: odysseyDesignTokens.HueNeutral600,
-  paddingTop: odysseyDesignTokens.Spacing3,
-  paddingBottom: odysseyDesignTokens.Spacing3,
-  paddingLeft: odysseyDesignTokens.Spacing4,
   textTransform: "uppercase",
 }));
 
@@ -204,15 +184,14 @@ const SideNavFooter = styled("div", {
     isContentScrollable: boolean;
     odysseyDesignTokens: DesignTokens;
   }) => ({
-    position: "sticky",
-    bottom: 0,
-    paddingTop: odysseyDesignTokens.Spacing2,
+    flexShrink: 0,
     transitionProperty: "box-shadow",
     transitionDuration: odysseyDesignTokens.TransitionDurationMain,
     transitionTiming: odysseyDesignTokens.TransitionTimingMain,
+    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
     // The box shadow should appear above the footer only if the scrollable region has overflow
     ...(isContentScrollable && {
-      boxShadow: odysseyDesignTokens.DepthHigh,
+      boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)",
     }),
   }),
 );
@@ -220,37 +199,62 @@ const SideNavFooter = styled("div", {
 const SideNavFooterItemsContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
-  paddingTop: odysseyDesignTokens.Spacing2,
-  paddingBottom: odysseyDesignTokens.Spacing2,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  // paddingBlockEnd: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
   display: "flex",
-  justifyContent: "center",
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographySizeOverline,
-  "& a": {
+
+  a: {
     color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-  },
-  "& a:hover": {
-    textDecoration: "none",
-  },
-  "& a:visited": {
-    color: odysseyDesignTokens.TypographyColorHeading,
+
+    "&:hover": {
+      textDecoration: "none",
+    },
+    "&:visited": {
+      color: odysseyDesignTokens.TypographyColorHeading,
+    },
   },
 }));
 
+const LoadingItemContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  alignItems: "center",
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2,
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing4,
+}));
+
 const getHasScrollableContent = (scrollableContainer: HTMLElement) =>
   scrollableContainer.scrollHeight > scrollableContainer.clientHeight;
 
+const LoadingItem = () => {
+  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
+  return (
+    <LoadingItemContainer odysseyDesignTokens={odysseyDesignTokens}>
+      <Skeleton
+        variant="circular"
+        width={odysseyDesignTokens.Spacing4}
+        height={odysseyDesignTokens.Spacing4}
+      />
+      <Skeleton variant="rounded" width="100%" />
+    </LoadingItemContainer>
+  );
+};
+
 const SideNav = ({
-  customCompanyLogo,
-  expandedWidth = DEFAULT_SIDE_NAV_WIDTH,
+  appName,
   footerComponent,
   footerItems,
-  hasCustomCompanyLogo,
   hasCustomFooter,
   isCollapsible,
   isCompact,
-  appName,
+  isLoading,
+  logoProps,
   onCollapse,
   onExpand,
   sideNavItems,
@@ -262,6 +266,7 @@ const SideNav = ({
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
   const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
 
   useEffect(() => {
     const updateIsContentScrollable = () => {
@@ -343,7 +348,7 @@ const SideNav = ({
       }
       cancelAnimationFrame(resizeObserverDebounceTimer); // Ensure timer is cleared on component unmount
     };
-  }, []);
+  }, [sideNavItems]);
 
   const scrollIntoViewRef = useRef<HTMLLIElement>(null);
   /**
@@ -422,8 +427,10 @@ const SideNav = ({
     setSideNavCollapsed(!isSideNavCollapsed);
   }, [isSideNavCollapsed, setSideNavCollapsed, onExpand, onCollapse]);
 
-  const sideNavExpandKeyHandler = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
+  const sideNavExpandKeyHandler = useCallback<
+    KeyboardEventHandler<HTMLButtonElement>
+  >(
+    (event) => {
       if (event?.key === "Enter" || event?.code === "Space") {
         event.preventDefault();
         sideNavExpandClickHandler();
@@ -433,131 +440,130 @@ const SideNav = ({
   );
 
   return (
-    <SideNavContainer>
-      <SideNavExpandContainer
-        odysseyDesignTokens={odysseyDesignTokens}
-        isSideNavCollapsed={isSideNavCollapsed}
-        data-se="expanded-region"
-        expandedWidth={expandedWidth}
-        aria-label={appName}
-      >
-        <SideNavHeaderContainer
+    <StyledSideNav
+      aria-label={t("navigation.label")}
+      id="side-nav-expandable"
+      isSideNavCollapsed={isSideNavCollapsed}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      {isCollapsible && (
+        <SideNavToggleButton
+          ariaControls="side-nav-expandable"
+          isSideNavCollapsed={isSideNavCollapsed}
+          onClick={sideNavExpandClickHandler}
+          onKeyDown={sideNavExpandKeyHandler}
+        />
+      )}
+      <OdysseyThemeProvider>
+        <StyledCollapsibleContent
+          data-se="collapsible-region"
+          isSideNavCollapsed={isSideNavCollapsed}
           odysseyDesignTokens={odysseyDesignTokens}
-          hasContentScrolled={hasContentScrolled}
         >
-          <SideNavHeader
-            appName={appName}
-            companyLogo={
-              hasCustomCompanyLogo ? customCompanyLogo : <OktaLogo />
-            }
-          />
-        </SideNavHeaderContainer>
-        <SideNavScrollableContainer data-se="scrollable-region">
-          <SideNavListContainer ref={scrollableContentRef}>
-            {processedSideNavItems?.map((item) => {
-              const {
-                id,
-                label,
-                isSectionHeader,
-                startIcon,
-                children,
-                isDefaultExpanded,
-                isDisabled,
-                isExpanded,
-              } = item;
-
-              if (isSectionHeader) {
-                return (
-                  <SectionHeader
-                    id={id}
-                    key={id}
-                    odysseyDesignTokens={odysseyDesignTokens}
-                  >
-                    {label}
-                  </SectionHeader>
-                );
-              } else if (children) {
-                return (
-                  <SideNavListItemContainer
-                    id={id}
-                    key={id}
-                    odysseyDesignTokens={odysseyDesignTokens}
-                    disabled={isDisabled}
-                    aria-disabled={isDisabled}
-                  >
-                    <NavAccordion
-                      label={label}
-                      isCompact={isCompact}
-                      isDefaultExpanded={isDefaultExpanded}
-                      isExpanded={isExpanded}
-                      startIcon={startIcon}
-                      isDisabled={isDisabled}
-                    >
-                      <SideNavListContainer id={`${id}-list`}>
-                        {children}
-                      </SideNavListContainer>
-                    </NavAccordion>
-                  </SideNavListItemContainer>
-                );
-              } else {
-                return (
-                  <SideNavItemContentContext.Provider
-                    key={item.id}
-                    value={sideNavItemContentProviderValue}
-                  >
-                    <SideNavItemContent
-                      {...item}
-                      key={item.id}
-                      scrollRef={getRefIfThisIsFirstNodeWithIsSelected(item.id)}
-                    />
-                  </SideNavItemContentContext.Provider>
-                );
-              }
-            })}
-          </SideNavListContainer>
-        </SideNavScrollableContainer>
-        {(footerItems || hasCustomFooter) && (
-          <SideNavFooter
+          <SideNavHeaderContainer
             odysseyDesignTokens={odysseyDesignTokens}
-            isContentScrollable={isContentScrollable}
+            hasContentScrolled={hasContentScrolled}
           >
-            {hasCustomFooter
-              ? footerComponent
-              : footerItems && (
-                  <SideNavFooterItemsContainer
-                    odysseyDesignTokens={odysseyDesignTokens}
-                  >
-                    <SideNavFooterContent footerItems={footerItems} />
-                  </SideNavFooterItemsContainer>
-                )}
-          </SideNavFooter>
-        )}
-      </SideNavExpandContainer>
-      {isCollapsible && (
-        <SideNavCollapsedContainer
-          odysseyDesignTokens={odysseyDesignTokens}
-          isSideNavCollapsed={isSideNavCollapsed}
-          data-se="collapsed-region"
-        >
-          <ToggleSideNavHandleContainer
+            <SideNavHeader
+              appName={appName}
+              isLoading={isLoading}
+              logoProps={logoProps}
+            />
+          </SideNavHeaderContainer>
+          <SideNavScrollableContainer
             odysseyDesignTokens={odysseyDesignTokens}
-            isSideNavCollapsed={isSideNavCollapsed}
-            tabIndex={0}
-            role="button"
-            onClick={sideNavExpandClickHandler}
-            onKeyDown={sideNavExpandKeyHandler}
-            aria-label={
-              isSideNavCollapsed
-                ? "expand side navigation"
-                : "collapse side navigation"
-            }
+            data-se="scrollable-region"
           >
-            <HandleIcon />
-            <CollapseIcon />
-          </ToggleSideNavHandleContainer>
-        </SideNavCollapsedContainer>
-      )}
-    </SideNavContainer>
+            <SideNavListContainer role="list" ref={scrollableContentRef}>
+              {isLoading
+                ? [...Array(6)].map((_, index) => <LoadingItem key={index} />)
+                : processedSideNavItems?.map((item) => {
+                    const {
+                      id,
+                      label,
+                      isSectionHeader,
+                      startIcon,
+                      children,
+                      isDefaultExpanded,
+                      isDisabled,
+                      isExpanded,
+                    } = item;
+
+                    if (isSectionHeader) {
+                      return (
+                        <SectionHeaderContainer
+                          id={id}
+                          key={id}
+                          odysseyDesignTokens={odysseyDesignTokens}
+                        >
+                          <SectionHeader
+                            odysseyDesignTokens={odysseyDesignTokens}
+                          >
+                            {label}
+                          </SectionHeader>
+                        </SectionHeaderContainer>
+                      );
+                    } else if (children) {
+                      return (
+                        <StyledSideNavListItem
+                          id={id}
+                          key={id}
+                          odysseyDesignTokens={odysseyDesignTokens}
+                          disabled={isDisabled}
+                          aria-disabled={isDisabled}
+                        >
+                          <NavAccordion
+                            label={label}
+                            isCompact={isCompact}
+                            isDefaultExpanded={isDefaultExpanded}
+                            isExpanded={isExpanded}
+                            startIcon={startIcon}
+                            isDisabled={isDisabled}
+                          >
+                            <SideNavListContainer id={`${id}-list`} role="list">
+                              {children}
+                            </SideNavListContainer>
+                          </NavAccordion>
+                        </StyledSideNavListItem>
+                      );
+                    } else {
+                      return (
+                        <SideNavItemContentContext.Provider
+                          key={item.id}
+                          value={sideNavItemContentProviderValue}
+                        >
+                          <SideNavItemContent
+                            {...item}
+                            key={item.id}
+                            scrollRef={getRefIfThisIsFirstNodeWithIsSelected(
+                              item.id,
+                            )}
+                          />
+                        </SideNavItemContentContext.Provider>
+                      );
+                    }
+                  })}
+            </SideNavListContainer>
+          </SideNavScrollableContainer>
+          {!isLoading && (footerItems || hasCustomFooter) && (
+            <SideNavFooter
+              odysseyDesignTokens={odysseyDesignTokens}
+              isContentScrollable={isContentScrollable}
+            >
+              {hasCustomFooter
+                ? footerComponent
+                : footerItems && (
+                    <SideNavFooterItemsContainer
+                      odysseyDesignTokens={odysseyDesignTokens}
+                    >
+                      <SideNavFooterContent footerItems={footerItems} />
+                    </SideNavFooterItemsContainer>
+                  )}
+            </SideNavFooter>
+          )}
+        </StyledCollapsibleContent>
+      </OdysseyThemeProvider>
+    </StyledSideNav>
   );
 };
 
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavFooterContent.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavFooterContent.tsx
index c05a4c650b..2fbef7d2f6 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNavFooterContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavFooterContent.tsx
@@ -11,10 +11,30 @@
  */
 
 import { memo, useMemo } from "react";
-import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
+import styled from "@emotion/styled";
+
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../../OdysseyDesignTokensContext";
 import type { SideNavFooterItem } from "./types";
 import { Box } from "../../Box";
 import { Link } from "../../Link";
+import { useTranslation } from "react-i18next";
+
+const StyledFooterNav = styled("nav")({
+  display: "flex",
+});
+
+const StyledFooterItemContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  "& + &": {
+    marginInlineStart: odysseyDesignTokens.Spacing4,
+    paddingInlineStart: odysseyDesignTokens.Spacing4,
+    borderInlineStart: `1px solid ${odysseyDesignTokens.HueNeutral300}`,
+  },
+}));
 
 const SideNavFooterContent = ({
   footerItems,
@@ -22,41 +42,29 @@ const SideNavFooterContent = ({
   footerItems: SideNavFooterItem[];
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
 
-  const footerContent = useMemo(() => {
-    return footerItems?.map((item, index) => (
-      <Box
-        key={`${item.id}-wrapper`}
-        sx={{
-          display: "flex",
-        }}
+  const memoizedFooterContent = useMemo(() => {
+    return footerItems?.map((item) => (
+      <StyledFooterItemContainer
+        key={item.id}
+        odysseyDesignTokens={odysseyDesignTokens}
+        role="menuitem"
       >
         {item.href ? (
-          <Link key={item.id} href={item.href}>
-            {item.label}
-          </Link>
+          <Link href={item.href}>{item.label}</Link>
         ) : (
-          <Box component="span" key={item.id}>
-            {item.label}
-          </Box>
-        )}
-        {index < footerItems.length - 1 && (
-          <Box
-            key={`${item.id}-separator`}
-            sx={{
-              marginLeft: odysseyDesignTokens.Spacing4,
-              marginRight: odysseyDesignTokens.Spacing4,
-              color: odysseyDesignTokens.HueNeutral300,
-            }}
-          >
-            |
-          </Box>
+          <Box component="span">{item.label}</Box>
         )}
-      </Box>
+      </StyledFooterItemContainer>
     ));
   }, [footerItems, odysseyDesignTokens]);
 
-  return footerContent;
+  return (
+    <StyledFooterNav role="menubar" aria-label={t("navigation.footer")}>
+      {memoizedFooterContent}
+    </StyledFooterNav>
+  );
 };
 const MemoizedSideNavFooterContent = memo(SideNavFooterContent);
 MemoizedSideNavFooterContent.displayName = "SideNavFooterContent";
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavHeader.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavHeader.tsx
index 25f5dff705..7232e6d614 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNavHeader.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavHeader.tsx
@@ -11,76 +11,91 @@
  */
 
 import styled from "@emotion/styled";
-import { memo, useMemo, type ReactElement } from "react";
+import { memo } from "react";
+import { Skeleton } from "@mui/material";
+
 import {
   type DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
-import { Box } from "../../Box";
+import { SideNavLogo } from "./SideNavLogo";
+import { SideNavProps } from "./types";
 import { Heading6 } from "../../Typography";
 import { TOP_NAV_HEIGHT } from "../TopNav";
 
+const SideNavHeaderContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+  zIndex: 1,
+}));
+
 const SideNavLogoContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  display: "flex",
+  alignItems: "center",
   height: TOP_NAV_HEIGHT,
-  padding: odysseyDesignTokens.Spacing3,
-  borderColor: odysseyDesignTokens.HueNeutral50,
-  borderStyle: odysseyDesignTokens.BorderStyleMain,
-  borderWidth: 0,
-  borderBottomWidth: odysseyDesignTokens.BorderWidthMain,
+  padding: odysseyDesignTokens.Spacing4,
+
+  "svg, img": {
+    maxHeight: "100%",
+    width: "auto",
+    maxWidth: "100%",
+  },
 }));
 
-const SideNavHeaderContainer = styled("div", {
+const SideNavHeadingContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
-  paddingLeft: odysseyDesignTokens.Spacing4,
-  paddingRight: odysseyDesignTokens.Spacing4,
-  paddingTop: odysseyDesignTokens.Spacing3,
-  paddingBottom: odysseyDesignTokens.Spacing3,
+  padding: odysseyDesignTokens.Spacing4,
+  width: "100%",
+
+  ["& .MuiTypography-root"]: {
+    margin: 0,
+    width: "100%",
+  },
 }));
 
-export type SideNavHeader = {
+export type SideNavHeaderProps = {
   /**
    * The app's name.
    */
   appName: string;
   /**
-   * Company logo that displays above the app name.
+   * If the side nav currently has no items, it will be loading.
    */
-  companyLogo: ReactElement;
-};
+  isLoading?: boolean;
+} & Pick<SideNavProps, "logoProps">;
 
-const SideNavHeader = ({ appName, companyLogo }: SideNavHeader) => {
+const SideNavHeader = ({
+  appName,
+  isLoading,
+  logoProps,
+}: SideNavHeaderProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
-  const sideNavHeaderStyles = useMemo(
-    () => ({
-      marginTop: odysseyDesignTokens.Spacing2,
-    }),
-    [odysseyDesignTokens],
-  );
-
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
+    <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>
       <SideNavLogoContainer odysseyDesignTokens={odysseyDesignTokens}>
-        {companyLogo}
+        {isLoading ? (
+          //  The skeleton takes the hardcoded dimensions of the Okta logo
+          <Skeleton variant="rounded" height={24} width={67} />
+        ) : (
+          <SideNavLogo {...logoProps} />
+        )}
       </SideNavLogoContainer>
 
-      <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>
-        <Box sx={sideNavHeaderStyles}>
-          <Heading6>{appName}</Heading6>
-        </Box>
-      </SideNavHeaderContainer>
-    </Box>
+      <SideNavHeadingContainer odysseyDesignTokens={odysseyDesignTokens}>
+        <Heading6 component="h2">{isLoading ? <Skeleton /> : appName}</Heading6>
+      </SideNavHeadingContainer>
+    </SideNavHeaderContainer>
   );
 };
 
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx
index ff497a3c7d..b27c6101eb 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx
@@ -32,7 +32,7 @@ import {
 } from "./SideNavItemContentContext";
 import { ExternalLinkIcon } from "../../icons.generated";
 
-export const SideNavListItemContainer = styled("li", {
+export const StyledSideNavListItem = styled("li", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" && prop !== "isSelected",
 })<{
@@ -42,8 +42,16 @@ export const SideNavListItemContainer = styled("li", {
 }>(({ odysseyDesignTokens, isSelected }) => ({
   display: "flex",
   alignItems: "center",
-  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "unset",
-  margin: `${odysseyDesignTokens.Spacing1} 0`,
+  backgroundColor: "unset",
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  lineHeight: 1.5,
+  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+
+  ...(isSelected && {
+    color: `${odysseyDesignTokens.TypographyColorAction} !important`,
+    backgroundColor: odysseyDesignTokens.HueBlue50,
+  }),
+
   "&:last-child": {
     marginBottom: odysseyDesignTokens.Spacing2,
   },
@@ -67,44 +75,61 @@ const GetNavItemContentStyles = ({
   odysseyDesignTokens,
   contextValue,
   isDisabled,
+  isSelected,
 }: {
   odysseyDesignTokens: DesignTokens;
   contextValue: SideNavItemContentContextValue;
   isDisabled?: boolean;
+  isSelected?: boolean;
 }) => {
   return {
     display: "flex",
     alignItems: "center",
     width: "100%",
     textDecoration: "none",
-    color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
-    minHeight: contextValue.isCompact
-      ? odysseyDesignTokens.Spacing6
-      : odysseyDesignTokens.Spacing7,
-    padding: contextValue.isCompact
-      ? `${odysseyDesignTokens.Spacing0} ${odysseyDesignTokens.Spacing4} ${odysseyDesignTokens.Spacing0} calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth})`
-      : `${odysseyDesignTokens.Spacing2} ${odysseyDesignTokens.Spacing4} ${odysseyDesignTokens.Spacing2} calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth})`,
-    "&:focus-visible": {
-      borderRadius: 0,
-      outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
-      outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
-      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    minHeight: odysseyDesignTokens.Spacing7,
+    paddingBlock: odysseyDesignTokens.Spacing4,
+    paddingInline: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth})`,
+    borderRadius: odysseyDesignTokens.BorderRadiusMain,
+    transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+
+    "&:hover": {
       textDecoration: "none",
-      outlineOffset: 0,
-      color: isDisabled
-        ? "default"
-        : `${odysseyDesignTokens.TypographyColorAction} !important`,
+      cursor: "pointer",
       backgroundColor: !isDisabled
         ? odysseyDesignTokens.HueNeutral50
         : "inherit",
+
+      ...(isDisabled && {
+        color: "inherit",
+        cursor: "default",
+      }),
+
+      ...(isSelected && {
+        "&:hover": {
+          backgroundColor: odysseyDesignTokens.HueBlue50,
+        },
+      }),
     },
-    "&:hover": {
-      textDecoration: "none",
-      cursor: isDisabled ? "default" : "pointer",
-      color: isDisabled
-        ? "default"
-        : `${odysseyDesignTokens.TypographyColorAction} !important`,
-      backgroundColor: !isDisabled ? odysseyDesignTokens.HueBlue50 : "inherit",
+
+    ...(isSelected && {
+      color: `${odysseyDesignTokens.TypographyColorAction} !important`,
+      fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,
+    }),
+
+    ...(isDisabled && {
+      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
+    }),
+
+    ...(contextValue.isCompact && {
+      paddingBlock: odysseyDesignTokens.Spacing1,
+      minHeight: odysseyDesignTokens.Spacing6,
+    }),
+
+    "&:focus-visible": {
+      outline: "none",
+      boxShadow: `inset 0 0 0 3px ${odysseyDesignTokens.PalettePrimaryMain}`,
     },
   };
 };
@@ -113,17 +138,20 @@ const NavItemContentContainer = styled("div", {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" &&
     prop != "contextValue" &&
-    prop !== "isDisabled",
+    prop !== "isDisabled" &&
+    prop !== "isSelected",
 })(GetNavItemContentStyles);
 
 const NavItemLinkContainer = styled(NavItemLink, {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" &&
     prop != "contextValue" &&
-    prop !== "isDisabled",
+    prop !== "isDisabled" &&
+    prop !== "isSelected",
 })(GetNavItemContentStyles);
 
 const SideNavItemContent = ({
+  count,
   id,
   label,
   href,
@@ -138,6 +166,7 @@ const SideNavItemContent = ({
   scrollRef,
 }: Pick<
   SideNavItem,
+  | "count"
   | "id"
   | "label"
   | "href"
@@ -186,13 +215,14 @@ const SideNavItemContent = ({
   );
 
   return (
-    <SideNavListItemContainer
+    <StyledSideNavListItem
       ref={localScrollRef}
       id={id}
       key={id}
       isSelected={isSelected}
       disabled={isDisabled}
       aria-disabled={isDisabled}
+      aria-current={isSelected ? "page" : undefined}
       odysseyDesignTokens={odysseyDesignTokens}
     >
       {
@@ -202,8 +232,10 @@ const SideNavItemContent = ({
             odysseyDesignTokens={odysseyDesignTokens}
             contextValue={contextValue}
             isDisabled={isDisabled}
+            isSelected={isSelected}
           >
             <SideNavItemLinkContent
+              count={count}
               label={label}
               startIcon={startIcon}
               endIcon={endIcon}
@@ -216,12 +248,12 @@ const SideNavItemContent = ({
             odysseyDesignTokens={odysseyDesignTokens}
             contextValue={contextValue}
             isDisabled={isDisabled}
-            role="button"
             tabIndex={0}
             onClick={onClick}
             onKeyDown={sideNavItemContentKeyHandler}
           >
             <SideNavItemLinkContent
+              count={count}
               label={label}
               startIcon={startIcon}
               endIcon={endIcon}
@@ -234,11 +266,13 @@ const SideNavItemContent = ({
             odysseyDesignTokens={odysseyDesignTokens}
             contextValue={contextValue}
             isDisabled={isDisabled}
+            isSelected={isSelected}
             href={href}
             target={target}
             onClick={onClick}
           >
             <SideNavItemLinkContent
+              count={count}
               label={label}
               startIcon={startIcon}
               endIcon={endIcon}
@@ -253,7 +287,7 @@ const SideNavItemContent = ({
           </NavItemLinkContainer>
         )
       }
-    </SideNavListItemContainer>
+    </StyledSideNavListItem>
   );
 };
 const MemoizedSideNavItemContent = memo(SideNavItemContent);
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx
index bb0979a88b..e8d319a986 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx
@@ -19,6 +19,7 @@ import {
 import { Box } from "../../Box";
 import { Status } from "../../Status";
 import type { SideNavItem } from "./types";
+import { Badge } from "../../Badge";
 
 const SideNavItemLabelContainer = styled("div", {
   shouldForwardProp: (prop) =>
@@ -32,11 +33,11 @@ const SideNavItemLabelContainer = styled("div", {
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographyScale0,
-  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
-  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
 }));
 
 const SideNavItemLinkContent = ({
+  count,
   label,
   startIcon,
   endIcon,
@@ -44,13 +45,16 @@ const SideNavItemLinkContent = ({
   statusLabel,
 }: Pick<
   SideNavItem,
-  "label" | "startIcon" | "endIcon" | "severity" | "statusLabel"
+  "count" | "label" | "startIcon" | "endIcon" | "severity" | "statusLabel"
 >): ReactNode => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
   const sideNavItemContentStyles = useMemo(
     () => ({
-      marginLeft: odysseyDesignTokens.Spacing2,
+      alignItems: "center",
+      display: "flex",
+      gap: odysseyDesignTokens.Spacing1,
+      marginInlineStart: odysseyDesignTokens.Spacing2,
     }),
     [odysseyDesignTokens],
   );
@@ -62,11 +66,17 @@ const SideNavItemLinkContent = ({
         odysseyDesignTokens={odysseyDesignTokens}
         isIconVisible={Boolean(startIcon)}
       >
-        {Boolean(startIcon)}
         {label}
-        {severity && (
+        {!count && severity && (
           <Box sx={sideNavItemContentStyles}>
-            <Status severity={severity} label={statusLabel || ""} />
+            {severity && (
+              <Status severity={severity} label={statusLabel || ""} />
+            )}
+          </Box>
+        )}
+        {!severity && count && (
+          <Box sx={sideNavItemContentStyles}>
+            {count && <Badge badgeContent={count} />}
           </Box>
         )}
       </SideNavItemLabelContainer>
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavLogo.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavLogo.tsx
new file mode 100644
index 0000000000..f6983025df
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavLogo.tsx
@@ -0,0 +1,41 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useMemo } from "react";
+import { OktaLogo } from "./OktaLogo";
+import { SideNavLogoProps } from "./types";
+
+const SideNavLogo = ({
+  imageAltText,
+  href,
+  logoComponent,
+  imageUrl,
+}: SideNavLogoProps) => {
+  const logo = useMemo(() => {
+    if (logoComponent) {
+      return logoComponent;
+    }
+
+    if (imageAltText && imageUrl) {
+      return <img src={imageUrl} alt={imageAltText} />;
+    }
+
+    return <OktaLogo />;
+  }, [imageAltText, logoComponent, imageUrl]);
+
+  return href ? <a href={href}>{logo}</a> : logo;
+};
+
+const MemoizedSideNavLogo = memo(SideNavLogo);
+MemoizedSideNavLogo.displayName = "SideNavLogo";
+
+export { MemoizedSideNavLogo as SideNavLogo };
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavToggleButton.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavToggleButton.tsx
new file mode 100644
index 0000000000..5d8c166f04
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavToggleButton.tsx
@@ -0,0 +1,249 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Button as MuiButton } from "@mui/material";
+import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import {
+  HTMLAttributes,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+
+import { FocusHandle } from "../../inputUtils";
+import { MuiPropsContext, MuiPropsContextType } from "../../MuiPropsContext";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import { Tooltip } from "../../Tooltip";
+
+const StyledToggleButton = styled(MuiButton, {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
+})(
+  ({
+    isSideNavCollapsed,
+    odysseyDesignTokens,
+  }: {
+    isSideNavCollapsed: boolean;
+    odysseyDesignTokens: DesignTokens;
+  }) => ({
+    backgroundColor: "transparent",
+    position: "relative",
+    width: odysseyDesignTokens.Spacing6,
+    height: odysseyDesignTokens.Spacing6,
+    border: 0,
+    zIndex: 2,
+
+    "&:focus-visible": {
+      boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
+      outline: "none",
+    },
+
+    "&:hover, &:focus": {
+      backgroundColor: "transparent",
+
+      "#lineOne": {
+        animation:
+          "lineOne-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)",
+        animationFillMode: "forwards",
+        "@keyframes lineOne-animate-to-collapse": {
+          "0%": {
+            transform: "translate3d(-50%, -50%, 0)",
+          },
+          "50%": {
+            transform: "translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)",
+          },
+          "100%": {
+            transform: "translate3d(-50%, -27%, 0) rotate(-45deg) scaleY(.75)",
+          },
+        },
+      },
+
+      "#lineTwo": {
+        animation:
+          "lineTwo-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)",
+        animationFillMode: "forwards",
+        "@keyframes lineTwo-animate-to-collapse": {
+          "0%": {
+            transform: "translate3d(-50%, -50%, 0)",
+          },
+          "50%": {
+            transform: "translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)",
+          },
+          "100%": {
+            transform: "translate3d(-50%, -73%, 0) rotate(-135deg) scaleY(.75)",
+          },
+        },
+      },
+
+      ...(isSideNavCollapsed && {
+        "#lineOne": {
+          animation:
+            "lineOne-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)",
+          animationFillMode: "forwards",
+          "@keyframes lineOne-animate-to-expand": {
+            "0%": {
+              transform: "translate3d(-50%, -50%, 0)",
+            },
+            "50%": {
+              transform: "translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)",
+            },
+            "100%": {
+              transform:
+                "translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)",
+            },
+          },
+        },
+
+        "#lineTwo": {
+          animation:
+            "lineTwo-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)",
+          animationFillMode: "forwards",
+          "@keyframes lineTwo-animate-to-expand": {
+            "0%": {
+              transform: "translate3d(-50%, -50%, 0)",
+            },
+            "50%": {
+              transform: "translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)",
+            },
+            "100%": {
+              transform: "translate3d(-50%, -27%, 0) rotate(45deg) scaleY(.75)",
+            },
+          },
+        },
+      }),
+    },
+
+    span: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: "2px",
+      height: odysseyDesignTokens.Spacing4,
+      backgroundColor: odysseyDesignTokens.HueNeutral500,
+      transform: "translate3d(-50%, -50%, 0)",
+      transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
+    },
+  }),
+);
+
+export type SideNavToggleButtonProps = {
+  /**
+   * The ref forwarded to the Button
+   */
+  buttonRef?: React.RefObject<FocusHandle>;
+  /**
+   * The `id` of the item this button controls
+   */
+  ariaControls: string;
+  /**
+   * The ID of the Button
+   */
+  id?: string;
+  isSideNavCollapsed: boolean;
+  tabIndex?: HTMLAttributes<HTMLElement>["tabIndex"];
+  /**
+   * The click event handler for the Button
+   */
+  onClick?: MuiButtonProps["onClick"];
+  onKeyDown?: MuiButtonProps["onKeyDown"];
+};
+
+const SideNavToggleButton = ({
+  ariaControls,
+  buttonRef,
+  id,
+  isSideNavCollapsed,
+  onClick,
+  tabIndex,
+}: SideNavToggleButtonProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+
+  const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);
+
+  useImperativeHandle(
+    buttonRef,
+    () => ({
+      focus: () => {
+        localButtonRef.current?.focus();
+      },
+    }),
+    [],
+  );
+
+  const toggleLabel = useMemo(
+    () =>
+      isSideNavCollapsed
+        ? t("sidenav.toggle.expand")
+        : t("sidenav.toggle.collapse"),
+    [isSideNavCollapsed, t],
+  );
+
+  const renderButton = useCallback(
+    (muiProps: MuiPropsContextType) => {
+      return (
+        <StyledToggleButton
+          {...muiProps}
+          aria-controls={ariaControls}
+          aria-expanded={!isSideNavCollapsed}
+          aria-label={toggleLabel}
+          data-sidenav-toggle={true}
+          id={id}
+          isSideNavCollapsed={isSideNavCollapsed}
+          odysseyDesignTokens={odysseyDesignTokens}
+          onClick={onClick}
+          ref={(element) => {
+            if (element) {
+              (
+                localButtonRef as React.MutableRefObject<HTMLButtonElement>
+              ).current = element;
+              //@ts-expect-error ref is not an optional prop on the props context type
+              muiProps?.ref?.(element);
+            }
+          }}
+          tabIndex={tabIndex}
+          variant="floating"
+        >
+          <span id="lineOne" />
+          <span id="lineTwo" />
+        </StyledToggleButton>
+      );
+    },
+    [
+      ariaControls,
+      id,
+      isSideNavCollapsed,
+      odysseyDesignTokens,
+      onClick,
+      tabIndex,
+      toggleLabel,
+    ],
+  );
+
+  return (
+    <Tooltip ariaType="description" placement="right" text={toggleLabel}>
+      <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>
+    </Tooltip>
+  );
+};
+
+const MemoizedSideNavToggleButton = memo(SideNavToggleButton);
+MemoizedSideNavToggleButton.displayName = "SideNavToggleButton";
+
+export { MemoizedSideNavToggleButton as SideNavToggleButton };
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/types.ts b/packages/odyssey-react-mui/src/labs/SideNav/types.ts
index 8afede98ba..7b52d539b7 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/types.ts
+++ b/packages/odyssey-react-mui/src/labs/SideNav/types.ts
@@ -14,6 +14,41 @@ import type { ReactElement } from "react";
 import type { HtmlProps } from "../../HtmlProps";
 import type { statusSeverityValues } from "../../Status";
 
+export type SideNavLogoProps = {
+  href?: string;
+} & (
+  | {
+      /**
+       * a component to render as the logo
+       */
+      logoComponent: ReactElement;
+      imageAltText?: never;
+      imageUrl?: never;
+    }
+  | {
+      /**
+       * The src url to render in an `img` tag
+       */
+      imageUrl: string;
+      /**
+       * alt text for the img logo
+       */
+      imageAltText: string;
+      logoComponent?: never;
+    }
+  | {
+      /**
+       * The src url to render in an `img` tag
+       */
+      imageUrl?: never;
+      /**
+       * alt text for the img logo
+       */
+      imageAltText?: never;
+      logoComponent?: never;
+    }
+);
+
 export type SideNavProps = {
   /**
    * Side Nav header text that is usually reserved to show the App name
@@ -27,6 +62,14 @@ export type SideNavProps = {
    *  Determines whether the side nav items use compact layout
    */
   isCompact?: boolean;
+  /**
+   *  Before the side nav has items, it will be in a loading state.
+   */
+  isLoading?: boolean;
+  /**
+   * An optional logo component or src string for an img to display in the header. If not provided, will default to the Okta logo
+   */
+  logoProps?: SideNavLogoProps;
   /**
    *  Triggers when the side nav is collapsed
    */
@@ -39,54 +82,36 @@ export type SideNavProps = {
    * Nav items in the side nav
    */
   sideNavItems: SideNavItem[];
-  /**
-   * A CSS length string indicating the customizable expanded width of the SideNav container.
-   * (it will be smaller if isCollapsible and collapsed)
-   */
-  expandedWidth?: string;
 } & (
   | {
       /**
-       * An optional logo to display in the header. If not provided, will default to the Okta logo.
-       */
-      customCompanyLogo: ReactElement;
-      /**
-       * Use the built-in Okta logo or a custom one.
+       * The component to display as the footer; if present the `footerItems` are ignored and not rendered.
        */
-      hasCustomCompanyLogo: true;
+      footerComponent?: ReactElement;
+      footerItems?: never;
+      hasCustomFooter: true;
     }
   | {
-      customCompanyLogo?: never;
-      hasCustomCompanyLogo?: false;
+      footerComponent?: never;
+      /**
+       * Footer items in the side nav
+       */
+      footerItems?: SideNavFooterItem[];
+      hasCustomFooter?: false;
     }
 ) &
-  (
-    | {
-        /**
-         * The component to display as the footer; if present the `footerItems` are ignored and not rendered.
-         */
-        footerComponent?: ReactElement;
-        footerItems?: never;
-        hasCustomFooter: true;
-      }
-    | {
-        footerComponent?: never;
-        /**
-         * Footer items in the side nav
-         */
-        footerItems?: SideNavFooterItem[];
-        hasCustomFooter?: false;
-      }
-  ) &
   Pick<HtmlProps, "testId">;
 
 export type SideNavItem = {
-  id: string;
-  label: string;
+  /**
+   * The number to display as a count alongside the nav item
+   */
+  count?: number;
   /**
    * The icon element to display at the end of the Nav Item
    */
   endIcon?: ReactElement;
+  id: string;
   /**
    * Whether the item is disabled. When set to true the nav item is set to Disabled color,
    * the link/item is not clickable, and item with children is not expandable.
@@ -96,6 +121,7 @@ export type SideNavItem = {
    * Whether the item is active/selected
    */
   isSelected?: boolean;
+  label: string;
   /**
    * Event fired when the nav item is clicked
    */
@@ -118,25 +144,25 @@ export type SideNavItem = {
   target?: string;
 } & (
   | {
+      children?: never;
+      href?: never;
+      isDefaultExpanded?: never;
+      isExpanded?: never;
       /**
        * Determines if the side nav item is a section header
        */
       isSectionHeader: true;
-      href?: never;
-      children?: never;
-      isDefaultExpanded?: never;
-      isExpanded?: never;
     }
   | {
+      children?: never;
       /**
        * link added to the nav item. if it is undefined, static text will be displayed.
        * fires onClick event when it is passed
        */
       href?: string;
-      children?: never;
-      isSectionHeader?: never;
       isDefaultExpanded?: never;
       isExpanded?: never;
+      isSectionHeader?: never;
     }
   | {
       /**
@@ -144,6 +170,7 @@ export type SideNavItem = {
        */
       children?: Array<Omit<SideNavItem, "startIcon" | "endIcon">>;
       endIcon?: never;
+      href?: never;
       /**
        * Whether the accordion (nav item with children) is expanded by default
        */
@@ -154,7 +181,6 @@ export type SideNavItem = {
        */
       isExpanded?: boolean;
       isSectionHeader?: never;
-      href?: never;
     }
 );
 
diff --git a/packages/odyssey-react-mui/src/labs/TopNav/TopNav.tsx b/packages/odyssey-react-mui/src/labs/TopNav/TopNav.tsx
index cc7cde44dc..f43cf1d78e 100644
--- a/packages/odyssey-react-mui/src/labs/TopNav/TopNav.tsx
+++ b/packages/odyssey-react-mui/src/labs/TopNav/TopNav.tsx
@@ -21,40 +21,70 @@ import {
 
 export const TOP_NAV_HEIGHT = `${64 / 14}rem`;
 
-export type TopNavProps = {
-  /**
-   * React components that render into the left side of the top nav.
-   */
-  leftSideComponent?: ReactElement;
-  /**
-   * React components that render into the right side of the top nav.
-   */
-  rightSideComponent?: ReactElement;
-} & Pick<HtmlProps, "testId">;
+const StyledLeftSideContainer = styled("div")(() => ({
+  flexGrow: 1,
+}));
+
+const StyledRightSideContainer = styled("div")(() => ({
+  flexShrink: 0,
+}));
 
 const StyledTopNavContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isScrolled",
 })<{
   odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
+  isScrolled?: boolean;
+}>(({ odysseyDesignTokens, isScrolled }) => ({
   alignItems: "center",
   backgroundColor: odysseyDesignTokens.HueNeutral50,
+  boxShadow: isScrolled ? odysseyDesignTokens.DepthMedium : undefined,
+  clipPath: "inset(0 0 -100vh 0)",
   display: "flex",
+  gap: odysseyDesignTokens.Spacing4,
   height: "100%",
   justifyContent: "space-between",
   maxHeight: TOP_NAV_HEIGHT,
   minHeight: TOP_NAV_HEIGHT,
   paddingBlock: odysseyDesignTokens.Spacing2,
   paddingInline: odysseyDesignTokens.Spacing6,
+  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+  zIndex: 1,
 }));
 
-const TopNav = ({ leftSideComponent, rightSideComponent }: TopNavProps) => {
+export type TopNavProps = {
+  /**
+   * Whether or not the underlying content has been scrolled
+   */
+  isScrolled?: boolean;
+  /**
+   * React components that render into the left side of the top nav.
+   */
+  leftSideComponent?: ReactElement;
+  /**
+   * React components that render into the right side of the top nav.
+   */
+  rightSideComponent?: ReactElement;
+} & Pick<HtmlProps, "testId">;
+
+const TopNav = ({
+  isScrolled,
+  leftSideComponent,
+  rightSideComponent,
+}: TopNavProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
   return (
-    <StyledTopNavContainer odysseyDesignTokens={odysseyDesignTokens}>
-      {leftSideComponent ?? <div />}
-      {rightSideComponent ?? <div />}
+    <StyledTopNavContainer
+      odysseyDesignTokens={odysseyDesignTokens}
+      isScrolled={isScrolled}
+    >
+      <StyledLeftSideContainer>
+        {leftSideComponent ?? <div />}
+      </StyledLeftSideContainer>
+      <StyledRightSideContainer>
+        {rightSideComponent ?? <div />}
+      </StyledRightSideContainer>
     </StyledTopNavContainer>
   );
 };
diff --git a/packages/odyssey-react-mui/src/labs/UiShell/UiShell.test.tsx b/packages/odyssey-react-mui/src/labs/UiShell/UiShell.test.tsx
index 40cb6177ba..6d2a912e80 100644
--- a/packages/odyssey-react-mui/src/labs/UiShell/UiShell.test.tsx
+++ b/packages/odyssey-react-mui/src/labs/UiShell/UiShell.test.tsx
@@ -26,9 +26,8 @@ describe("UiShell", () => {
         appRootElement={appRootElement}
         onSubscriptionCreated={() => {}}
         optionalComponents={{
-          topNavLeftSide: <div />,
           sideNavFooter: <div />,
-          companyLogo: <div />,
+          topNavLeftSide: <div />,
           topNavRightSide: (
             <Dialog
               children={undefined}
@@ -115,7 +114,7 @@ describe("UiShell", () => {
   test("renders optionally-available `componentSlots`", async () => {
     const optionalComponentTestIds: Array<
       keyof Required<UiShellProps>["optionalComponents"]
-    > = ["companyLogo", "sideNavFooter"];
+    > = ["sideNavFooter"];
 
     // This is the subscription we give the component, and then once subscribed, we're going to immediately call it with new props.
     const subscribeToPropChanges: UiShellProps["subscribeToPropChanges"] = (
@@ -125,7 +124,6 @@ describe("UiShell", () => {
         ...defaultComponentProps,
         sideNavProps: {
           appName: "",
-          hasCustomCompanyLogo: true,
           hasCustomFooter: true,
           sideNavItems: [],
         },
diff --git a/packages/odyssey-react-mui/src/labs/UiShell/UiShellContent.tsx b/packages/odyssey-react-mui/src/labs/UiShell/UiShellContent.tsx
index 6a799351d9..864eeed2f0 100644
--- a/packages/odyssey-react-mui/src/labs/UiShell/UiShellContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/UiShell/UiShellContent.tsx
@@ -20,47 +20,56 @@ import {
   useOdysseyDesignTokens,
   type DesignTokens,
 } from "../../OdysseyDesignTokensContext";
+import { useScrollState } from "./useScrollState";
 
 const StyledAppContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })<{
   odysseyDesignTokens: DesignTokens;
 }>(({ odysseyDesignTokens }) => ({
+  gridArea: "app-content",
   overflowX: "hidden",
-  overflowY: "scroll",
+  overflowY: "auto",
   paddingBlock: odysseyDesignTokens.Spacing5,
   paddingInline: odysseyDesignTokens.Spacing6,
 }));
 
-const StyledFlexibleContentContainer = styled("div", {
+const StyledBannersContainer = styled("div")(() => ({
+  gridArea: "banners",
+}));
+
+const StyledSideNavContainer = styled("div")(() => ({
+  gridArea: "side-nav",
+}));
+
+const StyledShellContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })<{
   odysseyDesignTokens: DesignTokens;
 }>(({ odysseyDesignTokens }) => ({
   backgroundColor: odysseyDesignTokens.HueNeutral50,
-  display: "flex",
-  flexBasis: "100%",
-  flexDirection: "column",
-  flexGrow: 1,
-}));
-
-const StyledRigidContentContainer = styled("div")(() => ({
-  flexShrink: 0,
-  height: "100%",
-}));
-
-const StyledShellContainer = styled("div")(() => ({
-  display: "flex",
-  flexWrap: "nowrap",
+  display: "grid",
+  gridGap: 0,
+  gridTemplateAreas: `
+    "banners banners"
+    "side-nav top-nav"
+    "side-nav app-content"
+  `,
+  gridTemplateColumns: "auto 1fr",
+  gridTemplateRows: "auto auto 1fr",
   height: "100vh",
   width: "100vw",
 }));
 
+const StyledTopNavContainer = styled("div")(() => ({
+  gridArea: "top-nav",
+}));
+
 export type UiShellNavComponentProps = {
   /**
    * Object that gets pass directly to the side nav component.
    */
-  sideNavProps?: Omit<SideNavProps, "customLogo" | "footerComponent">;
+  sideNavProps?: Omit<SideNavProps, "footerComponent">;
   /**
    * Object that gets pass directly to the top nav component.
    */
@@ -81,7 +90,6 @@ export type UiShellContentProps = {
    */
   optionalComponents?: {
     banners?: ReactElement;
-    companyLogo?: SideNavProps["customCompanyLogo"];
     sideNavFooter?: SideNavProps["footerComponent"];
     topNavLeftSide?: TopNavProps["leftSideComponent"];
     topNavRightSide?: TopNavProps["rightSideComponent"];
@@ -103,25 +111,20 @@ const UiShellContent = ({
   topNavProps,
 }: UiShellContentProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { isContentScrolled, scrollableContentRef } = useScrollState();
 
   return (
-    <StyledShellContainer>
-      <StyledRigidContentContainer>
+    <StyledShellContainer odysseyDesignTokens={odysseyDesignTokens}>
+      <StyledBannersContainer>
+        {optionalComponents?.banners}
+      </StyledBannersContainer>
+
+      <StyledSideNavContainer>
         {sideNavProps && (
           <ErrorBoundary fallback={null} onError={onError}>
             <SideNav
               {...{
                 ...sideNavProps,
-                ...(sideNavProps.hasCustomCompanyLogo &&
-                optionalComponents?.companyLogo
-                  ? {
-                      customCompanyLogo: optionalComponents.companyLogo,
-                      hasCustomCompanyLogo: sideNavProps.hasCustomCompanyLogo,
-                    }
-                  : {
-                      customCompanyLogo: undefined,
-                      hasCustomCompanyLogo: false,
-                    }),
                 ...(sideNavProps.hasCustomFooter &&
                 optionalComponents?.sideNavFooter
                   ? {
@@ -137,26 +140,26 @@ const UiShellContent = ({
             />
           </ErrorBoundary>
         )}
-      </StyledRigidContentContainer>
+      </StyledSideNavContainer>
 
-      <StyledFlexibleContentContainer odysseyDesignTokens={odysseyDesignTokens}>
+      <StyledTopNavContainer>
         <ErrorBoundary fallback={null} onError={onError}>
           <TopNav
             {...topNavProps}
+            isScrolled={isContentScrolled}
             leftSideComponent={optionalComponents?.topNavLeftSide}
             rightSideComponent={optionalComponents?.topNavRightSide}
           />
         </ErrorBoundary>
+      </StyledTopNavContainer>
 
-        <StyledAppContainer
-          odysseyDesignTokens={odysseyDesignTokens}
-          tabIndex={0}
-        >
-          {optionalComponents?.banners}
-
-          {appComponent}
-        </StyledAppContainer>
-      </StyledFlexibleContentContainer>
+      <StyledAppContainer
+        odysseyDesignTokens={odysseyDesignTokens}
+        tabIndex={0}
+        ref={scrollableContentRef}
+      >
+        {appComponent}
+      </StyledAppContainer>
     </StyledShellContainer>
   );
 };
diff --git a/packages/odyssey-react-mui/src/labs/UiShell/index.ts b/packages/odyssey-react-mui/src/labs/UiShell/index.ts
index 098411173c..12f80169f0 100644
--- a/packages/odyssey-react-mui/src/labs/UiShell/index.ts
+++ b/packages/odyssey-react-mui/src/labs/UiShell/index.ts
@@ -11,7 +11,7 @@
  */
 
 export * from "./renderUiShell";
+export * from "./useHasUiShell";
 
 export { UiShell, type UiShellProps } from "./UiShell";
-
 export { type UiShellNavComponentProps } from "./UiShellContent";
diff --git a/packages/odyssey-react-mui/src/labs/UiShell/renderUiShell.test.tsx b/packages/odyssey-react-mui/src/labs/UiShell/renderUiShell.test.tsx
index f11299fece..bb8bcf134d 100644
--- a/packages/odyssey-react-mui/src/labs/UiShell/renderUiShell.test.tsx
+++ b/packages/odyssey-react-mui/src/labs/UiShell/renderUiShell.test.tsx
@@ -54,7 +54,6 @@ describe("renderUiShell", () => {
       });
 
       expect(slottedElements.banners).toBeInstanceOf(HTMLDivElement);
-      expect(slottedElements.companyLogo).toBeInstanceOf(HTMLDivElement);
       expect(slottedElements.sideNavFooter).toBeInstanceOf(HTMLDivElement);
       expect(slottedElements.topNavLeftSide).toBeInstanceOf(HTMLDivElement);
       expect(slottedElements.topNavRightSide).toBeInstanceOf(HTMLDivElement);
diff --git a/packages/odyssey-react-mui/src/labs/UiShell/renderUiShell.tsx b/packages/odyssey-react-mui/src/labs/UiShell/renderUiShell.tsx
index 3e0002e029..85add6f84b 100644
--- a/packages/odyssey-react-mui/src/labs/UiShell/renderUiShell.tsx
+++ b/packages/odyssey-react-mui/src/labs/UiShell/renderUiShell.tsx
@@ -19,12 +19,13 @@ import { UiShell, UiShellProps } from "./UiShell";
 import { renderReactInWebComponent } from "../../web-component/renderReactInWebComponent";
 import { type UiShellNavComponentProps } from "./UiShellContent";
 
+export const uiShellDataAttribute = "data-unified-ui-shell";
+
 export const optionalComponentSlotNames: Record<
   keyof Required<UiShellProps>["optionalComponents"],
   string
 > = {
   banners: "banners",
-  companyLogo: "company-logo",
   sideNavFooter: "side-nav-footer",
   topNavLeftSide: "top-nav-left-side",
   topNavRightSide: "top-nav-right-side",
@@ -60,6 +61,9 @@ export const renderUiShell = ({
   const appRootElement =
     explicitAppRootElement || document.createElement("div");
 
+  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.
+  uiShellRootElement.setAttribute(uiShellDataAttribute, "");
+
   const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =
     createMessageBus<SetStateAction<UiShellNavComponentProps>>();
 
diff --git a/packages/odyssey-react-mui/src/labs/UiShell/useHasUiShell.ts b/packages/odyssey-react-mui/src/labs/UiShell/useHasUiShell.ts
new file mode 100644
index 0000000000..ae5e852101
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/UiShell/useHasUiShell.ts
@@ -0,0 +1,25 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useEffect, useState } from "react";
+
+import { uiShellDataAttribute } from "./renderUiShell";
+
+export const useHasUiShell = () => {
+  const [hasUiShell, setHasUiShell] = useState(false);
+
+  useEffect(() => {
+    setHasUiShell(Boolean(document.querySelector(`[${uiShellDataAttribute}]`)));
+  }, []);
+
+  return hasUiShell;
+};
diff --git a/packages/odyssey-react-mui/src/labs/UiShell/useScrollState.ts b/packages/odyssey-react-mui/src/labs/UiShell/useScrollState.ts
new file mode 100644
index 0000000000..c5c251ae76
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/UiShell/useScrollState.ts
@@ -0,0 +1,56 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useEffect, useRef, useState } from "react";
+
+export const useScrollState = <
+  ScrollableContentElement extends HTMLElement = HTMLDivElement,
+>() => {
+  const [isContentScrolled, setIsContentScrolled] = useState(false);
+
+  const scrollableContentRef = useRef<ScrollableContentElement>(null);
+
+  useEffect(() => {
+    if (scrollableContentRef.current) {
+      let requestedAnimationFrameId: number;
+      const scrollableContentElement = scrollableContentRef.current;
+
+      const updateScrollState = () => {
+        cancelAnimationFrame(requestedAnimationFrameId);
+
+        requestedAnimationFrameId = requestAnimationFrame(() => {
+          setIsContentScrolled(scrollableContentElement.scrollTop > 0);
+        });
+      };
+
+      scrollableContentElement.addEventListener("scroll", updateScrollState);
+
+      updateScrollState();
+
+      return () => {
+        scrollableContentElement.removeEventListener(
+          "scroll",
+          updateScrollState,
+        );
+
+        cancelAnimationFrame(requestedAnimationFrameId);
+      };
+    }
+
+    return () => {};
+  }, []);
+
+  return {
+    isContentScrolled,
+    scrollableContentRef,
+  };
+};
diff --git a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
index d5436bd8d3..d4f9e56125 100644
--- a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
+++ b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
@@ -1,3 +1,6 @@
+navigation.label = Main navigation
+navigation.footer = Navigation secondary links
+
 breadcrumbs.home.text = Home
 breadcrumbs.label.text = Breadcrumbs
 close.text = Close
@@ -82,6 +85,8 @@ severity.error = error
 severity.info = info
 severity.success = success
 severity.warning = warning
+sidenav.toggle.expand = Open navigation
+sidenav.toggle.collapse = Close navigation
 switch.active = Active
 switch.inactive = Inactive
 table.columnvisibility.arialabel = Show/hide columns
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 0c2dffff9f..b9e215f0db 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -137,12 +137,6 @@ export const components = ({
             verticalAlign: "middle",
             width: "1em",
           },
-          "&.nav-accordion-summary": {
-            padding: `${odysseyTokens.Spacing2} ${odysseyTokens.Spacing4}`,
-            ".MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
-              transform: "rotate(-90deg) !important",
-            },
-          },
         }),
         content: () => ({
           marginBlock: 0,
@@ -160,9 +154,7 @@ export const components = ({
           paddingInline: odysseyTokens.Spacing3,
           paddingBlock: odysseyTokens.Spacing4,
           "&.nav-accordion-details": {
-            paddingTop: 0,
-            paddingBottom: 0,
-            paddingLeft: odysseyTokens.Spacing2,
+            padding: 0,
           },
         }),
       },
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx
index 98c57003b3..784bc13b6d 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx
@@ -26,6 +26,7 @@ import {
   DirectoryIcon,
   ServerIcon,
   FolderIcon,
+  NotificationIcon,
 } from "@okta/odyssey-react-mui/icons";
 import { expect } from "@storybook/jest";
 import {
@@ -35,6 +36,7 @@ import {
   within,
 } from "@storybook/testing-library";
 import { PlaywrightProps } from "../../odyssey-mui/storybookTypes";
+import PlaceholderLogo from "../PickerWithOptionAdornment/PlaceholderLogo";
 
 const storybookMeta: Meta<SideNavProps> = {
   title: "Labs Components/SideNav",
@@ -49,18 +51,6 @@ const storybookMeta: Meta<SideNavProps> = {
         },
       },
     },
-    customCompanyLogo: {
-      description: "Logo to be displayed in the Nav Header.",
-    },
-    expandedWidth: {
-      control: "text",
-      description: "Width of the side nav in px",
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
     footerComponent: {
       description:
         "Custom footer component to render in place of footer items.",
@@ -73,41 +63,49 @@ const storybookMeta: Meta<SideNavProps> = {
         },
       },
     },
-    hasCustomCompanyLogo: {
+    // hasCustomFooter: {
+    //   control: "boolean",
+    //   description:
+    //     "Defines if a custom footer should be visible when available.",
+    //   table: {
+    //     type: {
+    //       summary: "boolean",
+    //     },
+    //   },
+    // },
+    isCollapsible: {
       control: "boolean",
-      description:
-        "Defines if a custom company logo should be visible when available.",
+      description: "Controls whether the side nav is collapsible",
       table: {
         type: {
           summary: "boolean",
         },
       },
     },
-    hasCustomFooter: {
+    isCompact: {
       control: "boolean",
-      description:
-        "Defines if a custom footer should be visible when available.",
+      description: "Controls whether the side nav uses compact layout",
       table: {
         type: {
           summary: "boolean",
         },
       },
     },
-    isCollapsible: {
+    isLoading: {
       control: "boolean",
-      description: "Controls whether the side nav is collapsible",
+      description: "Controls whether the side nav shows the skeleton loader.",
       table: {
         type: {
           summary: "boolean",
         },
       },
     },
-    isCompact: {
-      control: "boolean",
-      description: "Controls whether the side nav uses compact layout",
+    logoProps: {
+      description: "Props passed in to render custom logo and/or link",
       table: {
         type: {
-          summary: "boolean",
+          summary:
+            "href?: string; logoSrcUrl?: string; altText?: string; logoComponent?: ReactElement",
         },
       },
     },
@@ -281,6 +279,13 @@ const storybookMeta: Meta<SideNavProps> = {
         label: "System Configuration",
         startIcon: <FolderIcon />,
       },
+      {
+        id: "item6",
+        href: "/",
+        label: "Notifications",
+        startIcon: <NotificationIcon />,
+        count: 1,
+      },
     ],
     footerItems: [
       {
@@ -308,8 +313,8 @@ const storybookMeta: Meta<SideNavProps> = {
 
 export default storybookMeta;
 
-export const Default: StoryObj<SideNavProps> = {
-  render: (props: SideNavProps) => {
+export const Default: StoryObj<typeof SideNav> = {
+  render: (props) => {
     return (
       <div style={{ height: "100vh" }}>
         <SideNav {...props} />
@@ -319,8 +324,14 @@ export const Default: StoryObj<SideNavProps> = {
   play: async ({ canvasElement, step }: PlaywrightProps<SideNavProps>) => {
     configure({ testIdAttribute: "data-se" });
     const canvas = within(canvasElement);
-    const expandedRegion = canvas.getByTestId("expanded-region");
-    const collapsedRegion = canvas.getByTestId("collapsed-region");
+
+    const toggleButton = canvas.getByRole("button", {
+      name: "Close navigation",
+    });
+    const navElement = canvas.getByRole("navigation", {
+      name: "Main navigation",
+    });
+    // const collapsedRegion = canvas.getByTestId("collapsed-region");
     const scrollableRegion = canvas.getByTestId("scrollable-region");
 
     /**
@@ -347,22 +358,63 @@ export const Default: StoryObj<SideNavProps> = {
       }
     });
     await step("Side Nav Collapse", async ({}) => {
-      const collapseButton = within(collapsedRegion).getByRole("button", {
-        name: "collapse side navigation",
-      });
-      await userEvent.click(collapseButton);
+      await userEvent.click(toggleButton);
+
       await waitFor(() => {
-        expect(expandedRegion).not.toBeVisible();
+        expect(toggleButton.ariaExpanded).toEqual("false");
+        expect(navElement).toHaveStyle({ width: 0 });
       });
     });
     await step("Side Nav Expand", async ({}) => {
-      const expandeButton = within(collapsedRegion).getByRole("button", {
-        name: "expand side navigation",
-      });
-      await userEvent.click(expandeButton);
+      await userEvent.click(toggleButton);
       await waitFor(() => {
-        expect(expandedRegion).toBeVisible();
+        expect(toggleButton.ariaExpanded).toEqual("true");
+        expect(navElement).toBeVisible();
       });
     });
   },
 };
+
+export const Loading: StoryObj<typeof SideNav> = {
+  args: {
+    isLoading: true,
+  },
+  render: (props) => {
+    return (
+      <div style={{ height: "100vh" }}>
+        <SideNav {...props} />
+      </div>
+    );
+  },
+};
+
+export const CustomLogoElement: StoryObj<typeof SideNav> = {
+  args: {
+    logoProps: {
+      logoComponent: <PlaceholderLogo.One />,
+    },
+  },
+  render: (props) => {
+    return (
+      <div style={{ height: "100vh" }}>
+        <SideNav {...props} />
+      </div>
+    );
+  },
+};
+
+export const CustomLogoImage: StoryObj<typeof SideNav> = {
+  args: {
+    logoProps: {
+      imageUrl: "https://placehold.co/600x60",
+      imageAltText: "My custom image logo",
+    },
+  },
+  render: (props) => {
+    return (
+      <div style={{ height: "100vh" }}>
+        <SideNav {...props} />
+      </div>
+    );
+  },
+};
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/UiShell/UiShell.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/UiShell/UiShell.stories.tsx
index 78eb7be75a..4038ca2ed7 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/UiShell/UiShell.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/UiShell/UiShell.stories.tsx
@@ -13,16 +13,20 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 import {
+  PageTemplate,
   UiShell,
+  uiShellDataAttribute,
   UserProfile,
   type UiShellNavComponentProps,
   type UiShellProps,
 } from "@okta/odyssey-react-mui/labs";
 import {
+  Banner,
   Button,
   OdysseyProvider,
   Paragraph,
   SearchField,
+  Surface,
 } from "@okta/odyssey-react-mui";
 import {
   AddCircleIcon,
@@ -99,6 +103,7 @@ export default storybookMeta;
 
 const sharedSideNavProps: UiShellNavComponentProps["sideNavProps"] = {
   appName: "Enduser",
+  isCollapsible: true,
   sideNavItems: [
     {
       id: "AddNewFolder",
@@ -160,7 +165,11 @@ const sharedTopNavProps: UiShellNavComponentProps["topNavProps"] = {
 };
 
 const sharedOptionalComponents: UiShellProps["optionalComponents"] = {
-  topNavLeftSide: <SearchField label="Search" placeholder="Search..." />,
+  topNavLeftSide: (
+    <div>
+      <SearchField label="Search" placeholder="Search..." />
+    </div>
+  ),
   topNavRightSide: (
     <UserProfile
       profileIcon={<UserIcon />}
@@ -185,6 +194,23 @@ export const TopNavOnly: StoryObj<UiShellProps> = {
   },
 };
 
+export const LoadingData: StoryObj<UiShellProps> = {
+  args: {
+    optionalComponents: sharedOptionalComponents,
+    subscribeToPropChanges: (subscriber) => {
+      subscriber({
+        sideNavProps: {
+          ...sharedSideNavProps,
+          isLoading: true,
+        },
+        topNavProps: {},
+      });
+
+      return () => {};
+    },
+  },
+};
+
 export const WithoutAppContent: StoryObj<UiShellProps> = {
   args: {
     optionalComponents: sharedOptionalComponents,
@@ -199,7 +225,7 @@ export const WithoutAppContent: StoryObj<UiShellProps> = {
   },
 };
 
-export const WithAppContent: StoryObj<UiShellProps> = {
+export const WithTallAppContent: StoryObj<UiShellProps> = {
   args: {
     appComponent: (
       <div style={{ backgroundColor: "transparent" }}>
@@ -350,20 +376,7 @@ export const WithAppContent: StoryObj<UiShellProps> = {
         Et…
       </div>
     ),
-    optionalComponents: {
-      topNavLeftSide: (
-        <div>
-          <SearchField label="Search" placeholder="Search..." />
-        </div>
-      ),
-      topNavRightSide: (
-        <UserProfile
-          profileIcon={<UserIcon />}
-          orgName="ORG123"
-          userName="test.user@test.com"
-        />
-      ),
-    },
+    optionalComponents: sharedOptionalComponents,
     subscribeToPropChanges: (subscriber) => {
       subscriber({
         sideNavProps: sharedSideNavProps,
@@ -379,23 +392,41 @@ export const WithOdysseyAppContent: StoryObj<UiShellProps> = {
   args: {
     appComponent: (
       <OdysseyProvider>
-        <Paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
-          lacinia leo quis sodales scelerisque. Maecenas tempor eget nunc sit
-          amet ultrices. Maecenas et varius ante. Nulla eu quam sit amet orci
-          fermentum dictum sit amet scelerisque libero. Proin luctus semper
-          elit, ut pretium massa tristique a. Mauris hendrerit ex eu commodo
-          egestas. Etiam a lacus aliquet, convallis metus et, sollicitudin odio.
-          Fusce vehicula purus sed orci elementum, ut cursus diam sollicitudin.
-          Pellentesque pulvinar nibh turpis, eu finibus dolor egestas eget. Duis
-          tellus mauris, pulvinar sit amet ante a, aliquet laoreet sapien. Ut
-          quis tempus massa. Fusce fringilla mattis lacinia. Cras at pharetra
-          quam, eu ultrices ipsum.
-        </Paragraph>
-        <Button label="Odyssey Button" variant="primary" />
+        {/* This is normally rendered by `renderUiShell`, but we're rendering `UiShell` outside of a web component, so we need to add this data attribute ourselves. */}
+        <div {...{ [uiShellDataAttribute]: "" }} />
+
+        <PageTemplate
+          description="This is my app."
+          title="Access Certification"
+        >
+          <Surface>
+            <div style={{ marginBlockEnd: `${16 / 14}rem` }}>
+              <Paragraph>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+                lacinia leo quis sodales scelerisque. Maecenas tempor eget nunc
+                sit amet ultrices. Maecenas et varius ante. Nulla eu quam sit
+                amet orci fermentum dictum sit amet scelerisque libero. Proin
+                luctus semper elit, ut pretium massa tristique a. Mauris
+                hendrerit ex eu commodo egestas. Etiam a lacus aliquet,
+                convallis metus et, sollicitudin odio. Fusce vehicula purus sed
+                orci elementum, ut cursus diam sollicitudin. Pellentesque
+                pulvinar nibh turpis, eu finibus dolor egestas eget. Duis tellus
+                mauris, pulvinar sit amet ante a, aliquet laoreet sapien. Ut
+                quis tempus massa. Fusce fringilla mattis lacinia. Cras at
+                pharetra quam, eu ultrices ipsum.
+              </Paragraph>
+            </div>
+            <div>
+              <Button label="I understand" variant="primary" />
+            </div>
+          </Surface>
+        </PageTemplate>
       </OdysseyProvider>
     ),
-    optionalComponents: sharedOptionalComponents,
+    optionalComponents: {
+      ...sharedOptionalComponents,
+      banners: <Banner severity="success" text="This is an app!" />,
+    },
     subscribeToPropChanges: (subscriber) => {
       subscriber({
         sideNavProps: sharedSideNavProps,

From 569733c83d80f3ef8075dfe00e8f596b9a129e06 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Mon, 4 Nov 2024 14:04:15 -0500
Subject: [PATCH 05/15] build: bump versions for 1.26.0

---
 lerna.json                                        | 2 +-
 packages/browserslist-config-odyssey/package.json | 2 +-
 packages/odyssey-babel-preset/package.json        | 2 +-
 packages/odyssey-design-tokens/package.json       | 2 +-
 packages/odyssey-react-mui/package.json           | 2 +-
 packages/odyssey-storybook/package.json           | 2 +-
 packages/odyssey-svgr/package.json                | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/lerna.json b/lerna.json
index 5161e8c333..672097e6cc 100644
--- a/lerna.json
+++ b/lerna.json
@@ -4,5 +4,5 @@
   "npmClient": "yarn",
   "packages": ["packages/*"],
   "useNx": false,
-  "version": "1.25.0"
+  "version": "1.26.0"
 }
diff --git a/packages/browserslist-config-odyssey/package.json b/packages/browserslist-config-odyssey/package.json
index 19c3d1496b..41eb732cce 100644
--- a/packages/browserslist-config-odyssey/package.json
+++ b/packages/browserslist-config-odyssey/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/browserslist-config-odyssey",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Browserslist config for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
diff --git a/packages/odyssey-babel-preset/package.json b/packages/odyssey-babel-preset/package.json
index 92c0b55db8..72411c1dc1 100644
--- a/packages/odyssey-babel-preset/package.json
+++ b/packages/odyssey-babel-preset/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-babel-preset",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Babel preset for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
diff --git a/packages/odyssey-design-tokens/package.json b/packages/odyssey-design-tokens/package.json
index 49c43b3fe8..d64a73f9a8 100644
--- a/packages/odyssey-design-tokens/package.json
+++ b/packages/odyssey-design-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-design-tokens",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Design tokens for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json
index a03b650355..8ea3cab4bf 100644
--- a/packages/odyssey-react-mui/package.json
+++ b/packages/odyssey-react-mui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
diff --git a/packages/odyssey-storybook/package.json b/packages/odyssey-storybook/package.json
index 941e39240a..1335e84c65 100644
--- a/packages/odyssey-storybook/package.json
+++ b/packages/odyssey-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-storybook",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Documentation for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
diff --git a/packages/odyssey-svgr/package.json b/packages/odyssey-svgr/package.json
index 7ad6643465..19eb0b07d2 100644
--- a/packages/odyssey-svgr/package.json
+++ b/packages/odyssey-svgr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-svgr",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Configuration files for svgr icon conversion",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",

From 5f3de0375c5db049bbf339146218960dc7d82ac2 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <jordan.koschei@okta.com>
Date: Mon, 4 Nov 2024 14:04:23 -0500
Subject: [PATCH 06/15] docs: update CHANGELOG for 1.26.0

---
 CHANGELOG.md                                      | 11 +++++++++++
 packages/browserslist-config-odyssey/CHANGELOG.md |  4 ++++
 packages/odyssey-babel-preset/CHANGELOG.md        |  4 ++++
 packages/odyssey-design-tokens/CHANGELOG.md       |  4 ++++
 packages/odyssey-react-mui/CHANGELOG.md           | 11 +++++++++++
 packages/odyssey-storybook/CHANGELOG.md           |  7 +++++++
 packages/odyssey-svgr/CHANGELOG.md                |  4 ++++
 7 files changed, 45 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 73df8d261d..2bae35ce53 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
+
+### Features
+
+- adds side-nav collapse handle ([#2385](https://github.com/okta/odyssey/issues/2385)) ([1582be5](https://github.com/okta/odyssey/commit/1582be5669000c6dcec5881ba8178406a457a3b0))
+- adds the ability to render an encapsulated Unified UI Shell ([#2373](https://github.com/okta/odyssey/issues/2373)) ([f964a29](https://github.com/okta/odyssey/commit/f964a29c7eb956fc05cb16fd51963a03c6b08507))
+
+### Bug Fixes
+
+- enforce AppTile image heighgt ([#2400](https://github.com/okta/odyssey/issues/2400)) ([7e91875](https://github.com/okta/odyssey/commit/7e9187582cf1c33e6da8297c778549aebbe81d88))
+
 ## [1.25.0](https://github.com/okta/odyssey/compare/v1.24.1...v1.25.0) (2024-10-15)
 
 ### Features
diff --git a/packages/browserslist-config-odyssey/CHANGELOG.md b/packages/browserslist-config-odyssey/CHANGELOG.md
index caf418d15b..664fa926e7 100644
--- a/packages/browserslist-config-odyssey/CHANGELOG.md
+++ b/packages/browserslist-config-odyssey/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
+
+**Note:** Version bump only for package @okta/browserslist-config-odyssey
+
 ## [1.25.0](https://github.com/okta/odyssey/compare/v1.24.1...v1.25.0) (2024-10-15)
 
 **Note:** Version bump only for package @okta/browserslist-config-odyssey
diff --git a/packages/odyssey-babel-preset/CHANGELOG.md b/packages/odyssey-babel-preset/CHANGELOG.md
index 11a79fd68a..17e16f57e2 100644
--- a/packages/odyssey-babel-preset/CHANGELOG.md
+++ b/packages/odyssey-babel-preset/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
+
+**Note:** Version bump only for package @okta/odyssey-babel-preset
+
 ## [1.25.0](https://github.com/okta/odyssey/compare/v1.24.1...v1.25.0) (2024-10-15)
 
 **Note:** Version bump only for package @okta/odyssey-babel-preset
diff --git a/packages/odyssey-design-tokens/CHANGELOG.md b/packages/odyssey-design-tokens/CHANGELOG.md
index 2a4f0cea7c..aa8c989aab 100644
--- a/packages/odyssey-design-tokens/CHANGELOG.md
+++ b/packages/odyssey-design-tokens/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
+
+**Note:** Version bump only for package @okta/odyssey-design-tokens
+
 ## [1.25.0](https://github.com/okta/odyssey/compare/v1.24.1...v1.25.0) (2024-10-15)
 
 **Note:** Version bump only for package @okta/odyssey-design-tokens
diff --git a/packages/odyssey-react-mui/CHANGELOG.md b/packages/odyssey-react-mui/CHANGELOG.md
index 87b32ec5c4..f2b0da7c74 100644
--- a/packages/odyssey-react-mui/CHANGELOG.md
+++ b/packages/odyssey-react-mui/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
+
+### Features
+
+- adds side-nav collapse handle ([#2385](https://github.com/okta/odyssey/issues/2385)) ([1582be5](https://github.com/okta/odyssey/commit/1582be5669000c6dcec5881ba8178406a457a3b0))
+- adds the ability to render an encapsulated Unified UI Shell ([#2373](https://github.com/okta/odyssey/issues/2373)) ([f964a29](https://github.com/okta/odyssey/commit/f964a29c7eb956fc05cb16fd51963a03c6b08507))
+
+### Bug Fixes
+
+- enforce AppTile image heighgt ([#2400](https://github.com/okta/odyssey/issues/2400)) ([7e91875](https://github.com/okta/odyssey/commit/7e9187582cf1c33e6da8297c778549aebbe81d88))
+
 ## [1.25.0](https://github.com/okta/odyssey/compare/v1.24.1...v1.25.0) (2024-10-15)
 
 ### Features
diff --git a/packages/odyssey-storybook/CHANGELOG.md b/packages/odyssey-storybook/CHANGELOG.md
index deaedcd2ef..7d41fb4b7c 100644
--- a/packages/odyssey-storybook/CHANGELOG.md
+++ b/packages/odyssey-storybook/CHANGELOG.md
@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
+
+### Features
+
+- adds side-nav collapse handle ([#2385](https://github.com/okta/odyssey/issues/2385)) ([1582be5](https://github.com/okta/odyssey/commit/1582be5669000c6dcec5881ba8178406a457a3b0))
+- adds the ability to render an encapsulated Unified UI Shell ([#2373](https://github.com/okta/odyssey/issues/2373)) ([f964a29](https://github.com/okta/odyssey/commit/f964a29c7eb956fc05cb16fd51963a03c6b08507))
+
 ## [1.25.0](https://github.com/okta/odyssey/compare/v1.24.1...v1.25.0) (2024-10-15)
 
 ### Features
diff --git a/packages/odyssey-svgr/CHANGELOG.md b/packages/odyssey-svgr/CHANGELOG.md
index 5c7e1e713b..f4a638071a 100644
--- a/packages/odyssey-svgr/CHANGELOG.md
+++ b/packages/odyssey-svgr/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
+
+**Note:** Version bump only for package @okta/odyssey-svgr
+
 ## [1.25.0](https://github.com/okta/odyssey/compare/v1.24.1...v1.25.0) (2024-10-15)
 
 **Note:** Version bump only for package @okta/odyssey-svgr

From aa628d4c9af485bf094735b906819282f9477900 Mon Sep 17 00:00:00 2001
From: Ben Lister <147574410+benlister-okta@users.noreply.github.com>
Date: Mon, 4 Nov 2024 13:28:40 -0800
Subject: [PATCH 07/15] Updates roadmap page data with policies (#2403)

DES-6722 fix: update roadmap data
fix: update text
fix: update roadmap
fix: update data
---
 .../src/guidelines/Roadmap/roadmap.json       | 49 ++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json
index 28aa528c13..1956dcc44a 100644
--- a/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json
+++ b/packages/odyssey-storybook/src/guidelines/Roadmap/roadmap.json
@@ -17,6 +17,33 @@
     "develop": "Complete",
     "deliverableTiming": "Q3 FY25"
   },
+  {
+    "name": "Aerial account page",
+    "type": "Page template",
+    "status": "Not started",
+    "define": "-",
+    "design": "-",
+    "develop": "-",
+    "deliverableTiming": "-"
+  },
+  {
+    "name": "Aerial org details page",
+    "type": "Page template",
+    "status": "Not started",
+    "define": "-",
+    "design": "-",
+    "develop": "-",
+    "deliverableTiming": "-"
+  },
+  {
+    "name": "Aerial user page",
+    "type": "Page template",
+    "status": "Not started",
+    "define": "-",
+    "design": "-",
+    "develop": "-",
+    "deliverableTiming": "-"
+  },
   {
     "name": "Autocomplete",
     "type": "Component",
@@ -98,6 +125,15 @@
     "develop": "Complete",
     "deliverableTiming": "FY24"
   },
+  {
+    "name": "Configuration ",
+    "type": "Page template",
+    "status": "Not started",
+    "define": "-",
+    "design": "Complete",
+    "develop": "Complete",
+    "deliverableTiming": "-"
+  },
   {
     "name": "Dashboard",
     "type": "Page template",
@@ -126,7 +162,7 @@
     "deliverableTiming": "TBD"
   },
   {
-    "name": "DataView",
+    "name": "DataView - move",
     "type": "Component",
     "status": "In Labs",
     "define": "Complete",
@@ -189,7 +225,7 @@
     "deliverableTiming": "Q2 FY25"
   },
   {
-    "name": "Empty states v2 \n(illustration)",
+    "name": "Empty states with illustration",
     "type": "Component",
     "status": "In progress",
     "define": "Complete",
@@ -305,6 +341,15 @@
     "develop": "-",
     "deliverableTiming": "-"
   },
+  {
+    "name": "Policy",
+    "type": "TBD",
+    "status": "In progress",
+    "define": "In progress",
+    "design": "-",
+    "develop": "-",
+    "deliverableTiming": "Q4 FY25"
+  },
   {
     "name": "Policy Recommender\n(AI Pattern)",
     "type": "Pattern",

From 6c1f532b8aacc4205f7842ef44d6ae22bf1c5838 Mon Sep 17 00:00:00 2001
From: bryancunningham-okta
 <148223016+bryancunningham-okta@users.noreply.github.com>
Date: Wed, 6 Nov 2024 10:37:40 -0500
Subject: [PATCH 08/15] Side nav followups (#2407)

DES-6729 feat(odyssey-react-mui): smaller nav items and focus ring
feat(odyssey-react-mui): increase inline padding to make room for button
feat(odyssey-react-mui): updated Surface appearance for white backgrounds
feat(odyssey-react-mui): build contrastmode into Surface
feat(odyssey-react-mui): updated taggle handle color and timing
---
 packages/odyssey-react-mui/src/Surface.tsx    | 20 +++++++++++++++----
 .../src/labs/SideNav/NavAccordion.tsx         |  6 ++----
 .../src/labs/SideNav/SideNav.tsx              |  6 ++++++
 .../src/labs/SideNav/SideNavItemContent.tsx   | 11 ++++++----
 .../labs/SideNav/SideNavItemLinkContent.tsx   |  2 +-
 .../src/labs/SideNav/SideNavToggleButton.tsx  | 14 +++++--------
 .../src/labs/TopNav/TopNav.tsx                |  2 +-
 .../src/labs/UiShell/UiShellContent.tsx       |  2 +-
 8 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/packages/odyssey-react-mui/src/Surface.tsx b/packages/odyssey-react-mui/src/Surface.tsx
index d9ac36c2aa..1b1efdb449 100644
--- a/packages/odyssey-react-mui/src/Surface.tsx
+++ b/packages/odyssey-react-mui/src/Surface.tsx
@@ -19,14 +19,22 @@ import {
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
 import { OdysseyThemeProvider } from "./OdysseyThemeProvider";
+import { useContrastModeContext, ContrastMode } from "./useContrastMode";
 
 const StyledContainer = styled(MuiPaper, {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "contrastMode",
 })<{
+  contrastMode: ContrastMode;
   odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
+}>(({ contrastMode, odysseyDesignTokens }) => ({
   borderRadius: odysseyDesignTokens.Spacing4,
-  padding: odysseyDesignTokens.Spacing4,
+  padding: odysseyDesignTokens.Spacing5,
+  border:
+    contrastMode === "lowContrast"
+      ? `1px solid ${odysseyDesignTokens.HueNeutral100}`
+      : "none",
+  boxShadow: "none",
 }));
 
 export type SurfaceProps = {
@@ -35,9 +43,13 @@ export type SurfaceProps = {
 
 const Surface = ({ children }: SurfaceProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { contrastMode } = useContrastModeContext();
 
   return (
-    <StyledContainer odysseyDesignTokens={odysseyDesignTokens}>
+    <StyledContainer
+      contrastMode={contrastMode}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
       <OdysseyThemeProvider>{children}</OdysseyThemeProvider>
     </StyledContainer>
   );
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx b/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx
index 108991dec8..ca833e7a59 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx
@@ -76,8 +76,7 @@ const AccordionLabelContainer = styled("span", {
   isIconVisible: boolean;
 }>(({ odysseyDesignTokens, isIconVisible }) => ({
   width: "100%",
-  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
-  fontSize: odysseyDesignTokens.TypographyScale0,
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
   fontWeight: odysseyDesignTokens.TypographyWeightHeading,
   color: odysseyDesignTokens.TypographyColorHeading,
 }));
@@ -95,12 +94,11 @@ const AccordionSummaryContainer = styled(MuiAccordionSummary, {
   borderRadius: odysseyDesignTokens.BorderRadiusMain,
   paddingBlock: odysseyDesignTokens.Spacing3,
   paddingInline: odysseyDesignTokens.Spacing4,
-  lineHeight: 1.5,
 
   "&:focus-visible": {
     backgroundColor: "unset",
     outline: "none",
-    boxShadow: `inset 0 0 0 3px ${odysseyDesignTokens.PalettePrimaryMain}`,
+    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
   },
 
   ...(isCompact && {
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx
index 6345bde38a..3241bf6121 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx
@@ -96,6 +96,7 @@ const StyledSideNav = styled("nav", {
       transform: `translateX(0)`,
       transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,
       width: odysseyDesignTokens.Spacing2,
+      zIndex: 2,
     },
 
     "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus)":
@@ -161,6 +162,11 @@ const SectionHeaderContainer = styled("li", {
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
   paddingBlock: odysseyDesignTokens.Spacing3,
   paddingInline: odysseyDesignTokens.Spacing4,
+
+  "& + &": {
+    backgroundColor: "red !important",
+    marginBlockStart: "1px",
+  },
 }));
 
 const SectionHeader = styled("h3", {
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx
index b27c6101eb..6542b649a0 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx
@@ -42,9 +42,9 @@ export const StyledSideNavListItem = styled("li", {
 }>(({ odysseyDesignTokens, isSelected }) => ({
   display: "flex",
   alignItems: "center",
+  marginBlockEnd: "1px",
   backgroundColor: "unset",
   borderRadius: odysseyDesignTokens.BorderRadiusMain,
-  lineHeight: 1.5,
   transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
 
   ...(isSelected && {
@@ -53,7 +53,7 @@ export const StyledSideNavListItem = styled("li", {
   }),
 
   "&:last-child": {
-    marginBottom: odysseyDesignTokens.Spacing2,
+    marginBlockEnd: odysseyDesignTokens.Spacing2,
   },
 }));
 
@@ -89,11 +89,14 @@ const GetNavItemContentStyles = ({
     textDecoration: "none",
     color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
     minHeight: odysseyDesignTokens.Spacing7,
-    paddingBlock: odysseyDesignTokens.Spacing4,
+    paddingBlock: odysseyDesignTokens.Spacing3,
     paddingInline: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth})`,
     borderRadius: odysseyDesignTokens.BorderRadiusMain,
     transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
 
+    "& + &": {
+      marginTop: 4,
+    },
     "&:hover": {
       textDecoration: "none",
       cursor: "pointer",
@@ -129,7 +132,7 @@ const GetNavItemContentStyles = ({
 
     "&:focus-visible": {
       outline: "none",
-      boxShadow: `inset 0 0 0 3px ${odysseyDesignTokens.PalettePrimaryMain}`,
+      boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
     },
   };
 };
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx
index e8d319a986..59423a9121 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx
@@ -32,7 +32,7 @@ const SideNavItemLabelContainer = styled("div", {
   display: "flex",
   flexWrap: "wrap",
   alignItems: "center",
-  fontSize: odysseyDesignTokens.TypographyScale0,
+  fontSize: odysseyDesignTokens.TypographySizeBody,
   marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
 }));
 
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavToggleButton.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavToggleButton.tsx
index 5d8c166f04..8bb369f750 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNavToggleButton.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavToggleButton.tsx
@@ -58,8 +58,7 @@ const StyledToggleButton = styled(MuiButton, {
       backgroundColor: "transparent",
 
       "#lineOne": {
-        animation:
-          "lineOne-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)",
+        animation: `lineOne-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
         animationFillMode: "forwards",
         "@keyframes lineOne-animate-to-collapse": {
           "0%": {
@@ -75,8 +74,7 @@ const StyledToggleButton = styled(MuiButton, {
       },
 
       "#lineTwo": {
-        animation:
-          "lineTwo-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)",
+        animation: `lineTwo-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
         animationFillMode: "forwards",
         "@keyframes lineTwo-animate-to-collapse": {
           "0%": {
@@ -93,8 +91,7 @@ const StyledToggleButton = styled(MuiButton, {
 
       ...(isSideNavCollapsed && {
         "#lineOne": {
-          animation:
-            "lineOne-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)",
+          animation: `lineOne-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
           animationFillMode: "forwards",
           "@keyframes lineOne-animate-to-expand": {
             "0%": {
@@ -111,8 +108,7 @@ const StyledToggleButton = styled(MuiButton, {
         },
 
         "#lineTwo": {
-          animation:
-            "lineTwo-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)",
+          animation: `lineTwo-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,
           animationFillMode: "forwards",
           "@keyframes lineTwo-animate-to-expand": {
             "0%": {
@@ -135,7 +131,7 @@ const StyledToggleButton = styled(MuiButton, {
       left: "50%",
       width: "2px",
       height: odysseyDesignTokens.Spacing4,
-      backgroundColor: odysseyDesignTokens.HueNeutral500,
+      backgroundColor: odysseyDesignTokens.HueNeutral600,
       transform: "translate3d(-50%, -50%, 0)",
       transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
     },
diff --git a/packages/odyssey-react-mui/src/labs/TopNav/TopNav.tsx b/packages/odyssey-react-mui/src/labs/TopNav/TopNav.tsx
index f43cf1d78e..dd8de2bb69 100644
--- a/packages/odyssey-react-mui/src/labs/TopNav/TopNav.tsx
+++ b/packages/odyssey-react-mui/src/labs/TopNav/TopNav.tsx
@@ -47,7 +47,7 @@ const StyledTopNavContainer = styled("div", {
   maxHeight: TOP_NAV_HEIGHT,
   minHeight: TOP_NAV_HEIGHT,
   paddingBlock: odysseyDesignTokens.Spacing2,
-  paddingInline: odysseyDesignTokens.Spacing6,
+  paddingInline: odysseyDesignTokens.Spacing8,
   transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
   zIndex: 1,
 }));
diff --git a/packages/odyssey-react-mui/src/labs/UiShell/UiShellContent.tsx b/packages/odyssey-react-mui/src/labs/UiShell/UiShellContent.tsx
index 864eeed2f0..627e4fac5e 100644
--- a/packages/odyssey-react-mui/src/labs/UiShell/UiShellContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/UiShell/UiShellContent.tsx
@@ -31,7 +31,7 @@ const StyledAppContainer = styled("div", {
   overflowX: "hidden",
   overflowY: "auto",
   paddingBlock: odysseyDesignTokens.Spacing5,
-  paddingInline: odysseyDesignTokens.Spacing6,
+  paddingInline: odysseyDesignTokens.Spacing8,
 }));
 
 const StyledBannersContainer = styled("div")(() => ({

From 5712ffa908afb338bd7ed54cb847fa63e2a42ffb Mon Sep 17 00:00:00 2001
From: stephanieyoshimoto-okta <stephanie.yoshimoto@okta.com>
Date: Thu, 7 Nov 2024 14:40:47 -0800
Subject: [PATCH 09/15] Add namespace (#2408)

OKTA-818689 chore(odyssey-react-mui): add namespace
---
 packages/odyssey-react-mui/i18n.config.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/odyssey-react-mui/i18n.config.json b/packages/odyssey-react-mui/i18n.config.json
index 6bd5941fe5..cc36e1352b 100644
--- a/packages/odyssey-react-mui/i18n.config.json
+++ b/packages/odyssey-react-mui/i18n.config.json
@@ -1,9 +1,10 @@
 {
+  "namespace": "enduser",
   "resourceFile": "odyssey-react-mui.properties",
   "resourceFilePath": "packages/odyssey-react-mui/src/properties",
   "translationsFilePath": "packages/odyssey-react-mui/src/properties/translations",
   "commitPrefix": "chore(odyssey-react-mui): ",
   "reviewers": ["okta/eng-globalizationcore", "okta/design-system"],
   "slackChannel": "odyssey",
-  "guardian": "guardian-odyssey"
+  "guardian": ""
 }

From adc16a00c3c8460540cc290a69810404929557dc Mon Sep 17 00:00:00 2001
From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Date: Wed, 13 Nov 2024 10:24:48 -0500
Subject: [PATCH 10/15] Fix broken SideNav tests (#2411)

DES-6753 test: fix broken SideNav tests
fix: change button role to button component
fix: revert broken change
---
 .../src/labs/SideNav/SideNav.test.tsx              | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx
index 1083474985..06d0602439 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx
@@ -101,12 +101,12 @@ describe("SideNav", () => {
 
     expect(screen.getByText(menuItemText)).toBeVisible();
 
-    const collapseButton = screen.getByLabelText("Collapse side navigation");
+    const collapseButton = screen.getByLabelText("Close navigation");
     fireEvent.click(collapseButton);
 
     expect(screen.getByText(menuItemText)).not.toBeVisible;
 
-    const expandButton = screen.getByLabelText("Expand side navigation");
+    const expandButton = screen.getByLabelText("Open navigation");
     fireEvent.click(expandButton);
 
     expect(screen.getByText(menuItemText)).toBeVisible();
@@ -133,7 +133,7 @@ describe("SideNav", () => {
       </OdysseyProvider>,
     );
 
-    const collapseButton = screen.getByLabelText("Collapse side navigation");
+    const collapseButton = screen.getByLabelText("Close navigation");
     fireEvent.click(collapseButton);
 
     expect(mockOnCollapse).toBeCalled();
@@ -160,10 +160,10 @@ describe("SideNav", () => {
       </OdysseyProvider>,
     );
 
-    const collapseButton = screen.getByLabelText("Collapse side navigation");
+    const collapseButton = screen.getByLabelText("Close navigation");
     fireEvent.click(collapseButton);
 
-    const expandButton = screen.getByLabelText("Expand side navigation");
+    const expandButton = screen.getByLabelText("Open navigation");
     fireEvent.click(expandButton);
 
     expect(mockOnExpand).toBeCalled();
@@ -286,7 +286,7 @@ describe("SideNav", () => {
       </OdysseyProvider>,
     );
 
-    expect(screen.getByRole("menuitem", { name: menuLinkText })).toBeVisible();
+    expect(screen.getByRole("link", { name: menuLinkText })).toBeVisible();
     expect(
       screen.getByRole("button", { name: menuClickableText }),
     ).toBeVisible();
@@ -318,6 +318,6 @@ describe("SideNav", () => {
       </OdysseyProvider>,
     );
 
-    expect(screen.getByRole("menuitem")).toHaveTextContent(`${badgeCount}`);
+    expect(screen.getByRole("listitem")).toHaveTextContent(`${badgeCount}`);
   });
 });

From 9072e0b45a31dbbbbc0a60de12940c1c8e2c974c Mon Sep 17 00:00:00 2001
From: ganeshsomasundaram-okta <ganesh.somasundaram@okta.com>
Date: Wed, 13 Nov 2024 13:41:23 -0500
Subject: [PATCH 11/15] feat: adds drag-n-drop feature to the sidenav (#2405)

OKTA-824071 feat: adds dran-n-drop feature to the sidenav
feat(odyssey-react-mui): smoother transition
fix: sidenav props in ui-shell stories
---
 packages/odyssey-react-mui/package.json       |   3 +
 .../src/labs/SideNav/NavAccordion.tsx         |  11 +-
 .../src/labs/SideNav/SideNav.test.tsx         |   2 +-
 .../src/labs/SideNav/SideNav.tsx              | 355 ++++++++++++------
 .../src/labs/SideNav/SideNavItemContent.tsx   | 178 +++++----
 .../SideNav/SideNavItemContentContext.tsx     |   2 +
 .../labs/SideNav/SideNavItemLinkContent.tsx   |   2 +-
 .../SideNav/SortableList/SortableItem.tsx     | 202 ++++++++++
 .../SideNav/SortableList/SortableList.tsx     | 122 ++++++
 .../SideNav/SortableList/SortableOverlay.tsx  |  34 ++
 .../src/labs/SideNav/types.ts                 |  22 +-
 .../properties/odyssey-react-mui.properties   |   7 +
 .../odyssey-labs/SideNav/SideNav.stories.tsx  | 104 +++--
 .../odyssey-labs/UiShell/UiShell.stories.tsx  |   2 +-
 yarn.lock                                     |  63 ++++
 15 files changed, 871 insertions(+), 238 deletions(-)
 create mode 100644 packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableItem.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableList.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableOverlay.tsx

diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json
index 8ea3cab4bf..e8c1fb0f8b 100644
--- a/packages/odyssey-react-mui/package.json
+++ b/packages/odyssey-react-mui/package.json
@@ -71,6 +71,9 @@
     "directory": "packages/odyssey-react-mui"
   },
   "dependencies": {
+    "@dnd-kit/core": "6.0.3",
+    "@dnd-kit/sortable": "7.0.0",
+    "@dnd-kit/utilities": "3.2.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx b/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx
index ca833e7a59..f2ccc34162 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx
@@ -17,7 +17,7 @@ import {
   AccordionSummary as MuiAccordionSummary,
   AccordionProps as MuiAccordionProps,
 } from "@mui/material";
-import { ReactNode, memo } from "react";
+import { PropsWithChildren, ReactNode, memo } from "react";
 
 import type { HtmlProps } from "../../HtmlProps";
 import { ChevronDownIcon } from "../../icons.generated";
@@ -29,10 +29,6 @@ import { Support } from "../../Typography";
 import { useUniqueId } from "../../useUniqueId";
 
 export type NavAccordionProps = {
-  /**
-   * The content of the Accordion itself
-   */
-  children: ReactNode;
   /**
    * The label text for the AccordionSummary
    */
@@ -76,7 +72,7 @@ const AccordionLabelContainer = styled("span", {
   isIconVisible: boolean;
 }>(({ odysseyDesignTokens, isIconVisible }) => ({
   width: "100%",
-  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,
   fontWeight: odysseyDesignTokens.TypographyWeightHeading,
   color: odysseyDesignTokens.TypographyColorHeading,
 }));
@@ -103,6 +99,7 @@ const AccordionSummaryContainer = styled(MuiAccordionSummary, {
 
   ...(isCompact && {
     paddingBlock: odysseyDesignTokens.Spacing2,
+    minHeight: "unset",
   }),
 
   ...(!isDisabled && {
@@ -122,7 +119,7 @@ const NavAccordion = ({
   isExpanded,
   translate,
   startIcon,
-}: NavAccordionProps) => {
+}: PropsWithChildren<NavAccordionProps>) => {
   const id = useUniqueId(idOverride);
   const headerId = `${id}-header`;
   const contentId = `${id}-content`;
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx
index 06d0602439..7867f0a2a7 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.test.tsx
@@ -273,7 +273,7 @@ describe("SideNav", () => {
             {
               id: "accordionOuter",
               label: accordionOuter,
-              children: [
+              nestedNavItems: [
                 {
                   id: "accordionInner",
                   href: "#",
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx
index 3241bf6121..a1fbc64a66 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNav.tsx
@@ -38,6 +38,9 @@ import {
 import { SideNavFooterContent } from "./SideNavFooterContent";
 import { SideNavItemContentContext } from "./SideNavItemContentContext";
 import { SideNavToggleButton } from "./SideNavToggleButton";
+import { SortableList } from "./SortableList/SortableList";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { arrayMove } from "@dnd-kit/sortable";
 
 export const DEFAULT_SIDE_NAV_WIDTH = "300px";
 
@@ -58,14 +61,41 @@ const StyledCollapsibleContent = styled("div", {
   }) => ({
     position: "relative",
     display: "inline-grid",
-    gridTemplateColumns: isSideNavCollapsed ? 0 : DEFAULT_SIDE_NAV_WIDTH,
-    gridTemplateRows: "max-content 1fr max-content",
-    minWidth: isSideNavCollapsed ? 0 : DEFAULT_SIDE_NAV_WIDTH,
+    gridTemplateColumns: DEFAULT_SIDE_NAV_WIDTH,
+    // gridTemplateRows: "max-content 1fr max-content",
     height: "100%",
     transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,
     transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
     overflow: "hidden",
-    opacity: isSideNavCollapsed ? 0 : 1,
+
+    ...(isSideNavCollapsed && {
+      gridTemplateColumns: 0,
+      opacity: 0,
+    }),
+  }),
+);
+
+const StyledOpacityTransitionContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
+})(
+  ({
+    odysseyDesignTokens,
+    isSideNavCollapsed,
+  }: {
+    odysseyDesignTokens: DesignTokens;
+    isSideNavCollapsed: boolean;
+  }) => ({
+    display: "inline-grid",
+    gridTemplateRows: "max-content 1fr max-content",
+    height: "100%",
+    transition: `opacity 50ms`,
+    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+    overflow: "hidden",
+
+    ...(isSideNavCollapsed && {
+      opacity: 0,
+    }),
   }),
 );
 
@@ -160,13 +190,8 @@ const SideNavScrollableContainer = styled("div", {
 const SectionHeaderContainer = styled("li", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
-  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingBlock: odysseyDesignTokens.Spacing1,
   paddingInline: odysseyDesignTokens.Spacing4,
-
-  "& + &": {
-    backgroundColor: "red !important",
-    marginBlockStart: "1px",
-  },
 }));
 
 const SectionHeader = styled("h3", {
@@ -263,6 +288,7 @@ const SideNav = ({
   logoProps,
   onCollapse,
   onExpand,
+  onSort,
   sideNavItems,
 }: SideNavProps) => {
   const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
@@ -273,6 +299,7 @@ const SideNav = ({
   const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
   const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
+  const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);
 
   useEffect(() => {
     const updateIsContentScrollable = () => {
@@ -364,8 +391,8 @@ const SideNav = ({
    */
   const firstSideNavItemIdWithIsSelected = useMemo(() => {
     const flattenedItems = sideNavItems.flatMap((sideNavItem) =>
-      sideNavItem.children
-        ? [sideNavItem, ...sideNavItem.children]
+      sideNavItem.nestedNavItems
+        ? [sideNavItem, ...sideNavItem.nestedNavItems]
         : sideNavItem,
     );
     const firstItemWithIsSelected = flattenedItems.find(
@@ -402,31 +429,67 @@ const SideNav = ({
     [isCompact],
   );
 
-  const processedSideNavItems = useMemo(
-    () =>
-      sideNavItems.map((item) => ({
-        ...item,
-        children: item.children?.map((childProps) => {
-          return (
+  const setSelectedItem = useCallback(
+    (selectedItemId: string) => {
+      const updatedSideNavItems = sideNavItemsList.map((item) => {
+        if (item.id === selectedItemId) {
+          item.isSelected = true;
+        } else if (item.isSelected) {
+          delete item.isSelected;
+        }
+
+        return item.nestedNavItems
+          ? {
+              ...item,
+              nestedNavItems: item.nestedNavItems.map((childItem) => {
+                if (childItem.id === selectedItemId) {
+                  childItem.isSelected = true;
+                } else if (childItem.isSelected) {
+                  delete childItem.isSelected;
+                }
+                return childItem;
+              }),
+            }
+          : item;
+      });
+      updateSideNavItemsList(updatedSideNavItems);
+    },
+    [sideNavItemsList],
+  );
+
+  const processedSideNavItems = useMemo(() => {
+    return sideNavItemsList?.map((item) => ({
+      ...item,
+      childNavItems: item.nestedNavItems?.map((childProps) => {
+        return {
+          id: childProps.id,
+          isSelected: childProps.isSelected,
+          isDisabled: childProps.isDisabled,
+          navItem: (
             <SideNavItemContentContext.Provider
-              value={{ ...sideNavItemContentProviderValue, depth: 2 }}
+              value={{
+                ...sideNavItemContentProviderValue,
+                depth: 2,
+                isSortable: item.isSortable,
+              }}
               key={childProps.id}
             >
               <SideNavItemContent
                 {...childProps}
-                key={childProps.id}
                 scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}
+                onItemSelected={setSelectedItem}
               />
             </SideNavItemContentContext.Provider>
-          );
-        }),
-      })),
-    [
-      getRefIfThisIsFirstNodeWithIsSelected,
-      sideNavItems,
-      sideNavItemContentProviderValue,
-    ],
-  );
+          ),
+        };
+      }),
+    }));
+  }, [
+    getRefIfThisIsFirstNodeWithIsSelected,
+    sideNavItemsList,
+    sideNavItemContentProviderValue,
+    setSelectedItem,
+  ]);
 
   const sideNavExpandClickHandler = useCallback(() => {
     isSideNavCollapsed ? onExpand?.() : onCollapse?.();
@@ -445,6 +508,26 @@ const SideNav = ({
     [sideNavExpandClickHandler],
   );
 
+  const setSortedItems = useCallback(
+    (parentId: string, activeIndex: number, overIndex: number) => {
+      const sortedSideNavItems = sideNavItemsList.map((item) =>
+        item.id === parentId && item.nestedNavItems
+          ? {
+              ...item,
+              nestedNavItems: arrayMove(
+                item.nestedNavItems,
+                activeIndex,
+                overIndex,
+              ),
+            }
+          : item,
+      );
+      updateSideNavItemsList(sortedSideNavItems);
+      onSort?.(sortedSideNavItems);
+    },
+    [onSort, sideNavItemsList],
+  );
+
   return (
     <StyledSideNav
       aria-label={t("navigation.label")}
@@ -466,107 +549,131 @@ const SideNav = ({
           isSideNavCollapsed={isSideNavCollapsed}
           odysseyDesignTokens={odysseyDesignTokens}
         >
-          <SideNavHeaderContainer
-            odysseyDesignTokens={odysseyDesignTokens}
-            hasContentScrolled={hasContentScrolled}
-          >
-            <SideNavHeader
-              appName={appName}
-              isLoading={isLoading}
-              logoProps={logoProps}
-            />
-          </SideNavHeaderContainer>
-          <SideNavScrollableContainer
+          <StyledOpacityTransitionContainer
+            isSideNavCollapsed={isSideNavCollapsed}
             odysseyDesignTokens={odysseyDesignTokens}
-            data-se="scrollable-region"
           >
-            <SideNavListContainer role="list" ref={scrollableContentRef}>
-              {isLoading
-                ? [...Array(6)].map((_, index) => <LoadingItem key={index} />)
-                : processedSideNavItems?.map((item) => {
-                    const {
-                      id,
-                      label,
-                      isSectionHeader,
-                      startIcon,
-                      children,
-                      isDefaultExpanded,
-                      isDisabled,
-                      isExpanded,
-                    } = item;
-
-                    if (isSectionHeader) {
-                      return (
-                        <SectionHeaderContainer
-                          id={id}
-                          key={id}
-                          odysseyDesignTokens={odysseyDesignTokens}
-                        >
-                          <SectionHeader
+            <SideNavHeaderContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+              hasContentScrolled={hasContentScrolled}
+            >
+              <SideNavHeader
+                appName={appName}
+                isLoading={isLoading}
+                logoProps={logoProps}
+              />
+            </SideNavHeaderContainer>
+            <SideNavScrollableContainer
+              odysseyDesignTokens={odysseyDesignTokens}
+              data-se="scrollable-region"
+            >
+              <SideNavListContainer role="none" ref={scrollableContentRef}>
+                {isLoading
+                  ? [...Array(6)].map((_, index) => <LoadingItem key={index} />)
+                  : processedSideNavItems?.map((item) => {
+                      const {
+                        id,
+                        label,
+                        isSectionHeader,
+                        startIcon,
+                        childNavItems,
+                        isSortable,
+                        isDefaultExpanded,
+                        isDisabled,
+                        isExpanded,
+                      } = item;
+
+                      if (isSectionHeader) {
+                        return (
+                          <SectionHeaderContainer
+                            id={id}
+                            key={id}
                             odysseyDesignTokens={odysseyDesignTokens}
                           >
-                            {label}
-                          </SectionHeader>
-                        </SectionHeaderContainer>
-                      );
-                    } else if (children) {
-                      return (
-                        <StyledSideNavListItem
-                          id={id}
-                          key={id}
-                          odysseyDesignTokens={odysseyDesignTokens}
-                          disabled={isDisabled}
-                          aria-disabled={isDisabled}
-                        >
-                          <NavAccordion
-                            label={label}
-                            isCompact={isCompact}
-                            isDefaultExpanded={isDefaultExpanded}
-                            isExpanded={isExpanded}
-                            startIcon={startIcon}
-                            isDisabled={isDisabled}
+                            <SectionHeader
+                              odysseyDesignTokens={odysseyDesignTokens}
+                            >
+                              {label}
+                            </SectionHeader>
+                          </SectionHeaderContainer>
+                        );
+                      } else if (childNavItems) {
+                        return (
+                          <StyledSideNavListItem
+                            id={id}
+                            key={id}
+                            odysseyDesignTokens={odysseyDesignTokens}
+                            disabled={isDisabled}
+                            aria-disabled={isDisabled}
                           >
-                            <SideNavListContainer id={`${id}-list`} role="list">
-                              {children}
-                            </SideNavListContainer>
-                          </NavAccordion>
-                        </StyledSideNavListItem>
-                      );
-                    } else {
-                      return (
-                        <SideNavItemContentContext.Provider
-                          key={item.id}
-                          value={sideNavItemContentProviderValue}
-                        >
-                          <SideNavItemContent
-                            {...item}
+                            <NavAccordion
+                              label={label}
+                              isCompact={isCompact}
+                              isDefaultExpanded={isDefaultExpanded}
+                              isExpanded={isExpanded}
+                              startIcon={startIcon}
+                              isDisabled={isDisabled}
+                            >
+                              <SideNavListContainer role="none">
+                                {isSortable ? (
+                                  <SortableList
+                                    parentId={item.id}
+                                    items={childNavItems}
+                                    onChange={setSortedItems}
+                                    renderItem={(sortableItem) => (
+                                      <SortableList.Item
+                                        id={sortableItem.id}
+                                        isDisabled={sortableItem.isDisabled}
+                                        isSelected={sortableItem.isSelected}
+                                      >
+                                        {sortableItem.navItem}
+                                      </SortableList.Item>
+                                    )}
+                                  />
+                                ) : (
+                                  childNavItems.map((item) => item.navItem)
+                                )}
+                              </SideNavListContainer>
+                            </NavAccordion>
+                          </StyledSideNavListItem>
+                        );
+                      } else {
+                        return (
+                          <SideNavItemContentContext.Provider
                             key={item.id}
-                            scrollRef={getRefIfThisIsFirstNodeWithIsSelected(
-                              item.id,
-                            )}
-                          />
-                        </SideNavItemContentContext.Provider>
-                      );
-                    }
-                  })}
-            </SideNavListContainer>
-          </SideNavScrollableContainer>
-          {!isLoading && (footerItems || hasCustomFooter) && (
-            <SideNavFooter
-              odysseyDesignTokens={odysseyDesignTokens}
-              isContentScrollable={isContentScrollable}
-            >
-              {hasCustomFooter
-                ? footerComponent
-                : footerItems && (
-                    <SideNavFooterItemsContainer
-                      odysseyDesignTokens={odysseyDesignTokens}
-                    >
-                      <SideNavFooterContent footerItems={footerItems} />
-                    </SideNavFooterItemsContainer>
-                  )}
-            </SideNavFooter>
-          )}
+                            value={sideNavItemContentProviderValue}
+                          >
+                            <SideNavItemContent
+                              {...item}
+                              key={item.id}
+                              scrollRef={getRefIfThisIsFirstNodeWithIsSelected(
+                                item.id,
+                              )}
+                              onItemSelected={setSelectedItem}
+                            />
+                          </SideNavItemContentContext.Provider>
+                        );
+                      }
+                    })}
+              </SideNavListContainer>
+            </SideNavScrollableContainer>
+            {!isLoading && (footerItems || hasCustomFooter) && (
+              <SideNavFooter
+                odysseyDesignTokens={odysseyDesignTokens}
+                isContentScrollable={isContentScrollable}
+              >
+                {hasCustomFooter
+                  ? footerComponent
+                  : footerItems && (
+                      <SideNavFooterItemsContainer
+                        odysseyDesignTokens={odysseyDesignTokens}
+                      >
+                        <SideNavFooterContent footerItems={footerItems} />
+                      </SideNavFooterItemsContainer>
+                    )}
+              </SideNavFooter>
+            )}
+          </StyledOpacityTransitionContainer>
         </StyledCollapsibleContent>
       </OdysseyThemeProvider>
     </StyledSideNav>
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx
index 6542b649a0..f17db5e69b 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContent.tsx
@@ -42,7 +42,6 @@ export const StyledSideNavListItem = styled("li", {
 }>(({ odysseyDesignTokens, isSelected }) => ({
   display: "flex",
   alignItems: "center",
-  marginBlockEnd: "1px",
   backgroundColor: "unset",
   borderRadius: odysseyDesignTokens.BorderRadiusMain,
   transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
@@ -51,10 +50,6 @@ export const StyledSideNavListItem = styled("li", {
     color: `${odysseyDesignTokens.TypographyColorAction} !important`,
     backgroundColor: odysseyDesignTokens.HueBlue50,
   }),
-
-  "&:last-child": {
-    marginBlockEnd: odysseyDesignTokens.Spacing2,
-  },
 }));
 
 const scrollToNode = (node: HTMLElement | null) => {
@@ -71,71 +66,76 @@ type ScrollIntoViewHandle = {
   scrollIntoView: () => void;
 };
 
-const GetNavItemContentStyles = ({
+export const getBaseNavItemContentStyles = ({
   odysseyDesignTokens,
-  contextValue,
   isDisabled,
   isSelected,
 }: {
   odysseyDesignTokens: DesignTokens;
-  contextValue: SideNavItemContentContextValue;
   isDisabled?: boolean;
   isSelected?: boolean;
-}) => {
-  return {
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    textDecoration: "none",
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-    minHeight: odysseyDesignTokens.Spacing7,
-    paddingBlock: odysseyDesignTokens.Spacing3,
-    paddingInline: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth})`,
-    borderRadius: odysseyDesignTokens.BorderRadiusMain,
-    transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  textDecoration: "none",
+  color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+  minHeight: "unset",
+  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingInlineEnd: odysseyDesignTokens.Spacing4,
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+  cursor: "pointer",
 
-    "& + &": {
-      marginTop: 4,
-    },
-    "&:hover": {
+  // `[data-sortable-container='true']:has(button:hover) &` - when the sortable item's drag handle is hovered we want to trigger the same hover behavior as if you were hovering the actual item
+  "&:hover, [data-sortable-container='true']:has(button:hover, button:focus, button:focus-visible) &":
+    {
       textDecoration: "none",
-      cursor: "pointer",
-      backgroundColor: !isDisabled
-        ? odysseyDesignTokens.HueNeutral50
-        : "inherit",
+      backgroundColor: odysseyDesignTokens.HueNeutral50,
 
-      ...(isDisabled && {
-        color: "inherit",
-        cursor: "default",
+      ...(isSelected && {
+        backgroundColor: odysseyDesignTokens.HueBlue50,
+        color: odysseyDesignTokens.TypographyColorAction,
       }),
 
-      ...(isSelected && {
-        "&:hover": {
-          backgroundColor: odysseyDesignTokens.HueBlue50,
-        },
+      ...(isDisabled && {
+        backgroundColor: "unset",
       }),
     },
 
-    ...(isSelected && {
-      color: `${odysseyDesignTokens.TypographyColorAction} !important`,
-      fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,
-    }),
+  ...(isSelected && {
+    color: `${odysseyDesignTokens.TypographyColorAction}`,
+    fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,
+  }),
 
-    ...(isDisabled && {
-      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
-    }),
+  ...(isDisabled && {
+    cursor: "default",
+    color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
+  }),
 
-    ...(contextValue.isCompact && {
-      paddingBlock: odysseyDesignTokens.Spacing1,
-      minHeight: odysseyDesignTokens.Spacing6,
-    }),
+  "&:focus-visible, &:focus": {
+    outline: "none",
+    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
+  },
+});
 
-    "&:focus-visible": {
-      outline: "none",
-      boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
-    },
-  };
-};
+export const getNavItemContentStyles = ({
+  odysseyDesignTokens,
+  contextValue,
+}: {
+  odysseyDesignTokens: DesignTokens;
+  contextValue: SideNavItemContentContextValue;
+}) => ({
+  paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth} + ${odysseyDesignTokens.Spacing6})`,
+
+  ...(contextValue.depth === 1 && {
+    paddingInlineStart: odysseyDesignTokens.Spacing4,
+  }),
+
+  ...(contextValue.isCompact && {
+    paddingBlock: odysseyDesignTokens.Spacing1,
+  }),
+});
 
 const NavItemContentContainer = styled("div", {
   shouldForwardProp: (prop) =>
@@ -143,15 +143,47 @@ const NavItemContentContainer = styled("div", {
     prop != "contextValue" &&
     prop !== "isDisabled" &&
     prop !== "isSelected",
-})(GetNavItemContentStyles);
+})<{
+  contextValue: SideNavItemContentContextValue;
+  odysseyDesignTokens: DesignTokens;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+}>(({ contextValue, odysseyDesignTokens, isDisabled, isSelected }) => ({
+  ...getBaseNavItemContentStyles({
+    odysseyDesignTokens,
+    isDisabled,
+    isSelected,
+  }),
 
-const NavItemLinkContainer = styled(NavItemLink, {
+  ...getNavItemContentStyles({
+    odysseyDesignTokens,
+    contextValue,
+  }),
+}));
+
+const StyledNavItemLink = styled(NavItemLink, {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" &&
     prop != "contextValue" &&
     prop !== "isDisabled" &&
     prop !== "isSelected",
-})(GetNavItemContentStyles);
+})<{
+  contextValue: SideNavItemContentContextValue;
+  odysseyDesignTokens: DesignTokens;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+}>(({ contextValue, odysseyDesignTokens, isDisabled, isSelected }) => ({
+  ...getBaseNavItemContentStyles({
+    odysseyDesignTokens,
+    isDisabled,
+    isSelected,
+  }),
+
+  ...getNavItemContentStyles({
+    odysseyDesignTokens,
+    contextValue,
+  }),
+}));
 
 const SideNavItemContent = ({
   count,
@@ -164,9 +196,10 @@ const SideNavItemContent = ({
   statusLabel,
   endIcon,
   onClick,
-  isSelected,
   isDisabled,
+  isSelected,
   scrollRef,
+  onItemSelected,
 }: Pick<
   SideNavItem,
   | "count"
@@ -179,13 +212,14 @@ const SideNavItemContent = ({
   | "statusLabel"
   | "endIcon"
   | "onClick"
-  | "isSelected"
   | "isDisabled"
+  | "isSelected"
 > & {
   /**
    * The ref used to scroll to this item
    */
   scrollRef?: React.RefObject<ScrollIntoViewHandle>;
+  onItemSelected?(selectedItemId: string): void;
 }) => {
   const sidenavItemContentContext = useSideNavItemContent();
   const contextValue = useMemo(
@@ -207,14 +241,25 @@ const SideNavItemContent = ({
     [],
   );
 
+  const itemClickHandler = useCallback(
+    (id: string) => {
+      return () => {
+        onItemSelected?.(id);
+        onClick?.();
+      };
+    },
+    [onClick, onItemSelected],
+  );
+
   const sideNavItemContentKeyHandler = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
+    (id: string, event: KeyboardEvent<HTMLDivElement>) => {
       if (event?.key === "Enter") {
         event.preventDefault();
+        onItemSelected?.(id);
         onClick?.();
       }
     },
-    [onClick],
+    [onClick, onItemSelected],
   );
 
   return (
@@ -252,8 +297,12 @@ const SideNavItemContent = ({
             contextValue={contextValue}
             isDisabled={isDisabled}
             tabIndex={0}
-            onClick={onClick}
-            onKeyDown={sideNavItemContentKeyHandler}
+            role="button"
+            onClick={itemClickHandler(id)}
+            onKeyDown={(event: KeyboardEvent<HTMLDivElement>) =>
+              sideNavItemContentKeyHandler(id, event)
+            }
+            isSelected={isSelected}
           >
             <SideNavItemLinkContent
               count={count}
@@ -265,14 +314,14 @@ const SideNavItemContent = ({
             />
           </NavItemContentContainer>
         ) : (
-          <NavItemLinkContainer
+          <StyledNavItemLink
             odysseyDesignTokens={odysseyDesignTokens}
             contextValue={contextValue}
             isDisabled={isDisabled}
             isSelected={isSelected}
             href={href}
             target={target}
-            onClick={onClick}
+            onClick={itemClickHandler(id)}
           >
             <SideNavItemLinkContent
               count={count}
@@ -287,12 +336,13 @@ const SideNavItemContent = ({
                 <ExternalLinkIcon />
               </span>
             )}
-          </NavItemLinkContainer>
+          </StyledNavItemLink>
         )
       }
     </StyledSideNavListItem>
   );
 };
+
 const MemoizedSideNavItemContent = memo(SideNavItemContent);
 MemoizedSideNavItemContent.displayName = "SideNavItemContent";
 
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContentContext.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContentContext.tsx
index c1f87d5c2f..7da125bcf7 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContentContext.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemContentContext.tsx
@@ -14,12 +14,14 @@ import { createContext, useContext } from "react";
 
 export type SideNavItemContentContextValue = {
   isCompact?: boolean;
+  isSortable?: boolean;
   depth: number;
 };
 
 export const SideNavItemContentContext =
   createContext<SideNavItemContentContextValue>({
     isCompact: false,
+    isSortable: false,
     depth: 1,
   });
 
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx
index 59423a9121..f46bded39c 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SideNavItemLinkContent.tsx
@@ -33,7 +33,7 @@ const SideNavItemLabelContainer = styled("div", {
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographySizeBody,
-  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,
 }));
 
 const SideNavItemLinkContent = ({
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableItem.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableItem.tsx
new file mode 100644
index 0000000000..3f5f910b9e
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableItem.tsx
@@ -0,0 +1,202 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { createContext, useContext, useMemo } from "react";
+import type { CSSProperties, PropsWithChildren } from "react";
+import type {
+  DraggableSyntheticListeners,
+  UniqueIdentifier,
+} from "@dnd-kit/core";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useSortable } from "@dnd-kit/sortable";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { CSS } from "@dnd-kit/utilities";
+import styled from "@emotion/styled";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../../OdysseyDesignTokensContext";
+import { useTranslation } from "react-i18next";
+
+type ItemProps = {
+  id: UniqueIdentifier;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+};
+
+interface Context {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  attributes: Record<string, any>;
+  listeners: DraggableSyntheticListeners;
+  ref(node: HTMLElement | null): void;
+}
+
+const SortableItemContext = createContext<Context>({
+  attributes: {},
+  listeners: undefined,
+  ref() {},
+});
+
+const StyledSortableListItem = styled("li", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isSelected",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isSelected?: boolean;
+}>(({ odysseyDesignTokens, isSelected }) => ({
+  position: "relative",
+
+  button: {
+    top: "50%",
+    left: odysseyDesignTokens.Spacing2,
+    transform: "translateY(-50%)",
+  },
+
+  svg: {
+    path: {
+      fill: "currentColor",
+    },
+  },
+
+  "&:has(a:hover, button:hover, a:focus, button:focus, a:focus-visible, button:focus-visible, [role='button']:hover, [role='button']:focus, [role='button']:focus-visible)":
+    {
+      button: {
+        opacity: 1,
+        outlineWidth: 0,
+      },
+    },
+
+  ...(isSelected && {
+    svg: {
+      path: {
+        fill: odysseyDesignTokens.TypographyColorAction,
+      },
+    },
+  }),
+}));
+
+const StyledUl = styled("ul")({
+  padding: 0,
+  listStyle: "none",
+  listStyleType: "none",
+});
+
+const StyledDragHandleButton = styled("button", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isDragging",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isDragging?: boolean;
+}>(({ odysseyDesignTokens, isDragging }) => ({
+  position: "absolute",
+  opacity: 0,
+  // paddingInlineStart: odysseyDesignTokens.Spacing4,
+  padding: odysseyDesignTokens.Spacing2,
+  // paddingBlock: 0,
+  border: "none",
+  backgroundColor: "transparent",
+  cursor: `${isDragging ? "grabbing" : "grab"}`,
+  transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+
+  svg: {
+    display: "flex",
+  },
+
+  "&:focus, &:focus-visible": {
+    outline: "none",
+    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
+  },
+}));
+
+type DragHandleProps = {
+  isDisabled?: boolean;
+  isDragging?: boolean;
+};
+
+export const DragHandle = ({ isDragging }: DragHandleProps) => {
+  const { attributes, listeners, ref } = useContext(SortableItemContext);
+  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+
+  return (
+    <StyledDragHandleButton
+      {...attributes}
+      {...listeners}
+      odysseyDesignTokens={odysseyDesignTokens}
+      isDragging={isDragging}
+      ref={ref}
+      aria-label={t("navigation.drag.handle")}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6 2.33331C6 2.8856 5.55228 3.33331 5 3.33331C4.44772 3.33331 4 2.8856 4 2.33331C4 1.78103 4.44772 1.33331 5 1.33331C5.55228 1.33331 6 1.78103 6 2.33331ZM11 3.33331C11.5523 3.33331 12 2.8856 12 2.33331C12 1.78103 11.5523 1.33331 11 1.33331C10.4477 1.33331 10 1.78103 10 2.33331C10 2.8856 10.4477 3.33331 11 3.33331ZM11 7.11109C11.5523 7.11109 12 6.66338 12 6.11109C12 5.55881 11.5523 5.11109 11 5.11109C10.4477 5.11109 10 5.55881 10 6.11109C10 6.66338 10.4477 7.11109 11 7.11109ZM12 9.88887C12 10.4412 11.5523 10.8889 11 10.8889C10.4477 10.8889 10 10.4412 10 9.88887C10 9.33659 10.4477 8.88887 11 8.88887C11.5523 8.88887 12 9.33659 12 9.88887ZM11 14.6666C11.5523 14.6666 12 14.2189 12 13.6666C12 13.1144 11.5523 12.6666 11 12.6666C10.4477 12.6666 10 13.1144 10 13.6666C10 14.2189 10.4477 14.6666 11 14.6666ZM5 7.11109C5.55228 7.11109 6 6.66338 6 6.11109C6 5.55881 5.55228 5.11109 5 5.11109C4.44772 5.11109 4 5.55881 4 6.11109C4 6.66338 4.44772 7.11109 5 7.11109ZM6 9.88888C6 10.4412 5.55228 10.8889 5 10.8889C4.44772 10.8889 4 10.4412 4 9.88888C4 9.33659 4.44772 8.88888 5 8.88888C5.55228 8.88888 6 9.33659 6 9.88888ZM5 14.6666C5.55228 14.6666 6 14.2189 6 13.6666C6 13.1144 5.55228 12.6666 5 12.6666C4.44772 12.6666 4 13.1144 4 13.6666C4 14.2189 4.44772 14.6666 5 14.6666Z"
+          fill="#3F59E4"
+        />
+      </svg>
+    </StyledDragHandleButton>
+  );
+};
+
+export const SortableItem = ({
+  id,
+  isDisabled,
+  isSelected,
+  children,
+}: PropsWithChildren<ItemProps>) => {
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id });
+  const context: Context = useMemo(
+    () => ({
+      attributes,
+      listeners,
+      ref: setActivatorNodeRef,
+    }),
+    [attributes, listeners, setActivatorNodeRef],
+  );
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.4 : undefined,
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
+
+  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
+  return (
+    <SortableItemContext.Provider value={context}>
+      <StyledSortableListItem
+        data-sortable-container="true"
+        ref={setNodeRef}
+        style={style}
+        odysseyDesignTokens={odysseyDesignTokens}
+        isSelected={isSelected}
+      >
+        {!isDisabled && <DragHandle isDragging={isDragging} />}
+        <StyledUl>{children}</StyledUl>
+      </StyledSortableListItem>
+    </SortableItemContext.Provider>
+  );
+};
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableList.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableList.tsx
new file mode 100644
index 0000000000..9fcbf614e5
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableList.tsx
@@ -0,0 +1,122 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import React, { useMemo, useState } from "react";
+import type { ReactNode } from "react";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { Active, Announcements, UniqueIdentifier } from "@dnd-kit/core";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+
+import { SortableItem } from "./SortableItem";
+import { SortableOverlay } from "./SortableOverlay";
+import { useTranslation } from "react-i18next";
+
+export interface BaseItem {
+  id: UniqueIdentifier;
+  isDisabled: boolean | undefined;
+  isSelected: boolean | undefined;
+  navItem: ReactNode;
+}
+
+interface ListProps<T extends BaseItem> {
+  parentId: string;
+  items: T[];
+  onChange(parentId: string, activeIndex: number, overIndex: number): void;
+  renderItem(item: T): ReactNode;
+}
+
+export const SortableList = <T extends BaseItem>({
+  parentId,
+  items,
+  onChange,
+  renderItem,
+}: ListProps<T>) => {
+  const [active, setActive] = useState<Active | null>(null);
+  const activeItem = useMemo(
+    () => items.find((item) => item.id === active?.id),
+    [active, items],
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const { t } = useTranslation();
+  const announcements: Announcements = useMemo(
+    () => ({
+      onDragStart: ({ active }) => {
+        return `${t("sortable.list.drag.start", { activeId: active.id })}`;
+      },
+      onDragOver: ({ active, over }) => {
+        if (over) {
+          return `${t("sortable.list.drag.moved.over", { activeId: active.id, overId: over.id })}`;
+        }
+        return `${t("sortable.list.drag.nolonger.over", { activeId: active.id })}`;
+      },
+      onDragEnd: ({ active, over }) => {
+        if (over) {
+          return `${t("sortable.list.drag.end.dropped.over", { activeId: active.id, overId: over.id })}`;
+        }
+        return `${t("sortable.list.drag.end.dropped", { activeId: active.id })}`;
+      },
+      onDragCancel: ({ active }) => {
+        return `${t("sortable.list.drag.cancel", { activeId: active.id })}`;
+      },
+    }),
+    [t],
+  );
+
+  return (
+    <DndContext
+      accessibility={{ announcements: announcements }}
+      sensors={sensors}
+      onDragStart={({ active }) => {
+        setActive(active);
+      }}
+      onDragEnd={({ active, over }) => {
+        if (over && active.id !== over?.id) {
+          const activeIndex = items.findIndex(({ id }) => id === active.id);
+          const overIndex = items.findIndex(({ id }) => id === over.id);
+          onChange(parentId, activeIndex, overIndex);
+        }
+        setActive(null);
+      }}
+      onDragCancel={() => {
+        setActive(null);
+      }}
+    >
+      <SortableContext items={items}>
+        {items.map((item) => (
+          <React.Fragment key={item.id}>{renderItem(item)}</React.Fragment>
+        ))}
+      </SortableContext>
+      <SortableOverlay>
+        {activeItem ? renderItem(activeItem) : null}
+      </SortableOverlay>
+    </DndContext>
+  );
+};
+
+SortableList.Item = SortableItem;
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableOverlay.tsx b/packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableOverlay.tsx
new file mode 100644
index 0000000000..92dc9ba00f
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/SideNav/SortableList/SortableOverlay.tsx
@@ -0,0 +1,34 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import type { PropsWithChildren } from "react";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { DragOverlay, defaultDropAnimationSideEffects } from "@dnd-kit/core";
+import type { DropAnimation } from "@dnd-kit/core";
+
+const dropAnimationConfig: DropAnimation = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4",
+      },
+    },
+  }),
+};
+
+interface Props {}
+
+export function SortableOverlay({ children }: PropsWithChildren<Props>) {
+  return (
+    <DragOverlay dropAnimation={dropAnimationConfig}>{children}</DragOverlay>
+  );
+}
diff --git a/packages/odyssey-react-mui/src/labs/SideNav/types.ts b/packages/odyssey-react-mui/src/labs/SideNav/types.ts
index 7b52d539b7..46590b4ae3 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav/types.ts
+++ b/packages/odyssey-react-mui/src/labs/SideNav/types.ts
@@ -78,6 +78,10 @@ export type SideNavProps = {
    *  Triggers when the side nav is expanded
    */
   onExpand?(): void;
+  /**
+   *  Triggers when the item is reordered
+   */
+  onSort?(reorderedItems: SideNavItem[]): void;
   /**
    * Nav items in the side nav
    */
@@ -114,7 +118,7 @@ export type SideNavItem = {
   id: string;
   /**
    * Whether the item is disabled. When set to true the nav item is set to Disabled color,
-   * the link/item is not clickable, and item with children is not expandable.
+   * the link/item is not clickable, and item with nestedNavItems is not expandable.
    */
   isDisabled?: boolean;
   /**
@@ -144,7 +148,7 @@ export type SideNavItem = {
   target?: string;
 } & (
   | {
-      children?: never;
+      nestedNavItems?: never;
       href?: never;
       isDefaultExpanded?: never;
       isExpanded?: never;
@@ -152,9 +156,10 @@ export type SideNavItem = {
        * Determines if the side nav item is a section header
        */
       isSectionHeader: true;
+      isSortable?: never;
     }
   | {
-      children?: never;
+      nestedNavItems?: never;
       /**
        * link added to the nav item. if it is undefined, static text will be displayed.
        * fires onClick event when it is passed
@@ -163,16 +168,17 @@ export type SideNavItem = {
       isDefaultExpanded?: never;
       isExpanded?: never;
       isSectionHeader?: never;
+      isSortable?: never;
     }
   | {
       /**
-       * An array of side nav items to be displayed as children within Accordion
+       * An array of side nav items to be displayed as nestedNavItems within Accordion
        */
-      children?: Array<Omit<SideNavItem, "startIcon" | "endIcon">>;
+      nestedNavItems?: Array<Omit<SideNavItem, "startIcon" | "nestedNavItems">>;
       endIcon?: never;
       href?: never;
       /**
-       * Whether the accordion (nav item with children) is expanded by default
+       * Whether the accordion (nav item with nestedNavItems) is expanded by default
        */
       isDefaultExpanded?: boolean;
       /**
@@ -180,7 +186,11 @@ export type SideNavItem = {
        * Setting this prop enables control over the accordion.
        */
       isExpanded?: boolean;
+      /**
+       * If true, enables sorting for the accordion items
+       */
       isSectionHeader?: never;
+      isSortable?: boolean;
     }
 );
 
diff --git a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
index d4f9e56125..abd52ab805 100644
--- a/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
+++ b/packages/odyssey-react-mui/src/properties/odyssey-react-mui.properties
@@ -1,5 +1,12 @@
 navigation.label = Main navigation
 navigation.footer = Navigation secondary links
+navigation.drag.handle = Drag handle
+sortable.list.drag.start = Picked up draggable item {{activeId}}
+sortable.list.drag.moved.over = Draggable item {{activeId}} was moved over droppable area {{overId}}
+sortable.list.drag.nolonger.over = Draggable item {{activeId}} is no longer over a droppable area
+sortable.list.drag.end.dropped.over = Draggable item {{activeId}} was dropped over droppable area {{overId}}
+sortable.list.drag.end.dropped = Draggable item {{activeId}} was dropped
+sortable.list.drag.cancel = Dragging was cancelled. Draggable item {{activeId}} was dropped
 
 breadcrumbs.home.text = Home
 breadcrumbs.label.text = Breadcrumbs
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx
index 784bc13b6d..c4343b5809 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx
@@ -115,6 +115,10 @@ const storybookMeta: Meta<SideNavProps> = {
     onExpand: {
       description: "Callback to be triggered when the side nav is expanded",
     },
+    onSort: {
+      description:
+        "Callback to be triggered when a nested side nav item inside is reordered. Returns the new items list",
+    },
     sideNavItems: {
       description: "",
       table: {
@@ -130,90 +134,90 @@ const storybookMeta: Meta<SideNavProps> = {
     isCompact: false,
     sideNavItems: [
       {
-        id: "AddNewFolder",
+        id: "item1",
         label: "Add new folder",
         endIcon: <AddCircleIcon />,
         onClick: () => {},
       },
       {
-        id: "item0-0",
+        id: "item2",
         label: "Admin",
         isSectionHeader: true,
       },
       {
-        id: "item0-1",
+        id: "item3",
         href: "/?path=/docs/mui-components-typography--docs",
         label: "Users",
         startIcon: <UserIcon />,
       },
       {
-        id: "item1",
+        id: "item4",
         label: "Dashboard",
         startIcon: <HomeIcon />,
         isDisabled: true,
-        children: [
+        nestedNavItems: [
           {
-            id: "item1-1",
+            id: "item4-1",
             href: "/",
             label: "Home",
           },
         ],
       },
       {
-        id: "item2",
+        id: "item5",
         href: "/",
         label: "Applications",
         startIcon: <AppsIcon />,
       },
       {
-        id: "item001",
+        id: "item6",
         label: "Onboarding",
-        startIcon: <SettingsIcon />,
-        children: [
+        startIcon: <FolderIcon />,
+        nestedNavItems: [
           {
-            id: "item1-2",
+            id: "item6-1",
             href: "/",
             label: "Start",
           },
           {
-            id: "item1-4",
+            id: "item6-2",
             href: "/",
             label: "Tasks",
           },
           {
-            id: "item1-5",
+            id: "item6-3",
             href: "/",
             label: "Getting Started",
           },
         ],
       },
       {
-        id: "item0-1-2",
+        id: "item7",
         href: "/",
         label: "Directory",
         startIcon: <DirectoryIcon />,
       },
       {
-        id: "item0-3",
+        id: "item8",
         label: "Resource Management",
         isSectionHeader: true,
       },
       {
-        id: "item3-2-1",
+        id: "item9",
         href: "/",
         label: "Kubernetes",
         startIcon: <ServerIcon />,
-        severity: "success",
-        statusLabel: "success",
+        severity: "info",
+        statusLabel: "BETA",
       },
       {
-        id: "item5",
+        id: "item10",
         href: "/",
         label: "Reports",
         startIcon: <DownloadIcon />,
       },
       {
-        id: "item3-1-0",
+        id: "item11",
         href: "/",
         label: "Identify Governance",
         target: "_blank",
@@ -221,71 +225,103 @@ const storybookMeta: Meta<SideNavProps> = {
         startIcon: <Fido2Icon />,
       },
       {
-        id: "item3-1-3",
+        id: "item12",
         href: "/",
         label: "Workflows",
         target: "_blank",
         startIcon: <ClockIcon />,
       },
       {
-        id: "item3-0",
+        id: "item13",
         label: "Security Administration",
         isSectionHeader: true,
       },
       {
-        id: "item3",
+        id: "item14",
         href: "/",
         label: "Security",
         startIcon: <LockIcon />,
         endIcon: <LockIcon />,
       },
       {
-        id: "item4",
+        id: "item15",
         label: "Settings",
         isDefaultExpanded: true,
-        children: [
+        isSortable: true,
+        startIcon: <SettingsIcon />,
+        nestedNavItems: [
           {
-            id: "item4-1",
+            id: "item15-1",
             href: "/",
             label: "General",
           },
           {
-            id: "item4-2",
+            id: "item15-2",
             href: "/",
             label: "Custom Domain",
             isSelected: true,
           },
           {
-            id: "item4-3",
-            href: "/",
+            id: "item15-3",
             label: "Account Management",
           },
           {
-            id: "item4-4",
+            id: "item15-4",
             href: "/",
             label: "Authentication Policies",
             isDisabled: true,
           },
           {
-            id: "item4-5",
+            id: "item15-5",
             href: "/",
             label: "IDP Configuration",
           },
         ],
       },
       {
-        id: "item5-0",
+        id: "item16",
         href: "/",
         label: "System Configuration",
         startIcon: <FolderIcon />,
       },
       {
-        id: "item6",
-        href: "/",
+        id: "item17-0",
+        label: "Enduser",
+        isSectionHeader: true,
+      },
+      {
+        id: "item17",
+        label: "My Apps",
+        isDefaultExpanded: true,
+        isSortable: true,
+        startIcon: <HomeIcon />,
+        nestedNavItems: [
+          {
+            id: "item17-1",
+            label: "Recently Used",
+          },
+          {
+            id: "item17-2",
+            label: "Work",
+          },
+          {
+            id: "item17-3",
+            label: "Add section",
+            endIcon: <AddCircleIcon />,
+          },
+        ],
+      },
+      {
+        id: "item18",
         label: "Notifications",
         startIcon: <NotificationIcon />,
         count: 1,
       },
+      {
+        id: "item19",
+        label: "Add apps",
+        startIcon: <AppsIcon />,
+      },
     ],
     footerItems: [
       {
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/UiShell/UiShell.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/UiShell/UiShell.stories.tsx
index 4038ca2ed7..446210dc90 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/UiShell/UiShell.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/UiShell/UiShell.stories.tsx
@@ -127,7 +127,7 @@ const sharedSideNavProps: UiShellNavComponentProps["sideNavProps"] = {
       label: "Dashboard",
       startIcon: <HomeIcon />,
       isDisabled: true,
-      children: [
+      nestedNavItems: [
         {
           id: "item1-1",
           href: "/",
diff --git a/yarn.lock b/yarn.lock
index 55eaa60b0b..10d7c20ea4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2689,6 +2689,66 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@dnd-kit/accessibility@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "@dnd-kit/accessibility@npm:3.1.0"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 10/750a0537877d5dde3753e9ef59d19628b553567e90fc3e3b14a79bded08f47f4a7161bc0d003d7cd6b3bd9e10aa233628dca07d2aa5a2120cac84555ba1653d8
+  languageName: node
+  linkType: hard
+
+"@dnd-kit/core@npm:6.0.3":
+  version: 6.0.3
+  resolution: "@dnd-kit/core@npm:6.0.3"
+  dependencies:
+    "@dnd-kit/accessibility": "npm:^3.0.0"
+    "@dnd-kit/utilities": "npm:^3.2.0"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 10/32585e23ec8c2b1d4d4ca55228c64d39def1f2124ee45d6861d8b1ccd50b71bcaebefb277ef7161273f3783b90bc90f7c755c9b97eee37d0d40a632a9b30832b
+  languageName: node
+  linkType: hard
+
+"@dnd-kit/sortable@npm:7.0.0":
+  version: 7.0.0
+  resolution: "@dnd-kit/sortable@npm:7.0.0"
+  dependencies:
+    "@dnd-kit/utilities": "npm:^3.2.0"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@dnd-kit/core": ^6.0.0
+    react: ">=16.8.0"
+  checksum: 10/01e712d902c63ce6794cfdb774388e4af40d42ee56f7ce5d6d6ffa81b240b1352bc9f1309cf515adfeab48349168183eef70f3e2746fe016d269713c850ed6ac
+  languageName: node
+  linkType: hard
+
+"@dnd-kit/utilities@npm:3.2.0":
+  version: 3.2.0
+  resolution: "@dnd-kit/utilities@npm:3.2.0"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 10/6756055f502f1b7cbd5cfa29e26c6be7589d48fe10aeb81ab46651f11bc84e06169ad35c4e1fcb91c548a626be3fd8e9ec4a0de0d60cad3ccd444827af66502e
+  languageName: node
+  linkType: hard
+
+"@dnd-kit/utilities@npm:^3.2.0":
+  version: 3.2.2
+  resolution: "@dnd-kit/utilities@npm:3.2.2"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 10/6cfe46a5fcdaced943982e7ae66b08b89235493e106eb5bc833737c25905e13375c6ecc3aa0c357d136cb21dae3966213dba063f19b7a60b1235a29a7b05ff84
+  languageName: node
+  linkType: hard
+
 "@emotion/babel-plugin@npm:^11.11.0":
   version: 11.11.0
   resolution: "@emotion/babel-plugin@npm:11.11.0"
@@ -5240,6 +5300,9 @@ __metadata:
   dependencies:
     "@babel/cli": "npm:^7.23.9"
     "@babel/core": "npm:^7.23.9"
+    "@dnd-kit/core": "npm:6.0.3"
+    "@dnd-kit/sortable": "npm:7.0.0"
+    "@dnd-kit/utilities": "npm:3.2.0"
     "@emotion/cache": "npm:^11.11.0"
     "@emotion/react": "npm:^11.11.4"
     "@emotion/styled": "npm:^11.11.0"

From 3bd858c6123552da4adc1c53fb16c4a2c9b9ebe7 Mon Sep 17 00:00:00 2001
From: bryancunningham-okta
 <148223016+bryancunningham-okta@users.noreply.github.com>
Date: Thu, 14 Nov 2024 13:47:15 -0500
Subject: [PATCH 12/15] Add custom pagination props to DataView (#2413)

DES-6761 feat(odyssey-react-mui): add custom pagination props to DataView
feat(odyssey-react-mui): fix props import path
---
 packages/odyssey-react-mui/src/labs/DataView/DataView.tsx | 6 ++++++
 .../odyssey-react-mui/src/labs/DataView/componentTypes.ts | 8 ++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
index c3b883c818..c0f03b9c47 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
@@ -101,6 +101,9 @@ const DataView = ({
   getRowId: getRowIdProp,
   hasFilters,
   hasPagination,
+  hasPageInput,
+  hasRowCountInput,
+  hasRowCountLabel,
   hasSearch,
   hasSearchSubmitButton,
   hasRowReordering,
@@ -461,6 +464,9 @@ const DataView = ({
       {hasPagination && (
         <Pagination
           currentPageLabel={t("pagination.page")}
+          hasPageInput={hasPageInput}
+          hasRowCountInput={hasRowCountInput}
+          hasRowCountLabel={hasRowCountLabel}
           isDisabled={isEmpty}
           isMoreDisabled={isPaginationMoreDisabled}
           lastRow={lastRowOnPage}
diff --git a/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts b/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts
index 8a41f7039e..c557495e59 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts
+++ b/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts
@@ -18,6 +18,7 @@ import {
   MRT_TableOptions,
   MRT_VisibilityState,
 } from "material-react-table";
+import { ReactNode } from "react";
 
 import { availableLayouts, availableCardLayouts } from "./constants";
 import { DataFilter } from "../DataFilters";
@@ -30,8 +31,8 @@ import {
 import { DataTableRowActionsProps } from "../../DataTable/DataTableRowActions";
 import { MenuButtonProps } from "../..";
 import { paginationTypeValues } from "../DataTablePagination";
-import { ReactNode } from "react";
 import { DataCardProps } from "./DataCard";
+import { type PaginationProps } from "../../Pagination";
 
 export type DataLayout = (typeof availableLayouts)[number];
 export type CardLayout = (typeof availableCardLayouts)[number];
@@ -90,7 +91,10 @@ export type UniversalProps = {
   resultsPerPage?: number;
   searchDelayTime?: number;
   totalRows?: number;
-};
+} & Pick<
+  PaginationProps,
+  "hasPageInput" | "hasRowCountInput" | "hasRowCountLabel"
+>;
 
 export type TableLayoutProps = {
   columns: DataTableColumn<MRT_RowData>[];

From c22959171a5abd190b4aafe01173137a25f41477 Mon Sep 17 00:00:00 2001
From: bryancunningham-okta <bryan.cunningham@okta.com>
Date: Thu, 14 Nov 2024 13:52:23 -0500
Subject: [PATCH 13/15] build: bump versions for 1.27.0

---
 lerna.json                                        | 2 +-
 packages/browserslist-config-odyssey/package.json | 2 +-
 packages/odyssey-babel-preset/package.json        | 2 +-
 packages/odyssey-design-tokens/package.json       | 2 +-
 packages/odyssey-react-mui/package.json           | 2 +-
 packages/odyssey-storybook/package.json           | 2 +-
 packages/odyssey-svgr/package.json                | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/lerna.json b/lerna.json
index 672097e6cc..e2dc5414d9 100644
--- a/lerna.json
+++ b/lerna.json
@@ -4,5 +4,5 @@
   "npmClient": "yarn",
   "packages": ["packages/*"],
   "useNx": false,
-  "version": "1.26.0"
+  "version": "1.27.0"
 }
diff --git a/packages/browserslist-config-odyssey/package.json b/packages/browserslist-config-odyssey/package.json
index 41eb732cce..1c8c9b39d2 100644
--- a/packages/browserslist-config-odyssey/package.json
+++ b/packages/browserslist-config-odyssey/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/browserslist-config-odyssey",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "Browserslist config for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
diff --git a/packages/odyssey-babel-preset/package.json b/packages/odyssey-babel-preset/package.json
index 72411c1dc1..e7493493b6 100644
--- a/packages/odyssey-babel-preset/package.json
+++ b/packages/odyssey-babel-preset/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-babel-preset",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "Babel preset for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
diff --git a/packages/odyssey-design-tokens/package.json b/packages/odyssey-design-tokens/package.json
index d64a73f9a8..44b7a85469 100644
--- a/packages/odyssey-design-tokens/package.json
+++ b/packages/odyssey-design-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-design-tokens",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "Design tokens for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json
index e8c1fb0f8b..5feb385800 100644
--- a/packages/odyssey-react-mui/package.json
+++ b/packages/odyssey-react-mui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
diff --git a/packages/odyssey-storybook/package.json b/packages/odyssey-storybook/package.json
index 1335e84c65..064fd047e3 100644
--- a/packages/odyssey-storybook/package.json
+++ b/packages/odyssey-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-storybook",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "Documentation for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
diff --git a/packages/odyssey-svgr/package.json b/packages/odyssey-svgr/package.json
index 19eb0b07d2..a2e6dcd5b4 100644
--- a/packages/odyssey-svgr/package.json
+++ b/packages/odyssey-svgr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-svgr",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "Configuration files for svgr icon conversion",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",

From f35ca7c5c0434b77bec67714697b0f4a000db248 Mon Sep 17 00:00:00 2001
From: bryancunningham-okta <bryan.cunningham@okta.com>
Date: Thu, 14 Nov 2024 13:52:41 -0500
Subject: [PATCH 14/15] docs: update CHANGELOG for 1.27.0

---
 CHANGELOG.md                                      | 6 ++++++
 packages/browserslist-config-odyssey/CHANGELOG.md | 4 ++++
 packages/odyssey-babel-preset/CHANGELOG.md        | 4 ++++
 packages/odyssey-design-tokens/CHANGELOG.md       | 4 ++++
 packages/odyssey-react-mui/CHANGELOG.md           | 6 ++++++
 packages/odyssey-storybook/CHANGELOG.md           | 6 ++++++
 packages/odyssey-svgr/CHANGELOG.md                | 4 ++++
 7 files changed, 34 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2bae35ce53..d77c05b587 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.27.0](https://github.com/okta/odyssey/compare/v1.26.0...v1.27.0) (2024-11-14)
+
+### Features
+
+- adds drag-n-drop feature to the sidenav ([#2405](https://github.com/okta/odyssey/issues/2405)) ([aca8dad](https://github.com/okta/odyssey/commit/aca8dadd7130847112483f49bdc52b065bde3c88))
+
 ## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
 
 ### Features
diff --git a/packages/browserslist-config-odyssey/CHANGELOG.md b/packages/browserslist-config-odyssey/CHANGELOG.md
index 664fa926e7..fa2545e8af 100644
--- a/packages/browserslist-config-odyssey/CHANGELOG.md
+++ b/packages/browserslist-config-odyssey/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.27.0](https://github.com/okta/odyssey/compare/v1.26.0...v1.27.0) (2024-11-14)
+
+**Note:** Version bump only for package @okta/browserslist-config-odyssey
+
 ## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
 
 **Note:** Version bump only for package @okta/browserslist-config-odyssey
diff --git a/packages/odyssey-babel-preset/CHANGELOG.md b/packages/odyssey-babel-preset/CHANGELOG.md
index 17e16f57e2..a6b6dc0b13 100644
--- a/packages/odyssey-babel-preset/CHANGELOG.md
+++ b/packages/odyssey-babel-preset/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.27.0](https://github.com/okta/odyssey/compare/v1.26.0...v1.27.0) (2024-11-14)
+
+**Note:** Version bump only for package @okta/odyssey-babel-preset
+
 ## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
 
 **Note:** Version bump only for package @okta/odyssey-babel-preset
diff --git a/packages/odyssey-design-tokens/CHANGELOG.md b/packages/odyssey-design-tokens/CHANGELOG.md
index aa8c989aab..00a7484f7f 100644
--- a/packages/odyssey-design-tokens/CHANGELOG.md
+++ b/packages/odyssey-design-tokens/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.27.0](https://github.com/okta/odyssey/compare/v1.26.0...v1.27.0) (2024-11-14)
+
+**Note:** Version bump only for package @okta/odyssey-design-tokens
+
 ## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
 
 **Note:** Version bump only for package @okta/odyssey-design-tokens
diff --git a/packages/odyssey-react-mui/CHANGELOG.md b/packages/odyssey-react-mui/CHANGELOG.md
index f2b0da7c74..5e45495e8c 100644
--- a/packages/odyssey-react-mui/CHANGELOG.md
+++ b/packages/odyssey-react-mui/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.27.0](https://github.com/okta/odyssey/compare/v1.26.0...v1.27.0) (2024-11-14)
+
+### Features
+
+- adds drag-n-drop feature to the sidenav ([#2405](https://github.com/okta/odyssey/issues/2405)) ([aca8dad](https://github.com/okta/odyssey/commit/aca8dadd7130847112483f49bdc52b065bde3c88))
+
 ## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
 
 ### Features
diff --git a/packages/odyssey-storybook/CHANGELOG.md b/packages/odyssey-storybook/CHANGELOG.md
index 7d41fb4b7c..eca440664c 100644
--- a/packages/odyssey-storybook/CHANGELOG.md
+++ b/packages/odyssey-storybook/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.27.0](https://github.com/okta/odyssey/compare/v1.26.0...v1.27.0) (2024-11-14)
+
+### Features
+
+- adds drag-n-drop feature to the sidenav ([#2405](https://github.com/okta/odyssey/issues/2405)) ([aca8dad](https://github.com/okta/odyssey/commit/aca8dadd7130847112483f49bdc52b065bde3c88))
+
 ## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
 
 ### Features
diff --git a/packages/odyssey-svgr/CHANGELOG.md b/packages/odyssey-svgr/CHANGELOG.md
index f4a638071a..67e4529cad 100644
--- a/packages/odyssey-svgr/CHANGELOG.md
+++ b/packages/odyssey-svgr/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.27.0](https://github.com/okta/odyssey/compare/v1.26.0...v1.27.0) (2024-11-14)
+
+**Note:** Version bump only for package @okta/odyssey-svgr
+
 ## [1.26.0](https://github.com/okta/odyssey/compare/v1.25.0...v1.26.0) (2024-11-04)
 
 **Note:** Version bump only for package @okta/odyssey-svgr

From 41969a342404ecb95ae6a91510ce88f1b5f38e4a Mon Sep 17 00:00:00 2001
From: Ben Schell <ben.schell@okta.com>
Date: Fri, 15 Nov 2024 09:52:26 -0500
Subject: [PATCH 15/15] feat: refactor to be based on MenuButton

---
 .../{Button.tsx => Buttons/BaseButton.tsx}    | 116 +++----
 .../BaseMenuButton.tsx}                       | 127 ++++++--
 .../odyssey-react-mui/src/Buttons/Button.tsx  |  30 ++
 .../src/{ => Buttons}/ButtonContext.tsx       |   0
 .../src/Buttons/MenuButton.tsx                |  35 ++
 .../src/{ => Buttons}/MenuContext.ts          |   0
 .../src/{ => Buttons}/MenuItem.tsx            |   2 +-
 .../odyssey-react-mui/src/Buttons/index.ts    |  22 ++
 packages/odyssey-react-mui/src/Card.tsx       |   4 +-
 .../src/DataTable/DataTable.tsx               |   3 +-
 .../src/DataTable/DataTableRowActions.tsx     |   4 +-
 .../src/DataTable/DataTableSettings.tsx       |   3 +-
 packages/odyssey-react-mui/src/Dialog.tsx     |   2 +-
 packages/odyssey-react-mui/src/Drawer.tsx     |   2 +-
 .../src/FileUploader/FileUploader.tsx         |   2 +-
 packages/odyssey-react-mui/src/Form.tsx       |   2 +-
 .../src/Pagination/Pagination.tsx             |   2 +-
 packages/odyssey-react-mui/src/Toast.tsx      |   2 +-
 packages/odyssey-react-mui/src/index.ts       |   4 +-
 .../odyssey-react-mui/src/labs/AppTile.tsx    |   2 +-
 .../src/labs/ButtonPopover.tsx                |  81 -----
 .../src/labs/DataFilters.tsx                  |   2 +-
 .../odyssey-react-mui/src/labs/DataTable.tsx  |   2 +-
 .../src/labs/DataTablePagination.tsx          |   2 +-
 .../src/labs/DataView/BulkActionsMenu.tsx     |   3 +-
 .../src/labs/DataView/DataCard.tsx            |   9 +-
 .../src/labs/DataView/DataView.tsx            |   2 +-
 .../src/labs/DataView/LayoutSwitcher.tsx      |   3 +-
 .../src/labs/DataView/RowActions.tsx          |   4 +-
 .../src/labs/DataView/TableLayoutContent.tsx  |   3 +-
 .../src/labs/DataView/TableSettings.tsx       |   3 +-
 .../odyssey-react-mui/src/labs/DatePicker.tsx |   2 +-
 .../odyssey-react-mui/src/labs/Popover.tsx    | 129 --------
 .../src/labs/TopNav/UserProfileMenuButton.tsx |  55 ++++
 .../src/labs/TopNav/UserProfilePopover.tsx    | 121 -------
 .../src/labs/TopNav/index.ts                  |   2 +-
 packages/odyssey-react-mui/src/labs/index.ts  |   1 -
 .../ButtonPopover/ButtonPopover.stories.tsx   | 307 ------------------
 .../UserProfileMenuButton.stories.tsx}        | 115 +++++--
 .../MenuButton/MenuButton.stories.tsx         | 104 +++++-
 40 files changed, 510 insertions(+), 804 deletions(-)
 rename packages/odyssey-react-mui/src/{Button.tsx => Buttons/BaseButton.tsx} (75%)
 rename packages/odyssey-react-mui/src/{MenuButton.tsx => Buttons/BaseMenuButton.tsx} (57%)
 create mode 100644 packages/odyssey-react-mui/src/Buttons/Button.tsx
 rename packages/odyssey-react-mui/src/{ => Buttons}/ButtonContext.tsx (100%)
 create mode 100644 packages/odyssey-react-mui/src/Buttons/MenuButton.tsx
 rename packages/odyssey-react-mui/src/{ => Buttons}/MenuContext.ts (100%)
 rename packages/odyssey-react-mui/src/{ => Buttons}/MenuItem.tsx (98%)
 create mode 100644 packages/odyssey-react-mui/src/Buttons/index.ts
 delete mode 100644 packages/odyssey-react-mui/src/labs/ButtonPopover.tsx
 delete mode 100644 packages/odyssey-react-mui/src/labs/Popover.tsx
 create mode 100644 packages/odyssey-react-mui/src/labs/TopNav/UserProfileMenuButton.tsx
 delete mode 100644 packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx
 delete mode 100644 packages/odyssey-storybook/src/components/odyssey-labs/ButtonPopover/ButtonPopover.stories.tsx
 rename packages/odyssey-storybook/src/components/odyssey-labs/{UserProfilePopover/UserProfilePopover.stories.tsx => UserProfileMenuButton/UserProfileMenuButton.stories.tsx} (55%)

diff --git a/packages/odyssey-react-mui/src/Button.tsx b/packages/odyssey-react-mui/src/Buttons/BaseButton.tsx
similarity index 75%
rename from packages/odyssey-react-mui/src/Button.tsx
rename to packages/odyssey-react-mui/src/Buttons/BaseButton.tsx
index e980cf9514..31142c5961 100644
--- a/packages/odyssey-react-mui/src/Button.tsx
+++ b/packages/odyssey-react-mui/src/Buttons/BaseButton.tsx
@@ -16,21 +16,22 @@ import {
   HTMLAttributes,
   memo,
   ReactElement,
+  ReactNode,
   useCallback,
   useImperativeHandle,
   useMemo,
   useRef,
 } from "react";
 
-import { useButton } from "./ButtonContext";
-import type { HtmlProps } from "./HtmlProps";
-import { FocusHandle } from "./inputUtils";
+import { useButton } from "../Buttons";
+import type { HtmlProps } from "../HtmlProps";
+import { FocusHandle } from "../inputUtils";
 import {
   MuiPropsContext,
   MuiPropsContextType,
   useMuiProps,
-} from "./MuiPropsContext";
-import { Tooltip } from "./Tooltip";
+} from "../MuiPropsContext";
+import { Tooltip } from "../Tooltip";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
 export const buttonTypeValues = ["button", "submit", "reset"] as const;
@@ -43,7 +44,7 @@ export const buttonVariantValues = [
   "floatingAction",
 ] as const;
 
-export type ButtonProps = {
+export type BaseButtonProps = {
   /**
    * The ref forwarded to the Button
    */
@@ -85,64 +86,41 @@ export type ButtonProps = {
    * The click event handler for the Button
    */
   onClick?: MuiButtonProps["onClick"];
-} & (
-  | {
-      /**
-       * The icon element to display at the end of the Button
-       */
-      endIcon?: ReactElement;
-      /**
-       * The text content of the Button
-       */
-      label: string;
-      /**
-       * The icon element to display at the start of the Button
-       */
-      startIcon?: ReactElement;
-    }
-  | {
-      /**
-       * The icon element to display at the end of the Button
-       */
-      endIcon?: ReactElement;
-      /**
-       * The text content of the Button
-       */
-      label?: string | "" | undefined;
-      /**
-       * The icon element to display at the start of the Button
-       */
-      startIcon: ReactElement;
-    }
-  | {
-      /**
-       * The icon element to display at the end of the Button
-       */
-      endIcon: ReactElement;
-      /**
-       * The text content of the Button
-       */
-      label?: never;
-      /**
-       * The icon element to display at the start of the Button
-       */
-      startIcon?: ReactElement;
-    }
-) &
-  Pick<
-    HtmlProps,
-    | "ariaControls"
-    | "ariaDescribedBy"
-    | "ariaExpanded"
-    | "ariaHasPopup"
-    | "ariaLabel"
-    | "ariaLabelledBy"
-    | "tabIndex"
-    | "testId"
-    | "translate"
-  >;
+  /**
+   * The contents of the button. Only available internal to Odyssey here in BaseButton. If set, label is ignored.
+   */
+  children?: ReactNode;
+  /**
+   * The icon element to display at the end of the Button
+   */
+  endIcon?: ReactElement;
+  /**
+   * The text content of the Button
+   */
+  label?: string;
+  /**
+   * The icon element to display at the start of the Button
+   */
+  startIcon?: ReactElement;
+};
+
+// These are split and exported separately from the above because wrappers of this (e.g. Button) will
+// want to omit children, which they cannot do from the combined union type. Instead, they should
+// omit from BaseButtonProps, then union with the AdditionalBaseButtonProps (as seen in Button)
+export type AdditionalBaseButtonProps = Pick<
+  HtmlProps,
+  | "ariaControls"
+  | "ariaDescribedBy"
+  | "ariaExpanded"
+  | "ariaHasPopup"
+  | "ariaLabel"
+  | "ariaLabelledBy"
+  | "tabIndex"
+  | "testId"
+  | "translate"
+>;
 
-const Button = ({
+const BaseButton = ({
   ariaControls,
   ariaDescribedBy,
   ariaExpanded,
@@ -156,6 +134,7 @@ const Button = ({
   isDisabled,
   isFullWidth: isFullWidthProp,
   label = "",
+  children,
   onClick,
   size = "medium",
   startIcon,
@@ -165,7 +144,7 @@ const Button = ({
   translate,
   type = "button",
   variant: variantProp,
-}: ButtonProps) => {
+}: BaseButtonProps & AdditionalBaseButtonProps) => {
   const muiProps = useMuiProps();
 
   // We're deprecating the "tertiary" variant, so map it to
@@ -225,7 +204,7 @@ const Button = ({
           type={type}
           variant={variant}
         >
-          {label}
+          {children ?? label}
         </MuiButton>
       );
     },
@@ -242,6 +221,7 @@ const Button = ({
       isDisabled,
       isFullWidth,
       label,
+      children,
       onClick,
       size,
       startIcon,
@@ -264,7 +244,7 @@ const Button = ({
   return renderButton(muiProps);
 };
 
-const MemoizedButton = memo(Button);
-MemoizedButton.displayName = "Button";
+const MemoizedBaseButton = memo(BaseButton);
+MemoizedBaseButton.displayName = "BaseButton";
 
-export { MemoizedButton as Button };
+export { MemoizedBaseButton as BaseButton };
diff --git a/packages/odyssey-react-mui/src/MenuButton.tsx b/packages/odyssey-react-mui/src/Buttons/BaseMenuButton.tsx
similarity index 57%
rename from packages/odyssey-react-mui/src/MenuButton.tsx
rename to packages/odyssey-react-mui/src/Buttons/BaseMenuButton.tsx
index 6d2bf60edf..c23a4e7093 100644
--- a/packages/odyssey-react-mui/src/MenuButton.tsx
+++ b/packages/odyssey-react-mui/src/Buttons/BaseMenuButton.tsx
@@ -18,18 +18,28 @@ import {
   useState,
   ReactNode,
 } from "react";
-import { Menu as MuiMenu, PopoverOrigin } from "@mui/material";
+import {
+  Menu as MuiMenu,
+  Popover as MuiPopover,
+  PopoverOrigin,
+} from "@mui/material";
 
-import { Button, buttonSizeValues, buttonVariantValues, useUniqueId } from "./";
-import { ChevronDownIcon, MoreIcon } from "./icons.generated";
-import { FieldComponentProps } from "./FieldComponentProps";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
+import { Box, buttonSizeValues, buttonVariantValues, useUniqueId } from "..";
+import { BaseButton } from "./BaseButton";
+import { ChevronDownIcon, MoreIcon } from "../icons.generated";
+import { FieldComponentProps } from "../FieldComponentProps";
 import { MenuContext, MenuContextType } from "./MenuContext";
-import { NullElement } from "./NullElement";
-import type { HtmlProps } from "./HtmlProps";
+import { NullElement } from "../NullElement";
+import type { HtmlProps } from "../HtmlProps";
 
 export const menuAlignmentValues = ["left", "right"] as const;
 
-export type MenuButtonProps = {
+export type BaseMenuButtonProps = {
+  /**
+   * The button children for the triggering Button. Only available internal to Odyssey here in BaseMenuButton. If set, buttonLabel is ignored.
+   */
+  buttonChildren?: ReactNode;
   /**
    * The label on the triggering Button
    */
@@ -38,14 +48,14 @@ export type MenuButtonProps = {
    * The variant of the triggering Button
    */
   buttonVariant?: (typeof buttonVariantValues)[number];
-  /**
-   * The <MenuItem> components within the Menu.
-   */
-  children: ReactNode | NullElement;
   /**
    * The end Icon on the trigggering Button
    */
   endIcon?: ReactElement;
+  /**
+   * Whether to omit the endIcon if not set (rather than use a default value for it based on overflow)
+   */
+  omitEndIcon?: boolean;
   /**
    * The id of the Button
    */
@@ -71,7 +81,12 @@ export type MenuButtonProps = {
    * The tooltip text for the Button if it's icon-only
    */
   tooltipText?: string;
-} & Pick<
+};
+
+// These are split and exported separately from the above because wrappers of this (e.g. MenuButton) will
+// want to omit buttonChildren, which they cannot do from the combined union type. Instead, they should
+// omit from BaseMenuButtonProps, then union with the AdditionalBaseMenuButtonProps (as seen in MenuButton)
+export type AdditionalBaseMenuButtonProps = Pick<
   HtmlProps,
   "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "testId" | "translate"
 > &
@@ -86,26 +101,52 @@ export type MenuButtonProps = {
         Partial<Pick<HtmlProps, "ariaLabelledBy">> & {
           buttonLabel?: undefined | "";
         })
+  ) &
+  (
+    | {
+        /**
+         * The <MenuItem> components within the Menu.
+         */
+        children: ReactNode | NullElement;
+        /**
+         * popoverConten is disallowed if children are present
+         */
+        popoverContent?: never;
+      }
+    | {
+        /**
+         * children is disallowed if popoverContent is present
+         */
+        children?: never;
+        /**
+         * The content for the popover that is triggered on click.
+         */
+        popoverContent: ReactNode | NullElement;
+      }
   );
 
-const MenuButton = ({
+const BaseMenuButton = ({
   ariaLabel,
   ariaLabelledBy,
   ariaDescribedBy,
+  buttonChildren,
   buttonLabel = "",
   buttonVariant = "secondary",
   children,
+  popoverContent,
   shouldCloseOnSelect = true,
   endIcon: endIconProp,
   id: idOverride,
   isDisabled,
   isOverflow,
   menuAlignment = "left",
+  omitEndIcon = false,
   size,
   testId,
   tooltipText,
   translate,
-}: MenuButtonProps) => {
+}: BaseMenuButtonProps & AdditionalBaseMenuButtonProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   const isOpen = Boolean(anchorEl);
@@ -134,7 +175,7 @@ const MenuButton = ({
     [closeMenu, openMenu, shouldCloseOnSelect],
   );
 
-  const endIcon = endIconProp ? (
+  const endIcon = omitEndIcon ? undefined : endIconProp ? (
     endIconProp
   ) : isOverflow ? (
     <MoreIcon />
@@ -160,9 +201,10 @@ const MenuButton = ({
     [menuAlignment],
   );
 
+  console.log("has children?", !!children, children);
   return (
     <div>
-      <Button
+      <BaseButton
         ariaControls={isOpen ? `${uniqueId}-menu` : undefined}
         ariaExpanded={isOpen ? "true" : undefined}
         ariaHasPopup="true"
@@ -174,6 +216,7 @@ const MenuButton = ({
         id={`${uniqueId}-button`}
         isDisabled={isDisabled}
         label={buttonLabel}
+        children={buttonChildren}
         onClick={openMenu}
         size={size}
         tooltipText={tooltipText}
@@ -181,24 +224,44 @@ const MenuButton = ({
         variant={buttonVariant}
       />
 
-      <MuiMenu
-        anchorOrigin={anchorOrigin}
-        transformOrigin={transformOrigin}
-        anchorEl={anchorEl}
-        id={`${uniqueId}-menu`}
-        MenuListProps={menuListProps}
-        onClose={closeMenu}
-        open={isOpen}
-      >
-        <MenuContext.Provider value={providerValue}>
-          {children}
-        </MenuContext.Provider>
-      </MuiMenu>
+      {children && (
+        <MuiMenu
+          anchorOrigin={anchorOrigin}
+          transformOrigin={transformOrigin}
+          anchorEl={anchorEl}
+          id={`${uniqueId}-menu`}
+          MenuListProps={menuListProps}
+          onClose={closeMenu}
+          open={isOpen}
+        >
+          <MenuContext.Provider value={providerValue}>
+            {children}
+          </MenuContext.Provider>
+        </MuiMenu>
+      )}
+
+      {popoverContent && (
+        <MuiPopover
+          open={isOpen}
+          anchorEl={anchorEl}
+          onClose={closeMenu}
+          anchorOrigin={anchorOrigin}
+          transformOrigin={transformOrigin}
+        >
+          <Box
+            sx={{
+              padding: odysseyDesignTokens.Spacing4,
+            }}
+          >
+            {popoverContent}
+          </Box>
+        </MuiPopover>
+      )}
     </div>
   );
 };
 
-const MemoizedMenuButton = memo(MenuButton);
-MemoizedMenuButton.displayName = "MenuButton";
+const MemoizedBaseMenuButton = memo(BaseMenuButton);
+MemoizedBaseMenuButton.displayName = "BaseMenuButton";
 
-export { MemoizedMenuButton as MenuButton };
+export { MemoizedBaseMenuButton as BaseMenuButton };
diff --git a/packages/odyssey-react-mui/src/Buttons/Button.tsx b/packages/odyssey-react-mui/src/Buttons/Button.tsx
new file mode 100644
index 0000000000..3da258cd93
--- /dev/null
+++ b/packages/odyssey-react-mui/src/Buttons/Button.tsx
@@ -0,0 +1,30 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import {
+  AdditionalBaseButtonProps,
+  BaseButton,
+  BaseButtonProps,
+} from "./BaseButton";
+
+export type ButtonProps = Omit<BaseButtonProps, "children"> &
+  AdditionalBaseButtonProps;
+
+const Button = (props: ButtonProps) => {
+  return <BaseButton {...props} />;
+};
+
+const MemoizedButton = memo(Button);
+MemoizedButton.displayName = "Button";
+
+export { MemoizedButton as Button };
diff --git a/packages/odyssey-react-mui/src/ButtonContext.tsx b/packages/odyssey-react-mui/src/Buttons/ButtonContext.tsx
similarity index 100%
rename from packages/odyssey-react-mui/src/ButtonContext.tsx
rename to packages/odyssey-react-mui/src/Buttons/ButtonContext.tsx
diff --git a/packages/odyssey-react-mui/src/Buttons/MenuButton.tsx b/packages/odyssey-react-mui/src/Buttons/MenuButton.tsx
new file mode 100644
index 0000000000..dbd8ddc478
--- /dev/null
+++ b/packages/odyssey-react-mui/src/Buttons/MenuButton.tsx
@@ -0,0 +1,35 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import {
+  AdditionalBaseMenuButtonProps,
+  BaseMenuButton,
+  BaseMenuButtonProps,
+} from "./BaseMenuButton";
+
+export const menuAlignmentValues = ["left", "right"] as const;
+
+export type MenuButtonProps = Omit<
+  BaseMenuButtonProps,
+  "buttonChildren" | "omitEndIcon"
+> &
+  AdditionalBaseMenuButtonProps;
+
+const MenuButton = (props: MenuButtonProps) => {
+  return <BaseMenuButton {...props} />;
+};
+
+const MemoizedMenuButton = memo(MenuButton);
+MemoizedMenuButton.displayName = "MenuButton";
+
+export { MemoizedMenuButton as MenuButton };
diff --git a/packages/odyssey-react-mui/src/MenuContext.ts b/packages/odyssey-react-mui/src/Buttons/MenuContext.ts
similarity index 100%
rename from packages/odyssey-react-mui/src/MenuContext.ts
rename to packages/odyssey-react-mui/src/Buttons/MenuContext.ts
diff --git a/packages/odyssey-react-mui/src/MenuItem.tsx b/packages/odyssey-react-mui/src/Buttons/MenuItem.tsx
similarity index 98%
rename from packages/odyssey-react-mui/src/MenuItem.tsx
rename to packages/odyssey-react-mui/src/Buttons/MenuItem.tsx
index d62639bc38..b876724a28 100644
--- a/packages/odyssey-react-mui/src/MenuItem.tsx
+++ b/packages/odyssey-react-mui/src/Buttons/MenuItem.tsx
@@ -18,7 +18,7 @@ import { menuItemClasses } from "@mui/material/MenuItem";
 import { memo, useCallback, useContext, type ReactNode } from "react";
 
 import { MenuContext } from "./MenuContext";
-import type { HtmlProps } from "./HtmlProps";
+import type { HtmlProps } from "../HtmlProps";
 
 export type MenuItemProps = {
   /**
diff --git a/packages/odyssey-react-mui/src/Buttons/index.ts b/packages/odyssey-react-mui/src/Buttons/index.ts
new file mode 100644
index 0000000000..70ffe164ef
--- /dev/null
+++ b/packages/odyssey-react-mui/src/Buttons/index.ts
@@ -0,0 +1,22 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+export {
+  buttonSizeValues,
+  buttonTypeValues,
+  buttonVariantValues,
+} from "./BaseButton";
+export * from "./Button";
+export * from "./ButtonContext";
+export { menuAlignmentValues } from "./BaseMenuButton";
+export * from "./MenuButton";
+export * from "./MenuItem";
diff --git a/packages/odyssey-react-mui/src/Card.tsx b/packages/odyssey-react-mui/src/Card.tsx
index abfc62698d..e4dacf33e7 100644
--- a/packages/odyssey-react-mui/src/Card.tsx
+++ b/packages/odyssey-react-mui/src/Card.tsx
@@ -24,10 +24,8 @@ import {
 } from "@mui/material";
 import styled from "@emotion/styled";
 
-import { Button } from "./Button";
-import { ButtonContext } from "./ButtonContext";
+import { Button, ButtonContext, MenuButton, MenuButtonProps } from "./Buttons";
 import { MoreIcon } from "./icons.generated";
-import { MenuButton, MenuButtonProps } from "./MenuButton";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
index e60e041c7f..49bd710eab 100644
--- a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
+++ b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
@@ -51,7 +51,6 @@ import {
 } from "./DataTableRowActions";
 import { useRowReordering } from "./useRowReordering";
 import { DataTableSettings } from "./DataTableSettings";
-import { MenuButton, MenuButtonProps } from "../MenuButton";
 import { Box } from "../Box";
 import { DataTableRowSelectionState, DataTableRowData } from ".";
 import {
@@ -61,7 +60,7 @@ import {
 import { useScrollIndication } from "./useScrollIndication";
 import styled from "@emotion/styled";
 import { EmptyState } from "../EmptyState";
-import { Button } from "../Button";
+import { Button, MenuButton, MenuButtonProps } from "../Buttons";
 import { Callout } from "../Callout";
 
 export type DataTableColumn<T extends DataTableRowData> = MRT_ColumnDef<T> & {
diff --git a/packages/odyssey-react-mui/src/DataTable/DataTableRowActions.tsx b/packages/odyssey-react-mui/src/DataTable/DataTableRowActions.tsx
index 2e80e6407f..d8472e642d 100644
--- a/packages/odyssey-react-mui/src/DataTable/DataTableRowActions.tsx
+++ b/packages/odyssey-react-mui/src/DataTable/DataTableRowActions.tsx
@@ -12,10 +12,8 @@
 
 import { MRT_Row, MRT_RowData } from "material-react-table";
 import { Fragment, ReactElement, memo, useCallback } from "react";
-import { Button } from "../Button";
-import { MenuItem } from "../MenuItem";
+import { Button, MenuButton, MenuButtonProps, MenuItem } from "../Buttons";
 import { Box as MuiBox } from "@mui/material";
-import { MenuButton, MenuButtonProps } from "../MenuButton";
 import {
   ArrowBottomIcon,
   ArrowDownIcon,
diff --git a/packages/odyssey-react-mui/src/DataTable/DataTableSettings.tsx b/packages/odyssey-react-mui/src/DataTable/DataTableSettings.tsx
index 2da2769c6a..cbfe7452cd 100644
--- a/packages/odyssey-react-mui/src/DataTable/DataTableSettings.tsx
+++ b/packages/odyssey-react-mui/src/DataTable/DataTableSettings.tsx
@@ -12,8 +12,7 @@
 
 import { Dispatch, SetStateAction, memo, useCallback, useMemo } from "react";
 import { Checkbox as MuiCheckbox } from "@mui/material";
-import { MenuButton } from "../MenuButton";
-import { MenuItem } from "../MenuItem";
+import { MenuButton, MenuItem } from "../Buttons";
 import { ListIcon, ShowIcon } from "../icons.generated";
 import { densityValues } from "./constants";
 import { DataTableProps } from "./DataTable";
diff --git a/packages/odyssey-react-mui/src/Dialog.tsx b/packages/odyssey-react-mui/src/Dialog.tsx
index a890a1caf9..33972d5cbf 100644
--- a/packages/odyssey-react-mui/src/Dialog.tsx
+++ b/packages/odyssey-react-mui/src/Dialog.tsx
@@ -18,7 +18,7 @@ import {
   DialogContentText,
   DialogActions,
 } from "@mui/material";
-import { Button } from "./Button";
+import { Button } from "./Buttons";
 import { CloseIcon } from "./icons.generated";
 import {
   cloneElement,
diff --git a/packages/odyssey-react-mui/src/Drawer.tsx b/packages/odyssey-react-mui/src/Drawer.tsx
index 465791e423..cb3eb68460 100644
--- a/packages/odyssey-react-mui/src/Drawer.tsx
+++ b/packages/odyssey-react-mui/src/Drawer.tsx
@@ -24,7 +24,7 @@ import { Drawer as MuiDrawer } from "@mui/material";
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "./Button";
+import { Button } from "./Buttons";
 import { CloseIcon } from "./icons.generated";
 import {
   DesignTokens,
diff --git a/packages/odyssey-react-mui/src/FileUploader/FileUploader.tsx b/packages/odyssey-react-mui/src/FileUploader/FileUploader.tsx
index 88d6bf824d..84e250e214 100644
--- a/packages/odyssey-react-mui/src/FileUploader/FileUploader.tsx
+++ b/packages/odyssey-react-mui/src/FileUploader/FileUploader.tsx
@@ -21,7 +21,7 @@ import {
 import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "../Button";
+import { Button } from "../Buttons";
 import { UploadIcon } from "../icons.generated";
 import { Field, RenderFieldComponentProps } from "../Field";
 import { FieldComponentProps } from "../FieldComponentProps";
diff --git a/packages/odyssey-react-mui/src/Form.tsx b/packages/odyssey-react-mui/src/Form.tsx
index 3d17f14199..673550082f 100644
--- a/packages/odyssey-react-mui/src/Form.tsx
+++ b/packages/odyssey-react-mui/src/Form.tsx
@@ -13,7 +13,7 @@
 import { FormEventHandler, memo, ReactElement } from "react";
 import styled from "@emotion/styled";
 
-import { Button } from "./Button";
+import { Button } from "./Buttons";
 import { Callout } from "./Callout";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
diff --git a/packages/odyssey-react-mui/src/Pagination/Pagination.tsx b/packages/odyssey-react-mui/src/Pagination/Pagination.tsx
index dbebed52f5..96b00d0d59 100644
--- a/packages/odyssey-react-mui/src/Pagination/Pagination.tsx
+++ b/packages/odyssey-react-mui/src/Pagination/Pagination.tsx
@@ -13,7 +13,7 @@
 import { InputBase } from "@mui/material";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Paragraph } from "../Typography";
-import { Button } from "../Button";
+import { Button } from "../Buttons";
 import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated";
 import styled from "@emotion/styled";
 import {
diff --git a/packages/odyssey-react-mui/src/Toast.tsx b/packages/odyssey-react-mui/src/Toast.tsx
index ba6741a820..d51bd0ef3e 100644
--- a/packages/odyssey-react-mui/src/Toast.tsx
+++ b/packages/odyssey-react-mui/src/Toast.tsx
@@ -14,7 +14,7 @@ import { useEffect, memo, useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, AlertTitle, Snackbar } from "@mui/material";
 
-import { Button } from "./Button";
+import { Button } from "./Buttons";
 import { HtmlProps } from "./HtmlProps";
 import { CloseIcon } from "./icons.generated";
 import { Link } from "./Link";
diff --git a/packages/odyssey-react-mui/src/index.ts b/packages/odyssey-react-mui/src/index.ts
index bafdce48ab..d8db0b990e 100644
--- a/packages/odyssey-react-mui/src/index.ts
+++ b/packages/odyssey-react-mui/src/index.ts
@@ -64,7 +64,7 @@ export { badgeContentMaxValues } from "./Badge";
 export * from "./Banner";
 export * from "./Box";
 export * from "./Breadcrumbs";
-export * from "./Button";
+export * from "./Buttons";
 export * from "./Callout";
 export * from "./Card";
 export * from "./Checkbox";
@@ -87,8 +87,6 @@ export * from "./Form";
 export * from "./HintLink";
 export * from "./IconWithTooltip";
 export * from "./Link";
-export * from "./MenuButton";
-export * from "./MenuItem";
 export * from "./NativeSelect";
 export * from "./NullElement";
 export * from "./OdysseyCacheProvider";
diff --git a/packages/odyssey-react-mui/src/labs/AppTile.tsx b/packages/odyssey-react-mui/src/labs/AppTile.tsx
index 9538c7f3b6..50367059a0 100644
--- a/packages/odyssey-react-mui/src/labs/AppTile.tsx
+++ b/packages/odyssey-react-mui/src/labs/AppTile.tsx
@@ -25,7 +25,7 @@ import {
 } from "@mui/material";
 import styled from "@emotion/styled";
 
-import { Button } from ".././Button";
+import { Button } from "../Buttons";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
diff --git a/packages/odyssey-react-mui/src/labs/ButtonPopover.tsx b/packages/odyssey-react-mui/src/labs/ButtonPopover.tsx
deleted file mode 100644
index 9102435cb1..0000000000
--- a/packages/odyssey-react-mui/src/labs/ButtonPopover.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/*!
- * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import {
-  memo,
-  MouseEventHandler,
-  ReactNode,
-  useCallback,
-  useRef,
-  useState,
-} from "react";
-import { Button, ButtonProps } from "../Button";
-import { NullElement } from "../NullElement";
-import { OpenHandle, Popover, PopoverProps } from "./Popover";
-
-export const popoverAlignmentValues = ["left", "right"] as const;
-
-export type ButtonPopoverProps = {
-  /**
-   * The horizontal alignment of the popover.
-   */
-  popoverAlignment?: PopoverProps["popoverAlignment"];
-  /**
-   * The contents of the popover
-   */
-  children: ReactNode | NullElement;
-} & ButtonProps;
-
-const ButtonPopover = (props: ButtonPopoverProps) => {
-  const { children, popoverAlignment, ...buttonProps } = props;
-  const [isOpen, setIsOpen] = useState(false);
-
-  // Adding a tooltip to the button means the popover does not get placed in the right location
-  delete buttonProps.tooltipText;
-
-  const popoverRef = useRef<OpenHandle>(null);
-  const openPopover = useCallback<MouseEventHandler<HTMLButtonElement>>(
-    (event) => {
-      popoverRef.current?.openWithElement(event.currentTarget);
-    },
-    [],
-  );
-  const popoverOpened = useCallback(() => {
-    setIsOpen(true);
-  }, []);
-  const popoverClosed = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  return (
-    <>
-      <Button
-        {...buttonProps}
-        isDisabled={buttonProps.isDisabled || isOpen}
-        onClick={openPopover}
-      />
-      <Popover
-        popoverAlignment={popoverAlignment}
-        popoverRef={popoverRef}
-        onOpen={popoverOpened}
-        onClose={popoverClosed}
-      >
-        {children}
-      </Popover>
-    </>
-  );
-};
-
-const MemoizedButtonPopover = memo(ButtonPopover);
-MemoizedButtonPopover.displayName = "ButtonPopover";
-
-export { MemoizedButtonPopover as ButtonPopover };
diff --git a/packages/odyssey-react-mui/src/labs/DataFilters.tsx b/packages/odyssey-react-mui/src/labs/DataFilters.tsx
index 62e81d1647..0a1dfa30a3 100644
--- a/packages/odyssey-react-mui/src/labs/DataFilters.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataFilters.tsx
@@ -33,7 +33,7 @@ import styled from "@emotion/styled";
 
 import { Autocomplete } from "../Autocomplete";
 import { Box } from "../Box";
-import { Button } from "../Button";
+import { Button } from "../Buttons";
 import { CheckboxGroup } from "../CheckboxGroup";
 import { Checkbox } from "../Checkbox";
 import {
diff --git a/packages/odyssey-react-mui/src/labs/DataTable.tsx b/packages/odyssey-react-mui/src/labs/DataTable.tsx
index 6e4e420011..833e61ea19 100644
--- a/packages/odyssey-react-mui/src/labs/DataTable.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataTable.tsx
@@ -53,7 +53,7 @@ import {
   paginationTypeValues,
 } from "./DataTablePagination";
 import { DataFilter, DataFilters } from "./DataFilters";
-import { Button } from "../Button";
+import { Button } from "../Buttons";
 import { Box } from "../Box";
 import { MenuButton, MenuItem } from "..";
 import { ArrowUnsortedIcon } from "../icons.generated";
diff --git a/packages/odyssey-react-mui/src/labs/DataTablePagination.tsx b/packages/odyssey-react-mui/src/labs/DataTablePagination.tsx
index d6f8918148..9609c407b3 100644
--- a/packages/odyssey-react-mui/src/labs/DataTablePagination.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataTablePagination.tsx
@@ -12,7 +12,7 @@
 
 import { memo } from "react";
 import { Box } from "../Box";
-import { Button } from "../Button";
+import { Button } from "../Buttons";
 import { Support } from "../Typography";
 import { ArrowLeftIcon, ArrowRightIcon } from "../icons.generated";
 
diff --git a/packages/odyssey-react-mui/src/labs/DataView/BulkActionsMenu.tsx b/packages/odyssey-react-mui/src/labs/DataView/BulkActionsMenu.tsx
index bc39f705fc..f51a8a2c0a 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/BulkActionsMenu.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/BulkActionsMenu.tsx
@@ -16,9 +16,8 @@ import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
 import { Box } from "../../Box";
-import { Button } from "../../Button";
+import { Button, MenuButton } from "../../Buttons";
 import { ChevronDownIcon } from "../../icons.generated";
-import { MenuButton } from "../../MenuButton";
 import { UniversalProps } from "./componentTypes";
 import {
   DesignTokens,
diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataCard.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataCard.tsx
index 19360acbf5..176069be5e 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/DataCard.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/DataCard.tsx
@@ -29,14 +29,17 @@ import styled from "@emotion/styled";
 import { useTranslation } from "react-i18next";
 
 import { Box } from "../../Box";
-import { Button } from "../../Button";
-import { ButtonContext } from "../../ButtonContext";
+import {
+  Button,
+  ButtonContext,
+  MenuButton,
+  MenuButtonProps,
+} from "../../Buttons";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
 import { Heading5, Paragraph, Support } from "../../Typography";
-import { MenuButton, MenuButtonProps } from "../../MenuButton";
 import {
   ChevronDownIcon,
   ChevronUpIcon,
diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
index c0f03b9c47..abeba6a5e4 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx
@@ -35,7 +35,7 @@ import { DataFilters } from "../DataFilters";
 import { EmptyState } from "../../EmptyState";
 import { fetchData } from "./fetchData";
 import { LayoutSwitcher } from "./LayoutSwitcher";
-import { MenuButton } from "../../MenuButton";
+import { MenuButton } from "../../Buttons";
 import { MoreIcon } from "../../icons.generated";
 import { TableSettings } from "./TableSettings";
 import { Pagination, usePagination } from "../../Pagination";
diff --git a/packages/odyssey-react-mui/src/labs/DataView/LayoutSwitcher.tsx b/packages/odyssey-react-mui/src/labs/DataView/LayoutSwitcher.tsx
index c292a977fe..4cf7f47f23 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/LayoutSwitcher.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/LayoutSwitcher.tsx
@@ -14,8 +14,7 @@ import { Dispatch, memo, useCallback, SetStateAction, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { AvailableLayouts, DataLayout } from "./componentTypes";
-import { MenuButton } from "../../MenuButton";
-import { MenuItem } from "../../MenuItem";
+import { MenuButton, MenuItem } from "../../Buttons";
 
 export type LayoutSwitcherProps = {
   availableLayouts: AvailableLayouts;
diff --git a/packages/odyssey-react-mui/src/labs/DataView/RowActions.tsx b/packages/odyssey-react-mui/src/labs/DataView/RowActions.tsx
index 4587ae6c40..e6131ca2b2 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/RowActions.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/RowActions.tsx
@@ -20,10 +20,8 @@ import {
   ArrowTopIcon,
   ArrowUpIcon,
 } from "../../icons.generated";
-import { Button } from "../../Button";
-import { MenuItem } from "../../MenuItem";
+import { Button, MenuButtonProps, MenuItem } from "../../Buttons";
 import { DataTableProps } from "./DataTable";
-import { MenuButtonProps } from "../../MenuButton";
 
 export type RowActionsProps = {
   isRowReorderingDisabled?: boolean;
diff --git a/packages/odyssey-react-mui/src/labs/DataView/TableLayoutContent.tsx b/packages/odyssey-react-mui/src/labs/DataView/TableLayoutContent.tsx
index e09faee930..7b3af96a69 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/TableLayoutContent.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/TableLayoutContent.tsx
@@ -41,7 +41,7 @@ import {
   DragIndicatorIcon,
 } from "../../icons.generated";
 import { Box } from "../../Box";
-import { Button } from "../../Button";
+import { Button, MenuButton } from "../../Buttons";
 import { TableLayoutProps, TableState, UniversalProps } from "./componentTypes";
 import { DataTableCell } from "./dataTypes";
 import {
@@ -49,7 +49,6 @@ import {
   displayColumnDefOptions,
   ScrollableTableContainer,
 } from "./tableConstants";
-import { MenuButton } from "../../MenuButton";
 import { MoreIcon } from "../../icons.generated";
 import { RowActions } from "./RowActions";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
diff --git a/packages/odyssey-react-mui/src/labs/DataView/TableSettings.tsx b/packages/odyssey-react-mui/src/labs/DataView/TableSettings.tsx
index 7abc448c36..b9d724075c 100644
--- a/packages/odyssey-react-mui/src/labs/DataView/TableSettings.tsx
+++ b/packages/odyssey-react-mui/src/labs/DataView/TableSettings.tsx
@@ -17,8 +17,7 @@ import { useTranslation } from "react-i18next";
 
 import { densityValues } from "./constants";
 import { ListIcon, ShowIcon } from "../../icons.generated";
-import { MenuButton } from "../../MenuButton";
-import { MenuItem } from "../../MenuItem";
+import { MenuButton, MenuItem } from "../../Buttons";
 import { TableLayoutProps, TableState } from "./componentTypes";
 
 export type TableSettingsProps = {
diff --git a/packages/odyssey-react-mui/src/labs/DatePicker.tsx b/packages/odyssey-react-mui/src/labs/DatePicker.tsx
index f3a537dfd5..ba88cfea78 100644
--- a/packages/odyssey-react-mui/src/labs/DatePicker.tsx
+++ b/packages/odyssey-react-mui/src/labs/DatePicker.tsx
@@ -32,7 +32,7 @@ import { DateTime } from "luxon";
 import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
 import styled from "@emotion/styled";
 
-import { Button } from "../Button";
+import { Button } from "../Buttons";
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
diff --git a/packages/odyssey-react-mui/src/labs/Popover.tsx b/packages/odyssey-react-mui/src/labs/Popover.tsx
deleted file mode 100644
index aebe898c6c..0000000000
--- a/packages/odyssey-react-mui/src/labs/Popover.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-/*!
- * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import {
-  memo,
-  ReactNode,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from "react";
-import { Popover as MuiPopover, PopoverOrigin } from "@mui/material";
-import {
-  DesignTokens,
-  useOdysseyDesignTokens,
-} from "../OdysseyDesignTokensContext";
-import { Box } from "../Box";
-import { NullElement } from "../NullElement";
-import { useMuiProps } from "../MuiPropsContext";
-
-export const popoverAlignmentValues = ["left", "right"] as const;
-
-export type OpenHandle = {
-  openWithElement: (element: HTMLElement) => void;
-};
-
-export type PopoverProps = {
-  /**
-   * The ref forwarded to the Popover
-   */
-  popoverRef?: React.RefObject<OpenHandle>;
-  /**
-   * The horizontal alignment of the popover.
-   */
-  popoverAlignment?: (typeof popoverAlignmentValues)[number];
-  /**
-   * The contents of the popover
-   */
-  children: ReactNode | NullElement;
-  /**
-   * Called when the popover has opened
-   */
-  onOpen?: () => void;
-  /**
-   * Called when the popover has closed
-   */
-  onClose?: () => void;
-};
-
-const Popover = ({
-  popoverRef,
-  popoverAlignment,
-  children,
-  onOpen,
-  onClose,
-}: PopoverProps) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();
-  const muiProps = useMuiProps();
-
-  const isOpen = Boolean(anchorEl);
-
-  useImperativeHandle(
-    popoverRef,
-    () => ({
-      openWithElement: (element) => {
-        setAnchorEl(element);
-        onOpen && onOpen();
-      },
-    }),
-    [onOpen],
-  );
-
-  const closePopover = useCallback(() => {
-    setAnchorEl(null);
-    onClose && onClose();
-  }, [onClose]);
-
-  const anchorOrigin = useMemo(
-    () =>
-      ({
-        horizontal: popoverAlignment,
-        vertical: "bottom",
-      }) as PopoverOrigin,
-    [popoverAlignment],
-  );
-
-  const transformOrigin = useMemo(
-    () =>
-      ({
-        horizontal: popoverAlignment,
-        vertical: "top",
-      }) as PopoverOrigin,
-    [popoverAlignment],
-  );
-
-  return (
-    <MuiPopover
-      {...muiProps}
-      open={isOpen}
-      anchorEl={anchorEl}
-      onClose={closePopover}
-      anchorOrigin={anchorOrigin}
-      transformOrigin={transformOrigin}
-    >
-      <Box
-        sx={{
-          padding: odysseyDesignTokens.Spacing5,
-        }}
-      >
-        {children}
-      </Box>
-    </MuiPopover>
-  );
-};
-
-const MemoizedPopover = memo(Popover);
-MemoizedPopover.displayName = "Popover";
-
-export { MemoizedPopover as Popover };
diff --git a/packages/odyssey-react-mui/src/labs/TopNav/UserProfileMenuButton.tsx b/packages/odyssey-react-mui/src/labs/TopNav/UserProfileMenuButton.tsx
new file mode 100644
index 0000000000..5888380cd5
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/TopNav/UserProfileMenuButton.tsx
@@ -0,0 +1,55 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import { UserProfile, UserProfileProps } from "./UserProfile";
+import { ChevronDownIcon } from "../../icons.generated";
+import {
+  AdditionalBaseMenuButtonProps,
+  BaseMenuButton,
+  BaseMenuButtonProps,
+} from "../../Buttons/BaseMenuButton";
+
+export type UserProfileMenuButtonProps = Omit<BaseMenuButtonProps, "endIcon"> &
+  AdditionalBaseMenuButtonProps &
+  UserProfileProps;
+
+const UserProfileMenuButton = (props: UserProfileMenuButtonProps) => {
+  const {
+    profileIcon,
+    userName,
+    orgName,
+    userNameEndIcon,
+    buttonVariant = "floating",
+    ...menuButtonProps
+  } = props;
+  return (
+    <BaseMenuButton
+      {...menuButtonProps}
+      buttonVariant={buttonVariant}
+      omitEndIcon={true}
+      buttonChildren={
+        <UserProfile
+          profileIcon={profileIcon}
+          userName={userName}
+          orgName={orgName}
+          userNameEndIcon={userNameEndIcon ?? <ChevronDownIcon />}
+        />
+      }
+    />
+  );
+};
+
+const MemoizedUserProfileMenuButton = memo(UserProfileMenuButton);
+MemoizedUserProfileMenuButton.displayName = "UserProfileMenuButton";
+
+export { MemoizedUserProfileMenuButton as UserProfileMenuButton };
diff --git a/packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx b/packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx
deleted file mode 100644
index 6302d52f60..0000000000
--- a/packages/odyssey-react-mui/src/labs/TopNav/UserProfilePopover.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-/*!
- * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import {
-  memo,
-  MouseEventHandler,
-  ReactNode,
-  useCallback,
-  useRef,
-  useState,
-} from "react";
-import {
-  Button as MuiButton,
-  // ButtonBase as MuiButtonBase,
-} from "@mui/material";
-import { UserProfile, UserProfileProps } from "./UserProfile";
-import { NullElement } from "../../NullElement";
-import { useMuiProps } from "../../MuiPropsContext";
-import { ChevronDownIcon } from "../../icons.generated";
-import { OpenHandle, Popover, PopoverProps } from "../Popover";
-
-export type UserProfilePopoverProps = {
-  /**
-   * The horizontal alignment of the popover.
-   */
-  popoverAlignment?: PopoverProps["popoverAlignment"];
-  /**
-   * The contents of the popover
-   */
-  children: ReactNode | NullElement;
-} & Omit<UserProfileProps, "userNameEndIcon">;
-
-const UserProfilePopover = ({
-  popoverAlignment,
-  children,
-  profileIcon,
-  userName,
-  orgName,
-}: UserProfilePopoverProps) => {
-  const muiProps = useMuiProps();
-  const [isOpen, setIsOpen] = useState(false);
-  const popoverRef = useRef<OpenHandle>(null);
-  const openPopover = useCallback<MouseEventHandler<HTMLButtonElement>>(
-    (event) => {
-      popoverRef.current?.openWithElement(event.currentTarget);
-    },
-    [],
-  );
-  const popoverOpened = useCallback(() => {
-    setIsOpen(true);
-  }, []);
-  const popoverClosed = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  return (
-    <>
-      <MuiButton
-        {...muiProps}
-        // aria-controls={ariaControls}
-        // aria-describedby={ariaDescribedBy}
-        // aria-expanded={ariaExpanded}
-        // aria-haspopup={ariaHasPopup}
-        // aria-label={ariaLabel}
-        // aria-labelledby={ariaLabelledBy}
-        // data-se={testId}
-        // href={href}
-        // id={id}
-        // ref={(element) => {
-        //   if (element) {
-        //     (
-        //       localButtonRef as React.MutableRefObject<
-        //         HTMLButtonElement | HTMLAnchorElement
-        //       >
-        //     ).current = element;
-        //     //@ts-expect-error ref is not an optional prop on the props context type
-        //     muiProps?.ref?.(element);
-        //   }
-        // }}
-        // size={size}
-        // tabIndex={tabIndex}
-        // translate={translate}
-        // type={type}
-
-        disabled={isOpen}
-        onClick={openPopover}
-        variant={isOpen ? "secondary" : "floating"}
-      >
-        <UserProfile
-          profileIcon={profileIcon}
-          userName={userName}
-          orgName={orgName}
-          userNameEndIcon={<ChevronDownIcon />}
-        />
-      </MuiButton>
-
-      <Popover
-        popoverAlignment={popoverAlignment}
-        popoverRef={popoverRef}
-        onOpen={popoverOpened}
-        onClose={popoverClosed}
-      >
-        {children}
-      </Popover>
-    </>
-  );
-};
-
-const MemoizedUserProfilePopover = memo(UserProfilePopover);
-MemoizedUserProfilePopover.displayName = "UserProfilePopover";
-
-export { MemoizedUserProfilePopover as UserProfilePopover };
diff --git a/packages/odyssey-react-mui/src/labs/TopNav/index.ts b/packages/odyssey-react-mui/src/labs/TopNav/index.ts
index ee775fbaf8..c4b40143af 100644
--- a/packages/odyssey-react-mui/src/labs/TopNav/index.ts
+++ b/packages/odyssey-react-mui/src/labs/TopNav/index.ts
@@ -12,4 +12,4 @@
 
 export * from "./TopNav";
 export * from "./UserProfile";
-export * from "./UserProfilePopover";
+export * from "./UserProfileMenuButton";
diff --git a/packages/odyssey-react-mui/src/labs/index.ts b/packages/odyssey-react-mui/src/labs/index.ts
index bab62604b1..a963d3fa88 100644
--- a/packages/odyssey-react-mui/src/labs/index.ts
+++ b/packages/odyssey-react-mui/src/labs/index.ts
@@ -16,7 +16,6 @@ export type { LocalizationProviderProps } from "@mui/x-date-pickers";
 
 // export * from "./AdaptablePicker";
 export * from "./AppTile";
-export * from "./ButtonPopover";
 export * from "./DatePicker";
 export * from "./datePickerTheme";
 
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/ButtonPopover/ButtonPopover.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/ButtonPopover/ButtonPopover.stories.tsx
deleted file mode 100644
index 1e7133f333..0000000000
--- a/packages/odyssey-storybook/src/components/odyssey-labs/ButtonPopover/ButtonPopover.stories.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-/*!
- * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { Meta, StoryObj } from "@storybook/react";
-import {
-  Box,
-  buttonVariantValues,
-  Heading5,
-  Paragraph,
-} from "@okta/odyssey-react-mui";
-import {
-  ButtonPopover,
-  ButtonPopoverProps,
-  popoverAlignmentValues,
-} from "@okta/odyssey-react-mui/labs";
-import { GroupIcon, QuestionCircleIcon } from "@okta/odyssey-react-mui/icons";
-
-import { fieldComponentPropsMetaData } from "../../../fieldComponentPropsMetaData";
-import icons from "../../../../.storybook/components/iconUtils";
-import { MuiThemeDecorator } from "../../../../.storybook/components";
-import { userEvent, waitFor, within } from "@storybook/testing-library";
-import { expect } from "@storybook/jest";
-import { axeRun } from "../../../axe-util";
-import type { PlaywrightProps } from "../../odyssey-mui/storybookTypes";
-
-const storybookMeta: Meta<typeof ButtonPopover> = {
-  title: "Labs Components/Button Popover",
-  component: ButtonPopover,
-  argTypes: {
-    ariaDescribedBy: {
-      control: "text",
-      description:
-        "The ID of the element that describes the ButtonPopover, if one exists.",
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    ariaLabel: {
-      control: "text",
-      description:
-        "aria-label to describe the ButtonPopover when the button label is empty",
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    ariaLabelledBy: {
-      control: "text",
-      description:
-        "The ID of the element that labels the ButtonPopover. Only needed if the button has no text and `ariaLabel` is empty.",
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    label: {
-      control: "text",
-      description: "The label on the triggering Button",
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    variant: {
-      options: buttonVariantValues,
-      control: { type: "radio" },
-      description: "The variant of the triggering Button",
-      table: {
-        type: {
-          summary: buttonVariantValues.join(" | "),
-        },
-        defaultValue: {
-          summary: "secondary",
-        },
-      },
-    },
-    children: {
-      control: "obj",
-      description: "The content within the Popover",
-      table: {
-        type: {
-          summary: "[ReactNode | NullElement]",
-        },
-      },
-      type: {
-        required: true,
-        name: "other",
-        value: "[ReactNode | NullElement]",
-      },
-    },
-    endIcon: {
-      control: {
-        type: "select",
-      },
-      options: Object.keys(icons),
-      mapping: icons,
-      description: "The end Icon on the triggering Button",
-      table: {
-        type: {
-          summary: "<Icon />",
-        },
-      },
-    },
-    id: {
-      control: "text",
-      description: "The id of the Button",
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    isDisabled: fieldComponentPropsMetaData.isDisabled,
-    popoverAlignment: {
-      options: popoverAlignmentValues,
-      control: { type: "radio" },
-      description: "The horizontal alignment of the popover.",
-      table: {
-        type: {
-          summary: popoverAlignmentValues.join(" | "),
-        },
-        defaultValue: {
-          summary: "left",
-        },
-      },
-    },
-  },
-  args: {
-    label: "More actions",
-    variant: "secondary",
-    popoverAlignment: "left",
-  },
-  decorators: [MuiThemeDecorator],
-  tags: ["autodocs"],
-};
-
-export default storybookMeta;
-
-const clickButtonPopover =
-  ({ canvasElement, step }: PlaywrightProps<ButtonPopoverProps>) =>
-  async (args: ButtonPopoverProps, actionName: string) => {
-    const canvas = within(canvasElement);
-    await step("open popover button", async () => {
-      const buttonElement = canvas.getByRole("button", {
-        name: args.label,
-      });
-      userEvent.click(buttonElement);
-      await waitFor(() => {
-        axeRun(actionName);
-      });
-    });
-  };
-
-export const Simple: StoryObj<ButtonPopoverProps> = {
-  args: {
-    label: "More actions",
-    children: [
-      <Heading5 key="1">Popover Content</Heading5>,
-      <Paragraph key="2">Some more popover content.</Paragraph>,
-    ],
-  },
-  play: async ({
-    args,
-    canvasElement,
-    step,
-  }: {
-    args: ButtonPopoverProps;
-    canvasElement: HTMLElement;
-    step: PlaywrightProps<ButtonPopoverProps>["step"];
-  }) => {
-    await clickButtonPopover({ canvasElement, step })(
-      args,
-      "Button Popover Simple",
-    );
-  },
-};
-
-export const ButtonVariant: StoryObj<ButtonPopoverProps> = {
-  args: {
-    label: "More actions",
-    variant: "primary",
-    children: [
-      <Heading5 key="1">Popover Content</Heading5>,
-      <Paragraph key="2">Some more popover content.</Paragraph>,
-    ],
-    id: "floating-button",
-  },
-  play: async ({
-    canvasElement,
-    step,
-  }: PlaywrightProps<ButtonPopoverProps>) => {
-    await step("Filter and Select from listbox", async () => {
-      const canvas = within(canvasElement);
-      const button = canvas.getByRole("button", { name: "More actions" });
-      expect(button).toHaveAttribute("id", "floating-button");
-    });
-  },
-};
-
-export const IconButton: StoryObj<ButtonPopoverProps> = {
-  args: {
-    ariaLabel: "More actions",
-    label: "",
-    endIcon: <QuestionCircleIcon />,
-    children: [
-      <Heading5 key="1">Popover Content</Heading5>,
-      <Paragraph key="2">Some more popover content.</Paragraph>,
-    ],
-  },
-  play: async ({
-    canvasElement,
-    step,
-  }: PlaywrightProps<ButtonPopoverProps>) => {
-    await step("ButtonPopover Aria-Label", async () => {
-      const canvas = within(canvasElement);
-      const buttonPopover = canvas.queryByRole("button", {
-        name: "More actions",
-      });
-      expect(buttonPopover).not.toBeNull();
-    });
-  },
-};
-
-export const StartIcon: StoryObj<ButtonPopoverProps> = {
-  args: {
-    ariaLabel: "More actions",
-    startIcon: <GroupIcon />,
-    children: [
-      <Heading5 key="1">Popover Content</Heading5>,
-      <Paragraph key="2">Some more popover content.</Paragraph>,
-    ],
-  },
-};
-
-export const EndIcon: StoryObj<ButtonPopoverProps> = {
-  args: {
-    ariaLabel: "More actions",
-    endIcon: <GroupIcon />,
-    children: [
-      <Heading5 key="1">Popover Content</Heading5>,
-      <Paragraph key="2">Some more popover content.</Paragraph>,
-    ],
-  },
-};
-
-export const Disabled: StoryObj<ButtonPopoverProps> = {
-  args: {
-    label: "Cargo options",
-    isDisabled: true,
-    children: [
-      <Heading5 key="1">Popover Content</Heading5>,
-      <Paragraph key="2">Some more popover content.</Paragraph>,
-    ],
-  },
-};
-
-export const Alignment: StoryObj<ButtonPopoverProps> = {
-  args: {
-    variant: "secondary",
-    children: [
-      <Heading5 key="1">Popover Content</Heading5>,
-      <Paragraph key="2">Some more popover content.</Paragraph>,
-    ],
-    popoverAlignment: "right",
-  },
-  render: function C(props: ButtonPopoverProps) {
-    return (
-      <Box sx={{ ml: "300px" }}>
-        <ButtonPopover
-          label="More actions"
-          variant={props.variant}
-          popoverAlignment={props.popoverAlignment}
-        >
-          {props.children}
-        </ButtonPopover>
-      </Box>
-    );
-  },
-  play: async ({
-    args,
-    canvasElement,
-    step,
-  }: {
-    args: ButtonPopoverProps;
-    canvasElement: HTMLElement;
-    step: PlaywrightProps<ButtonPopoverProps>["step"];
-  }) => {
-    await clickButtonPopover({ canvasElement, step })(
-      args,
-      "Button Popover Alignment",
-    );
-  },
-};
diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/UserProfilePopover/UserProfilePopover.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/UserProfileMenuButton/UserProfileMenuButton.stories.tsx
similarity index 55%
rename from packages/odyssey-storybook/src/components/odyssey-labs/UserProfilePopover/UserProfilePopover.stories.tsx
rename to packages/odyssey-storybook/src/components/odyssey-labs/UserProfileMenuButton/UserProfileMenuButton.stories.tsx
index 7e624c462f..ef2a7e4c18 100644
--- a/packages/odyssey-storybook/src/components/odyssey-labs/UserProfilePopover/UserProfilePopover.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/UserProfileMenuButton/UserProfileMenuButton.stories.tsx
@@ -11,9 +11,16 @@
  */
 
 import {
-  popoverAlignmentValues,
-  UserProfilePopover,
-  UserProfilePopoverProps,
+  Box,
+  Heading3,
+  Link,
+  menuAlignmentValues,
+  Subordinate,
+  useOdysseyDesignTokens,
+} from "@okta/odyssey-react-mui";
+import {
+  UserProfileMenuButton,
+  UserProfileMenuButtonProps,
 } from "@okta/odyssey-react-mui/labs";
 import { Meta, StoryObj } from "@storybook/react";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -21,11 +28,25 @@ import icons from "../../../../.storybook/components/iconUtils";
 import { within } from "@storybook/testing-library";
 import { UserIcon } from "@okta/odyssey-react-mui/icons";
 import { PlaywrightProps } from "../../odyssey-mui/storybookTypes";
-import { Heading5, Paragraph } from "@okta/odyssey-react-mui";
+import { ReactNode } from "react";
+
+const BoxWithBottomMargin = ({ children }: { children: ReactNode }) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <Box
+      sx={{
+        marginBottom: odysseyDesignTokens.Spacing4,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
 
-const storybookMeta: Meta<UserProfilePopoverProps> = {
-  title: "Labs Components/UserProfilePopover",
-  component: UserProfilePopover,
+const storybookMeta: Meta<UserProfileMenuButtonProps> = {
+  title: "Labs Components/UserProfileMenuButton",
+  component: UserProfileMenuButton,
   argTypes: {
     profileIcon: {
       control: { type: "select" },
@@ -51,20 +72,20 @@ const storybookMeta: Meta<UserProfilePopoverProps> = {
       description: "An optional icon to display at the end of the user profile",
       table: { type: { summary: "<Icon />" } },
     },
-    popoverAlignment: {
-      options: popoverAlignmentValues,
+    menuAlignment: {
+      options: menuAlignmentValues,
       control: { type: "radio" },
       description: "The horizontal alignment of the popover.",
       table: {
         type: {
-          summary: popoverAlignmentValues.join(" | "),
+          summary: menuAlignmentValues.join(" | "),
         },
         defaultValue: {
           summary: "left",
         },
       },
     },
-    children: {
+    popoverContent: {
       control: "obj",
       description: "The content to appear in the popover",
       table: {
@@ -83,12 +104,23 @@ const storybookMeta: Meta<UserProfilePopoverProps> = {
     userName: "test.user@test.com",
     orgName: "ORG123",
     profileIcon: <UserIcon />,
-    popoverAlignment: "right",
-    children: (
-      <>
-        <Heading5 key="1">Popover Content</Heading5>
-        <Paragraph key="2">Some more popover content.</Paragraph>
-      </>
+    menuAlignment: "left",
+    popoverContent: (
+      <Box sx={{ minWidth: "392px" }}>
+        <BoxWithBottomMargin>
+          <Heading3>Add-Min O'Cloudy Tud</Heading3>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Subordinate>administrator1@clouditude.net</Subordinate>
+          <Subordinate>rain.okta1.com</Subordinate>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#">My Settings</Link>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#">Sign Out</Link>
+        </BoxWithBottomMargin>
+      </Box>
     ),
   },
   decorators: [MuiThemeDecorator],
@@ -97,16 +129,23 @@ const storybookMeta: Meta<UserProfilePopoverProps> = {
 
 export default storybookMeta;
 
-export const Default: StoryObj<UserProfilePopoverProps> = {};
+export const Default: StoryObj<UserProfileMenuButtonProps> = {};
 
-export const WithLeftPopoverAlignment: StoryObj<UserProfilePopoverProps> = {
+export const WithRightPopoverAlignment: StoryObj<UserProfileMenuButtonProps> = {
   args: {
-    popoverAlignment: "left",
+    menuAlignment: "right",
+  },
+  render: function C(props: UserProfileMenuButtonProps) {
+    return (
+      <Box sx={{ ml: "500px" }}>
+        <UserProfileMenuButton {...props} />
+      </Box>
+    );
   },
   play: async ({
     canvasElement,
     step,
-  }: PlaywrightProps<UserProfilePopoverProps>) => {
+  }: PlaywrightProps<UserProfileMenuButtonProps>) => {
     await step("With profile icon", async () => {
       const canvas = within(canvasElement);
       const buttonPopover = canvas.queryByRole("button", {
@@ -117,14 +156,14 @@ export const WithLeftPopoverAlignment: StoryObj<UserProfilePopoverProps> = {
   },
 };
 
-export const WithoutProfileIcon: StoryObj<UserProfilePopoverProps> = {
+export const WithoutProfileIcon: StoryObj<UserProfileMenuButtonProps> = {
   args: {
     profileIcon: undefined,
   },
   play: async ({
     canvasElement,
     step,
-  }: PlaywrightProps<UserProfilePopoverProps>) => {
+  }: PlaywrightProps<UserProfileMenuButtonProps>) => {
     await step("With profile icon", async () => {
       const canvas = within(canvasElement);
       const buttonPopover = canvas.queryByRole("button", {
@@ -134,3 +173,33 @@ export const WithoutProfileIcon: StoryObj<UserProfilePopoverProps> = {
     });
   },
 };
+
+export const PrimaryVariant: StoryObj<UserProfileMenuButtonProps> = {
+  args: {
+    buttonVariant: "primary",
+  },
+};
+
+export const SecondaryVariant: StoryObj<UserProfileMenuButtonProps> = {
+  args: {
+    buttonVariant: "secondary",
+  },
+};
+
+export const DangerVariant: StoryObj<UserProfileMenuButtonProps> = {
+  args: {
+    buttonVariant: "danger",
+  },
+};
+
+export const DangerSecondaryVariant: StoryObj<UserProfileMenuButtonProps> = {
+  args: {
+    buttonVariant: "dangerSecondary",
+  },
+};
+
+export const FloatingActionVariant: StoryObj<UserProfileMenuButtonProps> = {
+  args: {
+    buttonVariant: "floatingAction",
+  },
+};
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 201f076d68..3c78bf5c53 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
@@ -20,12 +20,19 @@ import {
   buttonVariantValues,
   MenuItem,
   menuAlignmentValues,
+  Subordinate,
+  Paragraph,
+  useOdysseyDesignTokens,
+  Heading5,
+  Link,
 } from "@okta/odyssey-react-mui";
 import {
   GroupIcon,
   GlobeIcon,
   CalendarIcon,
+  QuestionCircleIcon,
 } from "@okta/odyssey-react-mui/icons";
+import type { ReactNode } from "react";
 
 import { fieldComponentPropsMetaData } from "../../../fieldComponentPropsMetaData";
 import icons from "../../../../.storybook/components/iconUtils";
@@ -35,6 +42,20 @@ import { expect } from "@storybook/jest";
 import { axeRun } from "../../../axe-util";
 import type { PlaywrightProps } from "../storybookTypes";
 
+const BoxWithBottomMargin = ({ children }: { children: ReactNode }) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <Box
+      sx={{
+        marginBottom: odysseyDesignTokens.Spacing4,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
 const storybookMeta: Meta<typeof MenuButton> = {
   title: "MUI Components/Menu Button",
   component: MenuButton,
@@ -100,11 +121,26 @@ const storybookMeta: Meta<typeof MenuButton> = {
         },
       },
       type: {
-        required: true,
+        required: false,
         name: "other",
         value: "[MenuItem | Divider | ListSubheader]",
       },
     },
+    popoverContent: {
+      control: "obj",
+      description:
+        "The contents to display in the popover (instead of children)",
+      table: {
+        type: {
+          summary: "[ReactNode | NullElement]",
+        },
+      },
+      type: {
+        required: false,
+        name: "other",
+        value: "ReactNode",
+      },
+    },
     endIcon: {
       control: {
         type: "select",
@@ -415,3 +451,69 @@ export const Alignment: StoryObj<MenuButtonProps> = {
     );
   },
 };
+
+export const HelpPopover: StoryObj<MenuButtonProps> = {
+  args: {
+    buttonLabel: "",
+    endIcon: <QuestionCircleIcon />,
+    buttonVariant: "secondary",
+    popoverContent: [
+      <Box sx={{ minWidth: "392px" }}>
+        <BoxWithBottomMargin>
+          <Heading5>Title</Heading5>
+          <Subordinate>Caption</Subordinate>
+          <Paragraph>Body</Paragraph>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#" target="_blank">
+            Link
+          </Link>
+          <Subordinate>Caption</Subordinate>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#" target="_blank">
+            Link
+          </Link>
+          <Subordinate>Caption</Subordinate>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#" target="_blank">
+            Link
+          </Link>
+          <Subordinate>Caption</Subordinate>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#" target="_blank">
+            Link
+          </Link>
+          <Subordinate>Caption</Subordinate>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#" target="_blank">
+            Link
+          </Link>
+          <Subordinate>Caption</Subordinate>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Divider />
+        </BoxWithBottomMargin>
+        <Box sx={{ fontWeight: "bold" }}>
+          <Paragraph>
+            Body{" "}
+            <Link href="#" target="_blank">
+              Link
+            </Link>
+          </Paragraph>
+        </Box>
+      </Box>,
+    ],
+    id: "floating",
+  },
+  play: async ({ canvasElement, step }: PlaywrightProps<MenuButtonProps>) => {
+    await step("Filter and Select from listbox", async () => {
+      const canvas = within(canvasElement);
+      const button = canvas.getByRole("button", { name: "More actions" });
+      expect(button).toHaveAttribute("id", "floating-button");
+    });
+  },
+};