diff --git a/packages/web/components/elements/ModalPrimitives.tsx b/packages/web/components/elements/ModalPrimitives.tsx
index db9aec2e2..3827e020b 100644
--- a/packages/web/components/elements/ModalPrimitives.tsx
+++ b/packages/web/components/elements/ModalPrimitives.tsx
@@ -1,5 +1,5 @@
 import { Root, Overlay, Content } from '@radix-ui/react-dialog'
-import { styled, keyframes } from '../tokens/stitches.config'
+import { styled, keyframes, theme } from '../tokens/stitches.config'
 
 export const ModalRoot = styled(Root, {})
 
@@ -25,8 +25,7 @@ const contentShow = keyframes({
 const Modal = styled(Content, {
   backgroundColor: '$grayBg',
   borderRadius: 6,
-  boxShadow:
-    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+  boxShadow: theme.shadows.cardBoxShadow.toString(),
   position: 'fixed',
   '&:focus': { outline: 'none' },
 })