diff --git a/components/shared.tsx b/components/shared.tsx
index 8b0b420c7..932711556 100644
--- a/components/shared.tsx
+++ b/components/shared.tsx
@@ -464,6 +464,23 @@ export const FloatingContainer = styled('div', {
   position: 'relative',
   userSelect: 'none',
   zIndex: 200,
+
+  variants: {
+    elevation: {
+      0: {
+        boxShadow: 'none',
+      },
+      2: {
+        boxShadow: '$2',
+      },
+      3: {
+        boxShadow: '$3',
+      },
+      4: {
+        boxShadow: '$4',
+      },
+    },
+  },
 })
 
 /* -------------------------------------------------- */
diff --git a/styles/stitches.config.ts b/styles/stitches.config.ts
index a49f40358..5c6dd3cd0 100644
--- a/styles/stitches.config.ts
+++ b/styles/stitches.config.ts
@@ -16,7 +16,7 @@ const { styled, global, css, theme, getCssString } = createCss({
       highlight: 'rgba(65, 132, 244, 0.15)',
       overlay: 'rgba(0, 0, 0, 0.15)',
       border: '#aaa',
-      canvas: '#fafafa',
+      canvas: '#f8f9fa',
       panel: '#fefefe',
       inactive: '#cccccf',
       hover: '#efefef',