diff --git a/src/app-layout/drawer/index.tsx b/src/app-layout/drawer/index.tsx
index a0a158a7af..e40d494588 100644
--- a/src/app-layout/drawer/index.tsx
+++ b/src/app-layout/drawer/index.tsx
@@ -203,6 +203,26 @@ export const DrawerTriggersBar = ({
     }
   };
 
+  const getDrawerItems = () => {
+    if (drawers && drawers.items) {
+      const activeIndex = drawers.activeDrawerId && drawers.items.map(item => item.id).indexOf(drawers.activeDrawerId);
+      const lastMainItemIndex = getIndexOfOverflowItem() - 1;
+
+      const activeDrawerItem = drawers.items.find(item => item.id === drawers.activeDrawerId);
+      const lastMainItem = drawers.items.find((item, index) => index === lastMainItemIndex);
+
+      if (activeIndex && overflowItemIsActive() && activeDrawerItem && lastMainItem) {
+        [drawers.items[lastMainItemIndex], drawers.items[activeIndex]] = [
+          drawers.items[activeIndex],
+          drawers.items[lastMainItemIndex],
+        ];
+      }
+
+      return drawers.items;
+    }
+    return [];
+  };
+
   return (
     <div
       className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {
@@ -217,18 +237,18 @@ export const DrawerTriggersBar = ({
         {!isMobile && (
           <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers-wrapper'], contentClassName)}>
             <>
-              {drawers?.items?.map((item: DrawerItem, index: number) => {
+              {getDrawerItems().map((item: DrawerItem, index: number) => {
                 if (index < getIndexOfOverflowItem()) {
                   return (
                     <span
                       key={index}
                       className={clsx(
                         styles['drawer-trigger'],
-                        drawers.activeDrawerId === item.id && styles['drawer-trigger-active']
+                        drawers?.activeDrawerId === item.id && styles['drawer-trigger-active']
                       )}
-                      onClick={() =>
-                        drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })
-                      }
+                      onClick={() => {
+                        drawers?.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined });
+                      }}
                     >
                       <ToggleButton
                         className={toggleClassName}
@@ -237,9 +257,11 @@ export const DrawerTriggersBar = ({
                         iconSvg={item.trigger.iconSvg}
                         ariaLabel={item.ariaLabels?.triggerButton}
                         onClick={() =>
-                          drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })
+                          drawers?.onChange({
+                            activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,
+                          })
                         }
-                        ariaExpanded={drawers.activeDrawerId !== undefined}
+                        ariaExpanded={drawers?.activeDrawerId !== undefined}
                         badge={item.badge}
                         testId={`awsui-app-layout-trigger-${item.id}`}
                       />
@@ -254,13 +276,15 @@ export const DrawerTriggersBar = ({
                   <InternalButtonDropdown
                     expandToViewport={true}
                     className={clsx(styles['trigger-overflow'])}
-                    items={drawers.items.slice(getIndexOfOverflowItem(), drawers.items.length).map(item => ({
-                      id: item.id,
-                      text: item.ariaLabels?.content || 'Content',
-                      iconName: item.trigger.iconName,
-                      iconSvg: item.trigger.iconSvg,
-                      badge: item.badge,
-                    }))}
+                    items={getDrawerItems()
+                      .slice(getIndexOfOverflowItem(), getDrawerItems().length)
+                      .map(item => ({
+                        id: item.id,
+                        text: item.ariaLabels?.content || 'Content',
+                        iconName: item.trigger.iconName,
+                        iconSvg: item.trigger.iconSvg,
+                        badge: item.badge,
+                      }))}
                     onItemClick={({ detail }) => {
                       drawers.onChange({
                         activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,
diff --git a/src/app-layout/visual-refresh/drawers.tsx b/src/app-layout/visual-refresh/drawers.tsx
index 8f1a69a092..3ef1e934bb 100644
--- a/src/app-layout/visual-refresh/drawers.tsx
+++ b/src/app-layout/visual-refresh/drawers.tsx
@@ -195,6 +195,8 @@ function DesktopTriggers() {
     splitPanelPosition,
     splitPanelRefs,
     splitPanelToggle,
+    splitPanelReportedHeaderHeight,
+    splitPanelReportedSize,
     tools,
     toolsHide,
     toolsRefs,
@@ -206,12 +208,14 @@ function DesktopTriggers() {
 
   const triggersContainerRef = useRef<HTMLDivElement>(null);
 
+  const splitPanelHeight =
+    isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;
   const containerHeight = useContainerHeight(triggersContainerRef) || triggersContainerRef.current?.clientHeight;
 
   const getIndexOfOverflowItem = () => {
     if (containerHeight) {
       const ITEM_HEIGHT = 48;
-      const overflowSpot = containerHeight / 1.5;
+      const overflowSpot = activeDrawerId ? containerHeight / 1.5 : (containerHeight - splitPanelHeight) / 1.5;
 
       const index = Math.floor(overflowSpot / ITEM_HEIGHT);
 
@@ -226,7 +230,32 @@ function DesktopTriggers() {
       return index - toolsItem - splitPanelItem;
     }
 
-    return 0;
+    return -1;
+  };
+
+  const overflowItemIsActive = () => {
+    if (drawers && getIndexOfOverflowItem() > 0) {
+      return drawers.items
+        .slice(getIndexOfOverflowItem(), drawers.items.length)
+        .map(item => item.id)
+        .includes(drawers.activeDrawerId);
+    }
+  };
+
+  const getDrawerItems = () => {
+    if (drawers && drawers.items) {
+      const activeIndex = activeDrawerId ? drawers.items.map(item => item.id).indexOf(activeDrawerId) : -1;
+      const lastMainItemIndex = getIndexOfOverflowItem() - 1;
+
+      if (activeIndex && activeIndex > 0 && overflowItemIsActive()) {
+        [drawers.items[lastMainItemIndex], drawers.items[activeIndex]] = [
+          drawers.items[activeIndex],
+          drawers.items[lastMainItemIndex],
+        ];
+      }
+      return drawers.items;
+    }
+    return [];
   };
 
   if (activeDrawerId) {
@@ -238,7 +267,7 @@ function DesktopTriggers() {
   }
 
   const overflowItemHasBadge = () => {
-    const overflowItems = drawers?.items.slice(1, drawers.items.length);
+    const overflowItems = getDrawerItems().slice(1, getDrawerItems().length);
     return (overflowItems && overflowItems.filter(item => item.badge).length > 0) || false;
   };
 
@@ -275,7 +304,7 @@ function DesktopTriggers() {
           />
         )}
 
-        {drawers?.items.map((item, index) => {
+        {getDrawerItems()?.map((item, index) => {
           if (index < getIndexOfOverflowItem()) {
             return (
               <TriggerButton
@@ -296,7 +325,7 @@ function DesktopTriggers() {
           }
         })}
 
-        {drawers?.items?.length && drawers?.items?.length > getIndexOfOverflowItem() && (
+        {getDrawerItems() && getDrawerItems().length > getIndexOfOverflowItem() && (
           <InternalButtonDropdown
             ref={drawersRefs.toggle}
             className={clsx(
@@ -305,12 +334,14 @@ function DesktopTriggers() {
               styles['drawers-trigger-overflow'],
               overflowItemHasBadge() && styles.badge
             )}
-            items={drawers.items.slice(getIndexOfOverflowItem(), drawers.items.length).map(item => ({
-              id: item.id,
-              text: item.ariaLabels?.content || 'Content',
-              iconName: item.trigger.iconName,
-              iconSvg: item.trigger.iconSvg,
-            }))}
+            items={getDrawerItems()
+              .slice(getIndexOfOverflowItem(), getDrawerItems().length)
+              .map(item => ({
+                id: item.id,
+                text: item.ariaLabels?.content || 'Content',
+                iconName: item.trigger.iconName,
+                iconSvg: item.trigger.iconSvg,
+              }))}
             onItemClick={({ detail }) => {
               handleDrawersClick(detail.id);
             }}