diff --git a/packages/odyssey-react-mui/src/labs/NavAccordion.tsx b/packages/odyssey-react-mui/src/labs/NavAccordion.tsx
new file mode 100644
index 0000000000..78b24baad0
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/NavAccordion.tsx
@@ -0,0 +1,133 @@
+/*!
+ * Copyright (c) 2023-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 styled from "@emotion/styled";
+import {
+  Accordion as MuiAccordion,
+  AccordionDetails as MuiAccordionDetails,
+  AccordionSummary as MuiAccordionSummary,
+  AccordionProps as MuiAccordionProps,
+} from "@mui/material";
+import { ReactNode, memo } from "react";
+
+import type { HtmlProps } from "../HtmlProps";
+import { ChevronRightIcon } from "../icons.generated";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../OdysseyDesignTokensContext";
+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
+   */
+  label: string;
+  /**
+   * Defines IDs for the header and the content of the Accordion
+   */
+  id?: string;
+  /**
+   * Whether the item is expanded by default
+   */
+  isDefaultExpanded?: boolean;
+  /**
+   * Whether the item is disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * If true, expands the accordion, otherwise collapse it.
+   * Setting this prop enables control over the accordion.
+   */
+  isExpanded?: boolean;
+  /**
+   * Event fired when the expansion state of the accordion is changed
+   */
+  onChange?: MuiAccordionProps["onChange"];
+  /**
+   * The icon element to display at the start of the Nav Item
+   */
+  startIcon?: ReactNode;
+} & Pick<HtmlProps, "testId" | "translate">;
+
+const AccordionLabelContainer = styled("span", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isIconVisible",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isIconVisible: boolean;
+}>(({ odysseyDesignTokens, isIconVisible }) => ({
+  width: "100%",
+  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
+  fontSize: odysseyDesignTokens.TypographyScale0,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
+  color: odysseyDesignTokens.TypographyColorHeading,
+}));
+
+const NavAccordion = ({
+  children,
+  label,
+  id: idOverride,
+  isDefaultExpanded,
+  isDisabled,
+  isExpanded,
+  translate,
+  startIcon,
+}: NavAccordionProps) => {
+  const id = useUniqueId(idOverride);
+  const headerId = `${id}-header`;
+  const contentId = `${id}-content`;
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <MuiAccordion
+      defaultExpanded={isDefaultExpanded}
+      disabled={isDisabled}
+      disableGutters
+      expanded={isExpanded}
+      className="nav-accordion"
+    >
+      <MuiAccordionSummary
+        className="nav-accordion-summary"
+        aria-controls={contentId}
+        expandIcon={<ChevronRightIcon />}
+        id={headerId}
+      >
+        <Support component="div" translate={translate}>
+          {startIcon && startIcon}
+          <AccordionLabelContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            isIconVisible={Boolean(startIcon)}
+          >
+            {label}
+          </AccordionLabelContainer>
+        </Support>
+      </MuiAccordionSummary>
+      <MuiAccordionDetails
+        className="nav-accordion-details"
+        aria-labelledby={headerId}
+      >
+        {children}
+      </MuiAccordionDetails>
+    </MuiAccordion>
+  );
+};
+
+const MemoizedNavAccordion = memo(NavAccordion);
+MemoizedNavAccordion.displayName = "NavAccordion";
+
+export { MemoizedNavAccordion as NavAccordion };
diff --git a/packages/odyssey-react-mui/src/labs/SideNav.tsx b/packages/odyssey-react-mui/src/labs/SideNav.tsx
new file mode 100644
index 0000000000..bffd573679
--- /dev/null
+++ b/packages/odyssey-react-mui/src/labs/SideNav.tsx
@@ -0,0 +1,745 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import {
+  memo,
+  useMemo,
+  useState,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  KeyboardEvent,
+} from "react";
+
+import { Box } from "../Box";
+import { Button } from "../Button";
+import type { HtmlProps } from "../HtmlProps";
+import { CollapseLeftIcon, ExpandLeftIcon } from "../icons.generated";
+import { Link } from "../Link";
+import { NavAccordion } from "./NavAccordion";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../OdysseyDesignTokensContext";
+import { Status, statusSeverityValues } from "../Status";
+import { Heading6 } from "../Typography";
+
+export type SideNavItem = {
+  id: string;
+  label: string;
+  /**
+   * The icon element to display at the end of the Nav Item
+   */
+  endIcon?: ReactElement;
+  /**
+   * 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.
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether the item is active/selected
+   */
+  isSelected?: boolean;
+  /**
+   * Event fired when the nav item is clicked
+   */
+  onClick?(): void;
+  /**
+   * The status element to display after the label
+   */
+  severity?: (typeof statusSeverityValues)[number];
+  /**
+   * The icon element to display at the start of the Nav Item
+   */
+  startIcon?: ReactElement;
+  /**
+   * The label to display inside the status
+   */
+  statusLabel?: string;
+  /**
+   * The link target prop. e.g., "_blank"
+   */
+  target?: string;
+} & (
+  | {
+      /**
+       * Determines if the side nav item is a section header
+       */
+      isSectionHeader: true;
+      href?: never;
+      children?: never;
+      isDefaultExpanded?: never;
+      isExpanded?: 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;
+    }
+  | {
+      /**
+       * An array of side nav items to be displayed as children within Accordion
+       */
+      children?: SideNavItem[];
+      /**
+       * Whether the accordion (nav item with children) is expanded by default
+       */
+      isDefaultExpanded?: boolean;
+      /**
+       * If true, expands the accordion, otherwise collapse it.
+       * Setting this prop enables control over the accordion.
+       */
+      isExpanded?: boolean;
+      isSectionHeader?: never;
+      href?: never;
+    }
+);
+
+export type SideNavFooterItem = {
+  href?: string;
+  id: string;
+  label: string;
+};
+
+export type SideNavProps = {
+  /**
+   * Side Nav header text that is usually reserved to show the App name
+   */
+  navHeaderText: string;
+  /**
+   *  Determines whether the side nav is collapsible
+   */
+  isCollapsible?: boolean;
+  /**
+   * Footer items in the side nav
+   */
+  footerItems?: SideNavFooterItem[];
+  /**
+   *  Triggers when the side nav is collapsed
+   */
+  onCollapse?(): void;
+  /**
+   *  Triggers when the side nav is expanded
+   */
+  onExpand?(): void;
+  /**
+   * Nav items in the side nav
+   */
+  sideNavItems: SideNavItem[];
+} & Pick<HtmlProps, "testId">;
+
+const SideNavCollapsedContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
+})(
+  ({
+    odysseyDesignTokens,
+    isSideNavCollapsed,
+  }: {
+    odysseyDesignTokens: DesignTokens;
+    isSideNavCollapsed: boolean;
+  }) => ({
+    backgroundColor: odysseyDesignTokens.HueNeutral300,
+    paddingTop: odysseyDesignTokens.Spacing5,
+    cursor: "pointer",
+    width: isSideNavCollapsed ? "auto" : 0,
+    opacity: isSideNavCollapsed ? 1 : 0,
+    visibility: isSideNavCollapsed ? "visible" : "hidden",
+    transitionProperty: "opacity",
+    transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+  }),
+);
+
+const SideNavExpandContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
+})(
+  ({
+    odysseyDesignTokens,
+    isSideNavCollapsed,
+  }: {
+    odysseyDesignTokens: DesignTokens;
+    isSideNavCollapsed: boolean;
+  }) => ({
+    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+    flexDirection: "column",
+    display: "flex",
+    opacity: isSideNavCollapsed ? 0 : 1,
+    visibility: isSideNavCollapsed ? "hidden" : "visible",
+    width: isSideNavCollapsed ? "0" : "100%",
+    transitionProperty: "opacity, width",
+    transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+  }),
+);
+
+const SideNavHeaderContainer = 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,
+}));
+
+const CollapseIcon = ({ onClick }: { onClick?(): void }): ReactElement => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const collapseButtonStyles = useMemo(
+    () => ({
+      "& > button": {
+        height: odysseyDesignTokens.Spacing6,
+        width: odysseyDesignTokens.Spacing6,
+        color: odysseyDesignTokens.HueNeutral400,
+      },
+    }),
+    [odysseyDesignTokens],
+  );
+
+  return (
+    <Box sx={collapseButtonStyles}>
+      <Button
+        tabIndex={0}
+        variant="secondary"
+        onClick={onClick}
+        startIcon={<CollapseLeftIcon />}
+        ariaLabel="collapse side navigation"
+      />
+    </Box>
+  );
+};
+
+const SideNavHeader = ({
+  navHeaderText,
+  isCollapsible,
+  onCollapse,
+}: Pick<
+  SideNavProps,
+  "navHeaderText" | "isCollapsible" | "onCollapse"
+>): ReactNode => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const sideNavHeaderStyles = useMemo(
+    () => ({
+      marginTop: odysseyDesignTokens.Spacing2,
+    }),
+    [odysseyDesignTokens],
+  );
+
+  return (
+    <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>
+      <Box sx={sideNavHeaderStyles}>
+        <Heading6>{navHeaderText}</Heading6>
+      </Box>
+      {isCollapsible && <CollapseIcon onClick={onCollapse} />}
+    </SideNavHeaderContainer>
+  );
+};
+
+const SideNavListContainer = styled.ul({
+  padding: 0,
+  listStyle: "none",
+  listStyleType: "none",
+});
+
+const SectionHeader = styled("li", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  fontSize: odysseyDesignTokens.TypographySizeOverline,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,
+  color: odysseyDesignTokens.HueNeutral600,
+  paddingTop: odysseyDesignTokens.Spacing3,
+  paddingBottom: odysseyDesignTokens.Spacing3,
+  paddingLeft: odysseyDesignTokens.Spacing4,
+  textTransform: "uppercase",
+}));
+
+const SideNavItemLabelContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isIconVisible",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isIconVisible: boolean;
+}>(({ odysseyDesignTokens, isIconVisible }) => ({
+  width: "100%",
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  fontSize: odysseyDesignTokens.TypographyScale0,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
+  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
+  "& a": {
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    fontSize: odysseyDesignTokens.TypographyScale0,
+  },
+  "& a:hover": {
+    textDecoration: "none",
+    cursor: "pointer",
+  },
+}));
+
+const SideNavListItemContainer = styled("li", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" &&
+    prop !== "isSelected" &&
+    prop !== "isDisabled",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isSelected?: boolean;
+  disabled?: boolean;
+  isDisabled?: boolean;
+}>(({ odysseyDesignTokens, isSelected, isDisabled }) => ({
+  display: "flex",
+  alignItems: "center",
+  cursor: isDisabled ? "default" : "pointer",
+  pointerEvents: isDisabled ? "none" : "auto",
+  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "unset",
+  margin: `${odysseyDesignTokens.Spacing1} 0`,
+  "&:last-child": {
+    marginBottom: odysseyDesignTokens.Spacing2,
+  },
+  "& a": {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    minHeight: "48px",
+    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    pointerEvents: isDisabled ? "none" : "auto",
+  },
+  "& a:hover": {
+    textDecoration: "none",
+    cursor: isDisabled ? "default" : "pointer",
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+  },
+  "& a:focus-visible": {
+    outlineOffset: 0,
+    borderRadius: 0,
+    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+  },
+}));
+
+const SideNavFooterContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  paddingTop: odysseyDesignTokens.Spacing2,
+  paddingBottom: odysseyDesignTokens.Spacing2,
+  display: "flex",
+  justifyContent: "center",
+  flexWrap: "wrap",
+  alignItems: "center",
+  fontSize: odysseyDesignTokens.TypographySizeOverline,
+  "& a": {
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+  },
+  "& a:hover": {
+    textDecoration: "none",
+  },
+  "& a:visited": {
+    color: odysseyDesignTokens.TypographyColorHeading,
+  },
+}));
+
+const SideNavItemLinkContent = ({
+  label,
+  startIcon,
+  endIcon,
+  severity,
+  statusLabel,
+}: Pick<
+  SideNavItem,
+  "label" | "startIcon" | "endIcon" | "severity" | "statusLabel"
+>): ReactNode => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const sideNavItemContentStyles = useMemo(
+    () => ({
+      marginLeft: odysseyDesignTokens.Spacing2,
+    }),
+    [odysseyDesignTokens],
+  );
+
+  return (
+    <>
+      {startIcon && startIcon}
+      <SideNavItemLabelContainer
+        odysseyDesignTokens={odysseyDesignTokens}
+        isIconVisible={Boolean(startIcon)}
+      >
+        {label}
+        {severity && (
+          <Box sx={sideNavItemContentStyles}>
+            <Status severity={severity} label={statusLabel || ""} />
+          </Box>
+        )}
+      </SideNavItemLabelContainer>
+      {endIcon && endIcon}
+    </>
+  );
+};
+
+const SideNavItemContent = ({
+  id,
+  label,
+  href,
+  target,
+  startIcon,
+  severity,
+  statusLabel,
+  endIcon,
+  onClick,
+  isSelected,
+  isDisabled,
+}: Pick<
+  SideNavItem,
+  | "id"
+  | "label"
+  | "href"
+  | "target"
+  | "startIcon"
+  | "severity"
+  | "statusLabel"
+  | "endIcon"
+  | "onClick"
+  | "isSelected"
+  | "isDisabled"
+>) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const NavItemContentClickContainer = styled("div", {
+    shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+  })(() => ({
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    minHeight: "48px",
+    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
+    color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
+    "&:focus-visible": {
+      borderRadius: 0,
+      outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+      outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
+      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
+      backgroundColor: odysseyDesignTokens.HueNeutral50,
+      textDecoration: "none",
+    },
+  }));
+
+  const sideNavItemContentKeyHandler = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event?.key === "Enter") {
+        event.preventDefault();
+        onClick?.();
+      }
+    },
+    [onClick],
+  );
+
+  const sideNavItemContent = useMemo(() => {
+    return (
+      <SideNavListItemContainer
+        id={id}
+        key={id}
+        disabled={isDisabled}
+        aria-disabled={isDisabled}
+        isDisabled={isDisabled}
+        isSelected={isSelected}
+        odysseyDesignTokens={odysseyDesignTokens}
+      >
+        {
+          // Use Link for nav items with links and div for disabled or non-link items
+          isDisabled ? (
+            <NavItemContentClickContainer>
+              <SideNavItemLinkContent
+                label={label}
+                startIcon={startIcon}
+                endIcon={endIcon}
+                statusLabel={statusLabel}
+                severity={severity}
+              />
+            </NavItemContentClickContainer>
+          ) : !href ? (
+            <NavItemContentClickContainer
+              role="button"
+              tabIndex={0}
+              onClick={onClick}
+              onKeyDown={sideNavItemContentKeyHandler}
+            >
+              <SideNavItemLinkContent
+                label={label}
+                startIcon={startIcon}
+                endIcon={endIcon}
+                statusLabel={statusLabel}
+                severity={severity}
+              />
+            </NavItemContentClickContainer>
+          ) : (
+            <Link href={href} target={target} onClick={onClick}>
+              <SideNavItemLinkContent
+                label={label}
+                startIcon={startIcon}
+                endIcon={endIcon}
+                statusLabel={statusLabel}
+                severity={severity}
+              />
+            </Link>
+          )
+        }
+      </SideNavListItemContainer>
+    );
+  }, [
+    id,
+    label,
+    href,
+    target,
+    startIcon,
+    severity,
+    statusLabel,
+    endIcon,
+    onClick,
+    isSelected,
+    isDisabled,
+    NavItemContentClickContainer,
+    sideNavItemContentKeyHandler,
+    odysseyDesignTokens,
+  ]);
+
+  return sideNavItemContent;
+};
+
+const SideNavFooterContent = (footerItems: SideNavFooterItem[]): ReactNode => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const footerContent = useMemo(() => {
+    return footerItems?.map((item, index) => (
+      <Box
+        key={`${item.id}-wrapper`}
+        sx={{
+          display: "flex",
+        }}
+      >
+        {item.href ? (
+          <Link key={item.id} 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>
+    ));
+  }, [footerItems, odysseyDesignTokens]);
+
+  return footerContent;
+};
+
+const SideNav = ({
+  navHeaderText,
+  isCollapsible,
+  onCollapse,
+  onExpand,
+  sideNavItems,
+  footerItems,
+}: SideNavProps) => {
+  const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const processedSideNavItems = useMemo(
+    () =>
+      sideNavItems.map((item) => ({
+        ...item,
+        children: item.children?.map((childProps) => (
+          <SideNavItemContent key={childProps.id} {...childProps} />
+        )),
+      })),
+    [sideNavItems],
+  );
+
+  const sideNavCollapseHandler = useCallback(() => {
+    setSideNavCollapsed(!isSideNavCollapsed);
+    onCollapse?.();
+  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);
+
+  const sideNavExpandClickHandler = useCallback(() => {
+    setSideNavCollapsed(!isSideNavCollapsed);
+    onExpand?.();
+  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);
+
+  const sideNavExpandKeyHandler = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event?.key === "Enter" || event?.code === "Space") {
+        event.preventDefault();
+        setSideNavCollapsed(!isSideNavCollapsed);
+        onExpand?.();
+      }
+    },
+    [isSideNavCollapsed, setSideNavCollapsed, onExpand],
+  );
+
+  const sideNavStyles = useMemo(
+    () => ({
+      display: "flex",
+      height: "100vh",
+    }),
+    [],
+  );
+
+  const sideNavHeaderContainerStyles = useMemo(
+    () => ({
+      position: "sticky",
+      top: 0,
+    }),
+    [],
+  );
+
+  const sideNavListContainerStyles = useMemo(
+    () => ({
+      flex: 1,
+      overflowY: "auto",
+    }),
+    [],
+  );
+
+  const sideNavFooterContainerStyles = useMemo(
+    () => ({
+      position: "sticky",
+      bottom: 0,
+      paddingTop: odysseyDesignTokens.Spacing2,
+    }),
+    [odysseyDesignTokens],
+  );
+
+  const expandLeftIconStyles = useMemo(
+    () => ({
+      fontSize: "1em",
+      margin: `0 ${odysseyDesignTokens.Spacing1}`,
+    }),
+    [odysseyDesignTokens],
+  );
+
+  return (
+    <Box sx={sideNavStyles}>
+      <SideNavCollapsedContainer
+        tabIndex={0}
+        role="button"
+        odysseyDesignTokens={odysseyDesignTokens}
+        isSideNavCollapsed={isSideNavCollapsed}
+        onClick={sideNavExpandClickHandler}
+        onKeyDown={sideNavExpandKeyHandler}
+        data-testid="collapsed-region"
+        data-aria-label="expand side navigation"
+      >
+        <ExpandLeftIcon sx={expandLeftIconStyles} />
+      </SideNavCollapsedContainer>
+      <SideNavExpandContainer
+        odysseyDesignTokens={odysseyDesignTokens}
+        isSideNavCollapsed={isSideNavCollapsed}
+        data-testid="expanded-region"
+      >
+        <Box sx={sideNavHeaderContainerStyles}>
+          <SideNavHeader
+            navHeaderText={navHeaderText}
+            isCollapsible={isCollapsible}
+            onCollapse={sideNavCollapseHandler}
+          />
+        </Box>
+        <Box sx={sideNavListContainerStyles}>
+          <SideNavListContainer>
+            {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}
+                  >
+                    <NavAccordion
+                      label={label}
+                      isDefaultExpanded={isDefaultExpanded}
+                      isExpanded={isExpanded}
+                      startIcon={startIcon}
+                      isDisabled={isDisabled}
+                    >
+                      <SideNavListContainer id={`${id}-list`}>
+                        {children}
+                      </SideNavListContainer>
+                    </NavAccordion>
+                  </SideNavListItemContainer>
+                );
+              } else {
+                return <SideNavItemContent key={item.id} {...item} />;
+              }
+            })}
+          </SideNavListContainer>
+        </Box>
+        {footerItems && (
+          <Box sx={sideNavFooterContainerStyles}>
+            <SideNavFooterContainer odysseyDesignTokens={odysseyDesignTokens}>
+              {SideNavFooterContent(footerItems)}
+            </SideNavFooterContainer>
+          </Box>
+        )}
+      </SideNavExpandContainer>
+    </Box>
+  );
+};
+
+const MemoizedSideNav = memo(SideNav);
+MemoizedSideNav.displayName = "SideNav";
+
+export { MemoizedSideNav as SideNav };
diff --git a/packages/odyssey-react-mui/src/labs/index.ts b/packages/odyssey-react-mui/src/labs/index.ts
index 0e10af7f0f..c6b2208783 100644
--- a/packages/odyssey-react-mui/src/labs/index.ts
+++ b/packages/odyssey-react-mui/src/labs/index.ts
@@ -32,3 +32,6 @@ export * from "./PaginatedTable";
 export * from "./GroupPicker";
 
 export * from "./Switch";
