diff --git a/src/app/drive/components/ShareDialog/ShareDialog.tsx b/src/app/drive/components/ShareDialog/ShareDialog.tsx
index 92d99cb4df..a942d328da 100644
--- a/src/app/drive/components/ShareDialog/ShareDialog.tsx
+++ b/src/app/drive/components/ShareDialog/ShareDialog.tsx
@@ -1,4 +1,4 @@
-import { Popover } from '@headlessui/react';
+import Popover from 'components/Popover';
 import { SharingMeta } from '@internxt/sdk/dist/drive/share/types';
 import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
 import {
@@ -651,9 +651,9 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
               <p className="font-medium">{translate('modals.shareModal.general.generalAccess')}</p>
 
               <Popover className="relative z-10">
-                {({ open }) => (
+                {({ open, close, Button: PopoverButton, Panel: PopoverPanel }) => (
                   <>
-                    <Popover.Button as="div" className="z-1 outline-none">
+                    <PopoverButton as="div" className="outline-none">
                       <Button variant="secondary" disabled={isLoading || !isUserOwner}>
                         {accessMode === 'public' ? <Globe size={24} /> : <Users size={24} />}
                         <span>
@@ -669,94 +669,85 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
                           <CaretDown size={24} />
                         )}
                       </Button>
-                    </Popover.Button>
-
-                    <Popover.Panel
-                      className={`absolute bottom-full z-0 mb-1 w-80 origin-bottom-left rounded-lg border border-gray-10 bg-surface p-1 shadow-subtle transition-all duration-50 ease-out ${
-                        open ? 'scale-100 opacity-100' : 'pointer-events-none scale-95 opacity-0'
-                      }`}
-                      static
-                    >
-                      {({ close }) => (
-                        <>
-                          {/* Public */}
-                          <button
-                            className="flex h-16 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
-                            onClick={() => changeAccess('public')}
-                          >
-                            <Globe size={32} weight="light" />
-                            <div className="flex flex-1 flex-col items-start">
-                              <p className="text-base font-medium leading-none">
-                                {translate('modals.shareModal.general.accessOptions.public.title')}
-                              </p>
-                              <p className="text-left text-sm leading-tight text-gray-60">
-                                {translate('modals.shareModal.general.accessOptions.public.subtitle')}
+                    </PopoverButton>
+
+                    <PopoverPanel className="absolute bottom-full left-0 z-0 mb-1 w-80 origin-bottom-left rounded-lg border border-gray-10 bg-surface p-1 shadow-subtle">
+                      {/* Public */}
+                      <button
+                        className="flex h-16 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
+                        onClick={() => changeAccess('public')}
+                      >
+                        <Globe size={32} weight="light" />
+                        <div className="flex flex-1 flex-col items-start">
+                          <p className="text-base font-medium leading-none">
+                            {translate('modals.shareModal.general.accessOptions.public.title')}
+                          </p>
+                          <p className="text-left text-sm leading-tight text-gray-60">
+                            {translate('modals.shareModal.general.accessOptions.public.subtitle')}
+                          </p>
+                        </div>
+                        <div className="flex h-full w-5 items-center justify-center">
+                          {accessMode === 'public' ? (
+                            isLoading ? (
+                              <Loader classNameLoader="h-5 w-5" />
+                            ) : (
+                              <Check size={20} />
+                            )
+                          ) : null}
+                        </div>
+                      </button>
+                      {/* Restricted */}
+                      {!isWorkspace && (
+                        <button
+                          className="flex h-16 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
+                          onClick={() => changeAccess('restricted')}
+                        >
+                          <Users size={32} weight="light" />
+                          <div className="flex flex-1 flex-col items-start">
+                            <div className="flex flex-row gap-2 items-center">
+                              <p
+                                className={`text-base font-medium leading-none ${isRestrictedSharingAvailable ? '' : 'text-gray-70'}`}
+                              >
+                                {translate('modals.shareModal.general.accessOptions.restricted.title')}
                               </p>
-                            </div>
-                            <div className="flex h-full w-5 items-center justify-center">
-                              {accessMode === 'public' ? (
-                                isLoading ? (
-                                  <Loader classNameLoader="h-5 w-5" />
-                                ) : (
-                                  <Check size={20} />
-                                )
-                              ) : null}
-                            </div>
-                          </button>
-                          {/* Restricted */}
-                          {!isWorkspace && (
-                            <button
-                              className="flex h-16 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
-                              onClick={() => changeAccess('restricted')}
-                            >
-                              <Users size={32} weight="light" />
-                              <div className="flex flex-1 flex-col items-start">
-                                <div className="flex flex-row gap-2 items-center">
-                                  <p
-                                    className={`text-base font-medium leading-none ${isRestrictedSharingAvailable ? '' : 'text-gray-70'}`}
-                                  >
-                                    {translate('modals.shareModal.general.accessOptions.restricted.title')}
-                                  </p>
-                                  {!isRestrictedSharingAvailable && (
-                                    <div className="py-1 px-2 ml-2 rounded-md bg-gray-5">
-                                      <p className="text-xs font-semibold">{translate('actions.locked')}</p>
-                                    </div>
-                                  )}
+                              {!isRestrictedSharingAvailable && (
+                                <div className="py-1 px-2 ml-2 rounded-md bg-gray-5">
+                                  <p className="text-xs font-semibold">{translate('actions.locked')}</p>
                                 </div>
-                                <p
-                                  className={`text-left text-sm leading-tight ${isRestrictedSharingAvailable ? 'text-gray-60' : 'text-gray-70'}`}
-                                >
-                                  {translate('modals.shareModal.general.accessOptions.restricted.subtitle')}
-                                </p>
-                              </div>
-                              <div className="flex h-full w-5 items-center justify-center">
-                                {accessMode === 'restricted' ? (
-                                  isLoading ? (
-                                    <Loader classNameLoader="h-5 w-5" />
-                                  ) : (
-                                    <Check size={20} />
-                                  )
-                                ) : null}
-                              </div>
-                            </button>
-                          )}
-                          {/* Stop sharing */}
-                          {(currentUserFolderRole === 'owner' || isUserOwner || props?.isDriveItem) && (
-                            <button
-                              className="flex h-11 w-full cursor-pointer items-center justify-start rounded-lg pl-14 pr-3 hover:bg-gray-5"
-                              onClick={() => {
-                                setShowStopSharingConfirmation(true);
-                                close();
-                              }}
+                              )}
+                            </div>
+                            <p
+                              className={`text-left text-sm leading-tight ${isRestrictedSharingAvailable ? 'text-gray-60' : 'text-gray-70'}`}
                             >
-                              <p className="text-base font-medium">
-                                {translate('modals.shareModal.general.accessOptions.stopSharing')}
-                              </p>
-                            </button>
-                          )}
-                        </>
+                              {translate('modals.shareModal.general.accessOptions.restricted.subtitle')}
+                            </p>
+                          </div>
+                          <div className="flex h-full w-5 items-center justify-center">
+                            {accessMode === 'restricted' ? (
+                              isLoading ? (
+                                <Loader classNameLoader="h-5 w-5" />
+                              ) : (
+                                <Check size={20} />
+                              )
+                            ) : null}
+                          </div>
+                        </button>
+                      )}
+                      {/* Stop sharing */}
+                      {(currentUserFolderRole === 'owner' || isUserOwner || props?.isDriveItem) && (
+                        <button
+                          className="flex h-11 w-full cursor-pointer items-center justify-start rounded-lg pl-14 pr-3 hover:bg-gray-5"
+                          onClick={() => {
+                            setShowStopSharingConfirmation(true);
+                            close();
+                          }}
+                        >
+                          <p className="text-base font-medium">
+                            {translate('modals.shareModal.general.accessOptions.stopSharing')}
+                          </p>
+                        </button>
                       )}
-                    </Popover.Panel>
+                    </PopoverPanel>
                   </>
                 )}
               </Popover>
@@ -842,52 +833,45 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
 
                   <div className="flex items-center space-x-1.5">
                     <Popover className="relative">
-                      {({ open }) => (
+                      {({ close, Button: PopoverButton, Panel: PopoverPanel }) => (
                         <>
-                          <Popover.Button tabIndex={-1} className="relative">
+                          <PopoverButton as="div" className="outline-none">
                             <Button variant="primary">
                               <span>{translate('modals.shareModal.requests.actions.accept')}</span>
                               <CaretDown size={24} />
                             </Button>
-                          </Popover.Button>
+                          </PopoverButton>
 
-                          <Popover.Panel
-                            className={`absolute right-0 z-10 mt-1 origin-top-right whitespace-nowrap rounded-lg border border-gray-10 bg-surface p-1 shadow-subtle transition-all duration-50 ease-out ${
-                              open ? 'scale-100 opacity-100' : 'pointer-events-none scale-95 opacity-0'
-                            }`}
+                          <PopoverPanel
+                            className="absolute right-0 z-10 mt-1 origin-top-right whitespace-nowrap rounded-lg border border-gray-10 bg-surface p-1 shadow-subtle"
                             style={{ minWidth: '160px' }}
-                            static
                           >
-                            {({ close }) => (
-                              <>
-                                {/* Reader */}
-                                <button
-                                  className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
-                                  onClick={() => {
-                                    onAcceptRequest(request.email, 'reader');
-                                    close();
-                                  }}
-                                >
-                                  <p className="w-full text-left text-base font-medium leading-none">
-                                    {translate('modals.shareModal.requests.actions.roles.reader')}
-                                  </p>
-                                </button>
-
-                                {/* Editor */}
-                                <button
-                                  className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
-                                  onClick={() => {
-                                    onAcceptRequest(request.email, 'editor');
-                                    close();
-                                  }}
-                                >
-                                  <p className="w-full text-left text-base font-medium leading-none">
-                                    {translate('modals.shareModal.requests.actions.roles.editor')}
-                                  </p>
-                                </button>
-                              </>
-                            )}
-                          </Popover.Panel>
+                            {/* Reader */}
+                            <button
+                              className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
+                              onClick={() => {
+                                onAcceptRequest(request.email, 'reader');
+                                close();
+                              }}
+                            >
+                              <p className="w-full text-left text-base font-medium leading-none">
+                                {translate('modals.shareModal.requests.actions.roles.reader')}
+                              </p>
+                            </button>
+
+                            {/* Editor */}
+                            <button
+                              className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5"
+                              onClick={() => {
+                                onAcceptRequest(request.email, 'editor');
+                                close();
+                              }}
+                            >
+                              <p className="w-full text-left text-base font-medium leading-none">
+                                {translate('modals.shareModal.requests.actions.roles.editor')}
+                              </p>
+                            </button>
+                          </PopoverPanel>
                         </>
                       )}
                     </Popover>
diff --git a/src/app/drive/components/ShareDialog/components/UserOptions.tsx b/src/app/drive/components/ShareDialog/components/UserOptions.tsx
index 2f92a6d26b..30b6dba4c3 100644
--- a/src/app/drive/components/ShareDialog/components/UserOptions.tsx
+++ b/src/app/drive/components/ShareDialog/components/UserOptions.tsx
@@ -1,4 +1,4 @@
-import { Popover } from '@headlessui/react';
+import Popover from 'components/Popover';
 import { Check } from '@phosphor-icons/react';
 
 export const UserOptions = ({
@@ -14,8 +14,10 @@ export const UserOptions = ({
 }): JSX.Element => {
   const isUserSelected = selectedUserListIndex === listPosition;
 
-  return isUserSelected ? (
-    <Popover
+  if (!isUserSelected) return <></>;
+
+  return (
+    <div
       className="absolute z-10 h-0 max-h-0 w-full"
       style={{
         top: `${userOptionsY}px`,
@@ -23,63 +25,65 @@ export const UserOptions = ({
         minWidth: '160px',
       }}
     >
-      <Popover.Panel
-        className={`absolute right-0 z-10 origin-top-right whitespace-nowrap rounded-lg border border-gray-10 bg-surface p-1 shadow-subtle transition-all duration-50 ease-out dark:bg-gray-5 ${
-          isUserSelected ? 'scale-100 opacity-100' : 'pointer-events-none scale-95 opacity-0'
-        }`}
-        style={{
+      <Popover
+        childrenButton={<div style={{ display: 'none' }} />}
+        alwaysShow={true}
+        useTransition={false}
+        classPanel="absolute right-0 z-10 origin-top-right whitespace-nowrap rounded-lg border border-gray-10 bg-surface p-1 shadow-subtle dark:bg-gray-5"
+        panelStyle={{
           top: '44px',
           minWidth: '160px',
         }}
-        static
-      >
-        {disableRoleChange ? (
-          <></>
-        ) : (
+        panel={(close) => (
           <>
-            {/* Editor */}
-            <button
-              className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5 dark:hover:bg-gray-10"
-              onClick={() => {
-                onChangeRole('editor');
-              }}
-            >
-              <p className="w-full text-left text-base font-medium leading-none">
-                {translate('modals.shareModal.list.userItem.roles.editor')}
-              </p>
-              {selectedRole === 'editor' && <Check size={20} />}
-            </button>
+            {!disableRoleChange && (
+              <>
+                {/* Editor */}
+                <button
+                  className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5 dark:hover:bg-gray-10"
+                  onClick={() => {
+                    onChangeRole('editor');
+                    close();
+                  }}
+                >
+                  <p className="w-full text-left text-base font-medium leading-none">
+                    {translate('modals.shareModal.list.userItem.roles.editor')}
+                  </p>
+                  {selectedRole === 'editor' && <Check size={20} />}
+                </button>
 
-            {/* Reader */}
+                {/* Reader */}
+                <button
+                  className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5 dark:hover:bg-gray-10"
+                  onClick={() => {
+                    onChangeRole('reader');
+                    close();
+                  }}
+                >
+                  <p className="w-full text-left text-base font-medium leading-none">
+                    {translate('modals.shareModal.list.userItem.roles.reader')}
+                  </p>
+                  {selectedRole === 'reader' && <Check size={20} />}
+                </button>
+
+                <div className="mx-3 my-0.5 flex h-px bg-gray-10" />
+              </>
+            )}
+            {/* Remove */}
             <button
               className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5 dark:hover:bg-gray-10"
               onClick={() => {
-                onChangeRole('reader');
+                onRemoveUser(userOptionsEmail);
+                close();
               }}
             >
               <p className="w-full text-left text-base font-medium leading-none">
-                {translate('modals.shareModal.list.userItem.roles.reader')}
+                {translate('modals.shareModal.list.userItem.remove')}
               </p>
-              {selectedRole === 'reader' && <Check size={20} />}
             </button>
-
-            <div className="mx-3 my-0.5 flex h-px bg-gray-10" />
           </>
         )}
-        {/* Remove */}
-        <button
-          className="flex h-9 w-full cursor-pointer items-center justify-start space-x-3 rounded-lg px-3 hover:bg-gray-5 dark:hover:bg-gray-10"
-          onClick={() => {
-            onRemoveUser(userOptionsEmail);
-          }}
-        >
-          <p className="w-full text-left text-base font-medium leading-none">
-            {translate('modals.shareModal.list.userItem.remove')}
-          </p>
-        </button>
-      </Popover.Panel>
-    </Popover>
-  ) : (
-    <></>
+      />
+    </div>
   );
 };
diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
index 77589b6ff3..692032c4a4 100644
--- a/src/components/Popover.tsx
+++ b/src/components/Popover.tsx
@@ -1,35 +1,78 @@
 import { Popover as HPopover, Transition } from '@headlessui/react';
 import { ReactNode } from 'react';
 
+export interface PopoverRenderProps {
+  open: boolean;
+  close: () => void;
+  Button: typeof HPopover.Button;
+  Panel: typeof HPopover.Panel;
+}
+
 interface PopoverProps {
-  childrenButton: ReactNode;
-  panel: ReactNode;
+  childrenButton?: ReactNode;
+  panel?: ReactNode | ((close: () => void) => ReactNode);
   className?: string;
   classButton?: string;
+  classPanel?: string;
+  panelStyle?: React.CSSProperties;
+  buttonAs?: React.ElementType;
+  useTransition?: boolean;
+  alwaysShow?: boolean;
+  children?: (props: PopoverRenderProps) => ReactNode;
 }
+
+const DEFAULT_PANEL_CLASS =
+  'absolute right-0 z-50 mt-1 rounded-md border border-gray-10 bg-surface py-1.5 shadow-subtle dark:bg-gray-5';
+
 export default function Popover({
   childrenButton,
   panel,
-  className,
-  classButton,
+  className = '',
+  classButton = '',
+  classPanel,
+  panelStyle,
+  buttonAs,
+  useTransition = true,
+  alwaysShow = false,
+  children,
 }: Readonly<PopoverProps>): JSX.Element {
+  if (children) {
+    return (
+      <HPopover className={className}>
+        {({ open, close }) => <>{children({ open, close, Button: HPopover.Button, Panel: HPopover.Panel })}</>}
+      </HPopover>
+    );
+  }
+
+  const PanelContent = ({ close }: { close: () => void }) => <>{typeof panel === 'function' ? panel(close) : panel}</>;
+
+  const Panel = (
+    <HPopover.Panel className={classPanel || DEFAULT_PANEL_CLASS} style={panelStyle} static={alwaysShow}>
+      {({ close }) => <PanelContent close={close} />}
+    </HPopover.Panel>
+  );
+
   return (
     <HPopover style={{ lineHeight: 0 }} className={`relative ${className}`}>
-      <HPopover.Button className={`cursor-pointer outline-none ${classButton}`}>{childrenButton}</HPopover.Button>
-
-      <Transition
-        enter="transition duration-100 ease-out"
-        enterFrom="scale-95 opacity-0"
-        enterTo="scale-100 opacity-100"
-        leave="transition duration-75 ease-out"
-        leaveFrom="scale-100 opacity-100"
-        leaveTo="scale-95 opacity-0"
-        className="z-50"
-      >
-        <HPopover.Panel className="absolute right-0 z-50 mt-1 rounded-md border border-gray-10 bg-surface py-1.5 shadow-subtle dark:bg-gray-5">
-          {panel}
-        </HPopover.Panel>
-      </Transition>
+      <HPopover.Button as={buttonAs} className={`cursor-pointer outline-none ${classButton}`}>
+        {childrenButton}
+      </HPopover.Button>
+
+      {useTransition ? (
+        <Transition
+          enter="transition duration-100 ease-out"
+          enterFrom="scale-95 opacity-0"
+          enterTo="scale-100 opacity-100"
+          leave="transition duration-75 ease-out"
+          leaveFrom="scale-100 opacity-100"
+          leaveTo="scale-95 opacity-0"
+          className="z-50"
+        >
+          {Panel}
+        </Transition>
+      ) : (
+        Panel
+      )}
     </HPopover>
   );
 }
diff --git a/src/views/Home/components/AccountPopover.tsx b/src/views/Home/components/AccountPopover.tsx
index 034d0eaf45..8f3de0674f 100644
--- a/src/views/Home/components/AccountPopover.tsx
+++ b/src/views/Home/components/AccountPopover.tsx
@@ -2,7 +2,7 @@ import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { Desktop, SignOut, Gear } from '@phosphor-icons/react';
 import { ReactNode } from 'react';
-import { Popover } from '@internxt/ui';
+import Popover from 'components/Popover';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { uiActions } from 'app/store/slices/ui';
 import { userThunks } from 'app/store/slices/user';
@@ -115,9 +115,7 @@ export default function AccountPopover({ className = '', user, plan }: Readonly<
     </div>
   );
 
-  return (
-    <Popover className={className} childrenButton={avatarWrapper} panel={() => panel} data-test="app-header-dropdown" />
-  );
+  return <Popover className={className} childrenButton={avatarWrapper} panel={panel} data-test="app-header-dropdown" />;
 }
 
 interface ItemProps {