diff --git a/src/auth/account.tsx b/src/auth/account.tsx
index 347d42a..f2b0b99 100644
--- a/src/auth/account.tsx
+++ b/src/auth/account.tsx
@@ -125,8 +125,9 @@ export const AccountManager = () => {
           setShowingAddAccount(false);
           scopeFlow.cancel();
         }}
+        alignTop
       >
-        <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-18 left-[50%] w-88 -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
+        <div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-88 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
           <Show when={!scopeFlow.showScopeSelector() && !showingAddAccount()}>
             <div class="mb-2 px-1 font-semibold">
               <span>Manage accounts</span>
diff --git a/src/components/create/confirm-submit.tsx b/src/components/create/confirm-submit.tsx
index 63da931..a60091d 100644
--- a/src/components/create/confirm-submit.tsx
+++ b/src/components/create/confirm-submit.tsx
@@ -27,7 +27,7 @@ export const ConfirmSubmit = (props: {
   };
 
   return (
-    <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[24rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
+    <div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[24rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
       <div class="flex flex-col gap-3 text-sm">
         <h2 class="font-semibold">{props.isCreate ? "Create" : "Edit"} record</h2>
         <div class="flex flex-col gap-1.5">
diff --git a/src/components/create/file-upload.tsx b/src/components/create/file-upload.tsx
index 5efe7a5..3e9f1d7 100644
--- a/src/components/create/file-upload.tsx
+++ b/src/components/create/file-upload.tsx
@@ -50,7 +50,7 @@ export const FileUpload = (props: {
   };
 
   return (
-    <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[20rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
+    <div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[20rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
       <h2 class="mb-2 font-semibold">Upload blob</h2>
       <div class="flex flex-col gap-2 text-sm">
         <div class="flex flex-col gap-1">
diff --git a/src/components/create/handle-input.tsx b/src/components/create/handle-input.tsx
index 41de730..878de20 100644
--- a/src/components/create/handle-input.tsx
+++ b/src/components/create/handle-input.tsx
@@ -40,7 +40,7 @@ export const HandleInput = (props: { onClose: () => void }) => {
   };
 
   return (
-    <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[20rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
+    <div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[20rem] rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
       <h2 class="mb-2 font-semibold">Insert DID from handle</h2>
       <form ref={handleFormRef} onSubmit={resolveDid} class="flex flex-col gap-2 text-sm">
         <div class="flex flex-col gap-1">
diff --git a/src/components/create/index.tsx b/src/components/create/index.tsx
index 60b17ce..d6e14d4 100644
--- a/src/components/create/index.tsx
+++ b/src/components/create/index.tsx
@@ -235,11 +235,11 @@ export const RecordEditor = (props: {
         onClose={() => setOpenDialog(false)}
         closeOnClick={false}
         nonBlocking={isMinimized()}
+        alignTop
       >
         <div
-          style="transform: translateX(-50%) translateZ(0);"
           classList={{
-            "dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto absolute top-18 left-1/2 flex flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-all duration-200 dark:border-neutral-700 starting:opacity-0": true,
+            "dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto flex flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-all duration-200 dark:border-neutral-700 starting:opacity-0": true,
             "w-[calc(100%-1rem)] max-w-3xl h-[65vh]": !isMaximized(),
             "w-[calc(100%-1rem)] max-w-7xl h-[85vh]": isMaximized(),
             hidden: isMinimized(),
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
index 4ae3e5b..4e2fe5b 100644
--- a/src/components/modal.tsx
+++ b/src/components/modal.tsx
@@ -5,6 +5,7 @@ export interface ModalProps extends Pick<ComponentProps<"svg">, "children"> {
   onClose?: () => void;
   closeOnClick?: boolean;
   nonBlocking?: boolean;
+  alignTop?: boolean;
 }
 
 export const Modal = (props: ModalProps) => {
@@ -12,9 +13,11 @@ export const Modal = (props: ModalProps) => {
     <Show when={props.open}>
       <div
         data-modal
-        class="fixed inset-0 z-50 h-full max-h-none w-full max-w-none bg-transparent text-neutral-900 dark:text-neutral-200"
+        class="fixed inset-0 z-50 flex h-full max-h-none w-full max-w-none justify-center bg-transparent text-neutral-900 dark:text-neutral-200"
         classList={{
           "pointer-events-none": props.nonBlocking,
+          "items-start pt-18": props.alignTop,
+          "items-center": !props.alignTop,
         }}
         ref={(node) => {
           const handleEscape = (e: KeyboardEvent) => {
diff --git a/src/components/permission-prompt.tsx b/src/components/permission-prompt.tsx
index aa1792a..c8cda9a 100644
--- a/src/components/permission-prompt.tsx
+++ b/src/components/permission-prompt.tsx
@@ -28,7 +28,7 @@ export const PermissionPromptContainer = () => {
 
   return (
     <Modal open={requestedScope() !== null} onClose={() => setRequestedScope(null)}>
-      <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
+      <div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-[calc(100%-2rem)] max-w-md rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
         <h2 class="mb-2 font-semibold">Permission required</h2>
         <p class="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
           You need the "{scopeLabel()}" permission to perform this action.
diff --git a/src/components/search.tsx b/src/components/search.tsx
index 8c19e5e..b57192b 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -354,8 +354,8 @@ const ListUrlsTooltip = () => {
 
   return (
     <>
-      <Modal open={openList()} onClose={() => setOpenList(false)}>
-        <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-16 left-[50%] w-88 -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 sm:w-104 dark:border-neutral-700 starting:opacity-0">
+      <Modal open={openList()} onClose={() => setOpenList(false)} alignTop>
+        <div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-88 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 sm:w-104 dark:border-neutral-700 starting:opacity-0">
           <div class="mb-2 flex items-center gap-1 font-semibold">
             <span class="iconify lucide--link"></span>
             <span>Supported URLs</span>
diff --git a/src/views/collection.tsx b/src/views/collection.tsx
index 0ebb9c0..a30ffe7 100644
--- a/src/views/collection.tsx
+++ b/src/views/collection.tsx
@@ -301,7 +301,7 @@ const CollectionView = () => {
                     </Show>
                   </div>
                   <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
-                    <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
+                    <div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
                       <h2 class="mb-2 font-semibold">
                         {recreate() ? "Recreate" : "Delete"}{" "}
                         {records.filter((r) => r.toDelete).length} records?
diff --git a/src/views/pds.tsx b/src/views/pds.tsx
index 671c1a2..9e47cca 100644
--- a/src/views/pds.tsx
+++ b/src/views/pds.tsx
@@ -82,7 +82,7 @@ const PdsView = () => {
           <span class="iconify lucide--info text-neutral-600 dark:text-neutral-400"></span>
         </button>
         <Modal open={openInfo()} onClose={() => setOpenInfo(false)}>
-          <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-max max-w-[90vw] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-white p-3 shadow-md transition-opacity duration-200 sm:max-w-xl dark:border-neutral-700 starting:opacity-0">
+          <div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto w-max max-w-[90vw] rounded-lg border-[0.5px] border-neutral-300 bg-white p-3 shadow-md transition-opacity duration-200 sm:max-w-xl dark:border-neutral-700 starting:opacity-0">
             <div class="mb-2 flex items-center justify-between gap-4">
               <p class="truncate font-semibold">{repo.did}</p>
               <button
diff --git a/src/views/record.tsx b/src/views/record.tsx
index 5af7be8..3cec33b 100644
--- a/src/views/record.tsx
+++ b/src/views/record.tsx
@@ -419,7 +419,7 @@ export const RecordView = () => {
                     <span class="iconify lucide--trash-2"></span>
                   </PermissionButton>
                   <Modal open={openDelete()} onClose={() => setOpenDelete(false)}>
-                    <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
+                    <div class="dark:bg-dark-300 dark:shadow-dark-700 pointer-events-auto rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
                       <h2 class="mb-2 font-semibold">Delete this record?</h2>
                       <div class="flex justify-end gap-2">
                         <Button onClick={() => setOpenDelete(false)}>Cancel</Button>