diff --git a/applications/browser-extension/src/pageEditor/modListingPanel/ModListItem.tsx b/applications/browser-extension/src/pageEditor/modListingPanel/ModListItem.tsx
index 44142e75fa..6490eec1d7 100644
--- a/applications/browser-extension/src/pageEditor/modListingPanel/ModListItem.tsx
+++ b/applications/browser-extension/src/pageEditor/modListingPanel/ModListItem.tsx
@@ -53,6 +53,7 @@ const ModListItem: React.FC<
 
   const isModComponentSelected = activeModComponentId != null;
   const isModSelected = activeModId === modId && !isModComponentSelected;
+  const hasModBackground = activeModId === modId && isModComponentSelected;
   const isExpanded = expandedModId === modId;
 
   // TODO: Fix this so it pulls from registry, after registry single-item-api-fetch is implemented
@@ -76,8 +77,8 @@ const ModListItem: React.FC<
         eventKey={modId}
         as={ListGroup.Item}
         className={cx(styles.root, "list-group-item-action", {
-          // Set the alternate background if a mod component in this mod is active
-          [styles.modBackground ?? ""]: isModSelected || isModComponentSelected,
+          // Set the alternate background for the mod if a mod component in this mod is active
+          [styles.modBackground ?? ""]: hasModBackground,
         })}
         tabIndex={0} // Avoid using `button` because this item includes more buttons #2343
         active={isModSelected}