diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
index 6b285ca4f..33aebff64 100644
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
@@ -4,7 +4,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type AttachmentDropdownProps = {
@@ -18,9 +17,9 @@ export const AttachmentDropdown = ({
   onDelete,
   scopeKey,
 }: AttachmentDropdownProps) => {
-  const dropdownScopeId = `${scopeKey}-settings-field-active-action-dropdown`;
+  const dropdownId = `${scopeKey}-settings-field-active-action-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const handleDownload = () => {
     onDownload();
@@ -33,32 +32,31 @@ export const AttachmentDropdown = ({
   };
 
   return (
-    <DropdownScope dropdownScopeId={dropdownScopeId}>
-      <Dropdown
-        clickableComponent={
-          <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
-        }
-        dropdownComponents={
-          <DropdownMenu width="160px">
-            <DropdownMenuItemsContainer>
-              <MenuItem
-                text="Download"
-                LeftIcon={IconDownload}
-                onClick={handleDownload}
-              />
-              <MenuItem
-                text="Delete"
-                accent="danger"
-                LeftIcon={IconTrash}
-                onClick={handleDelete}
-              />
-            </DropdownMenuItemsContainer>
-          </DropdownMenu>
-        }
-        dropdownHotkeyScope={{
-          scope: dropdownScopeId,
-        }}
-      />
-    </DropdownScope>
+    <Dropdown
+      dropdownId={dropdownId}
+      clickableComponent={
+        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+      }
+      dropdownComponents={
+        <DropdownMenu width="160px">
+          <DropdownMenuItemsContainer>
+            <MenuItem
+              text="Download"
+              LeftIcon={IconDownload}
+              onClick={handleDownload}
+            />
+            <MenuItem
+              text="Delete"
+              accent="danger"
+              LeftIcon={IconTrash}
+              onClick={handleDelete}
+            />
+          </DropdownMenuItemsContainer>
+        </DropdownMenu>
+      }
+      dropdownHotkeyScope={{
+        scope: dropdownId,
+      }}
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx b/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx
index 4199612ca..effe58897 100644
--- a/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx
+++ b/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx
@@ -6,6 +6,7 @@ import {
   RecordBoardProps,
 } from '@/object-record/record-board/components/RecordBoard';
 import { RecordBoardEffect } from '@/object-record/record-board/components/RecordBoardEffect';
+import { BoardOptionsDropdownId } from '@/object-record/record-board/constants/BoardOptionsDropdownId';
 import { RecordBoardOptionsDropdown } from '@/object-record/record-board/options/components/RecordBoardOptionsDropdown';
 import { ViewBar } from '@/views/components/ViewBar';
 import { useViewFields } from '@/views/hooks/internal/useViewFields';
@@ -43,7 +44,7 @@ export const CompanyBoard = ({
         optionsDropdownButton={
           <RecordBoardOptionsDropdown recordBoardId={recordBoardId} />
         }
-        optionsDropdownScopeId={recordBoardId}
+        optionsDropdownScopeId={BoardOptionsDropdownId}
       />
 
       <HooksCompanyBoardEffect
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx
index 36ea379dd..08cdfee1e 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx
@@ -1,6 +1,5 @@
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
@@ -18,14 +17,13 @@ export const MultipleFiltersDropdownButton = ({
   const { resetFilter } = useFilterDropdown();
 
   return (
-    <DropdownScope dropdownScopeId={ObjectFilterDropdownId}>
-      <Dropdown
-        onClose={resetFilter}
-        clickableComponent={<MultipleFiltersButton />}
-        dropdownComponents={<MultipleFiltersDropdownContent />}
-        dropdownHotkeyScope={hotkeyScope}
-        dropdownOffset={{ y: 8 }}
-      />
-    </DropdownScope>
+    <Dropdown
+      dropdownId={ObjectFilterDropdownId}
+      onClose={resetFilter}
+      clickableComponent={<MultipleFiltersButton />}
+      dropdownComponents={<MultipleFiltersDropdownContent />}
+      dropdownHotkeyScope={hotkeyScope}
+      dropdownOffset={{ y: 8 }}
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx
index 477e74d34..2074b0489 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 
+import { ObjectFilterDropdownId } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
 export const MultipleFiltersDropdownFilterOnFilterChangedEffect = ({
@@ -7,7 +8,7 @@ export const MultipleFiltersDropdownFilterOnFilterChangedEffect = ({
 }: {
   filterDefinitionUsedInDropdownType: string | undefined;
 }) => {
-  const { setDropdownWidth } = useDropdown();
+  const { setDropdownWidth } = useDropdown(ObjectFilterDropdownId);
 
   useEffect(() => {
     switch (filterDefinitionUsedInDropdownType) {
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx
index 1b5a6bb7b..b05854601 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 
+import { ObjectFilterDropdownId } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { EntitiesForMultipleEntitySelect } from '@/object-record/relation-picker/components/MultipleEntitySelect';
 import { SingleEntitySelectMenuItems } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItems';
@@ -21,7 +22,7 @@ export const ObjectFilterDropdownEntitySearchSelect = ({
     selectFilter,
   } = useFilterDropdown();
 
-  const { closeDropdown } = useDropdown();
+  const { closeDropdown } = useDropdown(ObjectFilterDropdownId);
 
   const [isAllEntitySelected, setIsAllEntitySelected] = useState(false);
 
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx
index bbf302975..f87665839 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx
@@ -5,7 +5,6 @@ import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/
 import { IconChevronDown } from '@/ui/display/icon/index';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 
@@ -42,34 +41,33 @@ export const SingleEntityObjectFilterDropdownButton = ({
   const theme = useTheme();
 
   return (
-    <DropdownScope dropdownScopeId="single-entity-filter-dropdown">
-      <Dropdown
-        dropdownHotkeyScope={hotkeyScope}
-        dropdownOffset={{ x: 0, y: -28 }}
-        clickableComponent={
-          <StyledHeaderDropdownButton>
-            {selectedFilter ? (
-              <GenericEntityFilterChip
-                filter={selectedFilter}
-                Icon={
-                  selectedFilter.operand === ViewFilterOperand.IsNotNull
-                    ? availableFilter.SelectAllIcon
-                    : undefined
-                }
-              />
-            ) : (
-              'Filter'
-            )}
-            <IconChevronDown size={theme.icon.size.md} />
-          </StyledHeaderDropdownButton>
-        }
-        dropdownComponents={
-          <>
-            <ObjectFilterDropdownRecordSearchInput />
-            <ObjectFilterDropdownRecordSelect />
-          </>
-        }
-      />
-    </DropdownScope>
+    <Dropdown
+      dropdownId="single-entity-filter-dropdown"
+      dropdownHotkeyScope={hotkeyScope}
+      dropdownOffset={{ x: 0, y: -28 }}
+      clickableComponent={
+        <StyledHeaderDropdownButton>
+          {selectedFilter ? (
+            <GenericEntityFilterChip
+              filter={selectedFilter}
+              Icon={
+                selectedFilter.operand === ViewFilterOperand.IsNotNull
+                  ? availableFilter.SelectAllIcon
+                  : undefined
+              }
+            />
+          ) : (
+            'Filter'
+          )}
+          <IconChevronDown size={theme.icon.size.md} />
+        </StyledHeaderDropdownButton>
+      }
+      dropdownComponents={
+        <>
+          <ObjectFilterDropdownRecordSearchInput />
+          <ObjectFilterDropdownRecordSelect />
+        </>
+      }
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
index 02ca68657..dc98dd90e 100644
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@@ -10,7 +10,6 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
@@ -70,63 +69,60 @@ export const ObjectSortDropdownButton = ({
 
   return (
     <ObjectSortDropdownScope sortScopeId={sortDropdownId}>
-      <DropdownScope dropdownScopeId={ObjectSortDropdownId}>
-        <Dropdown
-          dropdownHotkeyScope={hotkeyScope}
-          dropdownOffset={{ y: 8 }}
-          clickableComponent={
-            <LightButton
-              title="Sort"
-              active={isSortSelected}
-              onClick={handleButtonClick}
-            />
-          }
-          dropdownComponents={
-            <>
-              {isSortDirectionMenuUnfolded ? (
+      <Dropdown
+        dropdownId={ObjectSortDropdownId}
+        dropdownHotkeyScope={hotkeyScope}
+        dropdownOffset={{ y: 8 }}
+        clickableComponent={
+          <LightButton
+            title="Sort"
+            active={isSortSelected}
+            onClick={handleButtonClick}
+          />
+        }
+        dropdownComponents={
+          <>
+            {isSortDirectionMenuUnfolded ? (
+              <DropdownMenuItemsContainer>
+                {SORT_DIRECTIONS.map((sortOrder, index) => (
+                  <MenuItem
+                    key={index}
+                    onClick={() => {
+                      setSelectedSortDirection(sortOrder);
+                      setIsSortDirectionMenuUnfolded(false);
+                    }}
+                    text={sortOrder === 'asc' ? 'Ascending' : 'Descending'}
+                  />
+                ))}
+              </DropdownMenuItemsContainer>
+            ) : (
+              <>
+                <DropdownMenuHeader
+                  EndIcon={IconChevronDown}
+                  onClick={() => setIsSortDirectionMenuUnfolded(true)}
+                >
+                  {selectedSortDirection === 'asc' ? 'Ascending' : 'Descending'}
+                </DropdownMenuHeader>
+                <DropdownMenuSeparator />
                 <DropdownMenuItemsContainer>
-                  {SORT_DIRECTIONS.map((sortOrder, index) => (
-                    <MenuItem
-                      key={index}
-                      onClick={() => {
-                        setSelectedSortDirection(sortOrder);
-                        setIsSortDirectionMenuUnfolded(false);
-                      }}
-                      text={sortOrder === 'asc' ? 'Ascending' : 'Descending'}
-                    />
-                  ))}
+                  {[...availableSortDefinitions]
+                    .sort((a, b) => a.label.localeCompare(b.label))
+                    .map((availableSortDefinition, index) => (
+                      <MenuItem
+                        testId={`select-sort-${index}`}
+                        key={index}
+                        onClick={() => handleAddSort(availableSortDefinition)}
+                        LeftIcon={getIcon(availableSortDefinition.iconName)}
+                        text={availableSortDefinition.label}
+                      />
+                    ))}
                 </DropdownMenuItemsContainer>
-              ) : (
-                <>
-                  <DropdownMenuHeader
-                    EndIcon={IconChevronDown}
-                    onClick={() => setIsSortDirectionMenuUnfolded(true)}
-                  >
-                    {selectedSortDirection === 'asc'
-                      ? 'Ascending'
-                      : 'Descending'}
-                  </DropdownMenuHeader>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItemsContainer>
-                    {[...availableSortDefinitions]
-                      .sort((a, b) => a.label.localeCompare(b.label))
-                      .map((availableSortDefinition, index) => (
-                        <MenuItem
-                          testId={`select-sort-${index}`}
-                          key={index}
-                          onClick={() => handleAddSort(availableSortDefinition)}
-                          LeftIcon={getIcon(availableSortDefinition.iconName)}
-                          text={availableSortDefinition.label}
-                        />
-                      ))}
-                  </DropdownMenuItemsContainer>
-                </>
-              )}
-            </>
-          }
-          onClose={handleDropdownButtonClose}
-        />
-      </DropdownScope>
+              </>
+            )}
+          </>
+        }
+        onClose={handleDropdownButtonClose}
+      />
     </ObjectSortDropdownScope>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-board/constants/BoardOptionsDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-board/constants/BoardOptionsDropdownId.ts
new file mode 100644
index 000000000..d68691780
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-board/constants/BoardOptionsDropdownId.ts
@@ -0,0 +1 @@
+export const BoardOptionsDropdownId = 'board-options-dropdown-id';
diff --git a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdown.tsx
index 101061660..26fcdb9bc 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdown.tsx
@@ -1,8 +1,7 @@
+import { BoardOptionsDropdownId } from '@/object-record/record-board/constants/BoardOptionsDropdownId';
 import { useViewBar } from '@/views/hooks/useViewBar';
 
 import { Dropdown } from '../../../../ui/layout/dropdown/components/Dropdown';
-import { DropdownScope } from '../../../../ui/layout/dropdown/scopes/DropdownScope';
-import { BoardOptionsDropdownId } from '../../components/constants/BoardOptionsDropdownId';
 import { BoardOptionsHotkeyScope } from '../../types/BoardOptionsHotkeyScope';
 
 import { RecordBoardOptionsDropdownButton } from './RecordBoardOptionsDropdownButton';
@@ -23,19 +22,18 @@ export const RecordBoardOptionsDropdown = ({
   const { setViewEditMode } = useViewBar();
 
   return (
-    <DropdownScope dropdownScopeId={BoardOptionsDropdownId}>
-      <Dropdown
-        clickableComponent={<RecordBoardOptionsDropdownButton />}
-        dropdownComponents={
-          <RecordBoardOptionsDropdownContent
-            onStageAdd={onStageAdd}
-            recordBoardId={recordBoardId}
-          />
-        }
-        dropdownHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }}
-        onClickOutside={() => setViewEditMode('none')}
-        dropdownMenuWidth={170}
-      />
-    </DropdownScope>
+    <Dropdown
+      dropdownId={BoardOptionsDropdownId}
+      clickableComponent={<RecordBoardOptionsDropdownButton />}
+      dropdownComponents={
+        <RecordBoardOptionsDropdownContent
+          onStageAdd={onStageAdd}
+          recordBoardId={recordBoardId}
+        />
+      }
+      dropdownHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }}
+      onClickOutside={() => setViewEditMode('none')}
+      dropdownMenuWidth={170}
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownButton.tsx
index 6325b4a6b..12492a5c6 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownButton.tsx
@@ -1,8 +1,11 @@
+import { BoardOptionsDropdownId } from '@/object-record/record-board/constants/BoardOptionsDropdownId';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
 export const RecordBoardOptionsDropdownButton = () => {
-  const { isDropdownOpen, toggleDropdown } = useDropdown();
+  const { isDropdownOpen, toggleDropdown } = useDropdown(
+    BoardOptionsDropdownId,
+  );
 
   const handleClick = () => {
     toggleDropdown();
diff --git a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx
index 4498dd83a..237469edd 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx
@@ -4,6 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { v4 } from 'uuid';
 
+import { BoardOptionsDropdownId } from '@/object-record/record-board/constants/BoardOptionsDropdownId';
 import { useRecordBoardScopedStates } from '@/object-record/record-board/hooks/internal/useRecordBoardScopedStates';
 import {
   IconBaselineDensitySmall,
@@ -110,7 +111,7 @@ export const RecordBoardOptionsDropdownContent = ({
       recordBoardScopeId: recordBoardId,
     });
 
-  const { closeDropdown } = useDropdown();
+  const { closeDropdown } = useDropdown(BoardOptionsDropdownId);
 
   const handleReorderField: OnDragEndResponder = useCallback(
     (result) => {
diff --git a/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx b/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx
index 87392588a..56e324bec 100644
--- a/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx
@@ -23,7 +23,6 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Card } from '@/ui/layout/card/components/Card';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { Section } from '@/ui/layout/section/components/Section';
 
 const StyledAddDropdown = styled(Dropdown)`
@@ -129,9 +128,9 @@ export const RecordRelationFieldCardSection = () => {
     );
   }, [relationRecords, upsertRecordFromState]);
 
