diff --git a/apps/website/screens/components/select/overview/images/select_anatomy.png b/apps/website/screens/components/select/overview/images/select_anatomy.png
index f6358f86a..74f2a933d 100644
Binary files a/apps/website/screens/components/select/overview/images/select_anatomy.png and b/apps/website/screens/components/select/overview/images/select_anatomy.png differ
diff --git a/packages/lib/src/select/ListOption.tsx b/packages/lib/src/select/ListOption.tsx
index a495d53a9..c5015cd8a 100644
--- a/packages/lib/src/select/ListOption.tsx
+++ b/packages/lib/src/select/ListOption.tsx
@@ -12,11 +12,11 @@ const OptionItem = styled.li<{
   list-style: none;
   padding: var(--spacing-padding-none) var(--spacing-padding-xs);
   cursor: pointer;
-  ${({ selected }) => selected && "background-color: var(--color-bg-secondary-lighter);"};
+  ${({ selected }) => selected && "background-color: var(--color-bg-primary-lighter);"};
   &:hover,
   &:active {
     background-color: ${({ selected }) =>
-      selected ? "var(--color-bg-secondary-medium)" : "var(--color-bg-neutral-light)"};
+      selected ? "var(--color-bg-primary-medium)" : "var(--color-bg-neutral-light)"};
   }
   ${({ visualFocused }) =>
     visualFocused &&