diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 8c33db531e..a9024161ca 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -55,7 +55,7 @@ export function TopBar({ children }: { children: React.ReactNode }) {
                 </span>
                 <DirectionDownIcon className="!w-2.5" />
               </DropdownMenu.Trigger>
-              <DropdownMenu.Content gap={8} className="!z-topBarPopover">
+              <DropdownMenu.Content gap={8}>
                 <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
                 <DropdownMenu.Item onSelect={() => logout.mutate({})}>
                   Sign out
diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
index 17da2c90a5..5ae3432948 100644
--- a/app/components/TopBarPicker.tsx
+++ b/app/components/TopBarPicker.tsx
@@ -112,7 +112,7 @@ const TopBarPicker = (props: TopBarPickerProps) => {
       {/* TODO: popover position should be further right */}
       {props.items && (
         <DropdownMenu.Content
-          className="!z-topBarPopover mt-2 max-h-80 min-w-[12.8125rem] overflow-y-auto"
+          className="mt-2 max-h-80 min-w-[12.8125rem] overflow-y-auto"
           anchor="bottom start"
         >
           {props.items.length > 0 ? (
diff --git a/app/ui/styles/components/menu-button.css b/app/ui/styles/components/menu-button.css
index 2a88a87233..f80a7be044 100644
--- a/app/ui/styles/components/menu-button.css
+++ b/app/ui/styles/components/menu-button.css
@@ -7,7 +7,8 @@
  */
 
 .DropdownMenuContent {
-  @apply z-popover min-w-36 rounded border p-0 bg-raise border-secondary;
+  /* we want menu popover to be on top of top bar and pagination bar too */
+  @apply z-topBarDropdown min-w-36 rounded border p-0 bg-raise border-secondary;
 
   & .DropdownMenuItem {
     @apply block w-full cursor-pointer select-none border-b py-2 pl-3 pr-6 text-left text-sans-md text-secondary border-secondary last:border-b-0;
diff --git a/tailwind.config.js b/tailwind.config.js
index be83d8b78e..9868c46e9e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -48,7 +48,7 @@ module.exports = {
         modal: '40',
         sideModalDropdown: '40',
         sideModal: '30',
-        topBarPopover: '25',
+        topBarDropdown: '25',
         topBar: '20',
         popover: '10',
         contentDropdown: '10',