diff --git a/apps/web/components/Dialog.tsx b/apps/web/components/Dialog.tsx
index 5d77c465..a2e854b1 100644
--- a/apps/web/components/Dialog.tsx
+++ b/apps/web/components/Dialog.tsx
@@ -6,7 +6,7 @@ export function Dialog(props: DialogProps) {
   const { children, ...other } = props;
   return (
     <DialogPrimitive.Root {...other}>
-      <DialogPrimitive.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+      <DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
       {children}
     </DialogPrimitive.Root>
   );
@@ -17,7 +17,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
   ({ children, ...props }, forwardedRef) => (
     <DialogPrimitive.Content
       {...props}
-      className="fixed left-1/2 top-1/2 min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl sm:w-full sm:max-w-lg sm:align-middle"
+      className="fixed left-1/2 top-1/2 z-50 min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl sm:w-full sm:max-w-lg sm:align-middle"
       ref={forwardedRef}>
       {children}
     </DialogPrimitive.Content>
diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx
index 4b4ea0bf..9d6b211e 100644
--- a/apps/web/components/Shell.tsx
+++ b/apps/web/components/Shell.tsx
@@ -317,7 +317,7 @@ export default function Shell(props: {
                 {props.children}
               </div>
               {/* show bottom navigation for md and smaller (tablet and phones) */}
-              <nav className="bottom-nav fixed bottom-0 z-40 flex w-full bg-white shadow md:hidden">
+              <nav className="bottom-nav fixed bottom-0 z-30 flex w-full bg-white shadow md:hidden">
                 {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
                 {navigation.flatMap((item, itemIdx) =>
                   item.href === "/settings/profile" ? (