diff --git a/lib/components/SideNav/NavItem.js b/lib/components/SideNav/NavItem.js
index 36d484f1..eba2a01a 100644
--- a/lib/components/SideNav/NavItem.js
+++ b/lib/components/SideNav/NavItem.js
@@ -198,7 +198,8 @@ const NavItem = ({
   Component,
   isActive,
   handleItemClick,
-  navItemRefs
+  navItemRefs,
+  isSmallScreen
 }) => {
   // Use the ternary operator to render the appropriate component based on actionType
   const accessibilityProps = {
@@ -212,8 +213,9 @@ const NavItem = ({
     <SideNavItemPopover
       className={item.bottomAligned && "bottom-aligned"}
       text={item.name}
+      direction={isSmallScreen ? "top" : "right"}
       textAlign="center"
-      width="124px"
+      width="fit-content"
       active={isActive}
       bottomAligned={item.bottomAligned}
     >
@@ -252,7 +254,8 @@ NavItem.propTypes = {
   Component: PropTypes.elementType,
   isActive: PropTypes.bool,
   handleItemClick: PropTypes.func,
-  navItemRefs: PropTypes.object
+  navItemRefs: PropTypes.object,
+  isSmallScreen: PropTypes.bool
 };
 
 export default NavItem;
diff --git a/lib/components/SideNav/index.js b/lib/components/SideNav/index.js
index 746131a5..37abe0a4 100644
--- a/lib/components/SideNav/index.js
+++ b/lib/components/SideNav/index.js
@@ -236,6 +236,7 @@ const SideNav = ({ items, sideNavHeight }) => {
       <NavItem
         key={item.index}
         item={item}
+        isSmallScreen={isSmallScreen}
         Component={Component}
         isActive={
           item.actionType === "link"