diff --git a/apps/explorer/src/components/network/NetworkSelector.tsx b/apps/explorer/src/components/network/NetworkSelector.tsx
index 34da8635f62..deb20e35e9b 100644
--- a/apps/explorer/src/components/network/NetworkSelector.tsx
+++ b/apps/explorer/src/components/network/NetworkSelector.tsx
@@ -99,11 +99,12 @@ export function NetworkSelector(): JSX.Element {
key={idx}
onClick={() => handleNetworkSwitch(network.id)}
hideBottomBorder
+ isHighlighted={network === selectedNetwork}
>
diff --git a/apps/ui-kit/src/lib/components/atoms/list-item/ListItem.tsx b/apps/ui-kit/src/lib/components/atoms/list-item/ListItem.tsx
index 2a5806cf08f..9f6475a674b 100644
--- a/apps/ui-kit/src/lib/components/atoms/list-item/ListItem.tsx
+++ b/apps/ui-kit/src/lib/components/atoms/list-item/ListItem.tsx
@@ -23,6 +23,10 @@ export interface ListItemProps {
* The list item is disabled or not.
*/
isDisabled?: boolean;
+ /**
+ * The list item is highlighted.
+ */
+ isHighlighted?: boolean;
}
export function ListItem({
@@ -31,6 +35,7 @@ export function ListItem({
onClick,
isDisabled,
children,
+ isHighlighted,
}: PropsWithChildren): React.JSX.Element {
function handleKeyDown(event: React.KeyboardEvent) {
if ((event.key === 'Enter' || event.key === ' ') && !isDisabled && onClick) {
@@ -63,7 +68,10 @@ export function ListItem({
className={cx(
'relative flex flex-row items-center justify-between px-md py-sm text-neutral-10 dark:text-neutral-92',
!isDisabled && onClick ? 'cursor-pointer' : 'cursor-default',
- { 'state-layer': !isDisabled },
+ {
+ 'bg-shader-primary-dark-16 dark:bg-shader-inverted-dark-16': isHighlighted,
+ 'state-layer': !isDisabled,
+ },
)}
>
{children}