-  const dropdownScopeId = `record-field-card-relation-picker-${fieldDefinition.label}`;
+  const dropdownId = `record-field-card-relation-picker-${fieldDefinition.label}`;
 
-  const { closeDropdown, isDropdownOpen } = useDropdown(dropdownScopeId);
+  const { closeDropdown, isDropdownOpen } = useDropdown(dropdownId);
 
   const {
     identifiersMapper,
@@ -196,30 +195,29 @@ export const RecordRelationFieldCardSection = () => {
     <Section>
       <StyledHeader isDropdownOpen={isDropdownOpen}>
         <StyledTitle>{fieldDefinition.label}</StyledTitle>
-        <DropdownScope dropdownScopeId={dropdownScopeId}>
-          <StyledAddDropdown
-            dropdownPlacement="right-start"
-            onClose={handleCloseRelationPickerDropdown}
-            clickableComponent={
-              <LightIconButton
-                className="displayOnHover"
-                Icon={IconPlus}
-                accent="tertiary"
-              />
-            }
-            dropdownComponents={
-              <SingleEntitySelectMenuItemsWithSearch
-                EmptyIcon={IconForbid}
-                entitiesToSelect={entities.entitiesToSelect}
-                loading={entities.loading}
-                onEntitySelected={handleRelationPickerEntitySelected}
-              />
-            }
-            dropdownHotkeyScope={{
-              scope: dropdownScopeId,
-            }}
-          />
-        </DropdownScope>
+        <StyledAddDropdown
+          dropdownId={dropdownId}
+          dropdownPlacement="right-start"
+          onClose={handleCloseRelationPickerDropdown}
+          clickableComponent={
+            <LightIconButton
+              className="displayOnHover"
+              Icon={IconPlus}
+              accent="tertiary"
+            />
+          }
+          dropdownComponents={
+            <SingleEntitySelectMenuItemsWithSearch
+              EmptyIcon={IconForbid}
+              entitiesToSelect={entities.entitiesToSelect}
+              loading={entities.loading}
+              onEntitySelected={handleRelationPickerEntitySelected}
+            />
+          }
+          dropdownHotkeyScope={{
+            scope: dropdownId,
+          }}
+        />
       </StyledHeader>
       {!!relationRecords.length && (
         <Card>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHeadWithDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHeadWithDropdown.tsx
index be45fa901..a90a85d3b 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHeadWithDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHeadWithDropdown.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 
 import { FieldMetadata } from '../../field/types/FieldMetadata';
 import { ColumnDefinition } from '../types/ColumnDefinition';
@@ -28,21 +27,20 @@ export const ColumnHeadWithDropdown = ({
   primaryColumnKey,
 }: ColumnHeadWithDropdownProps) => {
   return (
-    <DropdownScope dropdownScopeId={column.fieldMetadataId + '-header'}>
-      <StyledDropdown
-        clickableComponent={<ColumnHead column={column} />}
-        dropdownComponents={
-          <RecordTableColumnDropdownMenu
-            column={column}
-            isFirstColumn={isFirstColumn}
-            isLastColumn={isLastColumn}
-            primaryColumnKey={primaryColumnKey}
-          />
-        }
-        dropdownOffset={{ x: -1 }}
-        dropdownPlacement="bottom-start"
-        dropdownHotkeyScope={{ scope: column.fieldMetadataId + '-header' }}
-      />
-    </DropdownScope>
+    <StyledDropdown
+      dropdownId={column.fieldMetadataId + '-header'}
+      clickableComponent={<ColumnHead column={column} />}
+      dropdownComponents={
+        <RecordTableColumnDropdownMenu
+          column={column}
+          isFirstColumn={isFirstColumn}
+          isLastColumn={isLastColumn}
+          primaryColumnKey={primaryColumnKey}
+        />
+      }
+      dropdownOffset={{ x: -1 }}
+      dropdownPlacement="bottom-start"
+      dropdownHotkeyScope={{ scope: column.fieldMetadataId + '-header' }}
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx
index d43ac048b..37d11b13c 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx
@@ -6,7 +6,6 @@ import { RecordTableHeaderCell } from '@/object-record/record-table/components/R
 import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { IconPlus } from '@/ui/display/icon';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef';
 
 import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
@@ -48,7 +47,7 @@ const StyledPlusIconContainer = styled.div`
   width: 32px;
 `;
 
-const HIDDEN_TABLE_COLUMN_DROPDOWN_SCOPE_ID =
+export const HIDDEN_TABLE_COLUMN_DROPDOWN_ID =
   'hidden-table-columns-dropdown-scope-id';
 
 const HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID =
@@ -106,22 +105,19 @@ export const RecordTableHeader = ({
           isTableWiderThanScreen={isTableWiderThanScreen}
         >
           {hiddenTableColumns.length > 0 && (
-            <DropdownScope
-              dropdownScopeId={HIDDEN_TABLE_COLUMN_DROPDOWN_SCOPE_ID}
-            >
-              <Dropdown
-                clickableComponent={
-                  <StyledPlusIconContainer>
-                    <IconPlus size={theme.icon.size.md} />
-                  </StyledPlusIconContainer>
-                }
-                dropdownComponents={<RecordTableHeaderPlusButtonContent />}
-                dropdownPlacement="bottom-start"
-                dropdownHotkeyScope={{
-                  scope: HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID,
-                }}
-              />
-            </DropdownScope>
+            <Dropdown
+              dropdownId={HIDDEN_TABLE_COLUMN_DROPDOWN_ID}
+              clickableComponent={
+                <StyledPlusIconContainer>
+                  <IconPlus size={theme.icon.size.md} />
+                </StyledPlusIconContainer>
+              }
+              dropdownComponents={<RecordTableHeaderPlusButtonContent />}
+              dropdownPlacement="bottom-start"
+              dropdownHotkeyScope={{
+                scope: HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID,
+              }}
+            />
           )}
         </StyledPlusIconHeaderCell>
       </tr>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts
index 58b4d2735..767e31d61 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts
@@ -1 +1 @@
-export const ColumnHeadDropdownId = 'table-head-options';
+export const ColumnHeadDropdownId = 'table-head-options-dropdown-id';
diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/constants/BoardOptionsDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/TableHiddenFieldsDropdownId.ts
similarity index 58%
rename from packages/twenty-front/src/modules/object-record/record-board/components/constants/BoardOptionsDropdownId.ts
rename to packages/twenty-front/src/modules/object-record/record-table/constants/TableHiddenFieldsDropdownId.ts
index 6085a3301..ce9714934 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/components/constants/BoardOptionsDropdownId.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/constants/TableHiddenFieldsDropdownId.ts
@@ -1,2 +1,2 @@
 // We should either apply the constant all caps case or maybe define a more general enum to store those ids ?
-export const BoardOptionsDropdownId = 'board-options';
+export const TableHiddenFieldsDropdownId = 'table-hidden-fields-dropdown-id';
diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts
index 2755b8c91..57628d119 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts
@@ -1,2 +1,2 @@
 // We should either apply the constant all caps case or maybe define a more general enum to store those ids ?
-export const TableOptionsDropdownId = 'table-options';
+export const TableOptionsDropdownId = 'table-options-dropdown-id';
diff --git a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx
index 44bdd29dc..874268a2f 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx
@@ -1,5 +1,4 @@
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { useViewBar } from '@/views/hooks/useViewBar';
 
 import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
@@ -18,19 +17,18 @@ export const TableOptionsDropdown = ({
   const { setViewEditMode } = useViewBar();
 
   return (
-    <DropdownScope dropdownScopeId={TableOptionsDropdownId}>
-      <Dropdown
-        clickableComponent={<TableOptionsDropdownButton />}
-        dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
-        dropdownOffset={{ y: 8 }}
-        dropdownComponents={
-          <TableOptionsDropdownContent
-            onImport={onImport}
-            recordTableId={recordTableId}
-          />
-        }
-        onClickOutside={() => setViewEditMode('none')}
-      />
-    </DropdownScope>
+    <Dropdown
+      dropdownId={TableOptionsDropdownId}
+      clickableComponent={<TableOptionsDropdownButton />}
+      dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
+      dropdownOffset={{ y: 8 }}
+      dropdownComponents={
+        <TableOptionsDropdownContent
+          onImport={onImport}
+          recordTableId={recordTableId}
+        />
+      }
+      onClickOutside={() => setViewEditMode('none')}
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx
index 9d17d9642..c257a5e9b 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx
@@ -3,6 +3,7 @@ import { OnDragEndResponder } from '@hello-pangea/dnd';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
+import { TableOptionsDropdownId } from '@/object-record/record-table/constants/TableOptionsDropdownId';
 import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
 import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
 import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/display/icon';
@@ -34,7 +35,7 @@ export const TableOptionsDropdownContent = ({
 
   const viewEditMode = useRecoilValue(viewEditModeState);
   const currentView = useRecoilValue(currentViewSelector);
-  const { closeDropdown } = useDropdown();
+  const { closeDropdown } = useDropdown(TableOptionsDropdownId);
 
   const [currentMenu, setCurrentMenu] = useState<TableOptionsMenu | undefined>(
     undefined,
diff --git a/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx b/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx
index 9460d4ba4..3216578ec 100644
--- a/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx
+++ b/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx
@@ -8,7 +8,6 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { IconButton } from '@/ui/input/button/components/IconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { logError } from '~/utils/logError';
 
 export const PipelineAddButton = () => {
@@ -48,33 +47,32 @@ export const PipelineAddButton = () => {
   };
 
   return (
-    <DropdownScope dropdownScopeId="add-pipeline-progress">
-      <Dropdown
-        clickableComponent={
-          <IconButton
-            Icon={IconPlus}
-            size="medium"
-            dataTestId="add-company-progress-button"
-            accent="default"
-            variant="secondary"
-            onClick={toggleDropdown}
-          />
-        }
-        dropdownComponents={
-          <OpportunityPicker
-            companyId={null}
-            onSubmit={handleCompanySelected}
-            onCancel={closeDropdown}
-          />
-        }
-        hotkey={{
-          key: 'c',
-          scope: PageHotkeyScope.OpportunitiesPage,
-        }}
-        dropdownHotkeyScope={{
-          scope: RelationPickerHotkeyScope.RelationPicker,
-        }}
-      />
-    </DropdownScope>
+    <Dropdown
+      dropdownId="add-pipeline-progress"
+      clickableComponent={
+        <IconButton
+          Icon={IconPlus}
+          size="medium"
+          dataTestId="add-company-progress-button"
+          accent="default"
+          variant="secondary"
+          onClick={toggleDropdown}
+        />
+      }
+      dropdownComponents={
+        <OpportunityPicker
+          companyId={null}
+          onSubmit={handleCompanySelected}
+          onCancel={closeDropdown}
+        />
+      }
+      hotkey={{
+        key: 'c',
+        scope: PageHotkeyScope.OpportunitiesPage,
+      }}
+      dropdownHotkeyScope={{
+        scope: RelationPickerHotkeyScope.RelationPicker,
+      }}
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
index 963c7b2fd..a9c1c421f 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
@@ -7,7 +7,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsAccountsRowDropdownMenuProps = {
@@ -21,46 +20,45 @@ export const SettingsAccountsRowDropdownMenu = ({
   className,
   onRemove,
 }: SettingsAccountsRowDropdownMenuProps) => {
-  const dropdownScopeId = `settings-account-row-${account.id}`;
+  const dropdownId = `settings-account-row-${account.id}`;
 
   const navigate = useNavigate();
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   return (
-    <DropdownScope dropdownScopeId={dropdownScopeId}>
-      <Dropdown
-        className={className}
-        dropdownPlacement="right-start"
-        dropdownHotkeyScope={{ scope: dropdownScopeId }}
-        clickableComponent={
-          <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
-        }
-        dropdownComponents={
-          <DropdownMenu>
-            <DropdownMenuItemsContainer>
+    <Dropdown
+      dropdownId={dropdownId}
+      className={className}
+      dropdownPlacement="right-start"
+      dropdownHotkeyScope={{ scope: dropdownId }}
+      clickableComponent={
+        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+      }
+      dropdownComponents={
+        <DropdownMenu>
+          <DropdownMenuItemsContainer>
+            <MenuItem
+              LeftIcon={IconMail}
+              text="Emails settings"
+              onClick={() => {
+                navigate(`/settings/accounts/emails/${account.id}`);
+                closeDropdown();
+              }}
+            />
+            {!!onRemove && (
               <MenuItem
-                LeftIcon={IconMail}
-                text="Emails settings"
+                accent="danger"
+                LeftIcon={IconTrash}
+                text="Remove account"
                 onClick={() => {
-                  navigate(`/settings/accounts/emails/${account.id}`);
+                  onRemove(account.id);
                   closeDropdown();
                 }}
               />
-              {!!onRemove && (
-                <MenuItem
-                  accent="danger"
-                  LeftIcon={IconTrash}
-                  text="Remove account"
-                  onClick={() => {
-                    onRemove(account.id);
-                    closeDropdown();
-                  }}
-                />
-              )}
-            </DropdownMenuItemsContainer>
-          </DropdownMenu>
-        }
-      />
-    </DropdownScope>
+            )}
+          </DropdownMenuItemsContainer>
+        </DropdownMenu>
+      }
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
index 1b409a983..b2ef117b6 100644
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
@@ -105,7 +105,7 @@ export const SettingsObjectFieldRelationForm = ({
       <StyledInputsContainer>
         <IconPicker
           disabled={disableFieldEdition}
-          dropdownScopeId="field-destination-icon-picker"
+          dropdownId="field-destination-icon-picker"
           selectedIconKey={values.field.icon || undefined}
           onChange={(value) =>
             onChange({
diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
index 205853f25..ef71223fa 100644
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
@@ -17,7 +17,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
 import { mainColorNames } from '@/ui/theme/constants/colors';
@@ -63,16 +62,14 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
 }: SettingsObjectFieldSelectFormOptionRowProps) => {
   const theme = useTheme();
 
-  const dropdownScopeIds = useMemo(() => {
+  const dropdownIds = useMemo(() => {
     const baseScopeId = `select-field-option-row-${v4()}`;
     return { color: `${baseScopeId}-color`, actions: `${baseScopeId}-actions` };
   }, []);
 
-  const { closeDropdown: closeColorDropdown } = useDropdown(
-    dropdownScopeIds.color,
-  );
+  const { closeDropdown: closeColorDropdown } = useDropdown(dropdownIds.color);
   const { closeDropdown: closeActionsDropdown } = useDropdown(
-    dropdownScopeIds.actions,
+    dropdownIds.actions,
   );
 
   return (
@@ -82,82 +79,80 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
         stroke={theme.icon.stroke.sm}
         color={theme.font.color.extraLight}
       />
-      <DropdownScope dropdownScopeId={dropdownScopeIds.color}>
-        <Dropdown
-          dropdownPlacement="bottom-start"
-          dropdownHotkeyScope={{
-            scope: dropdownScopeIds.color,
-          }}
-          clickableComponent={<StyledColorSample colorName={option.color} />}
-          dropdownComponents={
-            <DropdownMenu>
-              <DropdownMenuItemsContainer>
-                {mainColorNames.map((colorName) => (
-                  <MenuItemSelectColor
-                    key={colorName}
-                    onClick={() => {
-                      onChange({ ...option, color: colorName });
-                      closeColorDropdown();
-                    }}
-                    color={colorName}
-                    selected={colorName === option.color}
-                  />
-                ))}
-              </DropdownMenuItemsContainer>
-            </DropdownMenu>
-          }
-        />
-      </DropdownScope>
+      <Dropdown
+        dropdownId={dropdownIds.color}
+        dropdownPlacement="bottom-start"
+        dropdownHotkeyScope={{
+          scope: dropdownIds.color,
+        }}
+        clickableComponent={<StyledColorSample colorName={option.color} />}
+        dropdownComponents={
+          <DropdownMenu>
+            <DropdownMenuItemsContainer>
+              {mainColorNames.map((colorName) => (
+                <MenuItemSelectColor
+                  key={colorName}
+                  onClick={() => {
+                    onChange({ ...option, color: colorName });
+                    closeColorDropdown();
+                  }}
+                  color={colorName}
+                  selected={colorName === option.color}
+                />
+              ))}
+            </DropdownMenuItemsContainer>
+          </DropdownMenu>
+        }
+      />
       <StyledOptionInput
         value={option.label}
         onChange={(label) => onChange({ ...option, label })}
         RightIcon={isDefault ? IconCheck : undefined}
       />
-      <DropdownScope dropdownScopeId={dropdownScopeIds.actions}>
-        <Dropdown
-          dropdownPlacement="right-start"
-          dropdownHotkeyScope={{
-            scope: dropdownScopeIds.actions,
-          }}
-          clickableComponent={<LightIconButton Icon={IconDotsVertical} />}
-          dropdownComponents={
-            <DropdownMenu>
-              <DropdownMenuItemsContainer>
-                {isDefault ? (
-                  <MenuItem
-                    LeftIcon={IconX}
-                    text="Remove as default"
-                    onClick={() => {
-                      onChange({ ...option, isDefault: false });
-                      closeActionsDropdown();
-                    }}
-                  />
-                ) : (
-                  <MenuItem
-                    LeftIcon={IconCheck}
-                    text="Set as default"
-                    onClick={() => {
-                      onChange({ ...option, isDefault: true });
-                      closeActionsDropdown();
-                    }}
-                  />
-                )}
-                {!!onRemove && (
-                  <MenuItem
-                    accent="danger"
-                    LeftIcon={IconTrash}
-                    text="Remove option"
-                    onClick={() => {
-                      onRemove();
-                      closeActionsDropdown();
-                    }}
-                  />
-                )}
-              </DropdownMenuItemsContainer>
-            </DropdownMenu>
-          }
-        />
-      </DropdownScope>
+      <Dropdown
+        dropdownId={dropdownIds.actions}
+        dropdownPlacement="right-start"
+        dropdownHotkeyScope={{
+          scope: dropdownIds.actions,
+        }}
+        clickableComponent={<LightIconButton Icon={IconDotsVertical} />}
+        dropdownComponents={
+          <DropdownMenu>
+            <DropdownMenuItemsContainer>
+              {isDefault ? (
+                <MenuItem
+                  LeftIcon={IconX}
+                  text="Remove as default"
+                  onClick={() => {
+                    onChange({ ...option, isDefault: false });
+                    closeActionsDropdown();
+                  }}
+                />
+              ) : (
+                <MenuItem
+                  LeftIcon={IconCheck}
+                  text="Set as default"
+                  onClick={() => {
+                    onChange({ ...option, isDefault: true });
+                    closeActionsDropdown();
+                  }}
+                />
+              )}
+              {!!onRemove && (
+                <MenuItem
+                  accent="danger"
+                  LeftIcon={IconTrash}
+                  text="Remove option"
+                  onClick={() => {
+                    onRemove();
+                    closeActionsDropdown();
+                  }}
+                />
+              )}
+            </DropdownMenuItemsContainer>
+          </DropdownMenu>
+        }
+      />
     </StyledRow>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
index e93da2324..cf60f1357 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
@@ -12,7 +12,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { Section } from '@/ui/layout/section/components/Section';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
@@ -44,7 +43,7 @@ const StyledTag = styled(Tag)`
   height: ${({ theme }) => theme.spacing(6)};
 `;
 
-const dropdownScopeId = 'settings-object-edit-about-menu-dropdown';
+const dropdownId = 'settings-object-edit-about-menu-dropdown';
 
 export const SettingsAboutSection = ({
   iconKey = '',
@@ -57,7 +56,7 @@ export const SettingsAboutSection = ({
   const { getIcon } = useIcons();
   const Icon = getIcon(iconKey);
 
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const handleEdit = () => {
     onEdit();
@@ -83,32 +82,31 @@ export const SettingsAboutSection = ({
           ) : (
             <StyledTag color="blue" text="Standard" weight="medium" />
           )}
-          <DropdownScope dropdownScopeId={dropdownScopeId}>
-            <Dropdown
-              clickableComponent={
-                <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
-              }
-              dropdownComponents={
-                <DropdownMenu width="160px">
-                  <DropdownMenuItemsContainer>
-                    <MenuItem
-                      text="Edit"
-                      LeftIcon={IconPencil}
-                      onClick={handleEdit}
-                    />
-                    <MenuItem
-                      text="Disable"
-                      LeftIcon={IconArchive}
-                      onClick={handleDisable}
-                    />
-                  </DropdownMenuItemsContainer>
-                </DropdownMenu>
-              }
-              dropdownHotkeyScope={{
-                scope: dropdownScopeId,
-              }}
-            />
-          </DropdownScope>
+          <Dropdown
+            dropdownId={dropdownId}
+            clickableComponent={
+              <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+            }
+            dropdownComponents={
+              <DropdownMenu width="160px">
+                <DropdownMenuItemsContainer>
+                  <MenuItem
+                    text="Edit"
+                    LeftIcon={IconPencil}
+                    onClick={handleEdit}
+                  />
+                  <MenuItem
+                    text="Disable"
+                    LeftIcon={IconArchive}
+                    onClick={handleDisable}
+                  />
+                </DropdownMenuItemsContainer>
+              </DropdownMenu>
+            }
+            dropdownHotkeyScope={{
+              scope: dropdownId,
+            }}
+          />
         </StyledCardContent>
       </Card>
     </Section>
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx
index e739e882a..cdbfb0b6a 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx
@@ -9,7 +9,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsObjectFieldActiveActionDropdownProps = {
@@ -25,9 +24,9 @@ export const SettingsObjectFieldActiveActionDropdown = ({
   onEdit,
   scopeKey,
 }: SettingsObjectFieldActiveActionDropdownProps) => {
-  const dropdownScopeId = `${scopeKey}-settings-field-active-action-dropdown`;
+  const dropdownId = `${scopeKey}-settings-field-active-action-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const handleEdit = () => {
     onEdit();
@@ -40,33 +39,32 @@ export const SettingsObjectFieldActiveActionDropdown = ({
   };
 
   return (
-    <DropdownScope dropdownScopeId={dropdownScopeId}>
-      <Dropdown
-        clickableComponent={
-          <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
-        }
-        dropdownComponents={
-          <DropdownMenu width="160px">
-            <DropdownMenuItemsContainer>
+    <Dropdown
+      dropdownId={dropdownId}
+      clickableComponent={
+        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+      }
+      dropdownComponents={
+        <DropdownMenu width="160px">
+          <DropdownMenuItemsContainer>
+            <MenuItem
+              text={isCustomField ? 'Edit' : 'View'}
+              LeftIcon={isCustomField ? IconPencil : IconEye}
+              onClick={handleEdit}
+            />
+            {!!onDisable && (
               <MenuItem
-                text={isCustomField ? 'Edit' : 'View'}
-                LeftIcon={isCustomField ? IconPencil : IconEye}
-                onClick={handleEdit}
+                text="Disable"
+                LeftIcon={IconArchive}
+                onClick={handleDisable}
               />
-              {!!onDisable && (
-                <MenuItem
-                  text="Disable"
-                  LeftIcon={IconArchive}
-                  onClick={handleDisable}
-                />
-              )}
-            </DropdownMenuItemsContainer>
-          </DropdownMenu>
-        }
-        dropdownHotkeyScope={{
-          scope: dropdownScopeId,
-        }}
-      />
-    </DropdownScope>
+            )}
+          </DropdownMenuItemsContainer>
+        </DropdownMenu>
+      }
+      dropdownHotkeyScope={{
+        scope: dropdownId,
+      }}
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
index a80638e4b..101d5aac2 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
@@ -4,7 +4,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsObjectFieldDisabledActionDropdownProps = {
@@ -18,9 +17,9 @@ export const SettingsObjectFieldDisabledActionDropdown = ({
   onActivate,
   scopeKey,
 }: SettingsObjectFieldDisabledActionDropdownProps) => {
-  const dropdownScopeId = `${scopeKey}-settings-field-disabled-action-dropdown`;
+  const dropdownId = `${scopeKey}-settings-field-disabled-action-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const handleActivate = () => {
     onActivate();
@@ -33,20 +32,20 @@ export const SettingsObjectFieldDisabledActionDropdown = ({
   // };
 
   return (
-    <DropdownScope dropdownScopeId={dropdownScopeId}>
-      <Dropdown
-        clickableComponent={
-          <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
-        }
-        dropdownComponents={
-          <DropdownMenu width="160px">
-            <DropdownMenuItemsContainer>
-              <MenuItem
-                text="Activate"
-                LeftIcon={IconArchiveOff}
-                onClick={handleActivate}
-              />
-              {/* {isCustomField && (
+    <Dropdown
+      dropdownId={dropdownId}
+      clickableComponent={
+        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+      }
+      dropdownComponents={
+        <DropdownMenu width="160px">
+          <DropdownMenuItemsContainer>
+            <MenuItem
+              text="Activate"
+              LeftIcon={IconArchiveOff}
+              onClick={handleActivate}
+            />
+            {/* {isCustomField && (
                 <MenuItem
                   text="Erase"
                   accent="danger"
@@ -54,13 +53,12 @@ export const SettingsObjectFieldDisabledActionDropdown = ({
                   onClick={handleErase}
                 />
               )} */}
-            </DropdownMenuItemsContainer>
-          </DropdownMenu>
-        }
-        dropdownHotkeyScope={{
-          scope: dropdownScopeId,
-        }}
-      />
-    </DropdownScope>
+          </DropdownMenuItemsContainer>
+        </DropdownMenu>
+      }
+      dropdownHotkeyScope={{
+        scope: dropdownId,
+      }}
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx
index b2a5e4781..18bb9b5f2 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx
@@ -4,7 +4,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsObjectDisabledMenuDropDownProps = {
@@ -20,9 +19,9 @@ export const SettingsObjectDisabledMenuDropDown = ({
   onErase,
   isCustomObject,
 }: SettingsObjectDisabledMenuDropDownProps) => {
-  const dropdownScopeId = `${scopeKey}-settings-object-disabled-menu-dropdown`;
+  const dropdownId = `${scopeKey}-settings-object-disabled-menu-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const handleActivate = () => {
     onActivate();
@@ -35,34 +34,33 @@ export const SettingsObjectDisabledMenuDropDown = ({
   };
 
   return (
-    <DropdownScope dropdownScopeId={dropdownScopeId}>
-      <Dropdown
-        clickableComponent={
-          <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
-        }
-        dropdownComponents={
-          <DropdownMenu width="160px">
-            <DropdownMenuItemsContainer>
+    <Dropdown
+      dropdownId={dropdownId}
+      clickableComponent={
+        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+      }
+      dropdownComponents={
+        <DropdownMenu width="160px">
+          <DropdownMenuItemsContainer>
+            <MenuItem
+              text="Activate"
+              LeftIcon={IconArchiveOff}
+              onClick={handleActivate}
+            />
+            {isCustomObject && (
               <MenuItem
-                text="Activate"
-                LeftIcon={IconArchiveOff}
-                onClick={handleActivate}
+                text="Erase"
+                LeftIcon={IconTrash}
+                accent="danger"
+                onClick={handleErase}
               />
-              {isCustomObject && (
-                <MenuItem
-                  text="Erase"
-                  LeftIcon={IconTrash}
-                  accent="danger"
-                  onClick={handleErase}
-                />
-              )}
-            </DropdownMenuItemsContainer>
-          </DropdownMenu>
-        }
-        dropdownHotkeyScope={{
-          scope: dropdownScopeId,
-        }}
-      />
-    </DropdownScope>
+            )}
+          </DropdownMenuItemsContainer>
+        </DropdownMenu>
+      }
+      dropdownHotkeyScope={{
+        scope: dropdownId,
+      }}
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
index 97182ec1c..bd6d27866 100644
--- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
@@ -11,7 +11,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
@@ -23,7 +22,7 @@ import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
 
 type IconPickerProps = {
   disabled?: boolean;
-  dropdownScopeId?: string;
+  dropdownId?: string;
   onChange: (params: { iconKey: string; Icon: IconComponent }) => void;
   selectedIconKey?: string;
   onClickOutside?: () => void;
@@ -80,7 +79,7 @@ const IconPickerIcon = ({
 
 export const IconPicker = ({
   disabled,
-  dropdownScopeId = 'icon-picker',
+  dropdownId = 'icon-picker',
   onChange,
   selectedIconKey,
   onClickOutside,
@@ -95,7 +94,7 @@ export const IconPicker = ({
     setHotkeyScopeAndMemorizePreviousScope,
   } = usePreviousHotkeyScope();
 
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const { getIcons, getIcon } = useIcons();
   const icons = getIcons();
@@ -126,71 +125,70 @@ export const IconPicker = ({
   );
 
   return (
-    <DropdownScope dropdownScopeId={dropdownScopeId}>
-      <div className={className}>
-        <Dropdown
-          dropdownHotkeyScope={{ scope: IconPickerHotkeyScope.IconPicker }}
-          clickableComponent={
-            <IconButton
-              disabled={disabled}
-              Icon={selectedIconKey ? getIcon(selectedIconKey) : IconApps}
-              variant={variant}
-            />
-          }
-          dropdownMenuWidth={176}
-          dropdownComponents={
-            <SelectableList
-              selectableListId="icon-list"
-              selectableItemIdMatrix={iconKeys2d}
-              hotkeyScope={IconPickerHotkeyScope.IconPicker}
-              onEnter={(iconKey) => {
-                onChange({ iconKey, Icon: getIcon(iconKey) });
-                closeDropdown();
-              }}
-            >
-              <DropdownMenu width={176}>
-                <DropdownMenuSearchInput
-                  placeholder="Search icon"
-                  autoFocus
-                  onChange={(event) => setSearchString(event.target.value)}
-                />
-                <DropdownMenuSeparator />
-                <div
-                  onMouseEnter={() => {
-                    setHotkeyScopeAndMemorizePreviousScope(
-                      IconPickerHotkeyScope.IconPicker,
-                    );
-                  }}
-                  onMouseLeave={goBackToPreviousHotkeyScope}
-                >
-                  <DropdownMenuItemsContainer>
-                    <StyledMenuIconItemsContainer>
-                      {iconKeys.map((iconKey) => (
-                        <IconPickerIcon
-                          key={iconKey}
-                          iconKey={iconKey}
-                          onClick={() => {
-                            onChange({ iconKey, Icon: getIcon(iconKey) });
-                            closeDropdown();
-                          }}
-                          selectedIconKey={selectedIconKey}
-                          Icon={getIcon(iconKey)}
-                        />
-                      ))}
-                    </StyledMenuIconItemsContainer>
-                  </DropdownMenuItemsContainer>
-                </div>
-              </DropdownMenu>
-            </SelectableList>
-          }
-          onClickOutside={onClickOutside}
-          onClose={() => {
-            onClose?.();
-            setSearchString('');
-          }}
-          onOpen={onOpen}
-        />
-      </div>
-    </DropdownScope>
+    <div className={className}>
+      <Dropdown
+        dropdownId={dropdownId}
+        dropdownHotkeyScope={{ scope: IconPickerHotkeyScope.IconPicker }}
+        clickableComponent={
+          <IconButton
+            disabled={disabled}
+            Icon={selectedIconKey ? getIcon(selectedIconKey) : IconApps}
+            variant={variant}
+          />
+        }
+        dropdownMenuWidth={176}
+        dropdownComponents={
+          <SelectableList
+            selectableListId="icon-list"
+            selectableItemIdMatrix={iconKeys2d}
+            hotkeyScope={IconPickerHotkeyScope.IconPicker}
+            onEnter={(iconKey) => {
+              onChange({ iconKey, Icon: getIcon(iconKey) });
+              closeDropdown();
+            }}
+          >
+            <DropdownMenu width={176}>
+              <DropdownMenuSearchInput
+                placeholder="Search icon"
+                autoFocus
+                onChange={(event) => setSearchString(event.target.value)}
+              />
+              <DropdownMenuSeparator />
+              <div
+                onMouseEnter={() => {
+                  setHotkeyScopeAndMemorizePreviousScope(
+                    IconPickerHotkeyScope.IconPicker,
+                  );
+                }}
+                onMouseLeave={goBackToPreviousHotkeyScope}
+              >
+                <DropdownMenuItemsContainer>
+                  <StyledMenuIconItemsContainer>
+                    {iconKeys.map((iconKey) => (
+                      <IconPickerIcon
+                        key={iconKey}
+                        iconKey={iconKey}
+                        onClick={() => {
+                          onChange({ iconKey, Icon: getIcon(iconKey) });
+                          closeDropdown();
+                        }}
+                        selectedIconKey={selectedIconKey}
+                        Icon={getIcon(iconKey)}
+                      />
+                    ))}
+                  </StyledMenuIconItemsContainer>
+                </DropdownMenuItemsContainer>
+              </div>
+            </DropdownMenu>
+          </SelectableList>
+        }
+        onClickOutside={onClickOutside}
+        onClose={() => {
+          onClose?.();
+          setSearchString('');
+        }}
+        onOpen={onOpen}
+      />
+    </div>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
index 56fca8ed9..c58404085 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
@@ -6,7 +6,6 @@ import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
@@ -98,31 +97,30 @@ export const Select = <Value extends string | number | null>({
       {selectControl}
     </div>
   ) : (
-    <DropdownScope dropdownScopeId={dropdownScopeId}>
-      <div className={className}>
-        {!!label && <StyledLabel>{label}</StyledLabel>}
-        <Dropdown
-          dropdownMenuWidth={176}
-          dropdownPlacement="bottom-start"
-          clickableComponent={selectControl}
-          dropdownComponents={
-            <DropdownMenuItemsContainer>
-              {options.map((option) => (
-                <MenuItem
-                  key={option.value}
-                  LeftIcon={option.Icon}
-                  text={option.label}
-                  onClick={() => {
-                    onChange?.(option.value);
-                    closeDropdown();
-                  }}
-                />
-              ))}
-            </DropdownMenuItemsContainer>
-          }
-          dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
-        />
-      </div>
-    </DropdownScope>
+    <div className={className}>
+      {!!label && <StyledLabel>{label}</StyledLabel>}
+      <Dropdown
+        dropdownId="select"
+        dropdownMenuWidth={176}
+        dropdownPlacement="bottom-start"
+        clickableComponent={selectControl}
+        dropdownComponents={
+          <DropdownMenuItemsContainer>
+            {options.map((option) => (
+              <MenuItem
+                key={option.value}
+                LeftIcon={option.Icon}
+                text={option.label}
+                onClick={() => {
+                  onChange?.(option.value);
+                  closeDropdown();
+                }}
+              />
+            ))}
+          </DropdownMenuItemsContainer>
+        }
+        dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
+      />
+    </div>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
index 74eec4252..8f5aa8119 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
@@ -9,7 +9,6 @@ import { CountryCallingCode } from 'libphonenumber-js';
 import { IconChevronDown, IconWorld } from '@/ui/display/icon';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 
 import { CountryPickerHotkeyScope } from '../types/CountryPickerHotkeyScope';
 
@@ -119,27 +118,26 @@ export const CountryPickerDropdownButton = ({
   }, [countries, value]);
 
   return (
-    <DropdownScope dropdownScopeId="country-picker">
-      <Dropdown
-        dropdownHotkeyScope={{ scope: CountryPickerHotkeyScope.CountryPicker }}
-        clickableComponent={
-          <StyledDropdownButtonContainer isUnfolded={isDropdownOpen}>
-            <StyledIconContainer>
-              {selectedCountry ? <selectedCountry.Flag /> : <IconWorld />}
-              <IconChevronDown size={theme.icon.size.sm} />
-            </StyledIconContainer>
-          </StyledDropdownButtonContainer>
-        }
-        dropdownComponents={
-          <CountryPickerDropdownSelect
-            countries={countries}
-            selectedCountry={selectedCountry}
-            onChange={handleChange}
-          />
-        }
-        dropdownPlacement="bottom-start"
-        dropdownOffset={{ x: 0, y: 4 }}
-      />
-    </DropdownScope>
+    <Dropdown
+      dropdownId="country-picker-dropdown-id"
+      dropdownHotkeyScope={{ scope: CountryPickerHotkeyScope.CountryPicker }}
+      clickableComponent={
+        <StyledDropdownButtonContainer isUnfolded={isDropdownOpen}>
+          <StyledIconContainer>
+            {selectedCountry ? <selectedCountry.Flag /> : <IconWorld />}
+            <IconChevronDown size={theme.icon.size.sm} />
+          </StyledIconContainer>
+        </StyledDropdownButtonContainer>
+      }
+      dropdownComponents={
+        <CountryPickerDropdownSelect
+          countries={countries}
+          selectedCountry={selectedCountry}
+          onChange={handleChange}
+        />
+      }
+      dropdownPlacement="bottom-start"
+      dropdownOffset={{ x: 0, y: 4 }}
+    />
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
index 2f9866221..57f1bc0b4 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
@@ -9,6 +9,7 @@ import {
 } from '@floating-ui/react';
 import { Key } from 'ts-key-enum';
 
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -29,6 +30,7 @@ type DropdownProps = {
     scope: string;
   };
   dropdownHotkeyScope: HotkeyScope;
+  dropdownId: string;
   dropdownPlacement?: Placement;
   dropdownMenuWidth?: number;
   dropdownOffset?: { x?: number; y?: number };
@@ -43,6 +45,7 @@ export const Dropdown = ({
   dropdownComponents,
   dropdownMenuWidth,
   hotkey,
+  dropdownId,
   dropdownHotkeyScope,
   dropdownPlacement = 'bottom-end',
   dropdownOffset = { x: 0, y: 0 },
@@ -53,8 +56,7 @@ export const Dropdown = ({
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { isDropdownOpen, toggleDropdown, closeDropdown, dropdownWidth } =
-    useDropdown();
-
+    useDropdown(dropdownId);
   const offsetMiddlewares = [];
 
   if (dropdownOffset.x) {
@@ -87,6 +89,7 @@ export const Dropdown = ({
   });
 
   useInternalHotkeyScopeManagement({
+    dropdownScopeId: `${dropdownId}-scope`,
     dropdownHotkeyScopeFromParent: dropdownHotkeyScope,
   });
 
@@ -100,36 +103,38 @@ export const Dropdown = ({
   );
 
   return (
-    <div ref={containerRef} className={className}>
-      {clickableComponent && (
-        <div
-          ref={refs.setReference}
-          onClick={toggleDropdown}
-          className={className}
-        >
-          {clickableComponent}
-        </div>
-      )}
-      {hotkey && (
-        <HotkeyEffect
-          hotkey={hotkey}
-          onHotkeyTriggered={handleHotkeyTriggered}
+    <DropdownScope dropdownScopeId={`${dropdownId}-scope`}>
+      <div ref={containerRef} className={className}>
+        {clickableComponent && (
+          <div
+            ref={refs.setReference}
+            onClick={toggleDropdown}
+            className={className}
+          >
+            {clickableComponent}
+          </div>
+        )}
+        {hotkey && (
+          <HotkeyEffect
+            hotkey={hotkey}
+            onHotkeyTriggered={handleHotkeyTriggered}
+          />
+        )}
+        {isDropdownOpen && (
+          <DropdownMenu
+            width={dropdownMenuWidth ?? dropdownWidth}
+            data-select-disable
+            ref={refs.setFloating}
+            style={floatingStyles}
+          >
+            {dropdownComponents}
+          </DropdownMenu>
+        )}
+        <DropdownOnToggleEffect
+          onDropdownClose={onClose}
+          onDropdownOpen={onOpen}
         />
-      )}
-      {isDropdownOpen && (
-        <DropdownMenu
-          width={dropdownMenuWidth ?? dropdownWidth}
-          data-select-disable
-          ref={refs.setFloating}
-          style={floatingStyles}
-        >
-          {dropdownComponents}
-        </DropdownMenu>
-      )}
-      <DropdownOnToggleEffect
-        onDropdownClose={onClose}
-        onDropdownOpen={onOpen}
-      />
-    </div>
+      </div>
+    </DropdownScope>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
index ae11a6cff..0e2a412a6 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
@@ -12,7 +12,6 @@ import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuI
 import { Avatar } from '@/users/components/Avatar';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
-import { DropdownScope } from '../../scopes/DropdownScope';
 import { Dropdown } from '../Dropdown';
 import { DropdownMenuHeader } from '../DropdownMenuHeader';
 import { DropdownMenuInput } from '../DropdownMenuInput';
@@ -25,18 +24,12 @@ const meta: Meta<typeof Dropdown> = {
   title: 'UI/Layout/Dropdown/Dropdown',
   component: Dropdown,
 
-  decorators: [
-    ComponentDecorator,
-    (Story) => (
-      <DropdownScope dropdownScopeId="testDropdownMenu">
-        <Story />
-      </DropdownScope>
-    ),
-  ],
+  decorators: [ComponentDecorator, (Story) => <Story />],
   args: {
     clickableComponent: <Button title="Open Dropdown" />,
     dropdownHotkeyScope: { scope: 'testDropdownMenu' },
     dropdownOffset: { x: 0, y: 8 },
+    dropdownId: 'test-dropdown-id',
   },
   argTypes: {
     clickableComponent: { control: false },
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownScopedStates.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownScopedStates.ts
deleted file mode 100644
index 01e2798c8..000000000
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownScopedStates.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { useScopedState } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState';
-
-type UseDropdownScopedStatesProps = {
-  dropdownScopeId?: string;
-};
-
-export const useDropdownScopedStates = ({
-  dropdownScopeId,
-}: UseDropdownScopedStatesProps) => {
-  const scopeId = useAvailableScopeIdOrThrow(
-    DropdownScopeInternalContext,
-    dropdownScopeId,
-  );
-
-  const {
-    getScopedState,
-    getScopedFamilyState,
-    getScopedSnapshotValue,
-    getScopedFamilySnapshotValue,
-  } = useScopedState(scopeId);
-
-  return {
-    scopeId,
-    injectStateWithDropdownScopeId: getScopedState,
-    injectFamilyStateWithDropdownScopeId: getScopedFamilyState,
-    injectSnapshotValueWithDropdownScopeId: getScopedSnapshotValue,
-    injectFamilySnapshotValueWithDropdownScopeId: getScopedFamilySnapshotValue,
-  };
-};
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts
new file mode 100644
index 000000000..b0f35ce58
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts
@@ -0,0 +1,26 @@
+import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext';
+import { dropdownHotkeyStateScopeMap } from '@/ui/layout/dropdown/states/dropdownHotkeyStateScopeMap';
+import { dropdownWidthStateScopeMap } from '@/ui/layout/dropdown/states/dropdownWidthStateScopeMap';
+import { isDropdownOpenStateScopeMap } from '@/ui/layout/dropdown/states/isDropdownOpenStateScopeMap';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { getState } from '@/ui/utilities/recoil-scope/utils/getState';
+
+type UseDropdownStatesProps = {
+  dropdownScopeId?: string;
+};
+
+export const useDropdownStates = ({
+  dropdownScopeId,
+}: UseDropdownStatesProps) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    DropdownScopeInternalContext,
+    dropdownScopeId,
+  );
+
+  return {
+    scopeId,
+    dropdownHotkeyScopeState: getState(dropdownHotkeyStateScopeMap, scopeId),
+    dropdownWidthState: getState(dropdownWidthStateScopeMap, scopeId),
+    isDropdownOpenState: getState(isDropdownOpenStateScopeMap, scopeId),
+  };
+};
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
index e77afedf9..5616774c3 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
@@ -1,36 +1,29 @@
 import { useRecoilState } from 'recoil';
 
-import { useDropdownScopedStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownScopedStates';
-import { getDropdownScopeInjectors } from '@/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors';
+import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 
 export const useDropdown = (dropdownId?: string) => {
-  const { injectStateWithDropdownScopeId, scopeId } = useDropdownScopedStates({
-    dropdownScopeId: dropdownId,
-  });
-
   const {
-    dropdownHotkeyScopeScopeInjector,
-    dropdownWidthScopeInjector,
-    isDropdownOpenScopeInjector,
-  } = getDropdownScopeInjectors();
+    scopeId,
+    dropdownHotkeyScopeState,
+    dropdownWidthState,
+    isDropdownOpenState,
+  } = useDropdownStates({
+    dropdownScopeId: `${dropdownId}-scope`,
+  });
 
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
   } = usePreviousHotkeyScope();
 
-  const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilState(
-    injectStateWithDropdownScopeId(dropdownHotkeyScopeScopeInjector),
-  );
+  const [dropdownHotkeyScope] = useRecoilState(dropdownHotkeyScopeState);
 
-  const [dropdownWidth, setDropdownWidth] = useRecoilState(
-    injectStateWithDropdownScopeId(dropdownWidthScopeInjector),
-  );
+  const [dropdownWidth, setDropdownWidth] = useRecoilState(dropdownWidthState);
 
-  const [isDropdownOpen, setIsDropdownOpen] = useRecoilState(
-    injectStateWithDropdownScopeId(isDropdownOpenScopeInjector),
-  );
+  const [isDropdownOpen, setIsDropdownOpen] =
+    useRecoilState(isDropdownOpenState);
 
   const closeDropdown = () => {
     goBackToPreviousHotkeyScope();
@@ -61,8 +54,6 @@ export const useDropdown = (dropdownId?: string) => {
     closeDropdown,
     toggleDropdown,
     openDropdown,
-    dropdownHotkeyScope,
-    setDropdownHotkeyScope,
     dropdownWidth,
     setDropdownWidth,
   };
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement.ts
index b63587ded..9ea9db797 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement.ts
@@ -1,16 +1,22 @@
 import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
 
+import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
-import { useDropdown } from './useDropdown';
-
 export const useInternalHotkeyScopeManagement = ({
+  dropdownScopeId,
   dropdownHotkeyScopeFromParent,
 }: {
+  dropdownScopeId: string;
   dropdownHotkeyScopeFromParent?: HotkeyScope;
 }) => {
-  const { dropdownHotkeyScope, setDropdownHotkeyScope } = useDropdown();
+  const { dropdownHotkeyScopeState } = useDropdownStates({ dropdownScopeId });
+
+  const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilState(
+    dropdownHotkeyScopeState,
+  );
 
   useEffect(() => {
     if (!isDeeplyEqual(dropdownHotkeyScopeFromParent, dropdownHotkeyScope)) {
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyScopeScopedState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyStateScopeMap.ts
similarity index 67%
rename from packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyScopeScopedState.ts
rename to packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyStateScopeMap.ts
index d47015633..60951e8f5 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyScopeScopedState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyStateScopeMap.ts
@@ -1,9 +1,9 @@
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const dropdownHotkeyScopeScopedState = createStateScopeMap<
+export const dropdownHotkeyStateScopeMap = createStateScopeMap<
   HotkeyScope | null | undefined
 >({
-  key: 'dropdownHotkeyScopeScopedState',
+  key: 'dropdownHotkeyStateScopeMap',
   defaultValue: null,
 });
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthScopedState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthScopedState.ts
deleted file mode 100644
index 717a3a1cd..000000000
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthScopedState.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export const dropdownWidthScopedState = createStateScopeMap<number | undefined>(
-  {
-    key: 'dropdownWidthScopedState',
-    defaultValue: 160,
-  },
-);
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthStateScopeMap.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthStateScopeMap.ts
new file mode 100644
index 000000000..9a39a52fd
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthStateScopeMap.ts
@@ -0,0 +1,8 @@
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+
+export const dropdownWidthStateScopeMap = createStateScopeMap<
+  number | undefined
+>({
+  key: 'dropdownWidthStateScopeMap',
+  defaultValue: 160,
+});
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenScopedState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenStateScopeMap.ts
similarity index 51%
rename from packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenScopedState.ts
rename to packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenStateScopeMap.ts
index 65d0c073c..124ae55be 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenScopedState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenStateScopeMap.ts
@@ -1,6 +1,6 @@
 import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const isDropdownOpenScopedState = createStateScopeMap<boolean>({
-  key: 'isDropdownOpenScopedState',
+export const isDropdownOpenStateScopeMap = createStateScopeMap<boolean>({
+  key: 'isDropdownOpenStateScopeMap',
   defaultValue: false,
 });
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors.ts
deleted file mode 100644
index 032fe74fd..000000000
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { dropdownHotkeyScopeScopedState } from '@/ui/layout/dropdown/states/dropdownHotkeyScopeScopedState';
-import { dropdownWidthScopedState } from '@/ui/layout/dropdown/states/dropdownWidthScopedState';
-import { isDropdownOpenScopedState } from '@/ui/layout/dropdown/states/isDropdownOpenScopedState';
-import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
-
-export const getDropdownScopeInjectors = () => {
-  const dropdownHotkeyScopeScopeInjector = getScopeInjector(
-    dropdownHotkeyScopeScopedState,
-  );
-
-  const dropdownWidthScopeInjector = getScopeInjector(dropdownWidthScopedState);
-
-  const isDropdownOpenScopeInjector = getScopeInjector(
-    isDropdownOpenScopedState,
-  );
-
-  return {
-    dropdownHotkeyScopeScopeInjector,
-    dropdownWidthScopeInjector,
-    isDropdownOpenScopeInjector,
-  };
-};
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
index d6bb05d8b..3355f6f0f 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
@@ -12,7 +12,6 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 import { Dropdown } from '../../dropdown/components/Dropdown';
 import { DropdownMenu } from '../../dropdown/components/DropdownMenu';
-import { DropdownScope } from '../../dropdown/scopes/DropdownScope';
 
 const StyledContainer = styled.div`
   z-index: 1;
@@ -33,41 +32,40 @@ export const ShowPageAddButton = ({
 
   return (
     <StyledContainer>
-      <DropdownScope dropdownScopeId="add-show-page">
-        <Dropdown
-          clickableComponent={
-            <IconButton
-              Icon={IconPlus}
-              size="medium"
-              dataTestId="add-showpage-button"
-              accent="default"
-              variant="secondary"
-              onClick={toggleDropdown}
-            />
-          }
-          dropdownComponents={
-            <DropdownMenu>
-              <DropdownMenuItemsContainer>
-                <MenuItem
-                  onClick={() => handleSelect('Note')}
-                  accent="default"
-                  LeftIcon={IconNotes}
-                  text="Note"
-                />
-                <MenuItem
-                  onClick={() => handleSelect('Task')}
-                  accent="default"
-                  LeftIcon={IconCheckbox}
-                  text="Task"
-                />
-              </DropdownMenuItemsContainer>
-            </DropdownMenu>
-          }
-          dropdownHotkeyScope={{
-            scope: PageHotkeyScope.ShowPage,
-          }}
-        />
-      </DropdownScope>
+      <Dropdown
+        dropdownId="show-page-add-button-dropdown-id"
+        clickableComponent={
+          <IconButton
+            Icon={IconPlus}
+            size="medium"
+            dataTestId="add-showpage-button"
+            accent="default"
+            variant="secondary"
+            onClick={toggleDropdown}
+          />
+        }
+        dropdownComponents={
+          <DropdownMenu>
+            <DropdownMenuItemsContainer>
+              <MenuItem
+                onClick={() => handleSelect('Note')}
+                accent="default"
+                LeftIcon={IconNotes}
+                text="Note"
+              />
+              <MenuItem
+                onClick={() => handleSelect('Task')}
+                accent="default"
+                LeftIcon={IconCheckbox}
+                text="Task"
+              />
+            </DropdownMenuItemsContainer>
+          </DropdownMenu>
+        }
+        dropdownHotkeyScope={{
+          scope: PageHotkeyScope.ShowPage,
+        }}
+      />
     </StyledContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
index f7b0cb9b4..fee1454b6 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
@@ -13,7 +13,6 @@ import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMe
 
 import { Dropdown } from '../../dropdown/components/Dropdown';
 import { DropdownMenu } from '../../dropdown/components/DropdownMenu';
-import { DropdownScope } from '../../dropdown/scopes/DropdownScope';
 
 const StyledContainer = styled.div`
   z-index: 1;
@@ -42,35 +41,34 @@ export const ShowPageMoreButton = ({
 
   return (
     <StyledContainer>
-      <DropdownScope dropdownScopeId="more-show-page">
-        <Dropdown
-          clickableComponent={
-            <IconButton
-              Icon={IconDotsVertical}
-              size="medium"
-              dataTestId="more-showpage-button"
-              accent="default"
-              variant="secondary"
-              onClick={toggleDropdown}
-            />
-          }
-          dropdownComponents={
-            <DropdownMenu>
-              <DropdownMenuItemsContainer>
-                <MenuItem
-                  onClick={handleDelete}
-                  accent="danger"
-                  LeftIcon={IconTrash}
-                  text="Delete"
-                />
-              </DropdownMenuItemsContainer>
-            </DropdownMenu>
-          }
-          dropdownHotkeyScope={{
-            scope: PageHotkeyScope.ShowPage,
-          }}
-        />
-      </DropdownScope>
+      <Dropdown
+        dropdownId="more-show-page"
+        clickableComponent={
+          <IconButton
+            Icon={IconDotsVertical}
+            size="medium"
+            dataTestId="more-showpage-button"
+            accent="default"
+            variant="secondary"
+            onClick={toggleDropdown}
+          />
+        }
+        dropdownComponents={
+          <DropdownMenu>
+            <DropdownMenuItemsContainer>
+              <MenuItem
+                onClick={handleDelete}
+                accent="danger"
+                LeftIcon={IconTrash}
+                text="Delete"
+              />
+            </DropdownMenuItemsContainer>
+          </DropdownMenu>
+        }
+        dropdownHotkeyScope={{
+          scope: PageHotkeyScope.ShowPage,
+        }}
+      />
     </StyledContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
index ab2d74c90..55537c473 100644
--- a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
@@ -68,6 +68,7 @@ export const EditableFilterDropdownButton = ({
 
   return (
     <Dropdown
+      dropdownId={viewFilter.fieldMetadataId}
       clickableComponent={
         <EditableFilterChip viewFilter={viewFilter} onRemove={handleRemove} />
       }
diff --git a/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx b/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx
index 6091251b5..58876d225 100644
--- a/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx
+++ b/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx
@@ -7,7 +7,6 @@ import { Button } from '@/ui/input/button/components/Button';
 import { ButtonGroup } from '@/ui/input/button/components/ButtonGroup';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { UpdateViewDropdownId } from '@/views/constants/UpdateViewDropdownId';
@@ -58,25 +57,24 @@ export const UpdateViewButtonGroup = ({
     <StyledContainer>
       <ButtonGroup size="small" accent="blue">
         <Button title="Update view" onClick={handleViewSubmit} />
-        <DropdownScope dropdownScopeId={UpdateViewDropdownId}>
-          <Dropdown
-            dropdownHotkeyScope={hotkeyScope}
-            clickableComponent={
-              <Button size="small" accent="blue" Icon={IconChevronDown} />
-            }
-            dropdownComponents={
-              <>
-                <DropdownMenuItemsContainer>
-                  <MenuItem
-                    onClick={handleCreateViewButtonClick}
-                    LeftIcon={IconPlus}
-                    text="Create view"
-                  />
-                </DropdownMenuItemsContainer>
-              </>
-            }
-          />
-        </DropdownScope>
+        <Dropdown
+          dropdownId={UpdateViewDropdownId}
+          dropdownHotkeyScope={hotkeyScope}
+          clickableComponent={
+            <Button size="small" accent="blue" Icon={IconChevronDown} />
+          }
+          dropdownComponents={
+            <>
+              <DropdownMenuItemsContainer>
+                <MenuItem
+                  onClick={handleCreateViewButtonClick}
+                  LeftIcon={IconPlus}
+                  text="Create view"
+                />
+              </DropdownMenuItemsContainer>
+            </>
+          }
+        />
       </ButtonGroup>
     </StyledContainer>
   );
diff --git a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
index 85b5d985e..5178580a1 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
@@ -5,7 +5,6 @@ import { useRecoilValue } from 'recoil';
 import { AddObjectFilterFromDetailsButton } from '@/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton';
 import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { EditableFilterDropdownButton } from '@/views/components/EditableFilterDropdownButton';
 import { EditableSortChip } from '@/views/components/EditableSortChip';
 import { ViewBarFilterEffect } from '@/views/components/ViewBarFilterEffect';
@@ -146,19 +145,17 @@ export const ViewBarDetails = ({
               <ObjectFilterDropdownScope
                 filterScopeId={viewFilter.fieldMetadataId}
               >
-                <DropdownScope dropdownScopeId={viewFilter.fieldMetadataId}>
-                  <ViewBarFilterEffect
-                    filterDropdownId={viewFilter.fieldMetadataId}
-                    onFilterSelect={upsertViewFilter}
-                  />
-                  <EditableFilterDropdownButton
-                    viewFilter={viewFilter}
-                    hotkeyScope={{
-                      scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
-                    }}
-                    viewFilterDropdownId={viewFilter.fieldMetadataId}
-                  />
-                </DropdownScope>
+                <ViewBarFilterEffect
+                  filterDropdownId={viewFilter.fieldMetadataId}
+                  onFilterSelect={upsertViewFilter}
+                />
+                <EditableFilterDropdownButton
+                  viewFilter={viewFilter}
+                  hotkeyScope={{
+                    scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
+                  }}
+                  viewFilterDropdownId={viewFilter.fieldMetadataId}
+                />
               </ObjectFilterDropdownScope>
             );
           })}
diff --git a/packages/twenty-front/src/modules/views/components/ViewsDropdownButton.tsx b/packages/twenty-front/src/modules/views/components/ViewsDropdownButton.tsx
index 2b3118b9a..69ed55f00 100644
--- a/packages/twenty-front/src/modules/views/components/ViewsDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewsDropdownButton.tsx
@@ -15,7 +15,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -130,56 +129,55 @@ export const ViewsDropdownButton = ({
   };
 
   return (
-    <DropdownScope dropdownScopeId={ViewsDropdownId}>
-      <Dropdown
-        dropdownHotkeyScope={hotkeyScope}
-        clickableComponent={
-          <StyledDropdownButtonContainer isUnfolded={isViewsDropdownOpen}>
-            <StyledViewIcon size={theme.icon.size.md} />
-            <StyledViewName>{currentView?.name ?? 'All'}</StyledViewName>
-            <StyledDropdownLabelAdornments>
-              · {entityCountInCurrentView}{' '}
-              <IconChevronDown size={theme.icon.size.sm} />
-            </StyledDropdownLabelAdornments>
-          </StyledDropdownButtonContainer>
-        }
-        dropdownComponents={
-          <>
-            <DropdownMenuItemsContainer>
-              {views.map((view) => (
-                <MenuItem
-                  key={view.id}
-                  iconButtons={[
-                    {
-                      Icon: IconPencil,
-                      onClick: (event: MouseEvent<HTMLButtonElement>) =>
-                        handleEditViewButtonClick(event, view.id),
-                    },
-                    views.length > 1
-                      ? {
-                          Icon: IconTrash,
-                          onClick: (event: MouseEvent<HTMLButtonElement>) =>
-                            handleDeleteViewButtonClick(event, view.id),
-                        }
-                      : null,
-                  ].filter(assertNotNull)}
-                  onClick={() => handleViewSelect(view.id)}
-                  LeftIcon={IconList}
-                  text={view.name}
-                />
-              ))}
-            </DropdownMenuItemsContainer>
-            <DropdownMenuSeparator />
-            <StyledBoldDropdownMenuItemsContainer>
+    <Dropdown
+      dropdownId={ViewsDropdownId}
+      dropdownHotkeyScope={hotkeyScope}
+      clickableComponent={
+        <StyledDropdownButtonContainer isUnfolded={isViewsDropdownOpen}>
+          <StyledViewIcon size={theme.icon.size.md} />
+          <StyledViewName>{currentView?.name ?? 'All'}</StyledViewName>
+          <StyledDropdownLabelAdornments>
+            · {entityCountInCurrentView}{' '}
+            <IconChevronDown size={theme.icon.size.sm} />
+          </StyledDropdownLabelAdornments>
+        </StyledDropdownButtonContainer>
+      }
+      dropdownComponents={
+        <>
+          <DropdownMenuItemsContainer>
+            {views.map((view) => (
               <MenuItem
-                onClick={handleAddViewButtonClick}
-                LeftIcon={IconPlus}
-                text="Add view"
+                key={view.id}
+                iconButtons={[
+                  {
+                    Icon: IconPencil,
+                    onClick: (event: MouseEvent<HTMLButtonElement>) =>
+                      handleEditViewButtonClick(event, view.id),
+                  },
+                  views.length > 1
+                    ? {
+                        Icon: IconTrash,
+                        onClick: (event: MouseEvent<HTMLButtonElement>) =>
+                          handleDeleteViewButtonClick(event, view.id),
+                      }
+                    : null,
+                ].filter(assertNotNull)}
+                onClick={() => handleViewSelect(view.id)}
+                LeftIcon={IconList}
+                text={view.name}
               />
-            </StyledBoldDropdownMenuItemsContainer>
-          </>
-        }
-      />
-    </DropdownScope>
+            ))}
+          </DropdownMenuItemsContainer>
+          <DropdownMenuSeparator />
+          <StyledBoldDropdownMenuItemsContainer>
+            <MenuItem
+              onClick={handleAddViewButtonClick}
+              LeftIcon={IconPlus}
+              text="Add view"
+            />
+          </StyledBoldDropdownMenuItemsContainer>
+        </>
+      }
+    />
   );
 };