+
+export * from "./NavAccordion";
+export * from "./SideNav";
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index c5c61f76ac..ba8924bf0d 100644
--- a/packages/odyssey-react-mui/src/theme/components.tsx
+++ b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -101,6 +101,10 @@ export const components = ({
             borderBottomStyle: "solid",
             borderBottomWidth: odysseyTokens.BorderWidthMain,
           },
+          "&.nav-accordion": {
+            border: "0 !important",
+            width: "100%",
+          },
         }),
       },
     },
@@ -121,6 +125,20 @@ export const components = ({
             outlineStyle: "solid",
             zIndex: 1,
           },
+          svg: {
+            fontSize: "1.2em",
+            height: "1em",
+            position: "relative",
+            insetBlockStart: "-0.0625em",
+            verticalAlign: "middle",
+            width: "1em",
+          },
+          "&.nav-accordion-summary": {
+            padding: `${odysseyTokens.Spacing2} ${odysseyTokens.Spacing4}`,
+            ".MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
+              transform: "rotate(-90deg) !important",
+            },
+          },
         }),
         content: () => ({
           marginBlock: 0,
@@ -137,6 +155,11 @@ export const components = ({
         root: () => ({
           paddingInline: odysseyTokens.Spacing3,
           paddingBlock: odysseyTokens.Spacing4,
+          "&.nav-accordion-details": {
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: odysseyTokens.Spacing2,
+          },
         }),
       },
     },
@@ -1978,6 +2001,9 @@ export const components = ({
             display: "inline-block",
             height: "1em",
             lineHeight: 1,
+            "& svg": {
+              fontSize: "1em",
+            },
           },
 
           ".Link-indicator": {
@@ -1988,7 +2014,7 @@ export const components = ({
             marginInlineEnd: odysseyTokens.Spacing1,
           },
           svg: {
-            fontSize: "1em",
+            fontSize: "1.2em",
             height: "1em",
             position: "relative",
             insetBlockStart: "-0.0625em",
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
new file mode 100644
index 0000000000..411fc278c7
--- /dev/null
+++ b/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx
@@ -0,0 +1,334 @@
+/*!
+ * 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 { SideNav, SideNavProps } from "@okta/odyssey-react-mui/labs";
+import { Meta, StoryObj } from "@storybook/react";
+import { MuiThemeDecorator } from "../../../../.storybook/components";
+import {
+  AppsIcon,
+  ClockIcon,
+  SettingsIcon,
+  CopyIcon,
+  HomeIcon,
+  Fido2Icon,
+  LockIcon,
+  BugIcon,
+  CloseIcon,
+  CalendarIcon,
+  CallIcon,
+  CheckIcon,
+  AddCircleIcon,
+  DownloadIcon,
+  ChatIcon,
+  RefreshIcon,
+  UserIcon,
+  DirectoryIcon,
+  GlobeIcon,
+  IdpIcon,
+  InformationCircleIcon,
+  InformationCircleFilledIcon,
+  ServerIcon,
+  ExpandLeftIcon,
+  FolderIcon,
+} from "@okta/odyssey-react-mui/icons";
+import { expect } from "@storybook/jest";
+import { userEvent, waitFor, within } from "@storybook/testing-library";
+import { PlaywrightProps } from "../../odyssey-mui/storybookTypes";
+
+const storybookMeta: Meta<SideNavProps> = {
+  title: "Labs Components/SideNav",
+  component: SideNav,
+  argTypes: {
+    navHeaderText: {
+      control: "text",
+      description: "Header text for the side nav",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    isCollapsible: {
+      control: "boolean",
+      description: "Controls whether the side nav is collapsible",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    onCollapse: {
+      description: "Callback to be triggered when the side nav is collapsed",
+    },
+    onExpand: {
+      description: "Callback to be triggered when the side nav is expanded",
+    },
+    sideNavItems: {
+      description: "",
+      table: {
+        type: {
+          summary: "Array<SideNavItem>",
+        },
+      },
+    },
+    footerItems: {
+      description: "",
+      table: {
+        type: {
+          summary: "Array<SideNavFooterItem>",
+        },
+      },
+    },
+  },
+  args: {
+    navHeaderText: "Admin",
+    isCollapsible: true,
+    sideNavItems: [
+      {
+        id: "AddNewFolder",
+        label: "Add new folder",
+        endIcon: <AddCircleIcon />,
+        onClick: () => {},
+      },
+      {
+        id: "item0-0",
+        label: "Admin",
+        isSectionHeader: true,
+      },
+      {
+        id: "item0-1",
+        href: "/?path=/story/labs-components-switch--default",
+        label: "Users",
+        startIcon: <UserIcon />,
+      },
+      {
+        id: "item1",
+        label: "Dashboard",
+        startIcon: <HomeIcon />,
+        isDisabled: true,
+        children: [
+          {
+            id: "item1-1",
+            href: "/",
+            label: "Home",
+            startIcon: <CheckIcon />,
+          },
+        ],
+      },
+      {
+        id: "item001",
+        label: "Onboarding",
+        startIcon: <CalendarIcon />,
+        children: [
+          {
+            id: "item1-2",
+            href: "/",
+            label: "Start",
+            startIcon: <CloseIcon />,
+            endIcon: <InformationCircleFilledIcon />,
+          },
+          {
+            id: "item1-3",
+            href: "/",
+            label: "Onboarding",
+            startIcon: <HomeIcon />,
+          },
+          {
+            id: "item1-4",
+            href: "/",
+            label: "Tasks",
+            startIcon: <CallIcon />,
+            endIcon: <ExpandLeftIcon />,
+          },
+          {
+            id: "item1-5",
+            href: "/",
+            label: "Getting Started",
+            startIcon: <InformationCircleIcon />,
+            endIcon: <CalendarIcon />,
+          },
+        ],
+      },
+      {
+        id: "item0-2",
+        href: "/",
+        label: "Profiles",
+        startIcon: <GlobeIcon />,
+        endIcon: <GlobeIcon />,
+        isDisabled: true,
+      },
+      {
+        id: "item2",
+        href: "/",
+        label: "Applications",
+        startIcon: <AppsIcon />,
+      },
+      {
+        id: "item0-1-2",
+        href: "/",
+        label: "Directory",
+        startIcon: <DirectoryIcon />,
+      },
+      {
+        id: "item0-3",
+        label: "Resource Management",
+        isSectionHeader: true,
+      },
+      {
+        id: "item3-2-1",
+        href: "/",
+        label: "Kubernetes",
+        startIcon: <ServerIcon />,
+        severity: "success",
+        statusLabel: "success",
+        endIcon: <ServerIcon />,
+      },
+      {
+        id: "item5",
+        href: "/",
+        label: "Reports",
+        startIcon: <DownloadIcon />,
+      },
+      {
+        id: "item3-1-0",
+        href: "/",
+        label: "Identify Governance",
+        target: "_blank",
+        isDisabled: true,
+        startIcon: <Fido2Icon />,
+      },
+      {
+        id: "item3-1-3",
+        href: "/",
+        label: "Workflows",
+        target: "_blank",
+        startIcon: <ClockIcon />,
+      },
+      {
+        id: "item3-0",
+        label: "Security Administration",
+        isSectionHeader: true,
+      },
+      {
+        id: "item3",
+        href: "/",
+        label: "Security",
+        startIcon: <LockIcon />,
+        endIcon: <LockIcon />,
+      },
+      {
+        id: "item4",
+        label: "Settings",
+        startIcon: <SettingsIcon />,
+        isDefaultExpanded: true,
+        children: [
+          {
+            id: "item4-1",
+            href: "/",
+            label: "General",
+            startIcon: <BugIcon />,
+            endIcon: <ChatIcon />,
+          },
+          {
+            id: "item4-3",
+            href: "/",
+            label: "Custom Login page",
+            startIcon: <CheckIcon />,
+          },
+          {
+            id: "item4-2",
+            href: "/",
+            isSelected: true,
+            label: "Custom Domain",
+            startIcon: <CloseIcon />,
+            endIcon: <CopyIcon />,
+          },
+          {
+            id: "item4-4",
+            href: "/",
+            label: "Authentication Policies Rules",
+            startIcon: <RefreshIcon />,
+          },
+          {
+            id: "item4-5",
+            href: "/",
+            label: "IDP Configuration",
+            startIcon: <IdpIcon />,
+          },
+        ],
+      },
+      {
+        id: "item5-0",
+        href: "/",
+        label: "System Configuration",
+        startIcon: <FolderIcon />,
+      },
+    ],
+    footerItems: [
+      {
+        id: "footer-item-1",
+        label: "Docs",
+        href: "/",
+      },
+      {
+        id: "footer-item-2",
+        label: "Privacy",
+      },
+      {
+        id: "footer-item-3",
+        label: "Security",
+        href: "/",
+      },
+    ],
+  },
+  decorators: [MuiThemeDecorator],
+  tags: ["autodocs"],
+};
+
+export default storybookMeta;
+
+export const Default: StoryObj<SideNavProps> = {
+  render: (props: SideNavProps) => {
+    return (
+      <SideNav
+        navHeaderText={props.navHeaderText}
+        isCollapsible={props.isCollapsible}
+        onCollapse={props.onCollapse}
+        onExpand={props.onExpand}
+        sideNavItems={props.sideNavItems}
+        footerItems={props.footerItems}
+      />
+    );
+  },
+  play: async ({ canvasElement, step }: PlaywrightProps<SideNavProps>) => {
+    const canvas = within(canvasElement);
+    const expandedRegion = canvas.getByTestId("expanded-region");
+    const collapsedRegion = canvas.getByTestId("collapsed-region");
+    await step("Side Nav Collapse", async ({}) => {
+      const collapseButton = within(expandedRegion).getByLabelText(
+        "collapse side navigation",
+      );
+      await userEvent.click(collapseButton);
+      await waitFor(() => {
+        expect(expandedRegion).not.toBeVisible();
+        expect(collapsedRegion).toBeVisible();
+      });
+    });
+    await step("Side Nav Expand", async ({}) => {
+      await userEvent.click(collapsedRegion);
+      await waitFor(() => {
+        expect(collapsedRegion).not.toBeVisible();
+        expect(expandedRegion).toBeVisible();
+      });
+    });
+  },
+};