diff --git a/src/frontend/src/layout/Centered.tsx b/src/frontend/src/layout/Centered.tsx
index 5a403152..fcee3eca 100644
--- a/src/frontend/src/layout/Centered.tsx
+++ b/src/frontend/src/layout/Centered.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { Div, VerticallyOffCenter } from '@/primitives'
-import type { SystemStyleObject } from '../styled-system/types'
+import type { SystemStyleObject } from '@/styled-system/types'
 
 export const Centered = ({
   width = '38rem',
diff --git a/src/frontend/src/primitives/Box.tsx b/src/frontend/src/primitives/Box.tsx
index 46c15f8f..1ba59ef8 100644
--- a/src/frontend/src/primitives/Box.tsx
+++ b/src/frontend/src/primitives/Box.tsx
@@ -1,5 +1,5 @@
 import { cva } from '@/styled-system/css'
-import { styled } from '../styled-system/jsx'
+import { styled } from '@/styled-system/jsx'
 
 const box = cva({
   base: {
diff --git a/src/frontend/src/primitives/MenuList.tsx b/src/frontend/src/primitives/MenuList.tsx
index c35d76bb..11e4001f 100644
--- a/src/frontend/src/primitives/MenuList.tsx
+++ b/src/frontend/src/primitives/MenuList.tsx
@@ -1,9 +1,6 @@
 import { ReactNode } from 'react'
-import { Menu, MenuProps, MenuItem as RACMenuItem } from 'react-aria-components'
-import { styled } from '@/styled-system/jsx'
-import { menuItemStyles } from './menuItemStyles'
-
-const MenuItem = styled(RACMenuItem, menuItemStyles)
+import { Menu, MenuProps, MenuItem } from 'react-aria-components'
+import { menuItemRecipe } from './menuItemRecipe'
 
 /**
  * render a Button primitive that shows a popover showing a list of pressable items
@@ -29,6 +26,7 @@ export const MenuList = <T extends string | number = string>({
         const label = typeof item === 'string' ? item : item.label
         return (
           <MenuItem
+            className={menuItemRecipe()}
             key={value}
             id={value as string}
             onAction={() => {
diff --git a/src/frontend/src/primitives/Select.tsx b/src/frontend/src/primitives/Select.tsx
index eb6427ef..382435ec 100644
--- a/src/frontend/src/primitives/Select.tsx
+++ b/src/frontend/src/primitives/Select.tsx
@@ -11,7 +11,7 @@ import {
 } from 'react-aria-components'
 import { Box } from './Box'
 import { StyledPopover } from './Popover'
-import { menuItemStyles } from './menuItemStyles'
+import { menuItemRecipe } from './menuItemRecipe'
 
 const StyledButton = styled(Button, {
   base: {
@@ -44,8 +44,6 @@ const StyledSelectValue = styled(SelectValue, {
   },
 })
 
-const StyledListBoxItem = styled(ListBoxItem, menuItemStyles)
-
 export const Select = <T extends string | number>({
   label,
   items,
@@ -67,9 +65,13 @@ export const Select = <T extends string | number>({
         <Box size="sm" type="popover" variant="control">
           <ListBox>
             {items.map((item) => (
-              <StyledListBoxItem id={item.value} key={item.value}>
+              <ListBoxItem
+                className={menuItemRecipe()}
+                id={item.value}
+                key={item.value}
+              >
                 {item.label}
-              </StyledListBoxItem>
+              </ListBoxItem>
             ))}
           </ListBox>
         </Box>
diff --git a/src/frontend/src/primitives/Ul.tsx b/src/frontend/src/primitives/Ul.tsx
index 3144dcd9..5d0d8eea 100644
--- a/src/frontend/src/primitives/Ul.tsx
+++ b/src/frontend/src/primitives/Ul.tsx
@@ -1,4 +1,4 @@
-import { styled } from '../styled-system/jsx'
+import { styled } from '@/styled-system/jsx'
 
 export const Ul = styled('ul', {
   base: {
diff --git a/src/frontend/src/primitives/menuItemStyles.ts b/src/frontend/src/primitives/menuItemRecipe.ts
similarity index 73%
rename from src/frontend/src/primitives/menuItemStyles.ts
rename to src/frontend/src/primitives/menuItemRecipe.ts
index 6bb84dd8..27b2f9b8 100644
--- a/src/frontend/src/primitives/menuItemStyles.ts
+++ b/src/frontend/src/primitives/menuItemRecipe.ts
@@ -1,21 +1,30 @@
+import { cva } from '@/styled-system/css'
+
 /**
  * reusable styles for a menu item, select item, etc… to be used with panda `css()` or `styled()`
  *
  * these are in their own files because react hot refresh doesn't like exporting stuff
  * that aren't components in component files
  */
-export const menuItemStyles = {
+export const menuItemRecipe = cva({
   base: {
     paddingY: 0.125,
     paddingX: 0.5,
+    paddingLeft: 1.5,
     textAlign: 'left',
     width: 'full',
     borderRadius: 4,
     cursor: 'pointer',
     color: 'box.text',
     border: '1px solid transparent',
+    position: 'relative',
     '&[data-selected]': {
-      fontWeight: 'bold!',
+      '&::before': {
+        content: '"✓"',
+        position: 'absolute',
+        top: '2px',
+        left: '6px',
+      },
     },
     '&[data-focused]': {
       color: 'primary.text',
@@ -28,4 +37,4 @@ export const menuItemStyles = {
       outline: 'none!',
     },
   },
-}
+})