diff --git a/unlock-app/src/components/content/events-collection/settings/ManagerForm.tsx b/unlock-app/src/components/content/events-collection/settings/ManagerForm.tsx
index f753c0f1c2b..cb16f3d3507 100644
--- a/unlock-app/src/components/content/events-collection/settings/ManagerForm.tsx
+++ b/unlock-app/src/components/content/events-collection/settings/ManagerForm.tsx
@@ -4,16 +4,11 @@ import {
   AddressInput,
   isAddressOrEns,
   Placeholder,
+  Modal,
 } from '@unlock-protocol/ui'
 import { Controller, useForm, useWatch } from 'react-hook-form'
 import { useAuth } from '~/contexts/AuthenticationContext'
 import { useEffect, useState } from 'react'
-import {
-  Transition,
-  Dialog,
-  DialogPanel,
-  TransitionChild,
-} from '@headlessui/react'
 import { onResolveName } from '~/utils/resolvers'
 import { EventCollection } from '@unlock-protocol/unlock-js'
 import { useEventCollectionManagers } from '~/hooks/useEventCollectionManagers'
@@ -71,74 +66,52 @@ const RenounceModal = ({
 
   return (
     <>
-      <Transition show={isOpen} appear>
-        <Dialog
-          as="div"
-          className="relative z-50"
-          onClose={() => setIsOpen(false)}
-          open
+      <Modal isOpen={isOpen} setIsOpen={setIsOpen}>
+        <form
+          onSubmit={handleSubmit(onRenounce)}
+          className="flex flex-col gap-6 text-center"
         >
-          <div className="fixed inset-0 bg-opacity-25 backdrop-filter backdrop-blur-sm bg-zinc-500" />
-          <TransitionChild
-            enter="transition ease-out duration-300"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0 translate-y-1"
+          <form
+            onSubmit={handleSubmit(onRenounce)}
+            className="flex flex-col gap-6 text-center"
           >
-            <div className="fixed inset-0 p-6 overflow-y-auto">
-              <div className="flex items-center justify-center min-h-full">
-                <DialogPanel className="w-full max-w-md p-8 bg-white rounded-2xl">
-                  <form
-                    onSubmit={handleSubmit(onRenounce)}
-                    className="flex flex-col gap-6 text-center"
-                  >
-                    <div className="overflow-hidden bg-center rounded-lg">
-                      <img
-                        className="object-cover h-40"
-                        src="/images/illustrations/img-error.svg"
-                        alt="img error"
-                      />
-                    </div>
-                    <div className="flex flex-col gap-4">
-                      <h3 className="text-4xl font-bold text-brand-dark">
-                        Hold Your Horses
-                      </h3>
-                      <span className="text-base text-brand-dark">
-                        You are about to permanently renounce yourself as a
-                        Collection manager. You will not be able to revert this
-                        action. Please type &ldquo;renounce&rdquo; to confirm.
-                      </span>
-                    </div>
-                    <Input
-                      placeholder="renounce"
-                      {...register('confirm')}
-                      autoComplete="off"
-                    />
-                    <div className="flex gap-4">
-                      <Button
-                        className="w-full"
-                        variant="outlined-primary"
-                        onClick={() => setIsOpen(false)}
-                      >
-                        Cancel
-                      </Button>
-                      <Button
-                        className="w-full"
-                        type="submit"
-                        disabled={!confirmMatch}
-                      >
-                        Confirm
-                      </Button>
-                    </div>
-                  </form>
-                </DialogPanel>
-              </div>
+            <div className="overflow-hidden bg-center rounded-lg">
+              <img
+                className="object-cover h-40"
+                src="/images/illustrations/img-error.svg"
+                alt="img error"
+              />
+            </div>
+            <div className="flex flex-col gap-4">
+              <h3 className="text-4xl font-bold text-brand-dark">
+                Hold Your Horses
+              </h3>
+              <span className="text-base text-brand-dark">
+                You are about to permanently renounce yourself as a Collection
+                manager. You will not be able to revert this action. Please type
+                &ldquo;renounce&rdquo; to confirm.
+              </span>
             </div>
-          </TransitionChild>
-        </Dialog>
-      </Transition>
+            <Input
+              placeholder="renounce"
+              {...register('confirm')}
+              autoComplete="off"
+            />
+            <div className="flex gap-4">
+              <Button
+                className="w-full"
+                variant="outlined-primary"
+                onClick={() => setIsOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button className="w-full" type="submit" disabled={!confirmMatch}>
+                Confirm
+              </Button>
+            </div>
+          </form>
+        </form>
+      </Modal>
     </>
   )
 }
diff --git a/unlock-app/src/components/interface/VerificationStatus.tsx b/unlock-app/src/components/interface/VerificationStatus.tsx
index 6d531738220..18d7ebe3034 100644
--- a/unlock-app/src/components/interface/VerificationStatus.tsx
+++ b/unlock-app/src/components/interface/VerificationStatus.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react'
+import { useState } from 'react'
 import { useAuth } from '../../contexts/AuthenticationContext'
 import {
   MembershipCard,
@@ -7,17 +7,11 @@ import {
 import { ToastHelper } from '../helpers/toast.helper'
 import { MembershipVerificationConfig } from '~/utils/verification'
 import { invalidMembership } from './verification/invalidMembership'
-import { Button } from '@unlock-protocol/ui'
+import { Button, Modal } from '@unlock-protocol/ui'
 import { isSignatureValidForAddress } from '~/utils/signatures'
 import { locksmith } from '~/config/locksmith'
 import { AxiosError } from 'axios'
 import { useEventTicket, useLocksmithGranterAddress } from '~/hooks/useTicket'
-import {
-  Dialog,
-  DialogPanel,
-  Transition,
-  TransitionChild,
-} from '@headlessui/react'
 import { MAX_UINT } from '~/constants'
 import { config as AppConfig } from '~/config/app'
 import { useConnectModal } from '~/hooks/useConnectModal'
@@ -42,66 +36,40 @@ const WarningDialog = ({
   setIsOpen,
   onConfirm,
 }: WarningDialogProps) => (
-  <Transition show={isOpen} appear as={Fragment}>
-    <Dialog
-      as="div"
-      className="relative z-50"
-      onClose={() => {
-        setIsOpen(false)
-      }}
-      open={isOpen}
-    >
-      <div className="fixed inset-0 bg-opacity-25 backdrop-filter backdrop-blur-sm bg-zinc-500" />
-      <TransitionChild
-        as={Fragment}
-        enter="transition ease-out duration-300"
-        enterFrom="opacity-0 translate-y-1"
-        enterTo="opacity-100"
-        leave="transition ease-in duration-150"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0 translate-y-1"
-      >
-        <div className="fixed inset-0 p-6 overflow-y-auto">
-          <div className="flex items-center justify-center min-h-full">
-            <DialogPanel className="w-full max-w-sm">
-              <div className="w-full max-w-sm bg-white rounded-xl">
-                <div className="flex flex-col gap-3">
-                  <div className="p-2 text-center bg-amber-300 rounded-t-xl">
-                    <span className="text-lg">Warning</span>
-                  </div>
-                  <div className="flex flex-col w-full gap-3 p-4">
-                    <span>
-                      The current ticket has not been checked-in. Are you sure
-                      you want to scan the next one?
-                    </span>
-                    <Button
-                      onClick={(event) => {
-                        event.preventDefault()
-                        setIsOpen(false)
-                      }}
-                    >
-                      Cancel
-                    </Button>
-                    <Button
-                      variant="outlined-primary"
-                      onClick={(event) => {
-                        event.preventDefault()
-                        onConfirm()
-                      }}
-                    >
-                      <div className="flex items-center">
-                        <span>Ok, continue</span>
-                      </div>
-                    </Button>
-                  </div>
-                </div>
-              </div>
-            </DialogPanel>
-          </div>
+  <Modal isOpen={isOpen} setIsOpen={setIsOpen} size="small">
+    <div className="w-full max-w-sm bg-white rounded-xl">
+      <div className="flex flex-col gap-3">
+        <div className="p-2 text-center bg-amber-300 rounded-t-xl">
+          <span className="text-lg">Warning</span>
+        </div>
+        <div className="flex flex-col w-full gap-3 p-4">
+          <span>
+            The current ticket has not been checked-in. Are you sure you want to
+            scan the next one?
+          </span>
+          <Button
+            onClick={(event) => {
+              event.preventDefault()
+              setIsOpen(false)
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="outlined-primary"
+            onClick={(event) => {
+              event.preventDefault()
+              onConfirm()
+            }}
+          >
+            <div className="flex items-center">
+              <span>Ok, continue</span>
+            </div>
+          </Button>
         </div>
-      </TransitionChild>
-    </Dialog>
-  </Transition>
+      </div>
+    </div>
+  </Modal>
 )
 
 /**
diff --git a/unlock-app/src/components/interface/locks/Settings/forms/LockManagerForm.tsx b/unlock-app/src/components/interface/locks/Settings/forms/LockManagerForm.tsx
index a55a09b3f39..003bf84d6de 100644
--- a/unlock-app/src/components/interface/locks/Settings/forms/LockManagerForm.tsx
+++ b/unlock-app/src/components/interface/locks/Settings/forms/LockManagerForm.tsx
@@ -6,18 +6,13 @@ import {
   isAddressOrEns,
   minifyAddress,
   Placeholder,
+  Modal,
 } from '@unlock-protocol/ui'
 import { SubgraphService } from '@unlock-protocol/unlock-js'
 import { Controller, useForm, useWatch } from 'react-hook-form'
 import { ToastHelper } from '~/components/helpers/toast.helper'
 import { useAuth } from '~/contexts/AuthenticationContext'
 import { useEffect, useState } from 'react'
-import {
-  Transition,
-  Dialog,
-  DialogPanel,
-  TransitionChild,
-} from '@headlessui/react'
 import { onResolveName } from '~/utils/resolvers'
 import useEns from '~/hooks/useEns'
 import { useAddLockManager } from '~/hooks/useAddLockManager'
@@ -71,78 +66,47 @@ const RenounceModal = ({
   }
 
   return (
-    <>
-      <Transition show={isOpen} appear>
-        <Dialog
-          as="div"
-          className="relative z-50"
-          onClose={() => {
-            setIsOpen(false)
-          }}
-          open
-        >
-          <div className="fixed inset-0 bg-opacity-25 backdrop-filter backdrop-blur-sm bg-zinc-500" />
-          <TransitionChild
-            enter="transition ease-out duration-300"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0 translate-y-1"
+    <Modal isOpen={isOpen} setIsOpen={setIsOpen}>
+      <form
+        onSubmit={handleSubmit(onRenounce)}
+        className="flex flex-col gap-6 text-center"
+      >
+        <div className="overflow-hidden bg-center rounded-lg">
+          <img
+            className="object-cover h-40"
+            src="/images/illustrations/img-error.svg"
+            alt="img error"
+          />
+        </div>
+        <div className="flex flex-col gap-4">
+          <h3 className="text-4xl font-bold text-brand-dark">
+            Hold Your Horses
+          </h3>
+          <span className="text-base text-brand-dark">
+            You are about to permanently renounce yourself as Lock manager. You
+            will not be able to revert this action. Please type
+            &ldquo;renounce&rdquo; to confirm.
+          </span>
+        </div>
+        <Input
+          placeholder="renounce"
+          {...register('confirm')}
+          autoComplete="off"
+        />
+        <div className="flex gap-4">
+          <Button
+            className="w-full"
+            variant="outlined-primary"
+            onClick={() => setIsOpen(false)}
           >
-            <div className="fixed inset-0 p-6 overflow-y-auto">
-              <div className="flex items-center justify-center min-h-full">
-                <DialogPanel className="w-full max-w-md p-8 bg-white rounded-2xl">
-                  <form
-                    onSubmit={handleSubmit(onRenounce)}
-                    className="flex flex-col gap-6 text-center"
-                  >
-                    <div className="overflow-hidden bg-center rounded-lg">
-                      <img
-                        className="object-cover h-40"
-                        src="/images/illustrations/img-error.svg"
-                        alt="img error"
-                      />
-                    </div>
-                    <div className="flex flex-col gap-4">
-                      <h3 className="text-4xl font-bold text-brand-dark">
-                        Hold Your Horses
-                      </h3>
-                      <span className="text-base text-brand-dark">
-                        You are about to permanently renounce yourself as Lock
-                        manager. You will not be able to revert this action.
-                        Please type &ldquo;renounce&rdquo; to confirm.
-                      </span>
-                    </div>
-                    <Input
-                      placeholder="renounce"
-                      {...register('confirm')}
-                      autoComplete="off"
-                    />
-                    <div className="flex gap-4">
-                      <Button
-                        className="w-full"
-                        variant="outlined-primary"
-                        onClick={() => setIsOpen(false)}
-                      >
-                        Cancel
-                      </Button>
-                      <Button
-                        className="w-full"
-                        type="submit"
-                        disabled={!confirmMatch}
-                      >
-                        Confirm
-                      </Button>
-                    </div>
-                  </form>
-                </DialogPanel>
-              </div>
-            </div>
-          </TransitionChild>
-        </Dialog>
-      </Transition>
-    </>
+            Cancel
+          </Button>
+          <Button className="w-full" type="submit" disabled={!confirmMatch}>
+            Confirm
+          </Button>
+        </div>
+      </form>
+    </Modal>
   )
 }
 
diff --git a/unlock-app/src/components/interface/verification/Scanner.tsx b/unlock-app/src/components/interface/verification/Scanner.tsx
index 126124b24d3..3fa50a98bb6 100644
--- a/unlock-app/src/components/interface/verification/Scanner.tsx
+++ b/unlock-app/src/components/interface/verification/Scanner.tsx
@@ -1,12 +1,6 @@
 'use client'
 
-import { Fragment, useState, useEffect, useRef } from 'react'
-import {
-  Transition,
-  Dialog,
-  TransitionChild,
-  DialogPanel,
-} from '@headlessui/react'
+import { useState, useEffect, useRef } from 'react'
 import {
   getMembershipVerificationConfig,
   MembershipVerificationConfig,
@@ -17,7 +11,7 @@ import { useDropzone } from 'react-dropzone'
 import { getURL } from '~/utils/url'
 import { ToastHelper } from '~/components/helpers/toast.helper'
 import { config as AppConfig } from '~/config/app'
-import { Button } from '@unlock-protocol/ui'
+import { Button, Modal } from '@unlock-protocol/ui'
 import { Event, PaywallConfigType } from '@unlock-protocol/core'
 
 const getVerificationConfigFromURL = async (content?: string) => {
@@ -159,41 +153,21 @@ export function Scanner({ checkoutConfig, eventProp }: ScannerProps) {
         </div>
       </div>
       {membershipVerificationConfig && (
-        <Transition show appear as={Fragment}>
-          <Dialog
-            as="div"
-            className="relative z-50"
-            onClose={() => {
-              setMembershipVerificationConfig(null)
-            }}
-            open
-          >
-            <div className="fixed inset-0 bg-opacity-25 backdrop-filter backdrop-blur-sm bg-zinc-500" />
-            <TransitionChild
-              as={Fragment}
-              enter="transition ease-out duration-300"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              <div className="fixed inset-0 p-6 overflow-y-auto">
-                <div className="flex items-center justify-center min-h-full">
-                  <DialogPanel className="w-full max-w-sm">
-                    <VerificationStatus
-                      checkoutConfig={checkoutConfig}
-                      eventProp={eventProp}
-                      onClose={() => setMembershipVerificationConfig(null)}
-                      onVerified={() => setMembershipVerificationConfig(null)}
-                      config={membershipVerificationConfig}
-                    />
-                  </DialogPanel>
-                </div>
-              </div>
-            </TransitionChild>
-          </Dialog>
-        </Transition>
+        <Modal
+          size="small"
+          isOpen={!!membershipVerificationConfig}
+          setIsOpen={() => setMembershipVerificationConfig(null)}
+        >
+          <div className="w-full max-w-sm">
+            <VerificationStatus
+              checkoutConfig={checkoutConfig}
+              eventProp={eventProp}
+              onClose={() => setMembershipVerificationConfig(null)}
+              onVerified={() => setMembershipVerificationConfig(null)}
+              config={membershipVerificationConfig}
+            />
+          </div>
+        </Modal>
       )}
     </>
   )