diff --git a/packages/@holaplexui-playground/styles/globals.css b/packages/@holaplexui-playground/styles/globals.css
index 88101de..aafde6f 100644
--- a/packages/@holaplexui-playground/styles/globals.css
+++ b/packages/@holaplexui-playground/styles/globals.css
@@ -125,8 +125,12 @@ a {
   @apply flex flex-col gap-4;
 }
 
+.modal-scrim {
+  @apply bg-gray-800 bg-opacity-40;
+}
+
 .modal-panel {
-  @apply flex flex-col bg-white h-full transform !overflow-visible align-middle transition-all overflow-y-auto rounded-md shadow-md max-h-screen max-w-md sm:h-auto sm:max-w-lg;
+  @apply flex z-20 flex-col bg-white h-full transform !overflow-visible align-middle transition-all overflow-y-auto rounded-md shadow-md max-h-screen max-w-md sm:h-auto sm:max-w-lg;
 }
 
 .modal-close {
diff --git a/packages/@holaplexui-react/package.json b/packages/@holaplexui-react/package.json
index 90a0acf..6d5f590 100644
--- a/packages/@holaplexui-react/package.json
+++ b/packages/@holaplexui-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@holaplex/ui-library-react",
   "author": "Holaplex Inc.",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "description": "Holaplex react ui library components",
   "private": false,
   "files": [
diff --git a/packages/@holaplexui-react/src/components/Modal.tsx b/packages/@holaplexui-react/src/components/Modal.tsx
index 1907d3a..c352168 100644
--- a/packages/@holaplexui-react/src/components/Modal.tsx
+++ b/packages/@holaplexui-react/src/components/Modal.tsx
@@ -28,7 +28,7 @@ export function Modal(props: ModalProps) {
           <div
             className={clsx(
               'fixed inset-0 z-40',
-              'bg-gray-800 bg-opacity-40',
+              'modal-scrim',
               'transition-opacity duration-500 ease-in-out',
               'flex flex-col items-center justify-center',
               {
diff --git a/packages/@holaplexui-react/src/components/Popover.tsx b/packages/@holaplexui-react/src/components/Popover.tsx
index 77d54d1..538d127 100644
--- a/packages/@holaplexui-react/src/components/Popover.tsx
+++ b/packages/@holaplexui-react/src/components/Popover.tsx
@@ -55,7 +55,7 @@ export function PopoverBox({
               ref={setPopperElement}
               style={styles.popper}
               {...attributes.popper}
-              className={clsx('absolute z-20 w-auto', 'popover-panel')}
+              className={clsx('absolute w-auto', 'popover-panel')}
             >
               <div className="overflow-hidden popover-content">
                 <>