diff --git a/src/components/primitives/MenuSurface.tsx b/src/components/primitives/MenuSurface.tsx
index bf7ad58d..f34480f1 100644
--- a/src/components/primitives/MenuSurface.tsx
+++ b/src/components/primitives/MenuSurface.tsx
@@ -16,10 +16,10 @@ export default function MenuSurface({
     <div
       ref={ref}
       className={clsx(
-        color === undefined && 'component-surface shadow-xs dark:shadow-md',
-        color === 'light' && 'component-surface-light shadow-xs',
+        color === undefined && 'component-surface shadow-sm dark:shadow-md',
+        color === 'light' && 'component-surface-light shadow-sm',
         color === 'dark' && 'component-surface-dark shadow-md',
-        color === 'frosted' && 'component-surface-frosted shadow-xs',
+        color === 'frosted' && 'component-surface-frosted shadow-sm',
         'px-2 py-1.5 max-w-[14rem]',
         'text-[0.8rem] leading-tight',
         'text-balance text-center',
diff --git a/src/utility/useSupportsHover.ts b/src/utility/useSupportsHover.ts
index 68f8c6ab..e0d3ad8b 100644
--- a/src/utility/useSupportsHover.ts
+++ b/src/utility/useSupportsHover.ts
@@ -6,6 +6,7 @@ export default function useSupportsHover() {
   useEffect(() => {
     const mql = window.matchMedia('(hover: hover)');
 
+    setSupportsHover(mql.matches);
     const listener = (e: MediaQueryListEvent) => {
       setSupportsHover(e.matches);
     };