diff --git a/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx b/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx
index b3de9f479..05966c35c 100644
--- a/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx
+++ b/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx
@@ -21,6 +21,7 @@ import { PageHeader } from '@/ui/layout/page/PageHeader';
import { ShowPageContainer } from '@/ui/layout/page/ShowPageContainer';
import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
+import { ShowPageMoreButton } from '@/ui/layout/show-page/components/ShowPageMoreButton';
import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer';
import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard';
import { ShowPageRecoilScopeContext } from '@/ui/layout/states/ShowPageRecoilScopeContext';
@@ -208,6 +209,11 @@ export const RecordShowPage = () => {
type: objectMetadataType,
}}
/>
+
>
)}
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
new file mode 100644
index 000000000..02f7cc3ef
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
@@ -0,0 +1,78 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
+import { PageHotkeyScope } from '@/types/PageHotkeyScope';
+import { IconDotsVertical, IconTrash } from '@/ui/display/icon/index';
+import { IconButton } from '@/ui/input/button/components/IconButton';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
+
+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;
+`;
+
+export const ShowPageMoreButton = ({
+ recordId,
+ objectNameSingular,
+}: {
+ recordId: string;
+ objectNameSingular: string;
+}) => {
+ const { closeDropdown, toggleDropdown } = useDropdown({
+ dropdownScopeId: 'more-show-page',
+ });
+ const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
+ const navigate = useNavigate();
+
+ const { deleteOneRecord: deleteOneRecord } = useDeleteOneRecord({
+ objectNameSingular,
+ });
+
+ const handleDelete = () => {
+ deleteOneRecord(recordId);
+ closeDropdown();
+ navigate(navigationMemorizedUrl, { replace: true });
+ };
+
+ return (
+
+
+
+ }
+ dropdownComponents={
+
+
+
+
+
+ }
+ dropdownHotkeyScope={{
+ scope: PageHotkeyScope.ShowPage,
+ }}
+ />
+
+
+ );
+};