diff --git a/packages/odyssey-react-mui/src/labs/NavAccordion.tsx b/packages/odyssey-react-mui/src/labs/NavAccordion.tsx
index fe34b7e045..9f50368f8f 100644
--- a/packages/odyssey-react-mui/src/labs/NavAccordion.tsx
+++ b/packages/odyssey-react-mui/src/labs/NavAccordion.tsx
@@ -10,37 +10,37 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ReactNode, memo } from "react";
-import type { HtmlProps } from "../HtmlProps";
+import styled from "@emotion/styled";
 import {
-  Box,
   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 { Support } from "../Typography";
-import { useUniqueId } from "../useUniqueId";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "../OdysseyDesignTokensContext";
-import styled from "@emotion/styled";
+import { Support } from "../Typography";
+import { useUniqueId } from "../useUniqueId";
 
 export type NavAccordionProps = {
   /**
    * The content of the Accordion itself
    */
   children: ReactNode;
-  /**
-   * Defines IDs for the header and the content of the Accordion
-   */
-  id?: string;
   /**
    * 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
    */
@@ -81,11 +81,10 @@ const AccordionLabelContainer = styled("span", {
   isIconVisible: boolean;
 }>(({ odysseyDesignTokens, isIconVisible }) => ({
   width: "100%",
-  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,
+  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
   fontSize: odysseyDesignTokens.TypographyScale0,
   fontWeight: odysseyDesignTokens.TypographyWeightHeading,
   color: odysseyDesignTokens.TypographyColorHeading,
-  alignSelf: "center",
 }));
 
 const NavAccordion = ({
@@ -109,46 +108,27 @@ const NavAccordion = ({
       disabled={isDisabled}
       disableGutters
       expanded={isExpanded}
-      sx={{
-        border: "0 !important",
-        width: "100%",
-      }}
+      className="nav-accordion"
     >
       <MuiAccordionSummary
-        sx={{
-          padding: `${odysseyDesignTokens.Spacing2} ${odysseyDesignTokens.Spacing4}`,
-          ".MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
-            transform: "rotate(-90deg) !important",
-          },
-        }}
+        className="nav-accordion-summary"
         aria-controls={contentId}
         expandIcon={<ChevronRightIcon />}
         id={headerId}
       >
         <Support component="div" translate={translate}>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-            }}
+          {startIcon && startIcon}
+          <AccordionLabelContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            isIconVisible={!!startIcon}
           >
-            {startIcon && startIcon}
-            <AccordionLabelContainer
-              odysseyDesignTokens={odysseyDesignTokens}
-              isIconVisible={!!startIcon}
-            >
-              {label}
-            </AccordionLabelContainer>
-          </Box>
+            {label}
+          </AccordionLabelContainer>
         </Support>
       </MuiAccordionSummary>
       <MuiAccordionDetails
+        className="nav-accordion-details"
         aria-labelledby={headerId}
-        sx={{
-          paddingTop: 0,
-          paddingBottom: 0,
-          paddingLeft: odysseyDesignTokens.Spacing2,
-        }}
       >
         {children}
       </MuiAccordionDetails>
diff --git a/packages/odyssey-react-mui/src/labs/SideNav.tsx b/packages/odyssey-react-mui/src/labs/SideNav.tsx
index 93abba868b..7472a231e6 100644
--- a/packages/odyssey-react-mui/src/labs/SideNav.tsx
+++ b/packages/odyssey-react-mui/src/labs/SideNav.tsx
@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import styled from "@emotion/styled";
 import {
   memo,
   useMemo,
@@ -17,40 +18,25 @@ import {
   MouseEvent,
   ReactElement,
   ReactNode,
+  useCallback,
 } 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 { NavAccordion } from "./NavAccordion";
-
 import { Status, statusSeverityValues } from "../Status";
-
-import { Box } from "../Box";
-import type { HtmlProps } from "../HtmlProps";
-import styled from "@emotion/styled";
 import { Heading6 } from "../Typography";
-import { CollapseLeftIcon, ExpandLeftIcon } from "../icons.generated";
-import { Link } from "../Link";
 
 export type SideNavItem = {
   id: string;
   label: string;
-  target?: string;
-  /**
-   * The icon element to display at the start of the Nav Item
-   */
-  startIcon?: ReactElement;
-  /**
-   * The status element to display after the label
-   */
-  severity?: (typeof statusSeverityValues)[number];
-  /**
-   * The label to display inside the status
-   */
-  statusLabel?: string;
   /**
    * The icon element to display at the end of the Nav Item
    */
@@ -75,6 +61,19 @@ export type SideNavItem = {
    * Event fired when the nav item is clicked
    */
   onClick?(event: MouseEvent<HTMLAnchorElement>): 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;
+  target?: string;
 } & (
   | {
       /**
@@ -95,49 +94,55 @@ export type SideNavItem = {
 );
 
 export type SideNavFooterItem = {
+  href: string;
   id: string;
   label: string;
-  href: string;
 };
 
 const SideNavCollapsedContainer = styled("div", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "sideNavCollapsed",
+    prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
 })(
   ({
     odysseyDesignTokens,
-    sideNavCollapsed,
+    isSideNavCollapsed,
   }: {
     odysseyDesignTokens: DesignTokens;
-    sideNavCollapsed: boolean;
+    isSideNavCollapsed: boolean;
   }) => ({
     backgroundColor: odysseyDesignTokens.HueNeutral300,
     paddingTop: odysseyDesignTokens.Spacing5,
     cursor: "pointer",
-    width: sideNavCollapsed ? "auto" : 0,
-    visibility: sideNavCollapsed ? "visible" : "hidden",
+    width: isSideNavCollapsed ? "auto" : 0,
+    opacity: isSideNavCollapsed ? 1 : 0,
+    visibility: isSideNavCollapsed ? "visible" : "hidden",
+    transitionProperty: "opacity, visibility, width",
+    transitionDuration: odysseyDesignTokens.TransitionDurationMain,
+    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
   }),
 );
 
 const SideNavContainer = styled("div", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "sideNavCollapsed",
+    prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
 })(
   ({
     odysseyDesignTokens,
-    sideNavCollapsed,
+    isSideNavCollapsed,
   }: {
     odysseyDesignTokens: DesignTokens;
-    sideNavCollapsed: boolean;
+    isSideNavCollapsed: boolean;
   }) => ({
     backgroundColor: odysseyDesignTokens.HueNeutralWhite,
     flexDirection: "column",
     display: "flex",
-    visibility: sideNavCollapsed ? "hidden" : "visible",
-    width: sideNavCollapsed ? "0" : "100%",
-    transitionProperty: "width, visibility",
+    opacity: isSideNavCollapsed ? 0 : 1,
+    visibility: isSideNavCollapsed ? "hidden" : "visible",
+    width: isSideNavCollapsed ? "0" : "100%",
+    transitionProperty: "opacity, visibility, width",
     transitionDuration: odysseyDesignTokens.TransitionDurationMain,
     transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
+    transitionDelay: odysseyDesignTokens.TransitionDurationMain,
   }),
 );
 
@@ -156,43 +161,23 @@ const SideNavHeaderContainer = styled("div", {
 const CollapseIcon = ({ onClick }: { onClick?(): void }): ReactElement => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   return (
-    <div
-      tabIndex={0}
-      role="button"
-      onClick={onClick}
-      onKeyDown={(event) => {
-        event.key === "Enter" && onClick && onClick();
+    <Box
+      sx={{
+        "& > button": {
+          height: "32px",
+          width: "32px",
+          color: odysseyDesignTokens.HueNeutral400,
+        },
       }}
     >
-      <Box
-        component="a"
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "32px",
-          height: "32px",
-          border: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral300}`,
-          borderRadius: odysseyDesignTokens.BorderRadiusTight,
-          cursor: "pointer",
-          padding: odysseyDesignTokens.Spacing1,
-          "&:hover": {
-            backgroundColor: odysseyDesignTokens.HueNeutral50,
-          },
-        }}
-      >
-        <CollapseLeftIcon
-          onClick={onClick}
-          onKeyDown={onClick}
-          sx={{
-            height: "16px",
-            width: "16px",
-            alignSelf: "center",
-            color: odysseyDesignTokens.HueNeutral400,
-          }}
-        />
-      </Box>
-    </div>
+      <Button
+        tabIndex={0}
+        variant="secondary"
+        onClick={onClick}
+        startIcon={<CollapseLeftIcon />}
+        ariaLabel="collapse side navigation"
+      />
+    </Box>
   );
 };
 
@@ -253,19 +238,16 @@ const SideNavItemLabelContainer = styled("div", {
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographyScale0,
   fontWeight: odysseyDesignTokens.TypographyWeightHeading,
-  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,
-  "& > a": {
+  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
+  "& a": {
     color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    fontSize: odysseyDesignTokens.TypographyScale0,
     pointerEvents: isDisabled ? "none" : "auto",
   },
-  "& > a:hover": {
+  "& a:hover": {
     textDecoration: "none",
     cursor: isDisabled ? "default" : "pointer",
   },
-  "& > a:visited": {
-    color: odysseyDesignTokens.TypographyColorHeading,
-    fontSize: odysseyDesignTokens.TypographyScale0,
-  },
 }));
 
 const SideNavListItemContainer = styled("li", {
@@ -281,33 +263,32 @@ const SideNavListItemContainer = styled("li", {
 }>(({ odysseyDesignTokens, isSelected, isDisabled }) => ({
   display: "flex",
   alignItems: "center",
-  minHeight: "48px",
-  opacity: isDisabled ? "0.38" : "1",
   cursor: isDisabled ? "default" : "pointer",
   pointerEvents: isDisabled ? "none" : "auto",
-  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "auto",
-  "&:hover": {
-    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "auto",
-  },
+  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "unset",
+  margin: "4px 0",
   "&:last-child": {
     marginBottom: odysseyDesignTokens.Spacing2,
   },
-  "& > a": {
+  "& a": {
     display: "flex",
     alignItems: "center",
     width: "100%",
-    paddingRight: odysseyDesignTokens.Spacing4,
-    paddingLeft: odysseyDesignTokens.Spacing4,
+    minHeight: "45px",
+    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
     color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
     pointerEvents: isDisabled ? "none" : "auto",
   },
-  "& > a:hover": {
+  "& a:hover": {
     textDecoration: "none",
     cursor: isDisabled ? "default" : "pointer",
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
   },
-  "& > a:visited": {
-    color: odysseyDesignTokens.TypographyColorHeading,
-    fontSize: odysseyDesignTokens.TypographyScale0,
+  "& a:focus-visible": {
+    outlineOffset: 0,
+    borderRadius: 0,
+    outlineWidth: "2px",
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
   },
 }));
 
@@ -346,6 +327,44 @@ const SideNavFooter = ({ id, label, href }: SideNavFooterItem) => {
   );
 };
 
+const SideNavItemLinkContent = ({
+  label,
+  startIcon,
+  endIcon,
+  isDisabled,
+  severity,
+  statusLabel,
+}: Pick<
+  SideNavItem,
+  "label" | "startIcon" | "endIcon" | "severity" | "statusLabel"
+> & {
+  isDisabled?: boolean;
+}): ReactNode => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return (
+    <>
+      {startIcon && startIcon}
+      <SideNavItemLabelContainer
+        odysseyDesignTokens={odysseyDesignTokens}
+        isIconVisible={!!startIcon}
+        isDisabled={isDisabled}
+      >
+        {label}
+        {severity && (
+          <Box
+            sx={{
+              marginLeft: odysseyDesignTokens.Spacing2,
+            }}
+          >
+            <Status severity={severity} label={statusLabel || ""} />
+          </Box>
+        )}
+      </SideNavItemLabelContainer>
+      {endIcon && endIcon}
+    </>
+  );
+};
+
 const SideNavItemContent = ({
   id,
   label,
@@ -378,30 +397,46 @@ const SideNavItemContent = ({
       id={id}
       key={id}
       disabled={isDisabled}
+      aria-disabled={isDisabled}
       isDisabled={isDisabled}
       isSelected={isSelected}
       odysseyDesignTokens={odysseyDesignTokens}
     >
-      <Link href={href || ""} target={target} onClick={onClick}>
-        {startIcon && startIcon}
-        <SideNavItemLabelContainer
-          odysseyDesignTokens={odysseyDesignTokens}
-          isIconVisible={!!startIcon}
-          isDisabled={isDisabled}
-        >
-          {label}
-          {severity && (
-            <Box
-              sx={{
-                marginLeft: odysseyDesignTokens.Spacing2,
-              }}
-            >
-              <Status severity={severity} label={statusLabel || ""} />
-            </Box>
-          )}
-        </SideNavItemLabelContainer>
-        {endIcon && endIcon}
-      </Link>
+      {
+        // Use Link for accessible nav items and div for disabled items
+        isDisabled ? (
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              width: "100%",
+              minHeight: "45px",
+              padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
+              color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
+            }}
+          >
+            <SideNavItemLinkContent
+              label={label}
+              startIcon={startIcon}
+              endIcon={endIcon}
+              isDisabled={isDisabled}
+              statusLabel={statusLabel}
+              severity={severity}
+            />
+          </Box>
+        ) : (
+          <Link href={href || ""} target={target} onClick={onClick}>
+            <SideNavItemLinkContent
+              label={label}
+              startIcon={startIcon}
+              endIcon={endIcon}
+              isDisabled={isDisabled}
+              statusLabel={statusLabel}
+              severity={severity}
+            />
+          </Link>
+        )
+      }
     </SideNavListItemContainer>
   );
 };
@@ -415,6 +450,10 @@ export type SideNavProps = {
    *  Determines whether the side nav is collapsible
    */
   isCollapsible?: boolean;
+  /**
+   * Footer items in the side nav
+   */
+  footerItems?: SideNavFooterItem[];
   /**
    *  Triggers when the side nav is collapsed
    */
@@ -423,10 +462,6 @@ export type SideNavProps = {
    * Nav items in the side nav
    */
   sideNavItems: SideNavItem[];
-  /**
-   * Footer items in the side nav
-   */
-  footerItems?: SideNavFooterItem[];
 } & Pick<HtmlProps, "testId">;
 
 const SideNav = ({
@@ -436,7 +471,7 @@ const SideNav = ({
   sideNavItems,
   footerItems,
 }: SideNavProps) => {
-  const [sideNavCollapsed, setSideNavCollapsed] = useState(false);
+  const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
   const processedSideNavItems = useMemo(
@@ -449,6 +484,12 @@ const SideNav = ({
       })),
     [sideNavItems],
   );
+
+  const sideNavCollapseHandler = useCallback(() => {
+    setSideNavCollapsed(!isSideNavCollapsed);
+    onCollapse && onCollapse();
+  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);
+
   return (
     <Box
       sx={{
@@ -459,21 +500,22 @@ const SideNav = ({
       <SideNavCollapsedContainer
         tabIndex={0}
         odysseyDesignTokens={odysseyDesignTokens}
-        sideNavCollapsed={sideNavCollapsed}
-        onClick={() => setSideNavCollapsed(!sideNavCollapsed)}
+        isSideNavCollapsed={isSideNavCollapsed}
+        onClick={() => setSideNavCollapsed(!isSideNavCollapsed)}
         onKeyDown={(event) => {
-          event.key === "Enter" && setSideNavCollapsed(!sideNavCollapsed);
+          (event.key === "Enter" || event.code === "Space") &&
+            setSideNavCollapsed(!isSideNavCollapsed);
         }}
       >
         <ExpandLeftIcon
           sx={{
             margin: `0 ${odysseyDesignTokens.Spacing1}`,
           }}
-        ></ExpandLeftIcon>
+        />
       </SideNavCollapsedContainer>
       <SideNavContainer
         odysseyDesignTokens={odysseyDesignTokens}
-        sideNavCollapsed={sideNavCollapsed}
+        isSideNavCollapsed={isSideNavCollapsed}
       >
         <Box
           sx={{
@@ -484,10 +526,7 @@ const SideNav = ({
           <SideNavHeader
             navHeaderText={navHeaderText}
             isCollapsible={isCollapsible}
-            onCollapse={() => {
-              setSideNavCollapsed(!sideNavCollapsed);
-              onCollapse && onCollapse();
-            }}
+            onCollapse={sideNavCollapseHandler}
           />
         </Box>
         <Box
diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
index 2b790a4bc9..5b0f492d96 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%",
+          },
         }),
       },
     },
@@ -122,13 +126,19 @@ export const components = ({
             zIndex: 1,
           },
           svg: {
-            fontSize: "1em",
+            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,
@@ -145,6 +155,11 @@ export const components = ({
         root: () => ({
           paddingInline: odysseyTokens.Spacing3,
           paddingBlock: odysseyTokens.Spacing4,
+          "&.nav-accordion-details": {
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: odysseyTokens.Spacing2,
+          },
         }),
       },
     },
@@ -2012,6 +2027,9 @@ export const components = ({
             display: "inline-block",
             height: "1em",
             lineHeight: 1,
+            "& svg": {
+              fontSize: "1em",
+            },
           },
 
           ".Link-indicator": {
@@ -2022,7 +2040,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
index 2883ba180d..85df991c88 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
@@ -156,9 +156,11 @@ const storybookMeta: Meta<SideNavProps> = {
         isDisabled: true,
       },
       {
-        id: "item0-3",
-        label: "Resource Management",
-        isSectionHeader: true,
+        id: "item2",
+        href: "/",
+        label: "Applications",
+        startIcon: <AppsIcon />,
+        isSelected: true,
       },
       {
         id: "item0-1-2",
@@ -167,11 +169,9 @@ const storybookMeta: Meta<SideNavProps> = {
         startIcon: <DirectoryIcon />,
       },
       {
-        id: "item2",
-        href: "/",
-        label: "Applications",
-        startIcon: <AppsIcon />,
-        isSelected: true,
+        id: "item0-3",
+        label: "Resource Management",
+        isSectionHeader: true,
       },
       {
         id: "item3-2-1",
@@ -186,7 +186,7 @@ const storybookMeta: Meta<SideNavProps> = {
         id: "item5",
         href: "/",
         label: "Reports",
-        endIcon: <DownloadIcon />,
+        startIcon: <DownloadIcon />,
       },
       {
         id: "item3-1-0",
@@ -220,6 +220,7 @@ const storybookMeta: Meta<SideNavProps> = {
         href: "/",
         label: "Settings",
         startIcon: <SettingsIcon />,
+        isDefaultExpanded: true,
         children: [
           {
             id: "item4-1",